From 925495d3fd0401223537accab697714246796af5 Mon Sep 17 00:00:00 2001 From: Hannes Ryberg Date: Tue, 22 Sep 2020 22:22:50 +0200 Subject: [PATCH] =?UTF-8?q?Added=20a=20'Dark=20mode'=20switch=20under=20In?= =?UTF-8?q?st=C3=A4llningar>Konto=20and=20fixed=20some=20bugs.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- www/about_app.html | 1 + www/index.html | 1 - www/js/event.js | 2 +- www/js/index.js | 4 +++ www/js/user_page.js | 14 +++++++++ www/scss/partials/_album.scss | 4 +-- www/scss/partials/_cafe.scss | 37 +++++++++++++++++++++--- www/scss/partials/_calendar.scss | 15 +++++++++- www/scss/partials/_contact.scss | 23 +++++++++++++++ www/scss/partials/_gallery.scss | 8 ++++++ www/scss/partials/_home.scss | 13 +++++++++ www/scss/partials/_index.scss | 23 +++++++++++++++ www/scss/partials/_login.scss | 8 +++--- www/scss/partials/_songbook.scss | 35 +++++++++++++++++------ www/scss/partials/_user_page.scss | 47 +++++++++++++++++++++++++++++-- www/scss/partials/_variables.scss | 4 +++ www/user_page.html | 11 ++++++++ 17 files changed, 226 insertions(+), 24 deletions(-) diff --git a/www/about_app.html b/www/about_app.html index 97008b2e..3516cab5 100644 --- a/www/about_app.html +++ b/www/about_app.html @@ -30,6 +30,7 @@

Ludwig Linder (S20)

Louise Drenth (S20)

Johanna Gustafson (S20)

+

Hannes Ryberg (S19, S20)

diff --git a/www/index.html b/www/index.html index cd0ae837..8dae800a 100644 --- a/www/index.html +++ b/www/index.html @@ -17,7 +17,6 @@ -
diff --git a/www/js/event.js b/www/js/event.js index 33324a7a..2d13ffcb 100644 --- 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 index 276e25b1..1f3e58f2 100644 --- 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 index a8aabcee..3823a88e 100644 --- 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 index c2020855..f991f599 100644 --- a/www/scss/partials/_album.scss +++ b/www/scss/partials/_album.scss @@ -24,13 +24,13 @@ .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; } -.album-content .block span{ +.album-content .block span { color: $fsek-orange; } diff --git a/www/scss/partials/_cafe.scss b/www/scss/partials/_cafe.scss index 68137d80..0776ec0e 100644 --- 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 index 5bec5a9e..035b068d 100644 --- 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 index ca3fe152..226f86ee 100644 --- 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 index c0332635..85f8dc08 100644 --- 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 index 9aa81fe9..07f6994a 100644 --- 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 index fd5cdbab..cd8dec80 100644 --- 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 index 77d2dad8..fe3ba72c 100644 --- 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 index a3a059b5..faad7d6f 100644 --- a/www/scss/partials/_songbook.scss +++ b/www/scss/partials/_songbook.scss @@ -1,4 +1,4 @@ -.searchbar-songbook .searchbar-disable-button{ +.searchbar-songbook .searchbar-disable-button { color: $fsek-orange !important; } @@ -7,7 +7,7 @@ margin-bottom: 0; } -#songbook-list .list-group-title{ +#songbook-list .list-group-title { font-weight: bold; color: #3c3c3c; } @@ -21,28 +21,37 @@ background: $fsek-orange !important; } -.song-content .block-title{ +.song-content .block-title { font-size: 27px; color: $fsek-orange; white-space: initial; line-height: initial; } -.song-content .block .auth-mel{ +.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{ +.song-content .block p { font-size: 16px; margin-top: 0; } -.song-content .block span{ +.song-content .block span { color: $fsek-orange; } @@ -50,15 +59,19 @@ background-color: $white; } -.song-content .song-text p:last-child{ +.theme-dark .song-content .song-text { + background-color: $dark-gray; +} + +.song-content .song-text p:last-child { margin-bottom: 0; } -.song-content .song-text .block-inner{ +.song-content .song-text .block-inner { padding: 15px 0; } -.songbook-content .list ul::before, .songbook-content .list ul:after{ +.songbook-content .list ul::before, .songbook-content .list ul:after { display: none; } @@ -72,3 +85,7 @@ .songbook-content .searchbar-not-found { font-size: 16px; } + +.theme-dark .searchbar { + background-color: $dark-gray !important; +} diff --git a/www/scss/partials/_user_page.scss b/www/scss/partials/_user_page.scss index fb2aa087..f10f771e 100644 --- a/www/scss/partials/_user_page.scss +++ b/www/scss/partials/_user_page.scss @@ -2,10 +2,23 @@ width: 100%; } +.theme-dark .input-with-value { + color: $white; +} + +.theme-dark #user-form { + color: $white; + background-color: $black; +} + +.theme-dark .navbar { + background-color: $light-orange; +} + .user-avatar { height: 31vw; width: 31vw; - background-color: white; + background-color: $white; background-size: contain; background-repeat: no-repeat; background-image: url("../img/missing_thumb.png"); @@ -16,6 +29,7 @@ } .user-container { + color: $black; width: 100%; height: 52vw; padding-top: 26px; @@ -27,7 +41,7 @@ text-align: center; padding-top: 17px; font-size: 18px; - color: white; + color: $white; } .user-content { @@ -52,9 +66,38 @@ } #user-form { + color: $black; margin: 0; } .user-list-title { font-size: 14px; } + +.md .theme-dark .toggle input[type=checkbox]:checked+.toggle-icon:after { + background: $light-orange; +} + +.md .theme-dark .toggle input[type=checkbox]:checked+.toggle-icon { + background: $fsek-orange; +} + +.md .input-focused::after, +.md .item-input-focused .item-input-wrap::after { + background: $fsek-orange; +} + +.ios .toggle input[type=checkbox]:checked+.toggle-icon { + background: $fsek-orange; +} + +.ios .color-theme-orange label.item-checkbox input[type=checkbox]:checked~.icon-checkbox, +.ios .theme-dark label.item-checkbox input[type=checkbox]:checked~.icon-checkbox { + background: $fsek-orange; +} + +.md .theme-dark label.item-checkbox input[type=checkbox]:checked~.icon-checkbox, +.md .color-theme-orange label.item-checkbox input[type=checkbox]:checked~.icon-checkbox { + background-color: $fsek-orange; + border-color: $fsek-orange; +} diff --git a/www/scss/partials/_variables.scss b/www/scss/partials/_variables.scss index 6fae4130..0c5a8d91 100644 --- a/www/scss/partials/_variables.scss +++ b/www/scss/partials/_variables.scss @@ -1,5 +1,6 @@ // Colors $fsek-orange: #eb7125; +$light-orange: #ff9800; $white: #ffffff; $active-link: #d35400; $light-gray: #f3f3f3; @@ -7,6 +8,9 @@ $green: #2e8b57; $gray: #bbb; $black: #000000; +// Dark mode colors +$dark-gray: #202020; + // Nollning // 2019 // $nollning-ground: #590d02; diff --git a/www/user_page.html b/www/user_page.html index 12bea9e9..cebfdb15 100644 --- a/www/user_page.html +++ b/www/user_page.html @@ -151,6 +151,17 @@
+
  • +
    +
    Dark mode
    +
    + +
    +
    +
    • Member date (this changes with js)