Merge pull request #10435 from notbakaneko/feature/layout-margin-cleanup

Cleanup layout footer gap
ppy · Aug 10, 2023 · 36d197d · 36d197d
2 parents 01be460 + 7f9d7e3
commit 36d197d
Show file tree

Hide file tree

Showing 22 changed files with 46 additions and 99 deletions.
diff --git a/resources/css/bem/account-edit.less b/resources/css/bem/account-edit.less
@@ -15,13 +15,14 @@
 
   display: flex;
   flex-direction: column;
-  margin-bottom: 5px;
 
   @media @desktop {
     flex-direction: row;
   }
 
   &--first {
+    position: relative;
+
     &::after {
       .inner-shadow-top();
       .full-size();

diff --git a/resources/css/bem/artist-album.less b/resources/css/bem/artist-album.less
@@ -7,9 +7,6 @@
   align-items: center;
   .default-box-shadow();
   overflow: hidden;
-  @media @desktop {
-    margin-bottom: 10px;
-  }
 
   &__badge {
     position: relative;

diff --git a/resources/css/bem/beatmap-discussions.less b/resources/css/bem/beatmap-discussions.less
@@ -9,7 +9,6 @@
   @_timeline-colour: @osu-colour-b6;
 
   .default-box-shadow();
-  margin-bottom: 10px;
   background-color: @osu-colour-b4;
   display: flex;
   flex-direction: column;

diff --git a/resources/css/bem/comments.less b/resources/css/bem/comments.less
@@ -15,10 +15,6 @@
   background-color: hsl(var(--comments-bg-hsl));
   color: var(--comments-fg);
 
-  @media @desktop {
-    margin-bottom: 10px;
-  }
-
   &--page-extra {
     --comments-bg-hsl: var(--hsl-b4);
     --comments-pinned-bg-hsl: var(--hsl-b3);

diff --git a/resources/css/bem/contest.less b/resources/css/bem/contest.less
@@ -6,10 +6,6 @@
   background-color: @osu-colour-b5;
   color: @osu-colour-c1;
 
-  @media @desktop {
-    margin-bottom: 10px;
-  }
-
   &__description {
     .default-gutter-v2();
     .content-font();

diff --git a/resources/css/bem/header-v4.less b/resources/css/bem/header-v4.less
@@ -135,7 +135,7 @@
 
       @media @desktop {
         padding-top: @nav2-height + 15px;
-        min-height: (@nav2-height + 70px);
+        min-height: @header-container-min-height;
       }
 
       .@{_top}--supporter & {

diff --git a/resources/css/bem/landing-sitemap.less b/resources/css/bem/landing-sitemap.less
@@ -2,10 +2,15 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .landing-sitemap {
-  text-align: center;
+  display: grid;
+  grid-gap: 10px;
 
   @media @desktop {
-    text-align: left;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media @mobile {
+    text-align: center;
   }
 
   &__header {

diff --git a/resources/css/bem/osu-layout.less b/resources/css/bem/osu-layout.less
@@ -77,10 +77,6 @@
     &--with-gutter {
       margin: -5px;
     }
-
-    &--landing-sitemap {
-      width: 100%;
-    }
   }
 
   &__no-scroll {
@@ -116,14 +112,12 @@
     }
 
     &--page {
-      ._page;
+      ._page();
       padding: 20px;
-      margin-bottom: 10px;
     }
 
     &--page-compact {
-      ._page;
-      margin-bottom: 10px;
+      ._page();
     }
 
     &--landing-sitemap {
@@ -136,13 +130,15 @@
   &__section {
     display: flex;
     flex-direction: column;
+    margin-bottom: 10px;
 
     &--full {
       flex: 1 0 auto;
     }
 
     &--landing-footer {
       margin-top: auto;
+      margin-bottom: 0;
       flex: none;
       .at2x("~@images/backgrounds/page-000.png", 500px, 500px);
     }

diff --git a/resources/css/bem/osu-page.less b/resources/css/bem/osu-page.less
@@ -15,14 +15,19 @@
     background-color: @_default-bg;
     color: @_default-fg;
     .default-box-shadow();
-    margin-bottom: 10px;
   }
 
   .page-width();
   @media @desktop {
     .page-width-desktop();
   }
 
+  &--account-edit {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
   &--account-edit-header {
     .default-box-shadow();
   }
@@ -32,7 +37,6 @@
     .default-gutter-v2();
     padding-top: 20px;
     padding-bottom: 20px;
-    margin-bottom: 10px;
     color: @osu-colour-c1;
 
     h1, h3, h4 {
@@ -87,21 +91,15 @@
     padding-bottom: $padding-top;
   }
 
-  &--artists {
-    margin-bottom: 10px;
-  }
-
   &--beatmapsets-search-header {
     .default-box-shadow();
-    margin-bottom: 10px;
   }
 
   &--changelog {
-    .default;
+    .default();
     background-color: @osu-colour-b4;
     display: flex;
     flex-direction: column;
-    margin-bottom: 0;
   }
 
   &--comment {
@@ -111,7 +109,6 @@
     background-color: hsl(var(--comments-bg-hsl));
     color: var(--comments-fg);
     padding: 10px 0 0;
-    margin-bottom: 0;
   }
 
   &--comments {
@@ -124,7 +121,7 @@
   }
 
   &--contests {
-    .default;
+    .default();
   }
 
   &--description {
@@ -139,7 +136,6 @@
   &--forum {
     background-color: @osu-colour-b5;
     color: @osu-colour-c1;
-    margin-bottom: 10px;
   }
 
   &--forum-topic {
@@ -189,7 +185,7 @@
   }
 
   &--generic-compact {
-    .default;
+    .default();
   }
 
   &--info-bar {
@@ -229,14 +225,10 @@
     .default-box-shadow();
     background-color: @osu-colour-b5;
     color: @osu-colour-c1;
-
-    @media @desktop {
-      margin-bottom: 10px;
-    }
   }
 
   &--supporter {
-    .default;
+    .default();
     display: flex;
     flex-direction: column;
   }
@@ -253,15 +245,14 @@
   }
 
   &--chat {
-    .default;
+    .default();
 
     flex: 1 0 auto;
     display: flex;
-    height: calc((var(--vh, 1vh) * 100) - (@nav2-height + 70px + 50px)); // viewport height - compact header+footer
-    margin-bottom: 0;
+    height: calc((var(--vh, 1vh) * 100) - (@header-container-min-height + 60px)); // viewport height - (header + footer + margins)
 
     @media @mobile {
-      height: calc((var(--vh, 1vh) * 100) - 90px);
+      height: calc((var(--vh, 1vh) * 100) - var(--navbar-height));
     }
   }
 }
diff --git a/resources/css/bem/search.less b/resources/css/bem/search.less
@@ -5,7 +5,6 @@
   .default-box-shadow();
   background-color: @osu-colour-b5;
   padding: 10px 0;
-  margin-bottom: 10px;
   display: flex;
   flex-direction: column;
 }
diff --git a/resources/css/bem/store-products.less b/resources/css/bem/store-products.less
@@ -4,7 +4,7 @@
 .store-products {
   display: grid;
   grid-gap: 10px;
-  padding: 10px;
+  padding: 10px 10px 0 10px; // remove bottom-margin from osu-layout__section
 
   @media @desktop {
     grid-template-columns: 1fr 1fr;

diff --git a/resources/css/bem/tournament-list.less b/resources/css/bem/tournament-list.less
@@ -8,10 +8,6 @@
   padding-top: 20px;
   padding-bottom: 20px;
 
-  @media @desktop {
-    margin-bottom: 10px;
-  }
-
   &__heading {
     color: white;
     padding: 10px 0 10px;

diff --git a/resources/css/bem/tournament.less b/resources/css/bem/tournament.less
@@ -5,10 +5,6 @@
   @_top: tournament;
   background-color: @osu-colour-b5;
 
-  @media @desktop {
-    margin-bottom: 10px;
-  }
-
   &__banner {
     .at2x-simple-var(--tournament-header-banner);
   }

diff --git a/resources/css/bem/user-home.less b/resources/css/bem/user-home.less
@@ -9,7 +9,6 @@
 
   @media @desktop {
     padding: 0 @gutter-v2-desktop;
-    margin-bottom: 10px;
     flex-direction: row;
     align-items: flex-start;
   }

diff --git a/resources/css/variables.less b/resources/css/variables.less
@@ -133,6 +133,7 @@
 
 @beatmapset-float-box-width: 275px;
 
+@header-container-min-height: @nav2-height + 70px;
 @header-title-height: 55px;
 
 // top padding + menu + page title

diff --git a/resources/views/accounts/_edit_legacy_api.blade.php b/resources/views/accounts/_edit_legacy_api.blade.php
@@ -2,7 +2,7 @@
     Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
     See the LICENCE file in the repository root for full licence text.
 --}}
-<div class="account-edit">
+<div class="account-edit" id="legacy-api">
     <div class="account-edit__section">
         <h2 class="account-edit__section-title">
             {{ osu_trans('accounts.edit.legacy_api.title') }}

diff --git a/resources/views/accounts/_edit_notifications.blade.php b/resources/views/accounts/_edit_notifications.blade.php
@@ -6,7 +6,7 @@
     use App\Jobs\Notifications\BroadcastNotificationBase;
     use App\Models\UserNotificationOption;
 @endphp
-<div class="account-edit">
+<div class="account-edit" id="notifications">
     <div class="account-edit__section">
         <h2 class="account-edit__section-title">
             {{ osu_trans('accounts.notifications.title') }}

diff --git a/resources/views/accounts/_edit_oauth.blade.php b/resources/views/accounts/_edit_oauth.blade.php
@@ -2,7 +2,7 @@
     Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
     See the LICENCE file in the repository root for full licence text.
 --}}
-<div class="account-edit">
+<div class="account-edit" id="oauth">
     <div class="account-edit__section">
         <h2 class="account-edit__section-title">
             {{ osu_trans('accounts.oauth.title') }}

diff --git a/resources/views/accounts/edit.blade.php b/resources/views/accounts/edit.blade.php
@@ -20,7 +20,7 @@
 
     @include('home._user_header_default', ['themeOverride' => 'settings'])
 
-    <div class="osu-page">
+    <div class="osu-page osu-page--account-edit">
         <div class="account-edit account-edit--first">
             <div class="account-edit__section">
                 <h2 class="account-edit__section-title">
@@ -66,10 +66,8 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="osu-page" id="avatar">
-        <div class="account-edit">
+        <div class="account-edit" id="avatar">
             <div class="account-edit__section">
                 <h2 class="account-edit__section-title">
                     {{ osu_trans('accounts.edit.avatar.title') }}
@@ -132,45 +130,25 @@ class="js-account-edit-avatar__button fileupload"
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_signature')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_playstyles')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_privacy')
-    </div>
 
-    <div class="osu-page" id="notifications">
         @include('accounts._edit_notifications')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_options')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_password')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_email')
-    </div>
 
-    <div class="osu-page">
         @include('accounts._edit_sessions')
-    </div>
 
-    <div class="osu-page" id="oauth">
         @include('accounts._edit_oauth')
-    </div>
 
-    <div class="osu-page" id="legacy-api">
         @include('accounts._edit_legacy_api')
     </div>
 @endsection