From 58fa2d25395f01e379956379ba8ce55d5ff2b7f7 Mon Sep 17 00:00:00 2001 From: GDWR Date: Mon, 7 Feb 2022 22:22:42 +0000 Subject: Correct typehints --- pydis_site/context_processors.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/context_processors.py b/pydis_site/context_processors.py index 6937a3db..c8549d6a 100644 --- a/pydis_site/context_processors.py +++ b/pydis_site/context_processors.py @@ -1,8 +1,8 @@ -from django.template import RequestContext +from django.http import HttpRequest from pydis_site.constants import GIT_SHA -def git_sha_processor(_: RequestContext) -> dict: +def git_sha_processor(_: HttpRequest) -> dict: """Expose the git SHA for this repo to all views.""" return {'git_sha': GIT_SHA} -- cgit v1.2.3 From c7359569b5d775553a93a7686f9ac4f21892000a Mon Sep 17 00:00:00 2001 From: GDWR Date: Mon, 7 Feb 2022 22:23:24 +0000 Subject: Add dark theme stylesheet --- pydis_site/settings.py | 9 +++++++++ pydis_site/templates/base/base.html | 2 ++ 2 files changed, 11 insertions(+) (limited to 'pydis_site') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 3b146f2c..1ba81a5c 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -268,6 +268,15 @@ BULMA_SETTINGS = { "footer-padding": "1rem 1.5rem 1rem", "tooltip-max-width": "30rem", }, + "dark_variables": { + "primary": "#373737", + + # Use the same sizes + "dimensions": "16 24 32 48 64 96 128 256 512", + "navbar-height": "4.75rem", + "footer-padding": "1rem 1.5rem 1rem", + "tooltip-max-width": "30rem", + }, "extensions": [ "bulma-dropdown", "bulma-navbar-burger", diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index b7322f12..f7dce8b0 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -24,6 +24,8 @@ Python Discord | {% block title %}Website{% endblock %} {% bulma %} + {% bulma 'dark' %} + {% font_awesome %} {% block head %}{% endblock %} -- cgit v1.2.3 From 01deafa5bf5b68784d434d6f361c21d72cf89069 Mon Sep 17 00:00:00 2001 From: GDWR Date: Tue, 8 Feb 2022 00:43:03 +0000 Subject: Add initial dark theme --- pydis_site/settings.py | 7 ++- pydis_site/static/css/base/navbar.css | 83 +++++++++++++++++++++++++++++++++ pydis_site/static/js/base/navbar.js | 87 +++++++++++++++++++++++++++++++++++ pydis_site/templates/base/navbar.html | 17 +++++++ 4 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 pydis_site/static/css/base/navbar.css create mode 100644 pydis_site/static/js/base/navbar.js (limited to 'pydis_site') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 1ba81a5c..0d19dc10 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -269,7 +269,12 @@ BULMA_SETTINGS = { "tooltip-max-width": "30rem", }, "dark_variables": { - "primary": "#373737", + "primary": "#7289DA", + "white": "#22272E", + "text": "#F4F4F4", + + "link": "$primary", + # Use the same sizes "dimensions": "16 24 32 48 64 96 128 256 512", diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css new file mode 100644 index 00000000..95ca36b8 --- /dev/null +++ b/pydis_site/static/css/base/navbar.css @@ -0,0 +1,83 @@ +.switch { + position: relative; + height: 3.25em; + width: 6.5em; + cursor: pointer; +} + +.switch-outer { + position: absolute; + height: 100%; + width: 100%; + border-radius: 2em; + transition: background-color 0.3s ease-out; +} + +.switch.dark .switch-outer { + background-color: #22272E; +} + +.switch.light .switch-outer { + background-color: #3f61d9; +} + +.switch-inner { + width: 95%; + top: 50%; + border-radius: 2em; + transition: background-color 0.2s ease-out; +} + +.switch.light .switch-inner { + background-color: #7289da; +} +.switch.dark .switch-inner { + background-color: #1b2137; +} + +.knob { + position: absolute; + height: 75%; + width: 37.5%; + top: 50%; + transform: translate(0%, -65%); + border-radius: 10em; + transition: all 0.5s ease-out; +} + +.knob.dark { + background-color: #586282; + margin: 6% auto auto 8%; +} + +.knob.light { + background-color: #364c94; + margin: 6% auto auto 56%; +} + +.theme-icon { + position: absolute !important; + color: white; + --ggs: 1.25; + opacity: 100%; + transition: opacity 0.2s ease-out; + top: 33%; + bottom: auto; +} + +.theme-icon.light { + left: 18%; +} + +.theme-icon.dark { + right: 18%; + top: 35% +} + +.switch.dark .theme-icon.light { + opacity: 0; +} + +.switch.light .theme-icon.dark { + opacity: 0; +} \ No newline at end of file diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js new file mode 100644 index 00000000..f0bd94b9 --- /dev/null +++ b/pydis_site/static/js/base/navbar.js @@ -0,0 +1,87 @@ +"use strict"; + +const defaultCssElement = $("#bulma-css")[0]; +const darkCssElement = $("#bulma-css-dark")[0]; + +function getCurrentTheme() { + return document.cookie + .split('; ') + .find(row => row.startsWith('theme=')) + .split('=')[1]; +} + +function displayThemedElements() { + const defaultElements = Array.from($(".show-default-mode")); + const darkElements = Array.from($(".show-dark-mode")); + + switch (getCurrentTheme()) { + case "": + case "default": + defaultElements.forEach(e => e.style.display = null); + darkElements.forEach(e => e.style.display = 'none'); + break; + case "dark": + defaultElements.forEach(e => e.style.display = 'none'); + darkElements.forEach(e => e.style.display = null); + break; + } +} + +function setStyleSheets() { + switch (getCurrentTheme()) { + case "": + case "default": + defaultCssElement.disabled = false; + darkCssElement.disabled = true; + break; + case "dark": + defaultCssElement.disabled = true; + darkCssElement.disabled = false; + break; + } +} + + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + + setStyleSheets(); + displayThemedElements(); + + $('#theme-switch').on("click", () => { + + // Update cookie + if (getCurrentTheme() === "dark") { + document.cookie = "theme=default"; + } else { + document.cookie = "theme=dark"; + } + + setStyleSheets(); + displayThemedElements(); + + // Animations + let switchToggle = $(".switch")[0]; + let knob = $(".knob")[0]; + + if (knob.classList.contains("dark")) { + knob.classList.remove("dark"); + knob.classList.add("light"); + + // After 500ms, switch the icons + setTimeout(function() { + switchToggle.classList.remove("dark"); + switchToggle.classList.add("light"); + }, 100); + } else { + knob.classList.remove("light"); + knob.classList.add("dark"); + + // After 500ms, switch the icons + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); + } + }); +}); \ No newline at end of file diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index d7fb4f4c..41d6c778 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -1,5 +1,12 @@ {% load static %} +{% block head %} + + + + +{% endblock %} + -- cgit v1.2.3 From 508a34911a524f0c389db9fa008e822e94d55c51 Mon Sep 17 00:00:00 2001 From: GDWR Date: Tue, 8 Feb 2022 22:04:23 +0000 Subject: Use colour helpers --- pydis_site/templates/resources/resource_box.html | 12 ++++++------ pydis_site/templates/resources/resources.html | 24 ++++++++++++------------ 2 files changed, 18 insertions(+), 18 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index e26203e9..b86947b9 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -2,7 +2,7 @@ {% load to_kebabcase %} {% load get_category_icon %} -
+
{% if 'title_url' in resource %} {% include "resources/resource_box_header.html" %} @@ -13,7 +13,7 @@

{{ resource.description|safe }}

-
+
{# Add primary link #} {% if "title_url" in resource %} @@ -36,7 +36,7 @@
{% for tag in resource.tags.topics %} @@ -46,7 +46,7 @@ {% endfor %} {% for tag in resource.tags.type %} @@ -56,7 +56,7 @@ {% endfor %} {% for tag in resource.tags.payment_tiers %} @@ -66,7 +66,7 @@ {% endfor %} {% for tag in resource.tags.difficulty %} diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 70fad097..4545f3c2 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -21,8 +21,8 @@ {% block content %} {% include "base/navbar.html" %} -
-
+
+
{# Filtering toolbox #}
@@ -30,11 +30,11 @@

Filter Resources

{# Filter box tags #} -
+
{# A filter tag for when there are no filters active #} - + No filters selected @@ -43,7 +43,7 @@ {% for filter_item in filter_data.filters %} {% if filter_name == "Difficulty" %} @@ -54,29 +54,29 @@ {% endif %} {% if filter_name == "Type" %} {{ filter_item|title }} - + {% endif %} {% if filter_name == "Payment tiers" %} - + {{ filter_item|title }} {% endif %} {% if filter_name == "Topics" %} @@ -100,7 +100,7 @@ {# Filter checkboxes #} {% for filter_name, filter_data in filters.items %} -
+