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.

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
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
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
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
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",

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
Original file line number Diff line number Diff line change
Expand Up @@ -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') {

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
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') {

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')) {

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');

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');

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 {

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');

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');

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

}

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
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

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 {

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
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 {

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;

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 {

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;

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;

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,

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;

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 {

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;

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 {

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;

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 {

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;

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 {

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;

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
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 {

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 {

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
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
background: $white;
}

.theme-dark #contact-description,

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 {

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,

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
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
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,20 @@
color: $white !important;
}

.theme-dark .home-subnavbar .button {

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;

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;

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 {

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;

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 {

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
23 changes: 23 additions & 0 deletions www/scss/partials/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,26 @@ img.img-responsive {
width: 35%;
}
}

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

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,

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,

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");
}

.ios .theme-dark {

Choose a reason for hiding this comment

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

Empty rule


Choose a reason for hiding this comment

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

Line contains trailing whitespace

}
8 changes: 4 additions & 4 deletions www/scss/partials/_login.scss
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;

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;

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;

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;

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
Loading