ada/tunic-tracker-redux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A lot of styling, moving elements around, compacting the UI.

Browse Source
This commit is contained in:
Ada Werefox 2024-03-10 21:09:37 -05:00
parent 34c9fb5026
commit e5a49993ad
15 changed files with 216 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
.vscode/tailwind.json vendored Normal file
View File

@ -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"
}
]
}
]
}

34
tunictracker/tracker/static/tracker/assets/refresh.js
View File

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

BIN
tunictracker/tracker/static/tracker/images/trunic_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

2
tunictracker/tracker/templates/index.html
View File

@ -13,7 +13,7 @@
{% tailwind_css %}
<script src="{% static "tracker/assets/refresh.js" %}"></script>
</head>
<body class="bg-[#242424]">
<body class="bg-[#242424] font-nerd">
{% block content %}
{% endblock content %}
</body>

22
tunictracker/tracker/templates/tracker/breakdown/block.html
View File

@ -1,5 +1,6 @@
<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark {{ extra_classes }}">
<div class="flex text-lg breakdown-block-title">{{ scene_title }}</div>
<div class="flex flex-col space-y-2 max-w-full {{ extra_classes }}">
<div class="px-2">
<div class="flex text-xl breakdown-block-title">{{ scene_title }}</div>
<div class="flex flex-col md:flex-row justify-center md:space-x-4">
<div class="flex flex-col basis-1/2 overflow-hidden">
<div class="my-2 flex flex-col space-y-2">
@ -9,11 +10,11 @@
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
<div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
<ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
</ul>
{% for check_name, check in scene_data.Checks.items %}
{% if not check %}
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
<ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
❌ {{ check_name }}
</ul>
{% endif %}
@ -28,15 +29,15 @@
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
<div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
<ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
</ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination == "" %}
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
<ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
❌ {{ entrance_origin }}
</ul>
{% else %}
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
<ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
❌ {{ entrance_origin }}
</ul>
{% endif %}
@ -46,16 +47,17 @@
</div>
<div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
<div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
<ul class="bg-bluelight rounded-xl px-1 text-sm hidden">
<ul class="py-0.5 bg-bluelight rounded-md px-1 text-sm hidden">
</ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination %}
<ul class="bg-bluelight rounded-xl px-1 text-sm">
<ul class="py-0.5 bg-bluelight rounded-md px-1 text-sm">
✔️ {{ entrance_origin }} -> {{ entrance_destination }}
</ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="pt-4">{% include "tracker/codes/index.html" %}</div>
{% include "tracker/codes/index.html" %}
</div>
</div>

9
tunictracker/tracker/templates/tracker/codes/block.html
View File

@ -1,8 +1,9 @@
{% if not is_entered %}
<ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-dark">
<div class="codes-list-item-title text-md">{{ name }}</div>
<div class="m-auto justify-center align-top">
<div class="max-w-64 codes-list-item-code text-2xl break-all">{{ code }}</div>
<ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-light border-4 border-bluelight-translucent-dark">
<div class="pl-2 codes-list-item-title text-base">{{ name }}</div>
<hr class="mb-2 border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="min-x-full">
<div class="codes-list-item-code text-2xl text-justify break-all mx-2 align-top">{{ code }}</div>
</div>
</ul>
{% endif %}

7
tunictracker/tracker/templates/tracker/codes/index.html
View File

@ -1,7 +1,8 @@
<details class="p-2 flex flex-col space-y-2 max-w-full text-lg rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
<details class="flex flex-col space-y-2 max-w-full text-base rounded-xl justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
<summary>Holy Cross Codes</summary>
<div class="flex flex-col space-y-2 max-h-96 overflow-y-scroll">
<ul class="flex flex-col space-y-2 rounded-xl codes-list">
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="flex flex-col space-y-2 max-h-96 rounded-xl overflow-y-scroll">
<ul class="grid grid-flow-row md:grid-cols-3 xl:grid-cols-5 gap-2 rounded-xl codes-list">
{% for name, code in default_codes.items %}
{% include "tracker/codes/block.html" with is_entered=False %}
{% endfor %}

62
tunictracker/tracker/templates/tracker/index.html
View File

