Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a 'Dark mode' switch under Inställningar > Konto #266

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added a 'Dark mode' switch under Inställningar > Konto #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
925495d
Added a 'Dark mode' switch under Inställningar>Konto and fixed some b…
CodeyBoi Sep 22, 2020
c7a5881
Merge branch 'master' of github.com:fsek/app into darkmode and fixed …
CodeyBoi Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions www/about_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion www/js/event.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function initEventPage(eventData) {

if (sameDay(startDate, endDate)) {
switch (eventData.dot) {
case 'single':
case 'single'key: "value",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Parsing error: Unexpected token key

startDate = startDate.hhmm() + ' (.)';
break;
case 'double':
Expand Down
4 changes: 4 additions & 0 deletions www/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '===' and instead saw '==' eqeqeq

$('body').attr('class', 'theme-dark');
}
// Redirect from the login screen if the user has signed in before
$.auth.validateToken()
.done(function() {
Expand Down
14 changes: 14 additions & 0 deletions www/js/user_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '===' and instead saw '==' eqeqeq

$('input[name="dark_mode"]').prop('checked', true);
}

}

function initProgramPicker(selectedProgram) {
Expand Down Expand Up @@ -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')) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 6 spaces but found 8 indent

localStorage.setItem('dark-mode', 'on');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 8 spaces but found 10 indent

$('body').attr('class', 'theme-dark');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 8 spaces but found 10 indent

} else {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 6 spaces but found 8 indent

localStorage.setItem('dark-mode', 'off');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 8 spaces but found 10 indent

$('body').attr('class', 'color-theme-orange');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 8 spaces but found 10 indent

}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 6 spaces but found 8 indent

});
};

Expand Down
4 changes: 2 additions & 2 deletions www/scss/partials/_album.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@
.album-content .block-title {
font-weight: bold;
font-size: 27px;
color: $fsek-orange;
color: $fsek-orange !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lmao

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

white-space: initial;
line-height: initial;
margin: 32px 0px 15px 15px;
}

.album-content .block span{
.album-content .block span {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

color: $fsek-orange;
}

Expand Down
37 changes: 33 additions & 4 deletions www/scss/partials/_cafe.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}

.time-info {
color: #ffffff;
color: $white;
display: block;
left: -10%;
position: absolute;
Expand Down Expand Up @@ -108,7 +108,7 @@
padding-top: 15px;

.time-info {
color: black;
color: $black;
}

.ios & {
Expand All @@ -120,12 +120,25 @@
color: $white;
}

.theme-dark .white-text {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

color: $black !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.black-text {
color: $black;
}

.theme-dark .black-text {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

color: $light-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.timeline-year-title, .timeline-month-title {
color: black !important;
color: $black !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.theme-dark .timeline-year-title,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line contains trailing whitespace
Selector should have depth of applicability no greater than 2, but was 3

.theme-dark .timeline-month-title {
color: $light-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.timeline-item-date{
Expand Down Expand Up @@ -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;
Expand All @@ -179,3 +192,19 @@
margin-top: 30px;
}
}

.ios .theme-dark .bg-color-white {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

background-color: $black !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.md .theme-dark .bg-color-white {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

background-color: $black !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.theme-dark .cafe-content .friday {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

border-right-color: $dark-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.theme-dark .cafe-content .black-text {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

color: $light-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}
15 changes: 14 additions & 1 deletion www/scss/partials/_calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.theme-dark .calendar {
background-color: $black;
}

.calendar-page {
display: flex;
flex-direction: column;
Expand All @@ -11,6 +15,11 @@
.calendar .calendar-week-header {
height: 20px;
color: $fsek-orange;
background-color: $white;
}

.theme-dark .calendar .calendar-week-header {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

background-color: $black;
}

.calendar .calendar-day-selected span{
Expand Down Expand Up @@ -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 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

color: $light-gray;
}

.day-content-event .card-media {
Expand Down
23 changes: 23 additions & 0 deletions www/scss/partials/_contact.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
background: $white;
}

.theme-dark #contact-description,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using id selectors

.theme-dark #contact-info,
.theme-dark #contact-list {
background: $black;
}

#contact-description .list {
margin: 0;
font-size: 14px;
Expand All @@ -26,6 +32,10 @@
background: $light-gray;
}

.theme-dark .page-content.contact-content {
background: $black;
}

.contact-text textarea {
height: 100%;
}
Expand All @@ -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;
Expand Down Expand Up @@ -78,3 +92,12 @@
#contact-form .item-content.item-input {
background: $white;
}

.theme-dark #contact-form .item-content.item-input {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using id selectors
Selector should have depth of applicability no greater than 2, but was 3

background: $black;
}

.ios .color-theme-orange label.item-radio input[type=radio]:checked~.icon-radio,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

.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");
}
8 changes: 8 additions & 0 deletions www/scss/partials/_gallery.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,11 @@
height: 40px;
width: 40px;
}

.navbar {
background-color: $fsek-orange;
}

.theme-dark .navbar {
background-color: $fsek-orange;
}
13 changes: 13 additions & 0 deletions www/scss/partials/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,20 @@
color: $white !important;
}

.theme-dark .home-subnavbar .button {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

border: 1px solid $dark-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

color: $dark-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.home-subnavbar .button.tab-link-active {
background-color: $white !important;
color: $fsek-orange !important;
}

.theme-dark .home-subnavbar .button.tab-link-active {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge rule .theme-dark .home-subnavbar .button.tab-link-active with rule on line 35
Selector should have depth of applicability no greater than 2, but was 3

background-color: $dark-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.subtab .infinite-scroll-preloader {
height: 37px;
margin-bottom: 10px;
Expand All @@ -54,6 +63,10 @@
margin-top: 10px;
}

.theme-dark #subtab-event .day-title {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using id selectors
Selector should have depth of applicability no greater than 2, but was 3

background-color: $dark-gray;
}

#subtab-event p.disabled {
text-align: center;
}
Expand Down
19 changes: 19 additions & 0 deletions www/scss/partials/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,22 @@ img.img-responsive {
width: 35%;
}
}

.theme-dark .item-link {
color: $light-gray !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

}

.ios .color-theme-orange .navbar,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

.ios .theme-dark .navbar {
background-color: $fsek-orange;
}

.md .color-theme-orange .navbar,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

.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");
}
8 changes: 4 additions & 4 deletions www/scss/partials/_login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used
Properties should be ordered background-attachment, background-image, background-repeat, background-size, height, overflow

background-image: url("../img/login-background_full.png") !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

background-repeat: no-repeat !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

background-attachment: fixed !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

overflow: hidden;
height: 100%;
}
Expand Down
9 changes: 9 additions & 0 deletions www/scss/partials/_messages.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,12 @@
resize: none;
width: 100%;
}

.ios a {
color: $fsek-orange;
}

.md .messagebar a.link,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.
Selector should have depth of applicability no greater than 2, but was 4

.md .theme-dark .messagebar a.link {
color: $fsek-orange;
}
Loading