UI - Fixing issue where search box JS interfered with page render when logged out

changedetectionio/static/js/toggle-theme.js

@@ -3,50 +3,50 @@
  * Toggles theme between light and dark mode.
  */
 $(document).ready(function () {
-  const button = document.getElementById("toggle-light-mode");
+    const button = document.getElementById("toggle-light-mode");
 
-  button.onclick = () => {
+    button.onclick = () => {
-    const htmlElement = document.getElementsByTagName("html");
+        const htmlElement = document.getElementsByTagName("html");
-    const isDarkMode = htmlElement[0].dataset.darkmode === "true";
+        const isDarkMode = htmlElement[0].dataset.darkmode === "true";
-    htmlElement[0].dataset.darkmode = !isDarkMode;
+        htmlElement[0].dataset.darkmode = !isDarkMode;
-    setCookieValue(!isDarkMode);
+        setCookieValue(!isDarkMode);
-  };
+    };
 
-  const setCookieValue = (value) => {
+    const setCookieValue = (value) => {
-    document.cookie = `css_dark_mode=${value};max-age=31536000;path=/`
+        document.cookie = `css_dark_mode=${value};max-age=31536000;path=/`
-  }
+    }
 
-  // Search input box behaviour
+    // Search input box behaviour
     const toggle_search = document.getElementById("toggle-search");
-  const search_q = document.getElementById("search-q");
+    const search_q = document.getElementById("search-q");
-  window.addEventListener('keydown', function (e) {
+    if(search_q) {
+      window.addEventListener('keydown', function (e) {
+        if (e.altKey == true && e.keyCode == 83) {
+          search_q.classList.toggle('expanded');
+          search_q.focus();
+        }
+      });
 
-    if (e.altKey == true && e.keyCode == 83)
+      search_q.onkeydown = (e) => {
-      search_q.classList.toggle('expanded');
+        var key = e.keyCode || e.which;
-      search_q.focus();
+        if (key === 13) {
-  });
+          document.searchForm.submit();
-
+        }
-
+      };
-  search_q.onkeydown = (e) => {
+      toggle_search.onclick = () => {
-    var key = e.keyCode || e.which;
+        // Could be that they want to search something once text is in there
-    if (key === 13) {
+        if (search_q.value.length) {
-      document.searchForm.submit();
+          document.searchForm.submit();
+        } else {
+          // If not..
+          search_q.classList.toggle('expanded');
+          search_q.focus();
+        }
+      };
     }
-  };
-  toggle_search.onclick = () => {
-    // Could be that they want to search something once text is in there
-    if (search_q.value.length) {
-      document.searchForm.submit();
-    } else {
-      // If not..
-      search_q.classList.toggle('expanded');
-      search_q.focus();
-    }
-  };
-
-  $('#heart-us').click(function () {
-    $("#overlay").toggleClass('visible');
-    heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)';
-  });
 
+    $('#heart-us').click(function () {
+        $("#overlay").toggleClass('visible');
+        heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)';
+    });
 });

changedetectionio/static/styles/scss/parts/_love.scss

@@ -31,8 +31,8 @@
 
 #heartpath {
   &:hover {
-      fill: #ff0000 !important;
+    fill: #ff0000 !important;
-      transition: all ease 0.3s !important;
-  }
     transition: all ease 0.3s !important;
-}
+  }
+  transition: all ease 0.3s !important;
+}