Merge pull request #113 from RDjarbeng/sidebarfix

fix for sidebar
RDjarbeng · May 26, 2022 · 7579ed7 · 7579ed7
2 parents 35a488c + e9b96c2
commit 7579ed7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 37 deletions.
diff --git a/app.js b/app.js
@@ -298,14 +298,14 @@ addWhatappEventHandler();
 
 // service worker
 
-if('serviceWorker' in navigator){
-    window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js')
-    .then( (reg)=>{ 
-        console.log('service worker registered', reg)
-    })
-        .catch((err)=> console.log('Service worker not registered', err));
-  });
+// if('serviceWorker' in navigator){
+//     window.addEventListener('load', () => {
+//     navigator.serviceWorker.register('/sw.js')
+//     .then( (reg)=>{ 
+//         console.log('service worker registered', reg)
+//     })
+//         .catch((err)=> console.log('Service worker not registered', err));
+//   });
 
-}
+// }
 
diff --git a/css/about.css b/css/about.css
@@ -149,6 +149,11 @@ hr{color:rgba(255, 255, 255, 0.2); width: 85%;}
   padding: 2.5vmin 0vmin 2.5vmin 4vmin;
   border-radius: 2.5vmin;
   margin: 0.5rem auto;
+  display: grid;
+  grid-template-areas: "icon text";
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.35rem;
 }
 .sidebar-list-items:hover{
   background: var(--bg-sidebarListHover);

diff --git a/css/countdown-list.css b/css/countdown-list.css
@@ -319,6 +319,11 @@ hr{color:rgba(255, 255, 255, 0.2); width: 85%;}
   padding: 2.5vmin 0vmin 2.5vmin 4vmin;
   border-radius: 2.5vmin;
   margin: 0.5rem auto;
+  display: grid;
+  grid-template-areas: "icon text";
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.35rem;
 }
 .sidebar-list-items:hover{
   background: var(--bg-sidebarListHover);

diff --git a/css/styles.css b/css/styles.css
@@ -329,7 +329,13 @@ hr{color:rgba(255, 255, 255, 0.2); width: 85%;}
   padding: 2.5vmin 0vmin 2.5vmin 4vmin;
   border-radius: 2.5vmin;
   margin: 0.5rem auto;
+  display: grid;
+  grid-template-areas: "icon text";
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.35rem;
 }
+
 .sidebar-list-items:hover{
   background: var(--bg-sidebarListHover);
 }

diff --git a/css/today.css b/css/today.css
@@ -343,10 +343,15 @@ hr {
 .sidebar-list {
     width: 90%;
 }
-.sidebar-list-items {
-    padding: 2.5vmin 0vmin 2.5vmin 4vmin;
-    border-radius: 2.5vmin;
-    margin: 0.5rem auto;
+.sidebar-list-items{
+  padding: 2.5vmin 0vmin 2.5vmin 4vmin;
+  border-radius: 2.5vmin;
+  margin: 0.5rem auto;
+  display: grid;
+  grid-template-areas: "icon text";
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.35rem;
 }
 .sidebar-list-items:hover {
     background: var(--bg-sidebarListHover);

diff --git a/html/about.html b/html/about.html
@@ -37,16 +37,16 @@
             <div class="opt-group">OPTIONS</div>
             <div class="sidebar-list">
                 <div class="sidebar-list-items">
-                    <i class="fas fa-home fa-fw"></i> &nbsp;&nbsp;&nbsp;Home
+                    <i class="fas fa-home fa-fw"></i> <span>Home</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-clock fa-fw"></i> &nbsp;&nbsp;&nbsp;My CountDowns
+                    <i class="fas fa-clock fa-fw"></i> <span>My CountDowns</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-upload fa-fw"></i> &nbsp;&nbsp;&nbsp;Set Custom Background
+                    <i class="fas fa-upload fa-fw"></i> <span>Set Custom Background</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-adjust fa-fw"></i> &nbsp;&nbsp;&nbsp;Change Theme
+                    <i class="fas fa-adjust fa-fw"></i> <span>Change Theme</span>
                 </div>
                 <section class="pick-color">
                     <span class="pick-color-ico" data-settheme="red"></span>
@@ -58,10 +58,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-calendar-day fa-fw"></i> &nbsp;&nbsp;&nbsp;Today
+                    <i class="fas fa-calendar-day fa-fw"></i> <span>Today</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-question-circle fa-fw"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-question-circle fa-fw"></i> <span>About</span>
                 </div>
             </div>
         </section>

diff --git a/html/countdown-list.html b/html/countdown-list.html
@@ -39,16 +39,16 @@
             <div class="opt-group">OPTIONS</div>
             <div class="sidebar-list">
                 <div class="sidebar-list-items">
-                    <i class="fas fa-home fa-fw"></i> &nbsp;&nbsp;&nbsp;Home
+                    <i class="fas fa-home fa-fw"></i> <span>Home</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-clock fa-fw"></i> &nbsp;&nbsp;&nbsp;My CountDowns
+                    <i class="fas fa-clock fa-fw"></i> <span>My CountDowns</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-upload fa-fw"></i> &nbsp;&nbsp;&nbsp;Set Custom Background
+                    <i class="fas fa-upload fa-fw"></i> <span>Set Custom Background</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-adjust fa-fw"></i> &nbsp;&nbsp;&nbsp;Change Theme
+                    <i class="fas fa-adjust fa-fw"></i> <span>Change Theme</span>
                 </div>
                 <section class="pick-color">
                     <span class="pick-color-ico" data-settheme="red"></span>
@@ -60,10 +60,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-calendar-day fa-fw"></i> &nbsp;&nbsp;&nbsp;Today
+                    <i class="fas fa-calendar-day fa-fw"></i> <span>Today</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-question-circle fa-fw"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-question-circle fa-fw"></i> <span>About</span>
                 </div>
             </div>
         </section>

diff --git a/html/today.html b/html/today.html
@@ -33,16 +33,16 @@
             <div class="opt-group">OPTIONS</div>
             <div class="sidebar-list">
                 <div class="sidebar-list-items">
-                    <i class="fas fa-home fa-fw"></i> &nbsp;&nbsp;&nbsp;Home
+                    <i class="fas fa-home fa-fw"></i> <span>Home</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-clock fa-fw"></i> &nbsp;&nbsp;&nbsp;My CountDowns
+                    <i class="fas fa-clock fa-fw"></i> <span>My CountDowns</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-upload fa-fw"></i> &nbsp;&nbsp;&nbsp;Set Custom Background
+                    <i class="fas fa-upload fa-fw"></i> <span>Set Custom Background</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-adjust fa-fw"></i> &nbsp;&nbsp;&nbsp;Change Theme
+                    <i class="fas fa-adjust fa-fw"></i> <span>Change Theme</span>
                 </div>
                 <section class="pick-color">
                     <span class="pick-color-ico" data-settheme="red"></span>
@@ -54,10 +54,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-calendar-day fa-fw"></i> &nbsp;&nbsp;&nbsp;Today
+                    <i class="fas fa-calendar-day fa-fw"></i> <span>Today</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-question-circle fa-fw"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-question-circle fa-fw"></i> <span>About</span>
                 </div>
             </div>
         </section>

diff --git a/index.html b/index.html
@@ -36,16 +36,16 @@
             <div class="opt-group">OPTIONS</div>
             <div class="sidebar-list">
                 <div class="sidebar-list-items">
-                    <i class="fas fa-home fa-fw"></i> &nbsp;&nbsp;&nbsp;Home
+                    <i class="fas fa-home fa-fw"></i> <span>Home</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-clock fa-fw"></i> &nbsp;&nbsp;&nbsp;My CountDowns
+                    <i class="fas fa-clock fa-fw"></i> <span>My CountDowns</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-upload fa-fw"></i> &nbsp;&nbsp;&nbsp;Set Custom Background
+                    <i class="fas fa-upload fa-fw"></i> <span>Set Custom Background</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-adjust fa-fw"></i> &nbsp;&nbsp;&nbsp;Change Theme
+                    <i class="fas fa-adjust fa-fw"></i> <span>Change Theme</span>
                 </div>
                 <section class="pick-color">
                     <span class="pick-color-ico" data-settheme="red"></span>
@@ -57,10 +57,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-calendar-day fa-fw"></i> &nbsp;&nbsp;&nbsp;Today
+                    <i class="fas fa-calendar-day fa-fw"></i> <span>Today</span>
                 </div>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-question-circle fa-fw"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-question-circle fa-fw"></i> <span>About</span>
                 </div>
             </div>
         </section>