Skin button and masthead UI fixed

- search input field got an id and that id is used now instead of its class, as - masthead buttons got a generic impl Signed-off-by: Hofi <hofione@gmail.com>
HofiOne · May 15, 2024 · 8d29527 · 8d29527
1 parent e90663f
commit 8d29527
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 117 deletions.
diff --git a/_includes/masthead.html b/_includes/masthead.html
@@ -4,13 +4,15 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
+
         {% unless logo_path == empty %}
           <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
         {% endunless %}
         <a class="site-title" href="{{ '/' | relative_url }}">
           {{ site.masthead_title | default: site.title }}
           {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
         </a>
+
         <ul class="visible-links">
           {% if site.masthead.hide_navigator == false %}
             {%- for link in site.data.navigation.main -%}
@@ -20,27 +22,33 @@
             {%- endfor -%}
           {% endif %}
         </ul>
+
         {% if site.search == true %}
-        <button class="search__toggle" type="button">
-          <span id="searchHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
-            + F or ESC to close)" }}</span>
-          <i class="fas fa-search"></i>
+        {% comment %}<!-- search__toggle is kept fir bacjward compatibility -->{% endcomment %}
+        <button id="search-button" class="masthead_button search__toggle" type="button">
+          <span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
+          <i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
         </button>
         {% endif %}
+
         {% if site.skin_switchable == true %}
-        <span class="skin__toggle_img"><i class="fa fa-sun-o"></i></span>
-        <button class="skin__toggle" type="button">
-          <!-- <span id="skinHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
-                    + F or ESC to close)" }}</span> -->
-          <i class="fa fa-toggle-off"></i>
+        <i class="masthead_button_small_img fa fa-sun"></i>
+        <button id="skin-button" class="masthead_button_with_side_image" type="button">
+          <i class="masthead_button_icon fa fa-toggle-off" style="font-size: 150%;"></i>
         </button>
-        <span class="skin__toggle_img"><i class="fa fa-moon-o"></i></span>
+        <i class="masthead_button_small_img fa fa-moon"></i>
         {% endif %}
+
+        <button id="settings-button" class="masthead_button_last" type="button">
+          <i class="masthead_button_icon fas fa-user-cog" style="font-size: 110%;"></i>
+        </button>
+
         <button class="greedy-nav__toggle hidden" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
           <div class="navicon"></div>
         </button>
         <ul class="hidden-links hidden"></ul>
+
       </nav>
     </div>
   </div>

