From 270d1544df1305d427a4a40be9824730a55f23c2 Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Fri, 2 Feb 2024 10:50:54 +0000 Subject: [PATCH 1/8] implement dark theme --- .../templates/main/partials/navigation.html | 6 +++- .../main/templates/main/what_autism_is.html | 4 +-- static/css/main.css | 23 +++++++++--- static/js/theme-checker.js | 35 +++++++++++++++++++ 4 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 static/js/theme-checker.js diff --git a/server/apps/main/templates/main/partials/navigation.html b/server/apps/main/templates/main/partials/navigation.html index 3d5e5f71..88ed933a 100644 --- a/server/apps/main/templates/main/partials/navigation.html +++ b/server/apps/main/templates/main/partials/navigation.html @@ -28,7 +28,6 @@ {% endif %} {% endif %} -
  • Help
    • +
  • + Toggle Theme +
    • @@ -73,3 +75,5 @@ + + diff --git a/server/apps/main/templates/main/what_autism_is.html b/server/apps/main/templates/main/what_autism_is.html index 74b205de..93a236a2 100644 --- a/server/apps/main/templates/main/what_autism_is.html +++ b/server/apps/main/templates/main/what_autism_is.html @@ -38,7 +38,7 @@
    About Autism

    - Find Out More from Autistica @@ -61,7 +61,7 @@
    About Sensory Processing
    - Find Out More from the National Autistic Society diff --git a/static/css/main.css b/static/css/main.css index aea0e822..be995217 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -146,7 +146,8 @@ body { line-height: 1.5; font-weight: bold; text-align: center; - color: #fff; + /* color: #fff; */ + color: var(--bs-tertiary-bg); text-decoration: none; } .usage-box a:hover { @@ -161,7 +162,7 @@ body { .intro { padding: 2% 5% 3%; background: #1BB5AF; - color: #fff; + color: var(--bs-body-bg); } .title-text { @@ -181,7 +182,7 @@ body { #value { padding: 4% 5%; background: #309FDC; - color: #fff; + color: var(--bs-body-bg); } .value-text { line-height: 2; @@ -359,9 +360,21 @@ body { } .cta-header, .card-text { - color: #000; + /* color: var(--bs-primary-text-emphasis) */ + color: var(--bs-body-color); + } + + @include color-mode(dark) { + .card-text{ + color: #fff; + } +} + + .cta-header, .card-text-dark { + color: #fff; } + /*Responsive Design*/ @media (max-width: 992px) { @@ -507,11 +520,11 @@ body { } .story-card-text { - color: #000000; line-height: 2; padding: 0 2%; } + .story-text { padding: 2% 11% 3%; text-align: cetner; diff --git a/static/js/theme-checker.js b/static/js/theme-checker.js new file mode 100644 index 00000000..b4cca2a1 --- /dev/null +++ b/static/js/theme-checker.js @@ -0,0 +1,35 @@ + +document.addEventListener('DOMContentLoaded', (event) => { + // Check if the user has set a theme before + let storedTheme = localStorage.getItem('theme'); + + if (storedTheme !== null) { + console.log("The user has set a theme before - it is " + storedTheme); + document.body.setAttribute('data-bs-theme', storedTheme); + footer.setAttribute('data-bs-theme', storedTheme); + console.log("The theme has been set to " + storedTheme); + } else { + console.log("The user has not set a theme before"); + // Get the system theme + let systemTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.body.setAttribute('data-bs-theme', systemTheme); + footer.setAttribute('data-bs-theme', systemTheme); + console.log("The theme has been set to the system theme: " + systemTheme); + } +}); + + +document.getElementById('theme-toggle').addEventListener('click', function() { + let currentTheme = document.body.getAttribute('data-bs-theme'); + console.log("Before clicking the current theme is " + currentTheme + " mode"); + console.log('Theme toggle clicked') + if (currentTheme === 'dark') { + document.body.setAttribute('data-bs-theme', 'light'); + footer.setAttribute('data-bs-theme', 'light'); + localStorage.setItem('theme', 'light'); + } else { + document.body.setAttribute('data-bs-theme', 'dark'); + footer.setAttribute('data-bs-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } +}); From 3f0efdd8bad3a018e236df6b27c12f0904ba4a7b Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Sun, 11 Feb 2024 23:40:45 +0000 Subject: [PATCH 2/8] grey outline and arrows for dark mode compatability --- static/images/submit-experience_grey.svg | 564 +++++++++++++++++++++++ 1 file changed, 564 insertions(+) create mode 100644 static/images/submit-experience_grey.svg diff --git a/static/images/submit-experience_grey.svg b/static/images/submit-experience_grey.svg new file mode 100644 index 00000000..ebfce604 --- /dev/null +++ b/static/images/submit-experience_grey.svg @@ -0,0 +1,564 @@ + + + + + + + + + + + + + + + + + + Sign up to AutSPACEs and create an account + + + + + + Sign up to AutSPACEs and create... + + + + + + + + + + + + In the first box, write about a time your senses have affected you - e.g."I avoid getting the train because the platform is too busy". Please follow our code of conduct + + + + + In the first box, write about a... + + + + + + + + + + + + Add as much or as little detail as you like - e.g. date, time location, intensity, consequences. For more examples, look at the "View Stories" page + + + + + Add as much or as little detail... + + + + + + + + + + + + If you want to, add a suggestion for what did or would have made your experience better in the second box, e.g. "wearing noise cancelling headphones helps" + + + + + If you want to, add a suggestion... + + + + + + + + + + + Choose whether you want your story to be shared publicly, both, or neither by ticking the boxes, and then submit + + + + Choose whether you want your sto... + + + + + + + + + + + Once you have shared your story you can view it, edit it, and change your sharing permissions on your "My Stories" page. You will also be able to see if it has been approved by moderators for publishing on the website + + + + Once you have shared your story... + + + + + + + + + + Share as many experiences as you want! + + + + + Share as many experiences as you... + + + + + + + + + + + + When you are logged into your account. Go to the "Share Stories" page + + + + + When you are logged into your ac... + + + + + + + Text is not SVG - cannot display + + + From fef787a77980222fae3ca8fb3db89b5b8337795a Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Sun, 11 Feb 2024 23:41:15 +0000 Subject: [PATCH 3/8] use grey version of svg --- server/apps/main/templates/main/help.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/server/apps/main/templates/main/help.html b/server/apps/main/templates/main/help.html index 8d76665b..c921064c 100644 --- a/server/apps/main/templates/main/help.html +++ b/server/apps/main/templates/main/help.html @@ -46,7 +46,7 @@
    What Stories Should I Share On Aut

    - Read the code of conduct @@ -66,7 +66,7 @@
    Who Can Share Stories On AutSPACEs?<

    - Read the code of conduct @@ -108,7 +108,7 @@
    What Happens To The Storie

    - Read the code of conduct @@ -126,7 +126,7 @@
    How Do You Decide Which Stories To P

    - Read the code of conduct @@ -143,7 +143,7 @@
    What Can I Do If I Want My St

    - Read the code of conduct @@ -184,7 +184,7 @@
    Can I Share A Story About Someo

    - Read the code of conduct @@ -199,7 +199,7 @@
    What's the Process for Sharing page when you are logged in and write in the text box about any time you have been effected by your senses. Then you can submit your experience for research or to share publicly on our website. The flow chart below shows the steps you can take to share an experience on AutSPACEs.

    -

    Flow chart showing the + <p><img src=

    From 03349efc63f5e26404671b29086399cf75007534 Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Sun, 11 Feb 2024 23:41:58 +0000 Subject: [PATCH 4/8] revert back to white for intro section --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index be995217..a69394f1 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -162,7 +162,7 @@ body { .intro { padding: 2% 5% 3%; background: #1BB5AF; - color: var(--bs-body-bg); + color: #fff; } .title-text { From 764ac48f6408d467014b3fd4b91c03a093da3cb1 Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Mon, 12 Feb 2024 00:06:35 +0000 Subject: [PATCH 5/8] update platform usage section for light/dark mode --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index a69394f1..46e22f59 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -320,7 +320,7 @@ body { #platform_usage { background: #FAC145; padding: 4% 5%; - color: #ffffff; + color: var(--bs-body-bg); } .platform-title { From a404de24c85360e69aec3348796195d7c00b38f7 Mon Sep 17 00:00:00 2001 From: Helen Duncan Date: Mon, 12 Feb 2024 00:09:10 +0000 Subject: [PATCH 6/8] rm js print statements --- static/js/theme-checker.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/static/js/theme-checker.js b/static/js/theme-checker.js index b4cca2a1..28acd9cf 100644 --- a/static/js/theme-checker.js +++ b/static/js/theme-checker.js @@ -4,25 +4,19 @@ document.addEventListener('DOMContentLoaded', (event) => { let storedTheme = localStorage.getItem('theme'); if (storedTheme !== null) { - console.log("The user has set a theme before - it is " + storedTheme); document.body.setAttribute('data-bs-theme', storedTheme); footer.setAttribute('data-bs-theme', storedTheme); - console.log("The theme has been set to " + storedTheme); } else { - console.log("The user has not set a theme before"); // Get the system theme let systemTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; document.body.setAttribute('data-bs-theme', systemTheme); footer.setAttribute('data-bs-theme', systemTheme); - console.log("The theme has been set to the system theme: " + systemTheme); } }); document.getElementById('theme-toggle').addEventListener('click', function() { let currentTheme = document.body.getAttribute('data-bs-theme'); - console.log("Before clicking the current theme is " + currentTheme + " mode"); - console.log('Theme toggle clicked') if (currentTheme === 'dark') { document.body.setAttribute('data-bs-theme', 'light'); footer.setAttribute('data-bs-theme', 'light'); From 526bf24843bbca2f27b1fc4eb9136ed81b6698cd Mon Sep 17 00:00:00 2001 From: Bastian Greshake Tzovaras Date: Mon, 12 Feb 2024 10:10:05 +0000 Subject: [PATCH 7/8] about section front --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index 46e22f59..19de65aa 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -285,7 +285,7 @@ body { /*Platform Information*/ #platform_info { - background: #FFFFFF; + background: var(--bs-body-bg); padding: 4% 5%; color: #1BB5AF; } From 99909f69bd121f3ceb939a4564cc2e3c5f63e357 Mon Sep 17 00:00:00 2001 From: Bastian Greshake Tzovaras Date: Mon, 12 Feb 2024 10:40:29 +0000 Subject: [PATCH 8/8] nav item --- server/apps/main/templates/main/partials/navigation.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/apps/main/templates/main/partials/navigation.html b/server/apps/main/templates/main/partials/navigation.html index 88ed933a..8016795d 100644 --- a/server/apps/main/templates/main/partials/navigation.html +++ b/server/apps/main/templates/main/partials/navigation.html @@ -41,7 +41,7 @@
  • - Toggle Theme + Switch Light/Dark