From a0eeb831d3522d5add2e90d1e77632613dd4c27b Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 17 Apr 2025 14:57:28 -0400 Subject: [PATCH] REFACTOR: merge mobile/desktop header styles into /common (#32320) This eliminates the `/mobile` and `/desktop` `header.scss` files and moves the relevant CSS under `common/header.scss` using `.mobile-view` and breakpoints. I was also able to eliminate some redundant and unused styles in the process and move a couple more general styles to `discourse.scss` --- .../stylesheets/common/base/discourse.scss | 12 +++ .../stylesheets/common/base/header.scss | 49 ++++++++--- app/assets/stylesheets/desktop/_index.scss | 1 - app/assets/stylesheets/desktop/header.scss | 40 --------- app/assets/stylesheets/mobile/_index.scss | 1 - app/assets/stylesheets/mobile/header.scss | 86 ------------------- 6 files changed, 49 insertions(+), 140 deletions(-) delete mode 100644 app/assets/stylesheets/desktop/header.scss delete mode 100644 app/assets/stylesheets/mobile/header.scss diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index d3a07e32a09..2153903efe4 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -1,3 +1,5 @@ +@use "lib/viewport"; + // Common // global styles that apply to the Discourse application specifically // BEWARE: changing these styles implies they take effect anywhere they are seen @@ -592,9 +594,19 @@ textarea { #main-outlet { padding-top: 1.5em; + + .mobile-view & { + // notch avoidance + @media only screen and (orientation: landscape) { + padding-right: env(safe-area-inset-right); + padding-left: env(safe-area-inset-left); + } + } } #main { + position: relative; + img.avatar { &.header { width: 45px; diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index c1062632c13..1ce6dc6e5c0 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -1,3 +1,5 @@ +@use "lib/viewport"; + .d-header-wrap { position: sticky; top: 0; @@ -12,6 +14,11 @@ background-color: var(--header_background); box-shadow: var(--shadow-header); backface-visibility: hidden; /** do magic for scrolling performance **/ + height: 3.66em; + + @include viewport.from(sm) { + height: 4em; + } > .wrap { box-sizing: border-box; @@ -44,7 +51,11 @@ } .title { - --d-logo-height: 2.667em; + --d-logo-height: 2.4em; + + @include viewport.from(sm) { + --d-logo-height: 2.667em; + } display: flex; align-items: center; height: 100%; @@ -85,6 +96,11 @@ #site-text-logo { margin: 0; + font-size: var(--font-up-1); + + @include viewport.from(sm) { + font-size: var(--font-up-3); + } @include ellipsis; } @@ -115,21 +131,15 @@ .auth-buttons { display: flex; + gap: 0.5em; } } - .login-button, - .sign-up-button { - padding: 6px 10px; - - .fa { - margin-right: 3px; + @include viewport.until(sm) { + .sign-up-button { + display: none; } } - - .login-button { - margin-left: 7px; - } } .header-dropdown-toggle, @@ -357,8 +367,12 @@ .header-title { padding: 0; margin: 0; - font-size: var(--font-up-3); width: 100%; + font-size: var(--font-0); + + @include viewport.from(sm) { + font-size: var(--font-up-3); + } } .categories-wrapper { @@ -508,3 +522,14 @@ $mobile-avatar-height: 1.532em; border-radius: var(--d-border-radius-large); overflow: auto; } + +.mobile-view { + // Hide header avatar + icons while topic title is visible in mobile header + .extra-info-wrapper ~ .panel { + .before-header-panel-outlet, + .header-buttons, + .d-header-icons { + display: none; + } + } +} diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss index 649d7beb2f4..30b196049e8 100644 --- a/app/assets/stylesheets/desktop/_index.scss +++ b/app/assets/stylesheets/desktop/_index.scss @@ -1,6 +1,5 @@ @import "category-list"; @import "discourse"; -@import "header"; @import "latest-topic-list"; @import "login-signup-page"; @import "menu-panel"; diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss deleted file mode 100644 index b9ea191e567..00000000000 --- a/app/assets/stylesheets/desktop/header.scss +++ /dev/null @@ -1,40 +0,0 @@ -// -------------------------------------------------- -// Discourse header -// -------------------------------------------------- -.d-header { - height: 4em; - - #site-text-logo { - font-size: var(--font-up-3); - } - - .extra-info { - &:not(.two-rows) { - .header-title { - margin-bottom: 0; - } - } - } -} - -@include breakpoint(mobile-extra-large) { - .extra-info-wrapper { - display: none; - } -} - -#main { - position: relative; -} - -.search-link .blurb { - color: var(--secondary-medium); - display: block; - word-wrap: break-word; - font-size: var(--font-down-2); - line-height: var(--line-height-large); - - .search-highlight { - color: var(--primary-high-or-secondary-low); - } -} diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss index 922b1066383..8c81746e8e0 100644 --- a/app/assets/stylesheets/mobile/_index.scss +++ b/app/assets/stylesheets/mobile/_index.scss @@ -1,5 +1,4 @@ @import "discourse"; -@import "header"; @import "invite-signup"; @import "list-controls"; @import "login-modal"; diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss deleted file mode 100644 index d30742993c9..00000000000 --- a/app/assets/stylesheets/mobile/header.scss +++ /dev/null @@ -1,86 +0,0 @@ -// -------------------------------------------------- -// Discourse header -// -------------------------------------------------- -.d-header { - height: 3.66em; - - .title { - --d-logo-height: 2.4em; - } - - #site-text-logo { - font-size: var(--font-up-1); - } - - .extra-info-wrapper { - .extra-info { - // header title should not be centered if there's no tags / categories - &:not(.two-rows) { - min-height: 2.25em; - } - - .header-title { - font-size: var(--font-0); - - // the margin-bottom here is fragile, changing it can cause tag alignment issues - margin: 0 0 0.35em 0; - - .archetype-private_message & { - // PMs might have participant avatars in the header - margin: 0 0 0.15em 0; - } - } - - .private-message-glyph-wrapper { - float: left; - } - } - } - - button.sign-up-button { - display: none; - } - - // Hide header avatar + icons while topic title is visible in mobile header - .extra-info-wrapper ~ .panel { - .before-header-panel-outlet, - .header-buttons, - .d-header-icons { - display: none; - } - } - - // Fade in header avatar + icons if topic title is not visible in mobile header - .panel .icons { - animation: fadein 0.5s; - - @media (prefers-reduced-motion) { - animation-duration: 0s; - } - } - - // A rendering bug in safari causes header SVGs to jitter after animations. - // translateZ() forces gpu rendering which fixes the issue. - .d-header-icons { - transform: translateZ(0); - } -} - -.d-header-icons { - .d-icon { - line-height: var(--line-height-medium); - } - - .active .icon { - &::after { - margin-top: -1px; - } - } -} - -#main-outlet { - @media only screen and (orientation: landscape) { - padding-right: env(safe-area-inset-right); - padding-left: env(safe-area-inset-left); - } -}