UX: more consistent mobile spacing (#13297)

This commit is contained in:
Kris 2021-06-07 13:22:28 -04:00 committed by GitHub
parent 09bc95d46b
commit 2fb1eaa868
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 12 additions and 13 deletions

View File

@ -13,9 +13,6 @@ $mobile-breakpoint: 700px;
height: auto; height: auto;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
.mobile-view & {
margin-top: 10px;
}
@include breakpoint(tablet) { @include breakpoint(tablet) {
width: calc(100% + 10px); width: calc(100% + 10px);
margin-left: -10px; margin-left: -10px;
@ -27,6 +24,7 @@ $mobile-breakpoint: 700px;
flex-wrap: wrap; flex-wrap: wrap;
width: calc(100% - 10px); width: calc(100% - 10px);
flex: 1 0 auto; flex: 1 0 auto;
margin-top: 0;
@include breakpoint(tablet) { @include breakpoint(tablet) {
white-space: nowrap; white-space: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;

View File

@ -15,13 +15,12 @@
} }
.mobile-view & { .mobile-view & {
font-size: $font-0; font-size: $font-0;
margin-top: 20px;
} }
li { li {
margin-bottom: 8px; margin-bottom: 8px;
} }
.nav-pills { .nav-pills {
margin-bottom: 20px; margin: 0 0 2em;
} }
ul:not(.nav-pills), ul:not(.nav-pills),
ol:not(.nav-pills) { ol:not(.nav-pills) {

View File

@ -25,7 +25,7 @@
} }
.nav-pills { .nav-pills {
margin-bottom: 1em; margin: 0 0 1em;
} }
.reviewable-container { .reviewable-container {

View File

@ -348,6 +348,7 @@ body.tags-intersection {
.tags-controls { .tags-controls {
display: flex; display: flex;
margin: 0;
h2 { h2 {
order: -1; order: -1;
margin-right: auto; margin-right: auto;

View File

@ -213,6 +213,7 @@
.controls { .controls {
ul { ul {
list-style-type: none; list-style-type: none;
margin-top: 0;
} }
.btn { .btn {

View File

@ -140,7 +140,7 @@ blockquote {
// Special elements // Special elements
#main-outlet { #main-outlet {
padding-top: 0.25em; padding-top: 1.25em;
} }
#main { #main {

View File

@ -1,5 +1,5 @@
.group { .group {
margin-top: 15px; margin: 0;
} }
.group-name { .group-name {

View File

@ -30,6 +30,7 @@
button { button {
// accounts for menu "ears" 4px + border 1px // accounts for menu "ears" 4px + border 1px
padding: 0.75em calc(0.5em + 4px + 1px); padding: 0.75em calc(0.5em + 4px + 1px);
margin: 0.25em;
@media screen and (max-height: 380px) { @media screen and (max-height: 380px) {
// reduce padding to avoid scroll // reduce padding to avoid scroll
padding-top: 0.5em; padding-top: 0.5em;

View File

@ -1,6 +1,6 @@
.search-container { .search-container {
flex-direction: column; flex-direction: column;
margin-top: 0.5em; margin: 0;
.search-advanced { .search-advanced {
order: 1; order: 1;

View File

@ -27,7 +27,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
margin: 0.5em 0 0; margin: 0;
button { button {
&.select-kit-header { &.select-kit-header {
@ -374,7 +374,7 @@ tr.category-topic-link {
padding: 0.5em 0 0.25em; padding: 0.5em 0 0.25em;
border-top: 1px solid var(--primary-low) !important; border-top: 1px solid var(--primary-low) !important;
border-bottom: 1px solid var(--primary-low) !important; border-bottom: 1px solid var(--primary-low) !important;
margin-bottom: 2em; margin: 1em 0 2em;
} }
.category-box { .category-box {

View File

@ -296,7 +296,7 @@ span.post-count {
#topic-title { #topic-title {
z-index: z("base") + 1; z-index: z("base") + 1;
margin: 0; margin: 0;
padding: 0.75em 0; padding: 0 0 1em;
} }
.quote-button.visible { .quote-button.visible {

View File

@ -33,7 +33,6 @@
} }
.user-main { .user-main {
margin-top: 12px;
padding-bottom: 60px; // slightly taller than .footer-nav padding-bottom: 60px; // slightly taller than .footer-nav
.user-content { .user-content {