Add vite react #45

Closed
lukas wants to merge 42 commits from add-frontend into main
3 changed files with 28 additions and 8 deletions
Showing only changes of commit d2e0bcfb12 - Show all commits

View File

@ -1,6 +1,7 @@
## Unreleased ## Unreleased
* Allow filtering by game, edition, purchase from the session list * Allow filtering by game, edition, purchase from the session list
* Add icons for the above
## 1.0.2 / 2023-02-18 21:48+01:00 ## 1.0.2 / 2023-02-18 21:48+01:00

View File

@ -17,8 +17,20 @@ textarea {
grid-template-columns: 3fr repeat(3, 1fr) 0.5fr 1fr; grid-template-columns: 3fr repeat(3, 1fr) 0.5fr 1fr;
} }
.purchase-name:hover > span:nth-child(2) { .purchase-name > span:nth-child(2) {
@apply dark:text-slate-300 @apply ml-4
}
.purchase-name > span:nth-child(2) > a > img {
@apply opacity-0 transition-opacity duration-500
}
.purchase-name:hover > span:nth-child(2) > a > img {
@apply opacity-50
}
.purchase-name > span:nth-child(2) > a > img:hover {
@apply opacity-100
} }
#button-container button { #button-container button {

View File

@ -1,5 +1,7 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static %}
{% block title %}{{ title }}{% endblock title %} {% block title %}{{ title }}{% endblock title %}
{% block content %} {% block content %}
@ -39,13 +41,18 @@
<div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div> <div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div>
{% for data in dataset %} {% for data in dataset %}
<div class="purchase-name"> <div class="purchase-name">
<span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">({{ data.purchase.get_ownership_type_display }})</span></span> <span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">(<a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">{{ data.purchase.get_ownership_type_display }}</a>)</span></span>
<span class="dark:text-slate-700 transition-colors duration-300"> <span>
(<a class="hover:underline" href="{% url 'list_sessions_by_game' data.purchase.edition.game.id %}">G</a>, <a href="{% url 'list_sessions_by_game' data.purchase.edition.game.id %}">
<a class="hover:underline" href="{% url 'list_sessions_by_edition' data.purchase.edition.id %}">E</a>, <img src="{% static 'icons/game_white.png' %}" width="32" class="inline" alt="Filter by this game" title="Filter by this game" />
<a class="hover:underline" href="{% url 'list_sessions_by_purchase' data.purchase.id %}">P</a>, </a>
<a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">O</a>) <a href="{% url 'list_sessions_by_edition' data.purchase.edition.id %}">
<img src="{% static 'icons/edition_white.png' %}" width="32" class="inline" alt="Filter by this edition" title="Filter by this edition" />
</a>
<a href="{% url 'list_sessions_by_purchase' data.purchase.id %}">
<img src="{% static 'icons/purchase_white.png' %}" width="32" class="inline" alt="Filter by this purchase" title="Filter by this purchase" />
</a>
</span> </span>
</div> </div>
<div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">{{ data.purchase.platform }}</a></div> <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">{{ data.purchase.platform }}</a></div>