@ -2,36 +2,55 @@
{% load static %}
{% block content %}
<div class="container monospace py-4">
<div class="border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
<div class="p-2 border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
{% if debug != '' %}
<h1 class="mt-2 px-2 flex text-2xl">
<span class="relative inline-block align-middle h-8 w-8">
<div class="space-y-2 px-2">
<div class="flex flex-col align-middle max-w-fit">
<div class="flex flex-row align-middle max-w-fit h-12 space-x-2">
<span class="h-8 max-w-8 my-auto align-middle">
<img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
alt="A trans pride fox emoji."
width=""
height="" />
width="32"
height="32" />
</span>
&nbsp;Tunic Transition Tracker
</h1>
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="p-2 flex flex-col space-y-2">
{% include "tracker/status/index.html" %}
<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark"
id="overview">
<div class="text-lg mb-2">Overview</div>
<div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
<span class="max-h-12 max-w-64 my-auto align-middle">
<img src="{% static 'tracker/images/trunic_title.png' %}"
alt="A trans pride fox emoji."
width="365"
height="64" />
</span>
</div>
<div class="mt-auto text-sm max-w-fit">(Tunic Transition Tracker)</div>
</div>
</div>
<div class="space-y-1">
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
<div class="px-2 flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0 text-lg bg-bluelight-translucent-dark rounded-sm"
id="overview-totals">
<div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
<div class="flex basis-1/2 overview-entrances">
Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
</div>
</div>
<hr class="mt-2 mb-4 border-2 border-bluelight-translucent-dark rounded-xl" />
<hr class="mb-2 border-2 border-bluelight-dark rounded-xl" />
</div>
<div class="flex flex-col space-y-2">
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
{% include "tracker/status/index.html" %}
<div class="p-flex flex-col max-w-full" id="overview">
<div class="flex flex-col space-y-2">
<div id="breakdown-current">
{% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
</div>
<hr class="my-2 border-2 border-bluelight-translucent-dark rounded-xl" />
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
<summary class="justify-start p-2 text-lg">Summary</summary>
<div class="p-2 summary-list">{% include "tracker/summary/list.html" %}</div>
<div class="mb-2 px-2 space-y-2 rounded-xl">
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="summary-list">{% include "tracker/summary/list.html" %}</div>
</div>
</details>
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
<summary class="justify-start p-2 text-lg">Breakdown</summary>
<div class="px-2 flex flex-col space-y-2 breakdown-list">
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
@ -46,17 +65,14 @@
</details>
</div>
</div>
<div id="breakdown-current">
{% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
</div>
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
<summary class="justify-start">Settings</summary>
<div class="p-2 flex flex-col space-y-2">
{% include "tracker/settings/index.html" %}
{% include "tracker/address/index.html" %}
</div>
</details>
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
<summary class="justify-start">Tracker Debug</summary>
<div class="py-2 flex flex-col space-y-2" id="debug-block">
<ul class="p-2 rounded-xl bg-bluelight-translucent hidden">

4
tunictracker/tracker/templates/tracker/summary/block.html
View File

@ -1,4 +1,5 @@
<div class="p-2 flex flex-col rounded-xl border-4 border-bluelight-dark bg-opacity-50 {{ extra_classes }}">
<div class="rounded-xl border-4 border-bluelight {{ is_hidden }}">
<div class="p-2 min-h-full flex flex-col rounded-lg {{ extra_classes }}">
<div class="summary-title">{{ scene }}:</div>
<div class="summary-checks">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
@ -7,3 +8,4 @@
Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
</div>
</div>
</div>

16
tunictracker/tracker/templates/tracker/summary/list.html
View File

@ -1,19 +1,15 @@
<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
{% include "tracker/summary/block.html" with extra_classes="hidden" %}
<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 rounded-xl overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
{% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
{% for scene, scene_data in scenes.items %}
{% if scene == current_scene.title %}
{% include "tracker/summary/block.html" with extra_classes="hidden" %}
{% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
{% elif scene != "Entrances" and scene != "Checks" %}
{% if scene_data.Totals.Checks.Undiscovered > 0 and scene_data.Totals.Entrances.Undiscovered > 0 %}
{% if scene_data.Totals.Entrances.Undiscovered == scene_data.Totals.Entrances.Total %}
{% include "tracker/summary/block.html" with extra_classes="bg-red-900" %}
{% else %}
{% include "tracker/summary/block.html" with extra_classes="bg-green-900" %}
{% endif %}
{% include "tracker/summary/block.html" with extra_classes="bg-highlight-both-translucent" is_hidden="" %}
{% elif scene_data.Totals.Checks.Undiscovered > 0 %}
{% include "tracker/summary/block.html" with extra_classes="bg-yellow-900" %}
{% include "tracker/summary/block.html" with extra_classes="bg-highlight-checks-translucent" is_hidden="" %}
{% elif scene_data.Totals.Entrances.Undiscovered > 0 %}
{% include "tracker/summary/block.html" with extra_classes="bg-blue-900" %}
{% include "tracker/summary/block.html" with extra_classes="bg-highlight-entrances-translucent" is_hidden="" %}
{% endif %}
{% endif %}
{% endfor %}

2
tunictracker/tunictracker/settings.py
View File

@ -23,7 +23,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
SECRET_KEY = 'django-insecure-ae-fwu3z$wexeiac4ggt0l@x1*uq5v9-q&$y#frf85xli)bo8f'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
DEBUG = True
ALLOWED_HOSTS = [
"localhost",

4
tunictracker/tunictracker/urls.py
View File

@ -16,8 +16,10 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path("", include("tracker.urls")),
path('admin/', admin.site.urls),
]
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

BIN
tunictracker/werefoxtheme/static/fonts/DejaVuSansMono.ttf Normal file
View File

Binary file not shown.

5
tunictracker/werefoxtheme/static_src/src/styles.css
View File

@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "DejaVuSansMono";
src: url("/static/fonts/DejaVuSansMono.ttf");
}

15
tunictracker/werefoxtheme/static_src/tailwind.config.js
View File

@ -57,6 +57,7 @@ module.exports = {
bluelight: {
DEFAULT: "#317eb1",
translucent: {
light: "#317eb140",
DEFAULT: "#317eb180",
dark: "#2facff40",
},
@ -80,6 +81,20 @@ module.exports = {
translucent: "#ffecf930",
},
},
"highlight": {
checks: {
DEFAULT: "#A431B1",
translucent: "#A431B188",
},
entrances: {
DEFAULT: "#B16431",
translucent: "#B1643188",
},
both: {
DEFAULT: "#3EB131",
translucent: "#3EB13188",
},
},
},
},
},