Merge pull request #10 from angusmcleod/main

Merge fixes

Author: angusmcleod

common/common.scss

@@ -29,19 +29,6 @@
         }
       }
 
-      &:hover {
-        color: $main_link_hover_color;
-
-        .custom-header-dropdown {
-          transform: scale(1);
-          transition-delay: 0s;
-        }
-
-        .custom-header-link-caret svg {
-          transform: rotate(90deg);
-        }
-      }
-
       &.with-url {
         cursor: pointer;
       }
@@ -54,8 +41,8 @@
     max-width: 280px;
     list-style: none;
     transform: scale(0);
-    transition: transform 0.2s ease;
-    transition-delay: 0.3s;
+    /*transition: transform 0.2s ease;*/
+    /*transition-delay: 0.3s;*/
 
     &-link {
       color: $dropdown_item_color;

desktop/desktop.scss

@@ -2,4 +2,21 @@
   @media screen and (max-width: 712px) {
     display: none;
   }
-}
+
+  .top-level-links {
+    .custom-header-link {
+      &:hover {
+        color: $main_link_hover_color;
+
+        .custom-header-dropdown {
+          transform: scale(1);
+          transition-delay: 0s;
+        }
+
+        .custom-header-link-caret svg {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}

javascripts/discourse/api-initializers/dropdown-header.js.es6

@@ -10,7 +10,7 @@ export default apiInitializer("0.11.1", (api) => {
   const links_position =
     settings.links_position === "right"
       ? "header-buttons:before"
-      : "home-logo:after";
+      : "header-contents:after";
 
   api.decorateWidget(links_position, (helper) => {
     const scrolling = helper.attrs.minimized;

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

@@ -25,7 +25,7 @@ createWidget('custom-header-dropdown', {
 
   click() {
     if (this.site.mobileView) {
-      this.sendWidgetAction("showHeaderLinks"); // in mobile view, close menu on click
+      this.sendWidgetAction("toggleDropdown"); // in mobile view, close menu on click
     }
     DiscourseURL.routeTo(this.attrs.url);
   },

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

@@ -9,6 +9,14 @@ createWidget("custom-header-link", {
   tagName: "li.custom-header-link",
   buildKey: (attrs) => `custom-header-link-${attrs.id}`,
 
+  defaultState() {
+    let showDropdown = false;
+
+    return {
+      showDropdown,
+    };
+  },
+
   html(attrs) {
     const iconHTML = buildIconHTML(attrs.icon);
     const titleHTML = h("span.custom-header-link-title", attrs.title);
@@ -51,7 +59,7 @@ createWidget("custom-header-link", {
     };
   },
 
-  buildClasses(attrs) {
+  buildClasses(attrs, state) {
     const classes = [];
 
     if (attrs.url) {
@@ -62,6 +70,10 @@ createWidget("custom-header-link", {
       classes.push("has-dropdown");
     }
 
+    if (state.showDropdown) {
+      classes.push("show-dropdown");
+    }
+
     return classes;
   },
 
@@ -108,9 +120,18 @@ createWidget("custom-header-link", {
     return h("span.custom-header-link-caret", iconNode("caret-down"));
   },
 
+  clickOutside() {
+    this.state.showDropdown = false;
+    this.scheduleRerender();
+  },
+
+  toggleDropdown() {
+    this.state.showDropdown = !this.state.showDropdown;
+  },
+
   click() {
     if (this.site.mobileView) {
-      this.sendWidgetAction("showHeaderLinks"); // in mobile view, close menu on click
+      this.toggleDropdown();
     }
     DiscourseURL.routeTo(this.attrs.url);
   },

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

@@ -25,33 +25,36 @@ createWidget('custom-header-links', {
   },
 
   defaultState() {
-    let showLinks = !this.site.mobileView;
-    const mobileView = this.site.mobileView;
+    //let showLinks = !this.site.mobileView;
+    let showLinks = true;
+    //const mobileView = this.site.mobileView;
+    const mobileView = false;
 
     return {
       mobileView,
       showLinks,
     };
   },
 
-  toggleHeaderLinks() {
-    this.state.showLinks = !this.state.showLinks;
-    if (this.state.showLinks) {
-      document.body.classList.add("dropdown-header-open");
-    } else {
-      document.body.classList.remove("dropdown-header-open");
-    }
-  },
+//  toggleHeaderLinks() {
+//    this.state.showLinks = !this.state.showLinks;
+//    if (this.state.showLinks) {
+//      document.body.classList.add("dropdown-header-open");
+//    } else {
+//      document.body.classList.remove("dropdown-header-open");
+//    }
+//  },
 
-  clickOutside() {
-    if (this.site.desktopView) {
-      return;
-    }
+//  clickOutside() {
+//    if (this.site.desktopView) {
+//      return;
+//    }
 
-    if (this.state.showLinks) {
-      this.sendWidgetAction("toggleHeaderLinks");
-    }
-  },
+//    if (this.state.showLinks) {
+//      this.sendWidgetAction("toggleHeaderLinks");
+//      return;
+//    }
+//  },
 
   template: hbs`
     {{#if this.state.mobileView}}

mobile/mobile.scss

@@ -1,44 +1,22 @@
 @import "mixins";
 
 .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;
-    overflow: scroll;
-    max-height: 90vh;
-
-    li {
-      width: 100%;
-
-      @media screen and (min-width: 768px) {
-        width: auto;
+  .custom-header-links {
+    .top-level-links {
+      .custom-header-link {
+        &.show-dropdown {
+          color: $main_link_hover_color;
+  
+          .custom-header-dropdown {
+            transform: scale(1);
+            transition-delay: 0s;
+          }
+  
+          .custom-header-link-caret svg {
+            transform: rotate(90deg);
+          }
+        }
       }
     }
   }
-
-  .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;
-    }
-  }
-
-  .dropdown-header-open {
-    overflow-y: hidden;
-    height: 100vh;
-    position: fixed;
-  }
 }