From e5a49993ad0a36ecd7e381fa7f0d333bcc32fd73 Mon Sep 17 00:00:00 2001 From: Ada Werefox Date: Sun, 10 Mar 2024 21:09:37 -0500 Subject: [PATCH] A lot of styling, moving elements around, compacting the UI. --- .vscode/tailwind.json | 55 ++++++++++ .../tracker/static/tracker/assets/refresh.js | 34 +++--- .../static/tracker/images/trunic_title.png | Bin 0 -> 3988 bytes tunictracker/tracker/templates/index.html | 2 +- .../templates/tracker/breakdown/block.html | 98 +++++++++--------- .../templates/tracker/codes/block.html | 9 +- .../templates/tracker/codes/index.html | 7 +- .../tracker/templates/tracker/index.html | 76 ++++++++------ .../templates/tracker/summary/block.html | 16 +-- .../templates/tracker/summary/list.html | 16 ++- tunictracker/tunictracker/settings.py | 2 +- tunictracker/tunictracker/urls.py | 4 +- .../static/fonts/DejaVuSansMono.ttf | Bin 0 -> 1149180 bytes .../werefoxtheme/static_src/src/styles.css | 5 + .../static_src/tailwind.config.js | 15 +++ 15 files changed, 216 insertions(+), 123 deletions(-) create mode 100644 .vscode/tailwind.json create mode 100644 tunictracker/tracker/static/tracker/images/trunic_title.png create mode 100644 tunictracker/werefoxtheme/static/fonts/DejaVuSansMono.ttf diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..a45bccc --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/tunictracker/tracker/static/tracker/assets/refresh.js b/tunictracker/tracker/static/tracker/assets/refresh.js index be84b29..41dd624 100644 --- a/tunictracker/tracker/static/tracker/assets/refresh.js +++ b/tunictracker/tracker/static/tracker/assets/refresh.js @@ -106,10 +106,10 @@ async function refresh_elements(cross_codes) { // Clone all the needed elements for updating. let overview_checks_title = document - .getElementById("overview") + .getElementById("overview-totals") .querySelector(".overview-checks"); let overview_entrances_title = document - .getElementById("overview") + .getElementById("overview-totals") .querySelector(".overview-entrances"); let summary_block = document .getElementById("overview") @@ -180,7 +180,6 @@ async function refresh_elements(cross_codes) { let breakdown_block_checks_list_item = breakdown_block .querySelector(".breakdown-block-checks-list") .firstElementChild.cloneNode(true); - breakdown_block_checks_list_item.classList.remove("hidden"); let breakdown_block_entrances_title = breakdown_block.querySelector( ".breakdown-block-entrances-title" ); @@ -190,14 +189,12 @@ async function refresh_elements(cross_codes) { let breakdown_block_entrances_list_item = breakdown_block .querySelector(".breakdown-block-entrances-list") .firstElementChild.cloneNode(true); - breakdown_block_entrances_list_item.classList.remove("hidden"); let new_breakdown_block_mapped_list = breakdown_block .querySelector(".breakdown-block-mapped-list") .cloneNode(true); let breakdown_block_mapped_list_item = breakdown_block .querySelector(".breakdown-block-mapped-list") .firstElementChild.cloneNode(true); - breakdown_block_mapped_list_item.classList.remove("hidden"); cross_codes_block = document .getElementById("overview") @@ -219,12 +216,15 @@ async function refresh_elements(cross_codes) { new_breakdown_block_checks_list.appendChild( breakdown_block_checks_list_item.cloneNode(true) ); + breakdown_block_checks_list_item.classList.remove("hidden"); new_breakdown_block_entrances_list.appendChild( breakdown_block_entrances_list_item.cloneNode(true) ); + breakdown_block_entrances_list_item.classList.remove("hidden"); new_breakdown_block_mapped_list.appendChild( breakdown_block_mapped_list_item.cloneNode(true) ); + breakdown_block_mapped_list_item.classList.remove("hidden"); // Create variables for commonly used values. let scene_checks_undiscovered = @@ -324,25 +324,24 @@ async function refresh_elements(cross_codes) { } // Apply color coding to summary block - summary_block.classList.remove( - "bg-green-900", - "bg-yellow-900", - "bg-blue-900", - "bg-red-900" + summary_block.firstElementChild.classList.remove( + "bg-highlight-both-translucent", + "bg-highlight-checks-translucent", + "bg-highlight-entrances-translucent" ); if ( scene_checks_undiscovered > 0 && scene_entrances_undiscovered > 0 ) { - if (scene_entrances_undiscovered == scene_entrances_total) { - summary_block.classList.add("bg-red-900"); - } else { - summary_block.classList.add("bg-green-900"); - } + summary_block.firstElementChild.classList.add("bg-highlight-both-translucent"); } else if (scene_checks_undiscovered > 0) { - summary_block.classList.add("bg-yellow-900"); + summary_block.firstElementChild.classList.add( + "bg-highlight-checks-translucent" + ); } else if (scene_entrances_undiscovered > 0) { - summary_block.classList.add("bg-blue-900"); + summary_block.firstElementChild.classList.add( + "bg-highlight-entrances-translucent" + ); } // Replace lists @@ -375,7 +374,6 @@ async function refresh_elements(cross_codes) { scene_entrances_undiscovered <= 0 ) { summary_block.classList.add("hidden"); - // breakdown_block.classList.add("hidden"); } new_summary_list.firstElementChild.appendChild( summary_block.cloneNode(true) diff --git a/tunictracker/tracker/static/tracker/images/trunic_title.png b/tunictracker/tracker/static/tracker/images/trunic_title.png new file mode 100644 index 0000000000000000000000000000000000000000..104f9350c790bd18ef7333eeac42981148bed910 GIT binary patch literal 3988 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 - + {% block content %} {% endblock content %} diff --git a/tunictracker/tracker/templates/tracker/breakdown/block.html b/tunictracker/tracker/templates/tracker/breakdown/block.html index 2ac1fa9..c40c980 100644 --- a/tunictracker/tracker/templates/tracker/breakdown/block.html +++ b/tunictracker/tracker/templates/tracker/breakdown/block.html @@ -1,61 +1,63 @@ -
-
{{ scene_title }}
-
-
-
-
- Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }} +
+
+
{{ scene_title }}
+
+
+
+
+ Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }} +
+
+
+
+ + {% for check_name, check in scene_data.Checks.items %} + {% if not check %} +
    + ❌ {{ check_name }} +
+ {% endif %} + {% endfor %}
-
-
- - {% for check_name, check in scene_data.Checks.items %} - {% if not check %} -
    - ❌ {{ check_name }} -
- {% endif %} - {% endfor %} +
+
+
+ Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }} +
+
+
+
+ + {% for entrance_origin, entrance_destination in scene_data.Entrances.items %} + {% if entrance_destination == "" %} +
    + ❌ {{ entrance_origin }} +
+ {% else %} + + {% endif %} + {% endfor %} +
-
-
-
- Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }} -
-
-
-
-
-
-
- - {% for entrance_origin, entrance_destination in scene_data.Entrances.items %} - {% if entrance_destination %} -
    - ✔️ {{ entrance_origin }} -> {{ entrance_destination }} -
- {% endif %} - {% endfor %} -
-
-
{% include "tracker/codes/index.html" %}
diff --git a/tunictracker/tracker/templates/tracker/codes/block.html b/tunictracker/tracker/templates/tracker/codes/block.html index 87b7264..a547e6c 100644 --- a/tunictracker/tracker/templates/tracker/codes/block.html +++ b/tunictracker/tracker/templates/tracker/codes/block.html @@ -1,8 +1,9 @@ {% if not is_entered %} -