layout changes + icon updates

brown-SSW · Feb 11, 2022 · 4ab91b3 · 4ab91b3
1 parent f63020c
commit 4ab91b3
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 33 deletions.
diff --git a/docs/arrow-left-circle.svg b/docs/arrow-left-circle.svg
diff --git a/docs/arrow-right-circle.svg b/docs/arrow-right-circle.svg
diff --git a/docs/close.svg b/docs/close.svg
diff --git a/docs/expand.svg b/docs/expand.svg
diff --git a/docs/index.html b/docs/index.html
@@ -51,16 +51,21 @@ <h1>The Solar Charger</h1>
             <div id="energy-monthly" class='plot'></div>
             <div id="batt-daily" class='plot'></div>
             <div id='station' class="carousel">
-                <button id="left-btn" class='carousel-nav'>&#11164;</button>
+                <button id="left-btn" class='carousel-nav'><img src="arrow-left-circle.svg"></button>
                 <!-- <img id="stn" src="" alt=""> -->
                 <div id="stn" style='background-image: none;'></div>
-                <button id="right-btn" class='carousel-nav'>&#11166;</button>
+                <button id="right-btn" class='carousel-nav'><img src="arrow-right-circle.svg"></button>
             </div>
         </div>
     </div>
     <!-- <div id="s4" class='plot'></div> -->
     <script type="text/javascript">
-    let pictures = ['https://images.unsplash.com/photo-1537000092872-06bbf7b64f60?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=14d2fe1244b43a1841569da918066fc4&auto=format&fit=crop&w=1050&q=80', 'https://images.unsplash.com/photo-1537005081207-04f90e3ba640?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ffb71f2a2843e802e238c5ff8e4bbb8c&auto=format&fit=crop&w=764&q=80', 'https://images.unsplash.com/photo-1536873602512-8e88cc8398b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60a351868d0839e686c8c5a286265f8d&auto=format&fit=crop&w=1050&q=80'];
+    let pictures = [
+        'https://images.unsplash.com/photo-1614366502473-e54666693b44',
+        'https://images.unsplash.com/photo-1629726797843-618688139f5a',
+        'https://images.unsplash.com/photo-1625301840055-7c1b7198cfc0',
+        'https://images.unsplash.com/photo-1613665813446-82a78c468a1d'
+    ];
     let upTime = 30; //seconds
     let downTime = 5; //seconds
 

diff --git a/docs/maximize-2.svg b/docs/maximize-2.svg
diff --git a/docs/minimize-2.svg b/docs/minimize-2.svg
diff --git a/docs/old_script.js b/docs/old_script.js
@@ -1,3 +1,70 @@
+var r = document.querySelector(':root');
+const setIdle = () => {
+    img.style.animation = "idle .5s linear infinite";
+}
+const moveRight = () => {
+    if (position >= pictures.length - 1) {
+        position = 0;
+        img.style.animation = "sweep .5s ease-in-out";
+        sleep(500);
+        img.style.backgroundImage = 'url(' + pictures[position] + ')';
+        img.style.animation = "sweep-right .5s ease-in-out";
+        sleep(500);
+        setIdle();
+        // img.src = pictures[position];
+        return;
+    }
+    r.style.setProperty('--old', pictures[position]);
+    r.style.setProperty('--new', pictures[position+1]);
+    img.style.animation = "pic-right 1s ease-in-out";
+    // sleep(500);
+    img.style.backgroundImage = 'url(' + pictures[position + 1] + ')';
+    // img.style.animation = "sweep-right .5s ease-in-out";
+    // setTimeout(setIdle, 500);
+    // sleep(500);
+    setIdle();
+    // img.src = pictures[position + 1];
+    position++;
+}
+function sleep(milliseconds) {
+  const date = Date.now();
+  let currentDate = null;
+  do {
+    currentDate = Date.now();
+  } while (currentDate - date < milliseconds);
+}
+const moveLeft = () => {
+    if (position < 1) {
+        position = pictures.length - 1;
+        // img.style.animation = "sweep-rev .5s ease-in-out";
+        // sleep(500);
+        img.style.animation = "sweep-rev .5s ease-in-out";
+        sleep(1000);
+        img.style.backgroundImage = 'url(' + pictures[position] + ')';
+
+        // setTimeout(setIdle,500);
+        // sleep(500);
+        // img.style.animation = "idle .5s linear infinite";
+        // img.src = pictures[position];
+        return;
+    }
+    // img.src = pictures[position - 1];
+    // img.style.animation = "sweep-rev .5s ease-in-out";
+    // sleep(500);
+    img.style.animation = "sweep-rev .5s ease-in-out";
+    sleep(1000);
+    img.style.backgroundImage = 'url(' + pictures[position - 1] + ')';
+    sleep(1000);
+    img.style.animation = "sweep .5s ease-in-out";
+
+    position--;
+    setTimeout(setIdle,500);
+    // sleep(500);
+    // img.style.animation = "idle .5s linear infinite";
+
+}
+
+
 function loadJSONOld() {
     //http request to get the json
     var http = new XMLHttpRequest();

diff --git a/docs/styles.css b/docs/styles.css
@@ -101,23 +101,23 @@ strong {
 
 #power-daily {
     grid-column-start: 1;
-    grid-row-start: 1;
+    grid-row-start: 2;
 }
 
 #energy-monthly {
     grid-column-start: 2;
-    grid-row-start: 1;
+    grid-row-start: 2;
 }
 
 #batt-daily {
     grid-column-start: 1;
-    grid-row-start: 2;
+    grid-row-start: 1;
     /*display: none;*/
 }
 
 #station {
     grid-column-start: 2;
-    grid-row-start: 2;
+    grid-row-start: 1;
     vertical-align: middle;
     /*padding: 80px;*/
 }
@@ -155,15 +155,16 @@ button.carousel-nav {
     min-height: 10%;
     border: none;
     outline: none;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 2px;
-    color: white;
-    font-size: 2rem;
-    text-align: center;
-    /*vertical-align: super;*/
+    background: rgba(0,0,0, 0.5);
+    border-radius: 50%;
     cursor: pointer;
-    padding: 1rem;
+    padding: 0.5rem;
     display: flex;
+    transition: background 100ms ease;
+}
+
+button.carousel-nav:hover, button.carousel-nav:focus {
+    background: rgba(158, 184, 172, 0.5);
 }
 
 details[open] summary~* {
@@ -186,6 +187,18 @@ details summary::-webkit-details-marker {
     }
 }
 
+@keyframes sweep-rev {
+    0% {
+        opacity: 0;
+        transform: translateX(0)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(-100%)
+    }
+}
+
 @keyframes sweep-right {
     0% {
         opacity: 0;
@@ -202,6 +215,26 @@ details summary::-webkit-details-marker {
     100% {}
 }
 
+@keyframes pic-right{
+    0%{
+        opacity: 1;
+        transform: translateX(0);
+        background-image:  url(var(--old));
+    }
+
+    50%{
+        opacity: 0;
+        transform: translateX(-100%);
+        /*background-image:  var(--old);*/
+    }
+
+    100%{
+        opacity: 1;
+        transform: translateX(0);
+        background-image:  url(var(--new));
+    }
+}
+
 summary {
     list-style-type: none;
     /*vertical-align: middle;*/
@@ -251,14 +284,14 @@ summary::before {
     display: inline-block;
     float: left;
     color: inherit;
-    background-image: url(expand.svg);
+    background-image: url(maximize-2.svg);
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 details[open] > summary::before {
-    background-image: url(close.svg);
+    background-image: url(minimize-2.svg);
 
 }