Added an about section that is accessible through a menu button in the top right and filled it, moved source, settings, and how-to into the about section. Fixed minor issue where summary divs were not displaying the right color coding if they had no checks and were undiscovered.
This commit is contained in:
parent
157763876b
commit
34757ac461
|
|
@ -410,11 +410,19 @@ async function apply_summary_colors(summary) {
|
|||
}
|
||||
} else {
|
||||
if (summary.entrances_remaining > 0) {
|
||||
summary.element.classList.add(
|
||||
"from-highlight-entrances-light",
|
||||
"to-highlight-entrances-dark",
|
||||
"text-highlight-entrances-text"
|
||||
);
|
||||
if (summary.entrances_found <= 0) {
|
||||
summary.element.classList.add(
|
||||
"from-highlight-undiscovered-light",
|
||||
"to-highlight-undiscovered-dark",
|
||||
"text-highlight-undiscovered-text"
|
||||
);
|
||||
} else {
|
||||
summary.element.classList.add(
|
||||
"from-highlight-entrances-light",
|
||||
"to-highlight-entrances-dark",
|
||||
"text-highlight-entrances-text"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
summary.element.classList.add(
|
||||
"from-highlight-empty-light",
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 5.5 MiB After Width: | Height: | Size: 5.5 MiB |
|
Before Width: | Height: | Size: 5.6 MiB After Width: | Height: | Size: 5.6 MiB |
|
|
@ -1,36 +1,37 @@
|
|||
{% load static %}
|
||||
<div class="absolute inset-x-0 right-0 sm:top-2 top-4">
|
||||
<details class="group absolute right-2 open:w-auto open:static w-fit open:mx-4 flex p-2 space-y-2 open:rounded-md h-fit open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
|
||||
<summary class="flex mt-2 mr-6 sm:m-0 group-open:m-0 content-none group-open:justify-end shake-trigger">
|
||||
<img class="p-2 w-12 h-12 group-open:hidden shake rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
|
||||
<div class="hidden group-open:flex group-open:w-full group-open:flex-col group-open:space-y-2">
|
||||
<p class="flex justify-start w-full text-lg">About this tracker</p>
|
||||
<hr class="flex w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
</div>
|
||||
<img class="hidden w-10 h-10 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
|
||||
<details class="group py-2 absolute right-2 open:w-auto open:static w-fit open:mx-4 open:rounded-md h-auto open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
|
||||
<summary class="block float-right p-2 mt-2 mr-6 list-none transition sm:m-0 group-open:m-0 content-none group-open:justify-end">
|
||||
<img class="p-2 w-12 h-12 group-open:hidden rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
|
||||
<img class="hidden w-8 h-8 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
|
||||
</summary>
|
||||
<details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<summary class="justify-start">Settings</summary>
|
||||
{% include "tracker/address/index.html" %}
|
||||
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||
<input onclick="hide_empty_summaries()"
|
||||
type="checkbox"
|
||||
id="hideDone"
|
||||
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
|
||||
<label for="hideDone"
|
||||
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
|
||||
Hide completed areas
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||
<input onclick="notices_ur_debug()"
|
||||
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
|
||||
type="checkbox"
|
||||
id="show-debug" />
|
||||
<label for="show-debug"
|
||||
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
|
||||
</div>
|
||||
</details>
|
||||
{% include "tracker/howto/index.html" %}
|
||||
<div class="block p-2 space-y-2">
|
||||
<p class="w-full px-2 pt-2 text-lg">About</p>
|
||||
<hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="flex flex-col flex-grow-0 p-2 space-y-2 max-h-[80svh] overflow-y-scroll">
|
||||
{% include "tracker/howto/index.html" %}
|
||||
<details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
|
||||
<summary class="justify-start">Settings</summary>
|
||||
<hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
{% include "tracker/address/index.html" %}
|
||||
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||
<input onclick="hide_empty_summaries()"
|
||||
type="checkbox"
|
||||
id="hideDone"
|
||||
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
|
||||
<label for="hideDone"
|
||||
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
|
||||
Hide completed areas
|
||||
</label>
|
||||
</div>
|
||||
{% comment %} <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||
<input onclick="notices_ur_debug()" class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" type="checkbox" id="show-debug" />
|
||||
<label for="show-debug" class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
|
||||
</div> {% endcomment %}
|
||||
</details>
|
||||
{% include "tracker/credits/index.html" %}
|
||||
{% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/tunic-randomizer/" %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
{% load static %}
|
||||
<details class="open:pb-4 flex-shrink-0 flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text overflow-hidden">
|
||||
<summary class="justify-start">Credits</summary>
|
||||
<hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="rounded-md p-4 bg-gradient-to-br from-[#3333ff40] to-[#7777ff40]">
|
||||
<div class="overflow-y-scroll overflow-x-auto rounded-md overscroll-y-contain max-h-[28rem] lg:max-h-[36rem] space-y-2">
|
||||
<div class="w-full bg-gradient-to-br from-[#24242480] to-[#48484840] rounded-md p-2 overflow-x-scroll">
|
||||
<div class="flex flex-row mx-auto space-x-2 w-fit min-h-[21rem]">
|
||||
<a class="rounded-md" href="https://werefox.cafe" target="_blank">
|
||||
<img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem] max-h-96 w-fit" src="{% static "tracker/images/trading_cards/alice.png" %}" alt="A TUNIC themed trading card for "Alice Werefox," which pictures her character lying on the ground near a chest in a small alcove with text reading: "Everything is accessible with ladder storage if you try hard enough."" height="" width="" />
|
||||
</a>
|
||||
<a class="rounded-md"
|
||||
href="https://discordapp.com/users/105891707777748992"
|
||||
target="_blank">
|
||||
<img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem] max-h-96" src="{% static "tracker/images/trading_cards/glace.png" %}" alt="A TUNIC themed trading card for "Glace Painbringer," which pictures her character shooting an icebolt with text reading: "The only kind of person capable of inflicting such pain... is one who has sustained a great deal worse."" height="" width="" />
|
||||
</a>
|
||||
<a class="rounded-md"
|
||||
href="https://twitch.tv/fletchisafurry"
|
||||
target="_blank">
|
||||
<img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem] max-h-96" src="{% static "tracker/images/trading_cards/fletcher.png" %}" alt="A TUNIC themed trading card for "Fletcher, Fleet Fox," which pictures their character dashing with text reading: "Deftly jumping from project to project, there is no effort too foolhardy for them, no extreme too distant for consideration."." height="" width="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="p-2 space-y-2">
|
||||
This tracker was created by <a class="underline text-bluelight-link"
|
||||
href="https://werefox.cafe"
|
||||
target="_blank">Alice Werefox</a> and <a class="underline text-bluelight-link"
|
||||
href="https://discordapp.com/users/105891707777748992"
|
||||
target="_blank">glace</a> with special help from <a class="underline text-bluelight-link"
|
||||
href="https://twitch.tv/fletchisafurry"
|
||||
target="_blank">Fletcher</a> whom provided the custom art assets.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
|
||||
<summary class="justify-start">How To Use This Tracker</summary>
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
|
||||
|
|
|
|||
|
|
@ -1,97 +1,98 @@
|
|||
{% extends "index.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
|
||||
<div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
|
||||
{% include "tracker/about/index.html" %}
|
||||
<div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
|
||||
{% if debug != '' %}
|
||||
<div class="px-2 space-y-2">
|
||||
<div class="flex flex-col align-middle max-w-fit">
|
||||
<div class="flex flex-row space-x-2 align-middle sm:h-12 max-w-fit">
|
||||
<span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle shake">
|
||||
<img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
|
||||
alt="A trans pride fox emoji."
|
||||
width="32"
|
||||
height="32" />
|
||||
</span>
|
||||
<div class="min-w-0 my-auto text-xl align-middle overflow-clip sm:text-3xl">Tunic Transition Tracker</div>
|
||||
</div>
|
||||
<div class="flex pb-2 text-lg sm:text-2xl max-w-fit font-trunic">
|
||||
(
|
||||
<div class="pt-1.5 text-sm sm:text-lg"> tuniik' t'raan'ziishuun' t'raakx </div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
<div class="flex flex-col px-2 space-y-2 text-lg rounded-sm md:flex-row md:space-x-4 md:space-y-0 bg-gradient-to-r from-bluelight-light to-bluelight-dark"
|
||||
id="overview-totals">
|
||||
<div class="flex basis-1/2">
|
||||
<div class="flex-col min-w-full">
|
||||
<div>
|
||||
Checks
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="overview-checks">
|
||||
{{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }} ({{ totals.Checks.Remaining }} left)
|
||||
</div>
|
||||
<div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
|
||||
<div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
|
||||
{% include "tracker/about/index.html" %}
|
||||
<div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
|
||||
{% if debug != '' %}
|
||||
<div class="px-2 space-y-2">
|
||||
<div class="flex flex-col align-middle max-w-fit">
|
||||
<div class="flex flex-row space-x-2 align-middle sm:h-12 max-w-fit">
|
||||
<span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle shake">
|
||||
<img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
|
||||
alt="A trans pride fox emoji."
|
||||
width="32"
|
||||
height="32" />
|
||||
</span>
|
||||
<div class="min-w-0 pr-8 my-auto text-xl align-middle overflow-clip sm:text-3xl">Tunic Transition Tracker</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex basis-1/2">
|
||||
<div class="flex-col min-w-full">
|
||||
<div>
|
||||
Entrances
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="overview-entrances">
|
||||
{{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }} ({{ totals.Entrances.Remaining }} left)
|
||||
</div>
|
||||
<div class="flex pb-2 text-lg sm:text-2xl max-w-fit font-trunic">
|
||||
(
|
||||
<div class="pt-1.5 text-sm sm:text-lg"> tuniik' t'raan'ziishuun' t'raakx </div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-2 border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2">
|
||||
{% include "tracker/status/index.html" %}
|
||||
<div class="flex flex-col max-w-full space-y-2">
|
||||
<div class="flex flex-col space-y-2" id="breakdown-list">
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="hidden" is_current_scene="false" %}
|
||||
{% for scene_title, scene_data in scenes.items %}
|
||||
{% if scene_title == current_scene %}
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="order-first" is_current_scene="true" %}
|
||||
{% else %}
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="order-last hidden" is_current_scene="false" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="space-y-1">
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
<div class="flex flex-col px-2 space-y-2 text-lg rounded-sm md:flex-row md:space-x-4 md:space-y-0 bg-gradient-to-r from-bluelight-light to-bluelight-dark"
|
||||
id="overview-totals">
|
||||
<div class="flex basis-1/2">
|
||||
<div class="flex-col min-w-full">
|
||||
<div>
|
||||
Checks
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="overview-checks">
|
||||
{{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }} ({{ totals.Checks.Remaining }} left)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex basis-1/2">
|
||||
<div class="flex-col min-w-full">
|
||||
<div>
|
||||
Entrances
|
||||
<hr class="border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<div class="overview-entrances">
|
||||
{{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }} ({{ totals.Entrances.Remaining }} left)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-2 border-2 border-bluelight-dark rounded-xl" />
|
||||
</div>
|
||||
<details class="flex flex-col rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<summary class="justify-start px-4 py-2">Summary</summary>
|
||||
<div class="px-2 rounded-xl">
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="py-2" id="summary-list">{% include "tracker/summary/list.html" %}</div>
|
||||
</div>
|
||||
</details>
|
||||
{% include "tracker/codes/index.html" %}
|
||||
<details class="rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<summary class="justify-start px-4 py-2">Hints</summary>
|
||||
<div class="px-2 rounded-xl">
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="flex-col py-2 space-y-1 *:text-wrap *:break-words"
|
||||
id="hints-list">
|
||||
{% include "tracker/hints/index.html" with value="" extra_classes="hidden" %}
|
||||
{% for name, value in hints.items %}
|
||||
{% include "tracker/hints/index.html" %}
|
||||
<div class="flex flex-col space-y-2">
|
||||
{% include "tracker/status/index.html" %}
|
||||
<div class="flex flex-col max-w-full space-y-2">
|
||||
<div class="flex flex-col space-y-2" id="breakdown-list">
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="hidden" is_current_scene="false" %}
|
||||
{% for scene_title, scene_data in scenes.items %}
|
||||
{% if scene_title == current_scene %}
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="order-first" is_current_scene="true" %}
|
||||
{% else %}
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="order-last hidden" is_current_scene="false" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="no_data" />{% endif %}</div>
|
||||
{% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/TunicTransitionTracker" %}
|
||||
<details class="flex flex-col rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<summary class="justify-start px-4 py-2">Summary</summary>
|
||||
<div class="px-2 rounded-xl">
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="py-2" id="summary-list">{% include "tracker/summary/list.html" %}</div>
|
||||
</div>
|
||||
</details>
|
||||
{% include "tracker/codes/index.html" %}
|
||||
<details class="rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||
<summary class="justify-start px-4 py-2">Hints</summary>
|
||||
<div class="px-2 rounded-xl">
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<div class="flex-col py-2 space-y-1 *:text-wrap *:break-words"
|
||||
id="hints-list">
|
||||
{% include "tracker/hints/index.html" with value="" extra_classes="hidden" %}
|
||||
{% for name, value in hints.items %}
|
||||
{% include "tracker/hints/index.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="no_data"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,6 @@
|
|||
font-family: "Trunic-Regular";
|
||||
src: url("/static/fonts/Trunic-Regular.otf");
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue