Added a 'Dark mode' switch under Inställningar>Konto and fixed some b…

…ugs.
fsek · Oct 16, 2020 · 25e4037 · 25e4037
1 parent d728c5a
commit 25e4037
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 12 deletions.
diff --git a/www/about_app.html b/www/about_app.html
@@ -30,6 +30,7 @@
       <p class="contributor">Ludwig Linder (S20)</p>
       <p class="contributor">Louise Drenth (S20)</p>
       <p class="contributor">Johanna Gustafson (S20)</p>
+      <p class="contributor">Hannes Ryberg (S19, S20)</p>
     </div>
     <img class="login-logo" id="fredmansky" src="img/FredmanskyBeer.png"></img>
   </div>

diff --git a/www/index.html b/www/index.html
@@ -17,7 +17,6 @@
   <link rel="stylesheet" href="compiled_css/font-awesome.min.css">
   <link rel="stylesheet" href="compiled_css/index.css">
 </head>
-
 <body class="color-theme-orange">
   <div id="app">
     <!-- Login screen -->

diff --git a/www/js/event.js b/www/js/event.js
@@ -78,7 +78,7 @@ function initEventPage(eventData) {
 
     if (sameDay(startDate, endDate)) {
       switch (eventData.dot) {
-        case 'single':
+        case 'single'key: "value", 
           startDate = startDate.hhmm() + ' (.)';
           break;
         case 'double':

diff --git a/www/js/index.js b/www/js/index.js
@@ -365,6 +365,10 @@ function onBackKey() {
  * web API version using the function "checkAPIVersion" defined in check_version.js.
  */
 document.addEventListener('deviceready', function() {
+  // Sets app to dark mode, if turned on
+  if (localStorage.getItem('dark-mode') == 'on') {
+    $('body').attr('class', 'theme-dark');
+  }
   // Redirect from the login screen if the user has signed in before
   $.auth.validateToken()
     .done(function() {

diff --git a/www/js/user_page.js b/www/js/user_page.js
@@ -103,6 +103,12 @@ function initUserPage() {
     // Add member date to the page while setting it to the fullDate type
     var memberDate = new Date(user.member_at).fullDate();
     userContent.find('#user-member-at').html('Medlemskap sedan ' + memberDate);
+
+    // Toggles the dark mode checkbox
+    if (localStorage.getItem('dark-mode') == 'on') {
+      $('input[name="dark_mode"]').prop('checked', true);
+    }
+
   }
 
   function initProgramPicker(selectedProgram) {
@@ -288,6 +294,14 @@ function initUserPage() {
           app.dialog.close();
           app.dialog.alert('Kunde inte uppdatera dina användarinställningar. Kontrollera din internetanslutning och försök igen :(', 'Misslyckades att spara');
         });
+
+        if ($('input[name="dark_mode"]').prop('checked')) {
+          localStorage.setItem('dark-mode', 'on');
+          $('body').attr('class', 'theme-dark');
+        } else {
+          localStorage.setItem('dark-mode', 'off');
+          $('body').attr('class', 'color-theme-orange');
+        }
     });
   };
 

diff --git a/www/scss/partials/_album.scss b/www/scss/partials/_album.scss
@@ -24,7 +24,7 @@
 .album-content .block-title {
   font-weight: bold;
   font-size: 27px;
-  color: $fsek-orange;
+  color: $fsek-orange !important;
   white-space: initial;
   line-height: initial;
   margin: 32px 0px 15px 15px;

diff --git a/www/scss/partials/_cafe.scss b/www/scss/partials/_cafe.scss
@@ -57,7 +57,7 @@
   }
 
   .time-info {
-    color: #ffffff;
+    color: $white;
     display: block;
     left: -10%;
     position: absolute;
@@ -108,7 +108,7 @@
     padding-top: 15px;
 
     .time-info {
-      color: black;
+      color: $black;
     }
 
     .ios & {
@@ -120,12 +120,25 @@
     color: $white;
   }
 
+  .theme-dark .white-text {
+    color: $black !important;
+  }
+
   .black-text {
     color: $black;
   }
 
+  .theme-dark .black-text {
+    color: $light-gray !important;
+  }
+
   .timeline-year-title, .timeline-month-title {
-    color: black !important;
+    color: $black !important;
+  }
+
+  .theme-dark .timeline-year-title, 
+  .theme-dark .timeline-month-title {
+    color: $light-gray !important;
   }
 
   .timeline-item-date{
@@ -162,7 +175,7 @@
   .hilbert-avatar {
     height: 25vw;
     width: 40vw;
-    background-color: white;
+    background-color: $white;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
@@ -179,3 +192,19 @@
     margin-top: 30px;
   }
 }
+
+.ios .theme-dark .bg-color-white {
+  background-color: $black !important;
+}
+
+.md .theme-dark .bg-color-white {
+  background-color: $black !important;
+}
+
+.theme-dark .cafe-content .friday {
+  border-right-color: $dark-gray !important;
+}
+
+.theme-dark .cafe-content .black-text {
+  color: $light-gray !important;
+}
diff --git a/www/scss/partials/_calendar.scss b/www/scss/partials/_calendar.scss
@@ -1,3 +1,7 @@
+.theme-dark .calendar {
+  background-color: $black;
+}
+
 .calendar-page {
   display: flex;
   flex-direction: column;
@@ -11,6 +15,11 @@
 .calendar .calendar-week-header {
   height: 20px;
   color: $fsek-orange;
+  background-color: $white;
+}
+
+.theme-dark .calendar .calendar-week-header {
+  background-color: $black;
 }
 
 .calendar .calendar-day-selected span{
@@ -89,7 +98,11 @@ a.day-content-event {
 
 .day-content-event .card-content-inner {
   padding: 0 16px 5px 16px;
-  color: #000;
+  color: $black;
+}
+
+.theme-dark .day-content-event .card-content-inner {
+  color: $light-gray;
 }
 
 .day-content-event .card-media {

diff --git a/www/scss/partials/_contact.scss b/www/scss/partials/_contact.scss
@@ -4,6 +4,12 @@
   background: $white;
 }
 
+.theme-dark #contact-description,
+.theme-dark #contact-info,
+.theme-dark #contact-list {
+  background: $black;
+}
+
 #contact-description .list {
   margin: 0;
   font-size: 14px;
@@ -26,6 +32,10 @@
   background: $light-gray;
 }
 
+.theme-dark .page-content.contact-content {
+  background: $black;
+}
+
 .contact-text textarea {
   height: 100%;
 }
@@ -40,6 +50,10 @@
   overflow: visible;
 }
 
+.theme-dark .block-title {
+  color: $light-gray;
+}
+
 .contact-content .contact-button {
   background-color: $fsek-orange !important;
   margin-top: 20px;
@@ -78,3 +92,12 @@
 #contact-form .item-content.item-input {
   background: $white;
 }
+
+.theme-dark #contact-form .item-content.item-input {
+  background: $black;
+}
+
+.ios .color-theme-orange label.item-radio input[type=radio]:checked~.icon-radio,
+.ios .theme-dark label.item-radio input[type=radio]:checked~.icon-radio {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23ff9500'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
+}
diff --git a/www/scss/partials/_gallery.scss b/www/scss/partials/_gallery.scss
@@ -47,3 +47,11 @@
   height: 40px;
   width: 40px;
 }
+
+.navbar {
+  background-color: $fsek-orange;
+}
+
+.theme-dark .navbar {
+  background-color: $fsek-orange;
+}
diff --git a/www/scss/partials/_home.scss b/www/scss/partials/_home.scss
@@ -32,11 +32,20 @@
   color: $white !important;
 }
 
+.theme-dark .home-subnavbar .button {
+  border: 1px solid $dark-gray !important;
+  color: $dark-gray !important;
+}
+
 .home-subnavbar .button.tab-link-active {
   background-color: $white !important;
   color: $fsek-orange !important;
 }
 
+.theme-dark .home-subnavbar .button.tab-link-active {
+  background-color: $dark-gray !important;
+}
+
 .subtab .infinite-scroll-preloader {
   height: 37px;
   margin-bottom: 10px;
@@ -54,6 +63,10 @@
   margin-top: 10px;
 }
 
+.theme-dark #subtab-event .day-title {
+  background-color: $dark-gray;
+}
+
 #subtab-event p.disabled {
   text-align: center;
 }

diff --git a/www/scss/partials/_index.scss b/www/scss/partials/_index.scss
@@ -90,3 +90,26 @@ img.img-responsive {
     width: 35%;
   }
 }
