From 2fb1eaa868f2e96a26cda956aeec4d2a90b3bc5d Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 7 Jun 2021 13:22:28 -0400 Subject: [PATCH] UX: more consistent mobile spacing (#13297) --- app/assets/stylesheets/common/admin/admin_base.scss | 4 +--- app/assets/stylesheets/common/base/faqs.scss | 3 +-- app/assets/stylesheets/common/base/reviewables.scss | 2 +- app/assets/stylesheets/common/base/tagging.scss | 1 + app/assets/stylesheets/common/base/user.scss | 1 + app/assets/stylesheets/mobile/discourse.scss | 2 +- app/assets/stylesheets/mobile/group.scss | 2 +- app/assets/stylesheets/mobile/menu-panel.scss | 1 + app/assets/stylesheets/mobile/search.scss | 2 +- app/assets/stylesheets/mobile/topic-list.scss | 4 ++-- app/assets/stylesheets/mobile/topic-post.scss | 2 +- app/assets/stylesheets/mobile/user.scss | 1 - 12 files changed, 12 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index e920bb76c90..98e741171d3 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -13,9 +13,6 @@ $mobile-breakpoint: 700px; height: auto; overflow: hidden; height: 100%; - .mobile-view & { - margin-top: 10px; - } @include breakpoint(tablet) { width: calc(100% + 10px); margin-left: -10px; @@ -27,6 +24,7 @@ $mobile-breakpoint: 700px; flex-wrap: wrap; width: calc(100% - 10px); flex: 1 0 auto; + margin-top: 0; @include breakpoint(tablet) { white-space: nowrap; flex-wrap: nowrap; diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss index 1af108d9122..26fc429851b 100644 --- a/app/assets/stylesheets/common/base/faqs.scss +++ b/app/assets/stylesheets/common/base/faqs.scss @@ -15,13 +15,12 @@ } .mobile-view & { font-size: $font-0; - margin-top: 20px; } li { margin-bottom: 8px; } .nav-pills { - margin-bottom: 20px; + margin: 0 0 2em; } ul:not(.nav-pills), ol:not(.nav-pills) { diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss index 5a222223741..a6121517466 100644 --- a/app/assets/stylesheets/common/base/reviewables.scss +++ b/app/assets/stylesheets/common/base/reviewables.scss @@ -25,7 +25,7 @@ } .nav-pills { - margin-bottom: 1em; + margin: 0 0 1em; } .reviewable-container { diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index d4ce41fd511..01d2966b09e 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -348,6 +348,7 @@ body.tags-intersection { .tags-controls { display: flex; + margin: 0; h2 { order: -1; margin-right: auto; diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 6a1fc677e9d..c1a2022d6fb 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -213,6 +213,7 @@ .controls { ul { list-style-type: none; + margin-top: 0; } .btn { diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index fdf5e26714f..aeb4216715a 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -140,7 +140,7 @@ blockquote { // Special elements #main-outlet { - padding-top: 0.25em; + padding-top: 1.25em; } #main { diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss index 7053aa3ee46..435303d381f 100644 --- a/app/assets/stylesheets/mobile/group.scss +++ b/app/assets/stylesheets/mobile/group.scss @@ -1,5 +1,5 @@ .group { - margin-top: 15px; + margin: 0; } .group-name { diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index ca557b6a156..c2b0c527efe 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -30,6 +30,7 @@ button { // accounts for menu "ears" 4px + border 1px padding: 0.75em calc(0.5em + 4px + 1px); + margin: 0.25em; @media screen and (max-height: 380px) { // reduce padding to avoid scroll padding-top: 0.5em; diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss index a22c4ae9a9a..8ea2333d5cc 100644 --- a/app/assets/stylesheets/mobile/search.scss +++ b/app/assets/stylesheets/mobile/search.scss @@ -1,6 +1,6 @@ .search-container { flex-direction: column; - margin-top: 0.5em; + margin: 0; .search-advanced { order: 1; diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 8fe40b772af..1b513ceea16 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -27,7 +27,7 @@ display: flex; flex-wrap: wrap; width: 100%; - margin: 0.5em 0 0; + margin: 0; button { &.select-kit-header { @@ -374,7 +374,7 @@ tr.category-topic-link { padding: 0.5em 0 0.25em; border-top: 1px solid var(--primary-low) !important; border-bottom: 1px solid var(--primary-low) !important; - margin-bottom: 2em; + margin: 1em 0 2em; } .category-box { diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 7495194f48c..e4ae8f7f452 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -296,7 +296,7 @@ span.post-count { #topic-title { z-index: z("base") + 1; margin: 0; - padding: 0.75em 0; + padding: 0 0 1em; } .quote-button.visible { diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 84763521050..53dfc3bfaae 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -33,7 +33,6 @@ } .user-main { - margin-top: 12px; padding-bottom: 60px; // slightly taller than .footer-nav .user-content {