UX: Update mobile styling

Author: keegangeorge

common/common.scss

@@ -1,12 +1,5 @@
-@mixin dropdown() {
- position: absolute;
- background-color: $dropdown_background_color;
- border: 1px solid $dropdown_border_color;
- box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
- z-index: 1000;
- padding: 0.5em;
- top: var(--header-offset);
-}
+@import 'mixins';
+@import 'buttons';
 
 .custom-header-links {
  .top-level-links {
@@ -16,10 +9,6 @@
  align-items: center;
  gap: 1rem;
 
- @media screen and (max-width: 712px) {
- display: none;
- }
-
  .custom-header-link {
  color: $main_link_color;
  padding-block: 1rem;
@@ -93,28 +82,3 @@
 .title .custom-header-links.scrolling {
  display: none;
 }
-
-.mobile-view {
- .top-level-links {
- @include dropdown;
- left: 0;
- right: 0;
- margin: 0 auto;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- }
-
- .custom-header-dropdown {
- display: block;
- position: initial;
- transform: scale(1);
- box-shadow: none;
- margin-top: 1rem;
- min-width: unset;
-
- .custom-header-link-desc {
- display: none;
- }
- }
-}

desktop/desktop.scss

@@ -0,0 +1,5 @@
+.custom-header-links {
+ @media screen and (max-width: 712px) {
+ display: none;
+ }
+}

javascripts/discourse/widgets/custom-header-links.js.es6

@@ -7,10 +7,13 @@ createWidget('custom-header-links', {
 
  buildClasses(attrs) {
  const { scrolling } = attrs;
+ const classes = [];
 
  if (scrolling) {
- return ['scrolling'];
+ classes.push('scrolling');
  }
+
+ return classes;
  },
 
  transform(attrs) {
@@ -22,7 +25,7 @@ createWidget('custom-header-links', {
  },
 
  defaultState() {
- const showLinks = !this.site.mobileView;
+ let showLinks = !this.site.mobileView;
  const mobileView = this.site.mobileView;
 
  return {
@@ -37,13 +40,15 @@ createWidget('custom-header-links', {
 
  template: hbs`
  {{#if this.state.mobileView}}
- {{attach
- widget="button"
- attrs=(hash
- action="showHeaderLinks"
- icon="caret-square-down"
- )
- }}
+ <span class="btn-custom-header-dropdown-mobile">
+ {{attach
+ widget="button"
+ attrs=(hash
+ action="showHeaderLinks"
+ icon="caret-square-down"
+ )
+ }}
+ </span>
  {{/if}}
  {{#if this.state.showLinks}}
  <ul class="top-level-links">

mobile/mobile.scss

@@ -0,0 +1,34 @@
+.mobile-view {
+ .top-level-links {
+ @include dropdown;
+ position: fixed;
+ left: 0;
+ margin: 0;
+ top: var(--header-offset);
+ width: 100%;
+ flex-flow: row wrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+
+ li {
+ width: 100%;
+
+ @media screen and (min-width: 768px) {
+ width: auto;
+ }
+ }
+ }
+
+ .custom-header-dropdown {
+ display: block;
+ position: initial;
+ transform: scale(1);
+ box-shadow: none;
+ margin-top: 1rem;
+ min-width: unset;
+
+ .custom-header-link-desc {
+ display: none;
+ }
+ }
+}

scss/buttons.scss

@@ -0,0 +1,19 @@
+.btn-custom-header-dropdown-mobile {
+ .btn {
+ background: none;
+ font-size: var(--font-up-4);
+ color: var(--header_primary-low-mid);
+
+ .d-icon {
+ color: var(--header_primary-low-mid);
+ }
+
+ &:hover {
+ background: var(--primary-low);
+
+ .d-icon {
+ color: var(--primary-high);
+ }
+ }
+ }
+}

scss/mixins.scss

@@ -0,0 +1,9 @@
+@mixin dropdown() {
+ position: absolute;
+ background-color: $dropdown_background_color;
+ border: 1px solid $dropdown_border_color;
+ box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
+ z-index: 1000;
+ padding: 0.5em;
+ top: var(--header-offset);
+}