+
+.theme-dark .item-link {
+  color: $light-gray !important;
+}
+
+.ios .color-theme-orange .navbar,
+.ios .theme-dark .navbar {
+  background-color: $fsek-orange;
+}
+
+.md .color-theme-orange .navbar,
+.md .theme-dark .navbar {
+  background-color: $fsek-orange;
+}
+
+.ios .icon-back,
+.ios .icon-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'12'%20height%3D'20'%20viewBox%3D'0%200%2012%2020'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M.18261596%209.4221638c.0352203-.05148305.07573462-.10050698.1215468-.14631917L9.1425872.4374202c.5830904-.58309038%201.52656832-.5849888%202.11643872.00488163.5857864.58578644.591222%201.53009836.0048816%202.11643873L3.82594417%209.9967039l7.43188553%207.4318855c.5830904.5830904.5849888%201.5265683-.0048817%202.1164387-.5857864.5857865-1.5300983.591222-2.11643868.0048816L.2980849%2010.7114853c-.3526746-.3526746-.3939974-.89699-.11546894-1.2893215z'%20fill%3D'%23ff9500'%20fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E");
+}
+
+.ios .theme-dark {
+
+}
diff --git a/www/scss/partials/_login.scss b/www/scss/partials/_login.scss
@@ -1,8 +1,8 @@
 .login-screen-content {
-  background-size: 200% 100%;
-  background-image: url("../img/login-background_full.png");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
+  background-size: 200% 100% !important;
+  background-image: url("../img/login-background_full.png") !important;
+  background-repeat: no-repeat !important;
+  background-attachment: fixed !important;
   overflow: hidden;
   height: 100%;
 }

diff --git a/www/scss/partials/_songbook.scss b/www/scss/partials/_songbook.scss
@@ -28,13 +28,22 @@
   line-height: initial;
 }
 
+.theme-dark .song-content .block-title{
+  color: $fsek-orange;
+}
+
 .song-content .block .auth-mel{
   margin-bottom: 0;
 }
 
 .song-content .block {
   margin-bottom: 16px;
   margin-top: 0;
+  color: $black;
+}
+
+.theme-dark .song-content .block {
+  color: $light-gray;
 }
 
 .song-content .block p{
@@ -50,6 +59,10 @@
   background-color: $white;
 }
 
+.theme-dark .song-content .song-text {
+  background-color: $dark-gray;
+}
+
 .song-content .song-text p:last-child{
   margin-bottom: 0;
 }
@@ -72,3 +85,7 @@
 .songbook-content .searchbar-not-found {
   font-size: 16px;
 }
+
+.theme-dark .searchbar {
+  background-color: $dark-gray !important;
+}