Merge branch 'master' into selectable-browser-executor

changedetectionio/static/js/toggle-theme.js

@@ -3,45 +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 = () => {
-    const htmlElement = document.getElementsByTagName("html");
-    const isDarkMode = htmlElement[0].dataset.darkmode === "true";
-    htmlElement[0].dataset.darkmode = !isDarkMode;
-    setCookieValue(!isDarkMode);
-  };
+    button.onclick = () => {
+        const htmlElement = document.getElementsByTagName("html");
+        const isDarkMode = htmlElement[0].dataset.darkmode === "true";
+        htmlElement[0].dataset.darkmode = !isDarkMode;
+        setCookieValue(!isDarkMode);
+    };
 
-  const setCookieValue = (value) => {
-    document.cookie = `css_dark_mode=${value};max-age=31536000;path=/`
-  }
+    const setCookieValue = (value) => {
+        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");
-  window.addEventListener('keydown', function (e) {
+    const search_q = document.getElementById("search-q");
+    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.classList.toggle('expanded');
-      search_q.focus();
-  });
-
-
-  search_q.onkeydown = (e) => {
-    var key = e.keyCode || e.which;
-    if (key === 13) {
-      document.searchForm.submit();
+      search_q.onkeydown = (e) => {
+        var key = e.keyCode || e.which;
+        if (key === 13) {
+          document.searchForm.submit();
+        }
+      };
+      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();
+        }
+      };
     }
-  };
-  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)';
+    });
 });

changedetectionio/static/styles/scss/parts/_darkmode.scss

@@ -1,6 +1,6 @@
 
 #toggle-light-mode {
-  width: 3rem;
+/*  width: 3rem;*/
   /* default */
   .icon-dark {
     display: none;

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

@@ -0,0 +1,38 @@
+#overlay {
+
+  opacity: 0.95;
+  position: fixed;
+
+  width: 350px;
+  max-width: 100%;
+  height: 100%;
+  top: 0;
+  right: -350px;
+  background-color: var(--color-table-stripe);
+  z-index: 2;
+
+  transform: translateX(0);
+  transition: transform .5s ease;
+
+
+  &.visible {
+    transform: translateX(-100%);
+
+  }
+
+  .content {
+    font-size: 0.875rem;
+    padding: 1rem;
+    margin-top: 5rem;
+    max-width: 400px;
+    color: var(--color-watch-table-row-text);
+  }
+}
+
+#heartpath {
+  &:hover {
+    fill: #ff0000 !important;
+    transition: all ease 0.3s !important;
+  }
+  transition: all ease 0.3s !important;
+}

changedetectionio/static/styles/scss/parts/_menu.scss

@@ -0,0 +1,25 @@
+.pure-menu-link {
+  padding: 0.5rem 1em;
+  line-height: 1.2rem;
+}
+
+.pure-menu-item {
+  svg {
+    height: 1.2rem;
+  }
+  * {
+    vertical-align: middle;
+  }
+  .github-link {
+    height: 1.8rem;
+    display: block;
+    svg {
+      height: 100%;
+    }
+  }
+  .bi-heart {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

changedetectionio/static/styles/scss/styles.scss

@@ -10,10 +10,13 @@
 @import "parts/_spinners";
 @import "parts/_variables";
 @import "parts/_darkmode";
+@import "parts/_menu";
+@import "parts/_love";
 
 body {
   color: var(--color-text);
   background: var(--color-background-page);
+  font-family: Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
 }
 
 .visually-hidden {
@@ -56,11 +59,6 @@ a.github-link {
   }
 }
 
-
-#toggle-search {
-  width: 2rem;
-}
-
 #search-q {
   opacity: 0;
   -webkit-transition: all .9s ease;
@@ -1083,3 +1081,4 @@ ul {
   border-radius: 3px;
   white-space: nowrap;
 }
+

changedetectionio/static/styles/styles.css

@@ -352,7 +352,7 @@ html[data-darkmode="true"] {
       color: var(--color-watch-table-error); }
 
 #toggle-light-mode {
-  width: 3rem;
+  /*  width: 3rem;*/
   /* default */ }
   #toggle-light-mode .icon-dark {
     display: none; }
@@ -363,9 +363,56 @@ html[data-darkmode="true"] #toggle-light-mode .icon-light {
 html[data-darkmode="true"] #toggle-light-mode .icon-dark {
   display: block; }
 
+.pure-menu-link {
+  padding: 0.5rem 1em;
+  line-height: 1.2rem; }
+
+.pure-menu-item svg {
+  height: 1.2rem; }
+
+.pure-menu-item * {
+  vertical-align: middle; }
+
+.pure-menu-item .github-link {
+  height: 1.8rem;
+  display: block; }
+  .pure-menu-item .github-link svg {
+    height: 100%; }
+
+.pure-menu-item .bi-heart:hover {
+  cursor: pointer; }
+
+#overlay {
+  opacity: 0.95;
+  position: fixed;
+  width: 350px;
+  max-width: 100%;
+  height: 100%;
+  top: 0;
+  right: -350px;
+  background-color: var(--color-table-stripe);
+  z-index: 2;
+  transform: translateX(0);
+  transition: transform .5s ease; }
+  #overlay.visible {
+    transform: translateX(-100%); }
+  #overlay .content {
+    font-size: 0.875rem;
+    padding: 1rem;
+    margin-top: 5rem;
+    max-width: 400px;
+    color: var(--color-watch-table-row-text); }
+
+#heartpath {
+  transition: all ease 0.3s !important; }
+  #heartpath:hover {
+    fill: #ff0000 !important;
+    transition: all ease 0.3s !important; }
+
 body {
   color: var(--color-text);
-  background: var(--color-background-page); }
+  background: var(--color-background-page);
+  font-family: Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif; }
 
 .visually-hidden {
   clip: rect(0 0 0 0);
@@ -397,9 +444,6 @@ a.github-link {
   a.github-link:hover {
     color: var(--color-icon-github-hover); }
 
-#toggle-search {
-  width: 2rem; }
-
 #search-q {
   opacity: 0;
   -webkit-transition: all .9s ease;