Added a 'Dark mode' switch under Inställningar > Konto #266
Conversation
| background: $fsek-orange; | ||
| } | ||
|
|
||
| .md .theme-dark label.item-checkbox input[type=checkbox]:checked~.icon-checkbox, |
There was a problem hiding this comment.
Avoid qualifying attribute selectors with an element.
Avoid qualifying class selectors with an element.
Selector should have depth of applicability no greater than 2, but was 4
| background: $fsek-orange; | ||
| } | ||
|
|
||
| .ios .color-theme-orange label.item-checkbox input[type=checkbox]:checked~.icon-checkbox, |
There was a problem hiding this comment.
Avoid qualifying attribute selectors with an element.
Avoid qualifying class selectors with an element.
Selector should have depth of applicability no greater than 2, but was 4
| background: $fsek-orange; | ||
| } | ||
|
|
||
| .ios .toggle input[type=checkbox]:checked+.toggle-icon { |
There was a problem hiding this comment.
Avoid qualifying attribute selectors with an element.
Selector should have depth of applicability no greater than 2, but was 3
www/scss/partials/_user_page.scss
Outdated
| background: rgba(255,152,0,.5); | ||
| } | ||
|
|
||
| .md .input-focused:after, .md .item-input-focused .item-input-wrap:after { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
Each selector in a comma sequence should be on its own single line
Selector should have depth of applicability no greater than 2, but was 3
www/scss/partials/_user_page.scss
Outdated
| } | ||
|
|
||
| .md .theme-dark .toggle input[type=checkbox]:checked+.toggle-icon { | ||
| background: rgba(255,152,0,.5); |
There was a problem hiding this comment.
Color literals like rgba(255, 152, 0, 0.5) should only be used in variable declarations; they should be referred to via variable everywhere else.
Commas in function arguments should be followed by one space.5 should be written with a leading zero as 0.5
www/scss/partials/_user_page.scss
Outdated
| @@ -2,6 +2,19 @@ | |||
| width: 100%; | |||
| } | |||
|
|
|||
| .theme-dark .input-with-value { | |||
| color: white; | |||
There was a problem hiding this comment.
Color white should be written in hexadecimal form as #ffffff
Color literals like white should only be used in variable declarations; they should be referred to via variable everywhere else.
| @@ -72,3 +85,7 @@ | |||
| .songbook-content .searchbar-not-found { | |||
| font-size: 16px; | |||
| } | |||
|
|
|||
| .theme-dark .searchbar { | |||
| background-color: $dark-gray !important; | |||
| @@ -50,6 +59,10 @@ | |||
| background-color: $white; | |||
| } | |||
|
|
|||
| .theme-dark .song-content .song-text { | |||
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| color: $black; | ||
| } | ||
|
|
||
| .theme-dark .song-content .block { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
www/scss/partials/_songbook.scss
Outdated
| @@ -28,13 +28,22 @@ | |||
| line-height: initial; | |||
| } | |||
|
|
|||
| .theme-dark .song-content .block-title{ | |||
There was a problem hiding this comment.
Opening curly brace { should be preceded by one space
Selector should have depth of applicability no greater than 2, but was 3
| background: $fsek-orange; | ||
| } | ||
|
|
||
| .md .input-focused::after, |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| @@ -16,6 +29,7 @@ | |||
| } | |||
|
|
|||
| .user-container { | |||
| color: $black; | |||
There was a problem hiding this comment.
Properties should be ordered background-color, color, height, padding-top, width
| padding: 15px 0; | ||
| } | ||
|
|
||
| .songbook-content .list ul::before, .songbook-content .list ul:after{ | ||
| .songbook-content .list ul::before, .songbook-content .list ul:after { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
Each selector in a comma sequence should be on its own single line
Selector should have depth of applicability no greater than 2, but was 3
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .song-content .song-text .block-inner{ | ||
| .song-content .song-text .block-inner { |
There was a problem hiding this comment.
Merge rule .song-content .song-text .block-inner with rule on line 58
Selector should have depth of applicability no greater than 2, but was 3
| background-color: $dark-gray; | ||
| } | ||
|
|
||
| .song-content .song-text p:last-child { |
There was a problem hiding this comment.
Merge rule .song-content .song-text p:last-child with rule on line 58
Selector should have depth of applicability no greater than 2, but was 3
| background-attachment: fixed; | ||
| background-size: 200% 100% !important; | ||
| background-image: url("../img/login-background_full.png") !important; | ||
| background-repeat: no-repeat !important; |
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-size: 200% 100% !important; | ||
| background-image: url("../img/login-background_full.png") !important; |
| background-image: url("../img/login-background_full.png"); | ||
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-size: 200% 100% !important; |
There was a problem hiding this comment.
!important should not be used
Properties should be ordered background-attachment, background-image, background-repeat, background-size, height, overflow
www/scss/partials/_index.scss
Outdated
| } | ||
|
|
||
| .ios .theme-dark { | ||
|
|
www/scss/partials/_index.scss
Outdated
| 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 { |
| @@ -24,13 +24,13 @@ | |||
| .album-content .block-title { | |||
| font-weight: bold; | |||
| font-size: 27px; | |||
| color: $fsek-orange; | |||
| color: $fsek-orange !important; | |||
There was a problem hiding this comment.
This looks great overall, however there are two things I would like you to fix before we merge this, first is the color of the send button in the chat function which behaves weirdly, it should be orange! The other thing that needs fixing is when using the android styling the boxes on the account settings explaining what each option does appears white right now when it should be black or gray.
It might be easier to fix this after we merge the introduction removal or if you are eager you could rebase your branch to mine named introduction_removal_2020
In any case great job Hannes!
www/scss/partials/_messages.scss
Outdated
| } | ||
|
|
||
| .messagebar a.link { | ||
| color: $fsek-orange !important; |
www/scss/partials/_messages.scss
Outdated
| color: $fsek-orange; | ||
| } | ||
|
|
||
| .messagebar a.link { |
There was a problem hiding this comment.
Avoid qualifying class selectors with an element.
| background-color: $fsek-orange; | ||
| } | ||
|
|
||
| .md .color-theme-orange .navbar, |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| color: $light-gray !important; | ||
| } | ||
|
|
||
| .ios .color-theme-orange .navbar, |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| @@ -90,3 +90,26 @@ img.img-responsive { | |||
| width: 35%; | |||
| } | |||
| } | |||
|
|
|||
| .theme-dark .item-link { | |||
| color: $light-gray !important; | |||
| background: $black; | ||
| } | ||
|
|
||
| .ios .color-theme-orange label.item-radio input[type=radio]:checked~.icon-radio, |
There was a problem hiding this comment.
Avoid qualifying attribute selectors with an element.
Avoid qualifying class selectors with an element.
Selector should have depth of applicability no greater than 2, but was 4
| @@ -78,3 +92,12 @@ | |||
| #contact-form .item-content.item-input { | |||
| background: $white; | |||
| } | |||
|
|
|||
| .theme-dark #contact-form .item-content.item-input { | |||
There was a problem hiding this comment.
Avoid using id selectors
Selector should have depth of applicability no greater than 2, but was 3
| @@ -4,6 +4,12 @@ | |||
| background: $white; | |||
| } | |||
|
|
|||
| .theme-dark #contact-description, | |||
| color: $black; | ||
| } | ||
|
|
||
| .theme-dark .day-content-event .card-content-inner { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| background-color: $white; | ||
| } | ||
|
|
||
| .theme-dark .calendar .calendar-week-header { |
There was a problem hiding this comment.
Merge rule .theme-dark .calendar .calendar-week-header with rule on line 1
Selector should have depth of applicability no greater than 2, but was 3
| color: $fsek-orange; | ||
| } | ||
|
|
||
| .md .messagebar a.link, |
There was a problem hiding this comment.
Avoid qualifying class selectors with an element.
Selector should have depth of applicability no greater than 2, but was 4
| } | ||
|
|
||
| .theme-dark .cafe-content .black-text { | ||
| color: $light-gray !important; |
| border-right-color: $dark-gray !important; | ||
| } | ||
|
|
||
| .theme-dark .cafe-content .black-text { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| } | ||
|
|
||
| .theme-dark .cafe-content .friday { | ||
| border-right-color: $dark-gray !important; |
| background-color: $black !important; | ||
| } | ||
|
|
||
| .theme-dark .cafe-content .friday { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| .timeline-year-title, .timeline-month-title { | ||
| color: black !important; | ||
| color: $black !important; |
| .black-text { | ||
| color: $black; | ||
| } | ||
|
|
||
| .theme-dark .black-text { | ||
| color: $light-gray !important; |
| .black-text { | ||
| color: $black; | ||
| } | ||
|
|
||
| .theme-dark .black-text { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| @@ -120,12 +120,25 @@ | |||
| color: $white; | |||
| } | |||
|
|
|||
| .theme-dark .white-text { | |||
| color: $black !important; | |||
| @@ -120,12 +120,25 @@ | |||
| color: $white; | |||
| } | |||
|
|
|||
| .theme-dark .white-text { | |||
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
…the send button under messages
| white-space: initial; | ||
| line-height: initial; | ||
| margin: 32px 0px 15px 15px; | ||
| } | ||
|
|
||
| .album-content .block span{ | ||
| .album-content .block span { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
| @@ -24,13 +24,13 @@ | |||
| .album-content .block-title { | |||
| font-weight: bold; | |||
| font-size: 27px; | |||
| color: $fsek-orange; | |||
| color: $fsek-orange !important; | |||
| } else { | ||
| localStorage.setItem('dark-mode', 'off'); | ||
| $('body').attr('class', 'color-theme-orange'); | ||
| } |
There was a problem hiding this comment.
Expected indentation of 6 spaces but found 8 indent
| $('body').attr('class', 'theme-dark'); | ||
| } else { | ||
| localStorage.setItem('dark-mode', 'off'); | ||
| $('body').attr('class', 'color-theme-orange'); |
There was a problem hiding this comment.
Expected indentation of 8 spaces but found 10 indent
| localStorage.setItem('dark-mode', 'on'); | ||
| $('body').attr('class', 'theme-dark'); | ||
| } else { | ||
| localStorage.setItem('dark-mode', 'off'); |
There was a problem hiding this comment.
Expected indentation of 8 spaces but found 10 indent
| @@ -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'); | |||
There was a problem hiding this comment.
Expected indentation of 8 spaces but found 10 indent
| @@ -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')) { | |||
There was a problem hiding this comment.
Expected indentation of 6 spaces but found 8 indent
| @@ -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') { | |||
There was a problem hiding this comment.
Expected '===' and instead saw '==' eqeqeq
| @@ -281,6 +281,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') { | |||
There was a problem hiding this comment.
Expected '===' and instead saw '==' eqeqeq
| @@ -78,7 +78,7 @@ function initEventPage(eventData) { | |||
|
|
|||
| if (sameDay(startDate, endDate)) { | |||
| switch (eventData.dot) { | |||
| case 'single': | |||
| case 'single'key: "value", | |||
There was a problem hiding this comment.
Parsing error: Unexpected token key
Also changed many instances of the color
light-orangetofsek-orange, becausefsek-orangeis objectively superior.