diff --git a/core/templates/index.html b/core/templates/index.html index 41300fb..be75ffb 100644 --- a/core/templates/index.html +++ b/core/templates/index.html @@ -1,4 +1,5 @@ {% extends "base.html" %} +{% load static %} {% block content %}
-
-
-
-
-
- Information - {% for game in games %} - {{ game.display_name }} - {% endfor %} -
-
-
-
-
+
{% include "partials/toc.html" %}
-
-
-
-
-

Information

-
-

- This site allows users to subscribe to Twitch drops. You can either get notified when the website finds a new drop on the Twitch site or get notified when the drops begin to be farmable. -

-

- You can add a Discord Webhook here. -

-
-
-

Webhooks

- {% for webhook in webhooks %} -
- {{ webhook.name }} - {{ webhook.name }} -
- - -
-
- - -
-
-
- - -
-
- - -
-
- {% endfor %} -
-
-
-
-
+ {% include "partials/info_box.html" %} {% for game in games %} -
-
-
- {{ game.display_name }} -
-
-
-

- {{ game.display_name }} -

-
- {% for webhook in webhooks %} -
- {{ webhook.name }} - {{ webhook.name }} -
- - -
-
- - -
-
- {% endfor %} -
- {% for campaign in game.campaigns %} - {% if not forloop.first %}
{% endif %} -
-

{{ campaign.name }}

-

- Ends in: {{ campaign.end_at|timeuntil }} -

- {% if campaign.description != campaign.name %} - {% if campaign.description|length > 100 %} -

- -

-
-
{{ campaign.description }}
-
-
- {% else %} -

{{ campaign.description }}

- {% endif %} - {% endif %} -
- {% for drop in campaign.drops %} -
- {{ drop.name }} drop image - {{ drop.name }} -
- {% endfor %} -
-
- {% endfor %} -
-
-
-
+ {% include "partials/game_card.html" %} {% endfor %}
- + {% endblock content %} diff --git a/core/templates/partials/game_card.html b/core/templates/partials/game_card.html new file mode 100644 index 0000000..2646a8b --- /dev/null +++ b/core/templates/partials/game_card.html @@ -0,0 +1,81 @@ +
+
+
+ {{ game.display_name }} +
+
+
+

+ {{ game.display_name }} +

+
+ {% for webhook in webhooks %} +
+ {{ webhook.name }} + {{ webhook.name }} +
+ + +
+
+ + +
+
+ {% endfor %} +
+ {% for campaign in game.campaigns %} + {% if not forloop.first %}
{% endif %} +
+

{{ campaign.name }}

+

+ Ends in: {{ campaign.end_at|timeuntil }} +

+ {% if campaign.description != campaign.name %} + {% if campaign.description|length > 100 %} +

+ +

+
+
{{ campaign.description }}
+
+
+ {% else %} +

{{ campaign.description }}

+ {% endif %} + {% endif %} +
+ {% for drop in campaign.drops %} +
+ {{ drop.name }} drop image + {{ drop.name }} +
+ {% endfor %} +
+
+ {% endfor %} +
+
+
+
diff --git a/core/templates/partials/info_box.html b/core/templates/partials/info_box.html new file mode 100644 index 0000000..ab8a8ec --- /dev/null +++ b/core/templates/partials/info_box.html @@ -0,0 +1,53 @@ +
+
+
+
+

Information

+
+

+ This site allows users to subscribe to Twitch drops. You can either get notified when the website finds a new drop on the Twitch site or get notified when the drops begin to be farmable. +

+

+ You can add a Discord Webhook here. +

+
+
+

Webhooks

+ {% for webhook in webhooks %} +
+ {{ webhook.name }} + {{ webhook.name }} +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ {% endfor %} +
+
+
+
+
diff --git a/core/templates/partials/toc.html b/core/templates/partials/toc.html new file mode 100644 index 0000000..9149807 --- /dev/null +++ b/core/templates/partials/toc.html @@ -0,0 +1,14 @@ +
+
+
+
+ Information + {% for game in games %} + {{ game.display_name }} + {% endfor %} +
+
+
+
diff --git a/static/js/index.js b/static/js/index.js new file mode 100644 index 0000000..f103c32 --- /dev/null +++ b/static/js/index.js @@ -0,0 +1,16 @@ +// Create a new ScrollSpy instance that will track scroll position and update the active item in the table of contents +const scrollSpy = new bootstrap.ScrollSpy(document.body, { + target: '.toc' // The target element that contains the table of contents +}); + +// Listen for the 'activate.bs.scrollspy' event, which is triggered when a new item becomes active in the table of contents +// This is needed because the toc can be longer than our screen and we want to scroll the active item into view +document.body.addEventListener('activate.bs.scrollspy', function (event) { + // Find the currently active item in the table of contents + const activeItem = document.querySelector('.toc .active'); + + // If an active item is found, scroll it into view smoothly + if (activeItem) { + activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); + } +});