From 93d9a984970f2ca813bda09fb377a7abbb8b5cde Mon Sep 17 00:00:00 2001 From: Simon Cossar Date: Tue, 21 Jul 2015 18:46:15 -0700 Subject: [PATCH] Remove unnecessary margins from mobile view --- app/assets/stylesheets/mobile/discourse.scss | 10 +++++++++- app/assets/stylesheets/mobile/header.scss | 1 + app/assets/stylesheets/mobile/topic-list.scss | 6 +++--- app/assets/stylesheets/mobile/topic-post.scss | 9 +++++---- app/assets/stylesheets/mobile/topic.scss | 4 ++-- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index 30ebb6a6ee8..f4a32585b6b 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -6,12 +6,20 @@ body { background-color: $secondary; } +// This sets the space between the application content and the edge of the +// screen. This value is required in 'mobile/header.scss' to set the position +// of the drop-down menu. +$mobile-wrapper-padding: 10px; +.wrap { + padding: 0 $mobile-wrapper-padding; +} + body { .boxed { height: 100%; .contents { - padding: 10px; + padding: 10px 0; } &.white { background-color: $secondary; diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss index ad2cfcb96b1..4b15cdccf1f 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/app/assets/stylesheets/mobile/header.scss @@ -43,6 +43,7 @@ .d-dropdown { width: 290px; margin-top: -1px; + right: -$mobile-wrapper-padding; // Line-up with edge of screen, not edge of padding // Common diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 4a4ab4423a9..5f71cddcad2 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -9,7 +9,7 @@ .category-breadcrumb.hidden { display: none; } - margin: 5px; + margin: 5px 0; .nav { float: left; margin-right: 15px; @@ -71,7 +71,7 @@ th, td { - padding: 7px 5px; + padding: 7px 0; color: scale-color($primary, $lightness: 50%); } @@ -223,7 +223,7 @@ tr.category-topic-link { .topic-list-bottom { - margin: 20px 12px 0 12px; + margin: 20px 0 0 0; } diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index e9c9ab8f879..7a16c078c19 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -167,7 +167,7 @@ a.star { .topic-map { - margin: 10px; + margin: 10px 0; background: dark-light-diff($primary, $secondary, 97%, -45%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: none; // would cause double top border @@ -300,8 +300,9 @@ a.star { } #topic-footer-buttons { + @include clearfix; border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); - padding: 20px 10px 0 10px; + padding: 20px 0 0 0; .fa-bookmark.bookmarked { color: $tertiary; } } @@ -313,7 +314,7 @@ a.star { #suggested-topics { clear: left; - padding: 20px 10px 15px 10px; + padding: 20px 0 15px 0; th.views, td.views, td.activity, th.activity, th.likes, td.likes { display: none; } @@ -344,7 +345,7 @@ span.post-count { #topic-title { z-index: 1000; margin: 0 0 0 0 !important; - padding: 15px 10px 15px 10px; + padding: 15px 0; } .topic-post { diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index 78cfe1b6f92..db76dd41f7d 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/app/assets/stylesheets/mobile/topic.scss @@ -14,8 +14,8 @@ .edits {margin-right: 5px;} #topic-title { - margin-bottom: 20px; - margin: 0 60px 10px 20px; + //margin-bottom: 20px; + margin: 0 60px 10px 0; h1 { font-size: 1.5em; line-height: 1.25em;