Make game overview more appealing
This commit is contained in:
parent
72998ffc02
commit
e19caf47bf
SSH Key Fingerprint:
SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
|
|
@ -11,7 +11,7 @@
|
||||||
* increase session count on game overview when starting a new session
|
* increase session count on game overview when starting a new session
|
||||||
* game overview:
|
* game overview:
|
||||||
* sort purchases also by date purchased (on top of date released)
|
* sort purchases also by date purchased (on top of date released)
|
||||||
* improve header format
|
* improve header format, make it more appealing
|
||||||
* ignore manual sessions when calculating session average
|
* ignore manual sessions when calculating session average
|
||||||
* stats: improve purchase name consistency
|
* stats: improve purchase name consistency
|
||||||
* session list: use display name instead of sort name
|
* session list: use display name instead of sort name
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,21 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "IBM Plex Serif";
|
||||||
|
src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "IBM Plex Sans Condensed";
|
||||||
|
src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* a:hover {
|
/* a:hover {
|
||||||
text-decoration-color: #ff4400;
|
text-decoration-color: #ff4400;
|
||||||
color: rgb(254, 185, 160);
|
color: rgb(254, 185, 160);
|
||||||
|
|
@ -149,12 +164,10 @@ th label {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.truncate-container {
|
/* .truncate-container {
|
||||||
@apply inline-block relative transition-all;
|
@apply inline-block relative;
|
||||||
a {
|
a {
|
||||||
@apply inline-block truncate max-w-20char;
|
@apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4;
|
||||||
&:hover {
|
|
||||||
@apply absolute max-w-none -top-8 -left-6 min-w-60 px-6 py-3.5 bg-purple-600 rounded-sm outline-dashed outline-purple-400 outline-4;
|
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
|
|
@ -15,6 +15,7 @@
|
||||||
<script src="{% static 'js/htmx.min.js' %}"></script>
|
<script src="{% static 'js/htmx.min.js' %}"></script>
|
||||||
{% django_htmx_script %}
|
{% django_htmx_script %}
|
||||||
<link rel="stylesheet" href="{% static 'base.css' %}" />
|
<link rel="stylesheet" href="{% static 'base.css' %}" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="dark" hx-indicator="#indicator">
|
<body class="dark" hx-indicator="#indicator">
|
||||||
<img id="indicator"
|
<img id="indicator"
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
components:
|
components:
|
||||||
gamelink: "components/game_link.html"
|
gamelink: "components/game_link.html"
|
||||||
|
popover: "components/popover.html"
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!-- needs data-popover-target on triggering block -->
|
||||||
|
<!-- id -->
|
||||||
|
<!-- children -->
|
||||||
|
<div data-popover id="{{ id }}" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
|
||||||
|
<div class="px-3 py-2">
|
||||||
|
{{ children }}
|
||||||
|
</div>
|
||||||
|
<div data-popper-arrow></div>
|
||||||
|
</div>
|
||||||
|
|
@ -6,22 +6,68 @@
|
||||||
{% load markdown_extras %}
|
{% load markdown_extras %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||||
<h1 class="text-5xl flex items-center">
|
<div id="game-info" class="mb-10">
|
||||||
{{ game.name }}
|
<div class="flex gap-5 mb-3">
|
||||||
{% url 'edit_game' game.id as edit_url %}
|
<span class="text-wrap max-w-80 text-4xl">
|
||||||
{% include 'components/edit_button.html' with edit_url=edit_url %}
|
<span class="font-bold font-serif">{{ game.name }}</span> <span data-popover-target="popover-year" class="text-slate-500 text-2xl">{{ game.year_released }}</span>
|
||||||
</h1>
|
{% #popover id="popover-year" %}
|
||||||
<h2 class="text-lg my-2 ml-2 dark:text-slate-500">First Released: <span class="text-white">{{ game.year_released }}</span></h2>
|
Original release year
|
||||||
<h2 class="text-lg my-2 ml-2">
|
{% /popover %}
|
||||||
<span class="dark:text-slate-500">Playtime: </span>
|
</span>
|
||||||
{{ hours_sum }} <span class="dark:text-slate-500">hours over</span> {{ session_count }} <span class="dark:text-slate-500">sessions (</span>{{ session_average_without_manual }}<span class="dark:text-slate-500">/session)</span>
|
</div>
|
||||||
</h2>
|
<div class="flex gap-4 dark:text-slate-400 mb-3">
|
||||||
<h2 class="text-lg my-2 ml-2">
|
<span data-popover-target="popover-hours" class="flex gap-2 items-center">
|
||||||
<span class="dark:text-slate-500">Played in: </span>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
|
</svg>
|
||||||
|
{{ hours_sum }}
|
||||||
|
{% #popover id="popover-hours" %}
|
||||||
|
Total hours played
|
||||||
|
{% /popover %}
|
||||||
|
</span>
|
||||||
|
<span data-popover-target="popover-sessions" class="flex gap-2 items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
|
||||||
|
</svg>
|
||||||
|
{{ session_count }}
|
||||||
|
{% #popover id="popover-sessions" %}
|
||||||
|
Number of sessions
|
||||||
|
{% /popover %}
|
||||||
|
</span>
|
||||||
|
<span data-popover-target="popover-average" class="flex gap-2 items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
|
||||||
|
</svg>
|
||||||
|
{{ session_average_without_manual }}
|
||||||
|
{% #popover id="popover-average" %}
|
||||||
|
Average playtime per session
|
||||||
|
{% /popover %}
|
||||||
|
</span>
|
||||||
|
<span data-popover-target="popover-playrange" class="flex gap-2 items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
|
||||||
|
</svg>
|
||||||
{{ playrange }}
|
{{ playrange }}
|
||||||
</h2>
|
{% #popover id="popover-playrange" %}
|
||||||
<hr class="border-slate-500">
|
Earliest and latest dates played
|
||||||
<h1 class="text-3xl mt-4 mb-1">
|
{% /popover %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex rounded-md shadow-sm mb-3" role="group">
|
||||||
|
<a href="{% url 'edit_game' game.id %}">
|
||||||
|
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'delete_game' game.id %}">
|
||||||
|
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-3xl mt-4 mb-1 font-condensed">
|
||||||
Editions <span class="dark:text-slate-500">({{ edition_count }})</span> and Purchases <span class="dark:text-slate-500">({{ purchase_count }})</span>
|
Editions <span class="dark:text-slate-500">({{ edition_count }})</span> and Purchases <span class="dark:text-slate-500">({{ purchase_count }})</span>
|
||||||
</h1>
|
</h1>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -59,7 +105,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<h1 class="text-3xl mt-4 mb-1 flex gap-2 items-center">
|
<h1 class="text-3xl mt-4 mb-1 flex gap-2 items-center font-condensed">
|
||||||
Sessions
|
Sessions
|
||||||
<span class="dark:text-slate-500" id="session-count">({{ session_count }})</span>
|
<span class="dark:text-slate-500" id="session-count">({{ session_count }})</span>
|
||||||
{% if latest_session_id %}
|
{% if latest_session_id %}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ urlpatterns = [
|
||||||
path("game/add", views.add_game, name="add_game"),
|
path("game/add", views.add_game, name="add_game"),
|
||||||
path("game/<int:game_id>/edit", views.edit_game, name="edit_game"),
|
path("game/<int:game_id>/edit", views.edit_game, name="edit_game"),
|
||||||
path("game/<int:game_id>/view", views.view_game, name="view_game"),
|
path("game/<int:game_id>/view", views.view_game, name="view_game"),
|
||||||
|
path("game/<int:game_id>/delete", views.delete_game, name="delete_game"),
|
||||||
path("platform/add", views.add_platform, name="add_platform"),
|
path("platform/add", views.add_platform, name="add_platform"),
|
||||||
path("platform/<int:platform_id>/edit", views.edit_platform, name="edit_platform"),
|
path("platform/<int:platform_id>/edit", views.edit_platform, name="edit_platform"),
|
||||||
path("purchase/add", views.add_purchase, name="add_purchase"),
|
path("purchase/add", views.add_purchase, name="add_purchase"),
|
||||||
|
|
|
||||||
|
|
@ -148,6 +148,13 @@ def edit_game(request, game_id=None):
|
||||||
return render(request, "add.html", context)
|
return render(request, "add.html", context)
|
||||||
|
|
||||||
|
|
||||||
|
@login_required
|
||||||
|
def delete_game(request, game_id=None):
|
||||||
|
game = get_object_or_404(Game, id=game_id)
|
||||||
|
game.delete()
|
||||||
|
return redirect("list_sessions")
|
||||||
|
|
||||||
|
|
||||||
@login_required
|
@login_required
|
||||||
def view_game(request, game_id=None):
|
def view_game(request, game_id=None):
|
||||||
game = Game.objects.get(id=game_id)
|
game = Game.objects.get(id=game_id)
|
||||||
|
|
|
||||||
|
|
@ -5,5 +5,8 @@
|
||||||
"concurrently": "^8.2.2",
|
"concurrently": "^8.2.2",
|
||||||
"npm-check-updates": "^16.14.20",
|
"npm-check-updates": "^16.14.20",
|
||||||
"tailwindcss": "^3.4.4"
|
"tailwindcss": "^3.4.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"flowbite": "^2.4.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,18 +2,20 @@ const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
content: ["./games/**/*.{html,js}"],
|
content: ["./games/**/*.{html,js}", './node_modules/flowbite/**/*.js'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'sans': ['IBM Plex Sans', ...defaultTheme.fontFamily.sans],
|
'sans': ['IBM Plex Sans', ...defaultTheme.fontFamily.sans],
|
||||||
'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono],
|
'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono],
|
||||||
'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif],
|
'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif],
|
||||||
|
'condensed': ['IBM Plex Sans Condensed', ...defaultTheme.fontFamily.sans],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
require('@tailwindcss/typography'),
|
||||||
require('@tailwindcss/forms')
|
require('@tailwindcss/forms'),
|
||||||
|
require('flowbite/plugin')
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue