UI - Adding support-us widget <3 (#1956)

changedetectionio/static/js/toggle-theme.js

@@ -44,4 +44,9 @@ $(document).ready(function () {
     }
   };
 
+  $('#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

@@ -9,6 +9,8 @@
 @import "parts/_spinners";
 @import "parts/_variables";
 @import "parts/_darkmode";
+@import "parts/_menu";
+@import "parts/_love";
 
 body {
   color: var(--color-text);
@@ -55,11 +57,6 @@ a.github-link {
   }
 }
 
-
-#toggle-search {
-  width: 2rem;
-}
-
 #search-q {
   opacity: 0;
   -webkit-transition: all .9s ease;
@@ -1082,3 +1079,4 @@ ul {
   border-radius: 3px;
   white-space: nowrap;
 }
+

changedetectionio/static/styles/styles.css

@@ -331,7 +331,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; }
@@ -342,6 +342,52 @@ 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); }
@@ -376,9 +422,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;

changedetectionio/templates/base.html

@@ -108,6 +108,20 @@
               </span>
             </button>
           </li>
+          <li class="pure-menu-item" id="heart-us">
+                <svg
+                   fill="#ff0000"
+                   class="bi bi-heart"
+                   preserveAspectRatio="xMidYMid meet"
+                   viewBox="0 0 16.9 16.1"
+                   id="svg-heart"
+                   xmlns="http://www.w3.org/2000/svg"
+                   xmlns:svg="http://www.w3.org/2000/svg">
+                  <path id="heartpath" d="M 5.338316,0.50302766 C 0.71136983,0.50647126 -3.9576371,7.2707777 8.5004254,15.503028 23.833425,5.3700277 13.220206,-2.5384409 8.6762066,1.6475589 c -0.060791,0.054322 -0.11943,0.1110064 -0.1757812,0.1699219 -0.057,-0.059 -0.1157813,-0.116875 -0.1757812,-0.171875 C 7.4724566,0.86129334 6.4060729,0.50223298 5.338316,0.50302766 Z"
+                     style="fill:var(--color-background);fill-opacity:1;stroke:#ff0000;stroke-opacity:1" />
+                </svg>
+
+          </li>
           <li class="pure-menu-item">
             <a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
               {% include "svgs/github.svg" %}
@@ -131,7 +145,44 @@
       <div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>
     {% endif %}
     <section class="content">
-      <header>
+        <div id="overlay">
+            <div class="content">
+                <strong>changedetection.io needs your support!</strong><br>
+                <p>
+                    You can help us by supporting changedetection.io on these platforms;
+                </p>
+                <p>
+                <ul>
+                    <li>
+                        <a href="https://alternativeto.net/software/changedetection-io/about/">Rate us at
+                        AlternativeTo.net</a>
+                    </li>
+                <li>
+                    <a href="https://github.com/dgtlmoon/changedetection.io">Star us on GitHub</a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/change_det_io">Follow us at Twitter/X</a>
+                </li>
+                <li>
+                    <a href="https://www.linkedin.com/company/changedetection-io">Check us out on LinkedIn</a>
+                </li>
+                <li>
+                    And tell your friends and colleagues :)
+                </li>
+                </ul>
+                </p>
+                <p>
+                    The more popular changedetection.io is, the more time we can dedicate to adding amazing features!
+                </p>
+                <p>
+                    Many thanks :)<br>
+                </p>
+                <p>
+                    <i>changedetection.io team</i>
+                </p>
+            </div>
+        </div>
+        <header>
         {% block header %}{% endblock %}
       </header>
 

changedetectionio/templates/svgs/github.svg

@@ -1,3 +1,6 @@
-<svg class="octicon octicon-mark-github v-align-middle" height="32" viewbox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
+<svg class="octicon octicon-mark-github v-align-middle"  viewbox="0 0 16 16" version="1.1" aria-hidden="true">
-  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+    <path
+     fill-rule="evenodd"
+     d="M 8,0 C 3.58,0 0,3.58 0,8 c 0,3.54 2.29,6.53 5.47,7.59 0.4,0.07 0.55,-0.17 0.55,-0.38 0,-0.19 -0.01,-0.82 -0.01,-1.49 C 4,14.09 3.48,13.23 3.32,12.78 3.23,12.55 2.84,11.84 2.5,11.65 2.22,11.5 1.82,11.13 2.49,11.12 3.12,11.11 3.57,11.7 3.72,11.94 4.44,13.15 5.59,12.81 6.05,12.6 6.12,12.08 6.33,11.73 6.56,11.53 4.78,11.33 2.92,10.64 2.92,7.58 2.92,6.71 3.23,5.99 3.74,5.43 3.66,5.23 3.38,4.41 3.82,3.31 c 0,0 0.67,-0.21 2.2,0.82 0.64,-0.18 1.32,-0.27 2,-0.27 0.68,0 1.36,0.09 2,0.27 1.53,-1.04 2.2,-0.82 2.2,-0.82 0.44,1.1 0.16,1.92 0.08,2.12 0.51,0.56 0.82,1.27 0.82,2.15 0,3.07 -1.87,3.75 -3.65,3.95 0.29,0.25 0.54,0.73 0.54,1.48 0,1.07 -0.01,1.93 -0.01,2.2 0,0.21 0.15,0.46 0.55,0.38 A 8.013,8.013 0 0 0 16,8 C 16,3.58 12.42,0 8,0 Z"
+     id="path2" />
 </svg>