diff --git a/_includes/search/algolia-search-scripts.html b/_includes/search/algolia-search-scripts.html
@@ -53,7 +53,7 @@ <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}$
 
 // Starting the search only when toggle is clicked
 $(document).ready(function () {
-  $(".search__toggle").on("click", function() {
+  $("#search-button").on("click", function() {
     if(!search.started) {
       search.start();
     }

diff --git a/_includes/skins.html b/_includes/skins.html
@@ -56,52 +56,85 @@
     return defaultValue;
   }
 
-  function setSkin(skin) {
-    const stylesheet = document.getElementById('skinedStylesheet');
-    //stylesheet.onload = saveChanges;
-    stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
-    setCookie('skin', skin, 365 * 100);
-  }
-
-  function toggleSkin() {
-    if (getCookie('skin', 'default') == darkSkin)
-      setSkin(lightSkin);
-    else
-      setSkin(darkSkin);
-    //location.reload();
-  }
-
-  /* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
-     half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
-  */
-  window.addEventListener("load", function () {
-    function saveChanges() {
-      const htmlStyle = window.getComputedStyle(document.documentElement);
-      const backgroundColor = htmlStyle.backgroundColor;
-      setCookie('skin-background-color', backgroundColor, 365 * 100);
-    };    
-
-    var container = document.getElementById("full-page-container");
-    if (container)
-      container.classList.remove('hidden');
-
-    // Why this is not working?!?!
-    //document.body.style.removeProperty("backgroundColor");
-    document.body.style.backgroundColor = "";
-
-    saveChanges();
-
-    $(".skin__toggle").on("click", toggleSkin);
-  });
+  (function () {
+    function setSkin(skin) {
+      const stylesheet = document.getElementById('skinedStylesheet');
+      //stylesheet.onload = saveChanges;
+      stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
+      setCookie('skin', skin, 365 * 100);
+    }
 
-  document.addEventListener("DOMContentLoaded", function () {
-    const skinBackgroundColor = getCookie('skin-background-color');
-    if (skinBackgroundColor)
-      document.body.style.backgroundColor = skinBackgroundColor;
-  });
+    function toggleSkin(event) {
+        if (getCookie('skin', 'default') == darkSkin) {
+          event.target.classList.remove('fa-toggle-on');
+          event.target.classList.add('fa-toggle-off');
+          setSkin(lightSkin);
+        }
+        else {
+          event.target.classList.remove('fa-toggle-off');
+          event.target.classList.add('fa-toggle-on');
+          setSkin(darkSkin);
+        }
+        event.currentTarget.blur();
+      }
 
-  const storedSkin = getCookie('skin', 'default');
-  if (storedSkin !== 'default')
-    setSkin(storedSkin);
+    function toggleIcon(target, off) {
+      if (off) {
+        target.classList.remove('fa-toggle-on');
+        target.classList.add('fa-toggle-off');
+      }
+      else {
+        target.classList.remove('fa-toggle-off');
+        target.classList.add('fa-toggle-on');
+      }
+    }
+
+    function toggleSkin(event) {
+      var off = getCookie('skin', 'default') == darkSkin;
+
+      if (off)
+        setSkin(lightSkin);
+      else
+        setSkin(darkSkin);
+      toggleIcon(event.target, off);
+
+      event.currentTarget.blur();
+    }
 
+    /* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
+      half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
+    */
+    window.addEventListener("load", function () {
+      function saveChanges() {
+        const htmlStyle = window.getComputedStyle(document.documentElement);
+        const backgroundColor = htmlStyle.backgroundColor;
+        setCookie('skin-background-color', backgroundColor, 365 * 100);
+      };    
+
+      var container = document.getElementById("full-page-container");
+      if (container)
+        container.classList.remove('hidden');
+
+      // Why this is not working?!?!
+      //document.body.style.removeProperty("backgroundColor");
+      document.body.style.backgroundColor = "";
+      if (storedSkin !== 'default')
+        toggleIcon($('#skin-button').find('.masthead_button_icon')[0], false);
+
+      $("#skin-button").on("click", toggleSkin);
+
+      saveChanges();
+    });
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const skinBackgroundColor = getCookie('skin-background-color');
+      if (skinBackgroundColor)
+        document.body.style.backgroundColor = skinBackgroundColor;
+    });
+
+    const storedSkin = getCookie('skin', 'default');
+    if (storedSkin !== 'default')
+      setSkin(storedSkin);
+
+  })();
 </script>
diff --git a/_js/custom/navigation.js b/_js/custom/navigation.js
@@ -605,16 +605,16 @@ $(function () {
 
     if (event.keyCode === 27) {
       if ($(".initial-content").hasClass("is--hidden"))
-        toggleSearch();
+        toggleSearch(event);
     }
     else if (event.ctrlKey === searchHotkey.ctrlKey &&
       event.shiftKey === searchHotkey.shiftKey &&
       event.key === searchHotkey.key) {
-      toggleSearch();
+      toggleSearch(event);
     }
   });
 
-  function toggleSearch() {
+  function toggleSearch(event) {
     $(".search-content").toggleClass("is--visible");
     $(".initial-content").toggleClass("is--hidden");
 
@@ -633,9 +633,11 @@ $(function () {
 
     if (tooltipTarget)
       hideTooltip(true);
+    // NOTE: event.target is not always the toggle here, use it directly instead of the event
+    $("#search-button").trigger('blur');
   }
 
-  $(".search__toggle").on('click', toggleSearch);
+  $("#search-button").on('click', toggleSearch);
 
   // -------------
   // Startup

diff --git a/_js/main.min.js b/_js/main.min.js
@@ -8815,12 +8815,12 @@ $(function() {
             key: "F"
         };
         if (event.keyCode === 27) {
-            if ($(".initial-content").hasClass("is--hidden")) toggleSearch();
+            if ($(".initial-content").hasClass("is--hidden")) toggleSearch(event);
         } else if (event.ctrlKey === searchHotkey.ctrlKey && event.shiftKey === searchHotkey.shiftKey && event.key === searchHotkey.key) {
-            toggleSearch();
+            toggleSearch(event);
         }
     });
-    function toggleSearch() {
+    function toggleSearch(event) {
         $(".search-content").toggleClass("is--visible");
         $(".initial-content").toggleClass("is--hidden");
         if ($(".initial-content").hasClass("is--hidden")) {
@@ -8833,8 +8833,9 @@ $(function() {
             $(".initial-content").find("input").focus();
         }
         if (tooltipTarget) hideTooltip(true);
+        $("#search-button").trigger("blur");
     }
-    $(".search__toggle").on("click", toggleSearch);
+    $("#search-button").on("click", toggleSearch);
     stickySideBar();
     finalizeContent();
     window.addEventListener("popstate", function() {

diff --git a/_sass/minimal-mistakes/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/minimal-mistakes/_masthead.scss
@@ -97,11 +97,19 @@
   }
 }
 
-.skin__toggle {
+
+.masthead_button, .masthead_button_last, .masthead_button_with_side_image{
   position: relative;
   display: inline-block;
   margin-left: 1rem;
   margin-right: 1rem;
+  &_last {
+    margin-right: 0px;
+  }
+  &_with_side_image {
+    margin: 0px;
+    padding: 0px;
+  }
   height: $nav-toggle-height;
   border: 0;
   outline: none;
@@ -116,37 +124,30 @@
   }
 }
 
-.skin-icon {
+.masthead_button:hover #search_hint {
+  display: inline;
+  -webkit-animation: $intro-transition;
+  animation: $intro-transition;
+  -webkit-animation-delay: 0.15s;
+  animation-delay: 0.15s;
+}
+
+.masthead_button_icon {
   width: 100%;
   height: 100%;
+  align-content: center;
 }
 
-.skin__toggle_img {
+.masthead_button_small_img {
   position: relative;
   display: inline-block;
   margin-left: 0rem;
   margin-right: 0rem;
-  width: calc($nav-toggle-height * 0.75);
-  height: calc($nav-toggle-height * 0.75);
+  scale: 40%;
   border: 0;
   outline: none;
   color: $primary-color;
   background-color: transparent;
   -webkit-transition: 0.2s;
   transition: 0.2s;
-
-  &:hover {
-    color: mix(#000, $primary-color, 25%);
-  }
 }
-
-#skinHint {
-  display: none;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: -110px;
-  max-width: 100px;
-  font-size: 12px;
-  margin-left: 10px;
-}
diff --git a/_sass/minimal-mistakes/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/minimal-mistakes/_search.scss
@@ -8,31 +8,7 @@
   }
 }
 
-.search__toggle {
-  position: relative;
-  display: inline-block;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  height: $nav-toggle-height;
-  border: 0;
-  outline: none;
-  color: $primary-color;
-  background-color: transparent;
-  cursor: pointer;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-
-  &:hover {
-    color: mix(#000, $primary-color, 25%);
-  }
-}
-
-.search-icon {
-  width: 100%;
-  height: 100%;
-}
-
-#searchHint {
+#search_hint {
   display: none;
   position: absolute;
   top: 50%;
@@ -43,14 +19,6 @@
   margin-left: 10px;
 }
 
-.search__toggle:hover #searchHint {
-  display: inline;
-  -webkit-animation: $intro-transition;
-  animation: $intro-transition;
-  -webkit-animation-delay: 0.15s;
-  animation-delay: 0.15s;
-}
-
 .search-content {
   display: none;
   visibility: hidden;