add table header actions
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
<c-vars color="blue" size="base" />
|
||||
<button type="button"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 mt-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
|
||||
{{ text }}
|
||||
title="{{ title }}"
|
||||
class=" {% if color == "blue" %} bg-blue-700 dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 text-white {% elif color == "red" %} bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white {% elif color == "gray" %} bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border {% elif color == "green" %} bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white {% endif %} focus:outline-none focus:ring-4 font-medium mb-2 me-2 rounded-lg {% if size == "xs" %} px-3 py-2 text-xs {% elif size == "sm" %} px-3 py-2 text-sm {% elif size == "base" %} px-5 py-2.5 text-sm {% elif size == "lg" %} px-5 py-3 text-base {% elif size == "xl" %} px-6 py-3.5 text-base {% endif %} {% if icon %} inline-flex text-center items-center gap-2 {% else %} {% endif %} ">
|
||||
{{ slot }}
|
||||
</button>
|
||||
|
8
games/templates/cotton/button_group.html
Normal file
8
games/templates/cotton/button_group.html
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="inline-flex rounded-md shadow-sm" role="group">
|
||||
{% if slot %}{{ slot }}{% endif %}
|
||||
{% for button in buttons %}
|
||||
{% if button.slot %}
|
||||
<c-button-group-button-sm :href=button.href :slot=button.slot :color=button.color :hover=button.hover :title=button.title />
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
@ -4,17 +4,17 @@
|
||||
{% if color == "gray" %}
|
||||
<button type="button"
|
||||
class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 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">
|
||||
{{ text }}
|
||||
{{ slot }}
|
||||
</button>
|
||||
{% elif color == "red" %}
|
||||
<button type="button"
|
||||
class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-red-500 hover:text-white 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:border-red-700 dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
|
||||
{{ text }}
|
||||
{{ slot }}
|
||||
</button>
|
||||
{% elif color == "green" %}
|
||||
<button type="button"
|
||||
class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-green-500 hover:border-green-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-green-700 dark:hover:bg-green-600 dark:focus:ring-green-500 dark:focus:text-white">
|
||||
{{ text }}
|
||||
{{ slot }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
@ -1,6 +0,0 @@
|
||||
<c-vars color="gray" />
|
||||
<div class="inline-flex rounded-md shadow-sm" role="group">
|
||||
{% for button in buttons %}
|
||||
<c-button-group-button-sm :href=button.href :text=button.text :color=button.color />
|
||||
{% endfor %}
|
||||
</div>
|
8
games/templates/cotton/icon/delete.html
Normal file
8
games/templates/cotton/icon/delete.html
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 48 48"
|
||||
class="text-black dark:text-white w-4 h-4">
|
||||
<path fill="currentColor" d="M 24 4 C 20.491685 4 17.570396 6.6214322 17.080078 10 L 10.238281 10 A 1.50015 1.50015 0 0 0 9.9804688 9.9785156 A 1.50015 1.50015 0 0 0 9.7578125 10 L 6.5 10 A 1.50015 1.50015 0 1 0 6.5 13 L 8.6386719 13 L 11.15625 39.029297 C 11.427329 41.835926 13.811782 44 16.630859 44 L 31.367188 44 C 34.186411 44 36.570826 41.836168 36.841797 39.029297 L 39.361328 13 L 41.5 13 A 1.50015 1.50015 0 1 0 41.5 10 L 38.244141 10 A 1.50015 1.50015 0 0 0 37.763672 10 L 30.919922 10 C 30.429604 6.6214322 27.508315 4 24 4 z M 24 7 C 25.879156 7 27.420767 8.2681608 27.861328 10 L 20.138672 10 C 20.579233 8.2681608 22.120844 7 24 7 z M 11.650391 13 L 36.347656 13 L 33.855469 38.740234 C 33.730439 40.035363 32.667963 41 31.367188 41 L 16.630859 41 C 15.331937 41 14.267499 40.033606 14.142578 38.740234 L 11.650391 13 z M 20.476562 17.978516 A 1.50015 1.50015 0 0 0 19 19.5 L 19 34.5 A 1.50015 1.50015 0 1 0 22 34.5 L 22 19.5 A 1.50015 1.50015 0 0 0 20.476562 17.978516 z M 27.476562 17.978516 A 1.50015 1.50015 0 0 0 26 19.5 L 26 34.5 A 1.50015 1.50015 0 1 0 29 34.5 L 29 19.5 A 1.50015 1.50015 0 0 0 27.476562 17.978516 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
8
games/templates/cotton/icon/edit.html
Normal file
8
games/templates/cotton/icon/edit.html
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 48 48"
|
||||
class="text-black dark:text-white w-4 h-4">
|
||||
<path fill="currentColor" d="M 40.5 6 C 40.11625 6 39.732453 6.1464531 39.439453 6.4394531 L 21.462891 24.417969 L 20 28 L 23.582031 26.537109 L 41.560547 8.5605469 C 42.145547 7.9745469 42.145547 7.0254531 41.560547 6.4394531 C 41.267547 6.1464531 40.88375 6 40.5 6 z M 12.5 7 C 9.4802259 7 7 9.4802259 7 12.5 L 7 35.5 C 7 38.519774 9.4802259 41 12.5 41 L 35.5 41 C 38.519774 41 41 38.519774 41 35.5 L 41 18.5 A 1.50015 1.50015 0 1 0 38 18.5 L 38 35.5 C 38 36.898226 36.898226 38 35.5 38 L 12.5 38 C 11.101774 38 10 36.898226 10 35.5 L 10 12.5 C 10 11.101774 11.101774 10 12.5 10 L 29.5 10 A 1.50015 1.50015 0 1 0 29.5 7 L 12.5 7 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 798 B |
8
games/templates/cotton/icon/end.html
Normal file
8
games/templates/cotton/icon/end.html
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 48 48"
|
||||
class="text-black dark:text-white w-4 h-4">
|
||||
<path fill="currentColor" d="M 35.5 6 C 33.585045 6 32 7.5850452 32 9.5 L 32 19.365234 L 11.339844 6.6074219 C 9.0734225 5.2081236 6 6.9228749 6 9.5859375 L 6 38.414062 C 6 41.077126 9.0734225 42.791876 11.339844 41.392578 L 32 28.634766 L 32 38.5 C 32 40.414955 33.585045 42 35.5 42 L 38.5 42 C 40.414955 42 42 40.414955 42 38.5 L 42 9.5 C 42 7.5850452 40.414955 6 38.5 6 L 35.5 6 z M 35.5 9 L 38.5 9 C 38.795045 9 39 9.2049548 39 9.5 L 39 38.5 C 39 38.795045 38.795045 39 38.5 39 L 35.5 39 C 35.204955 39 35 38.795045 35 38.5 L 35 9.5 C 35 9.2049548 35.204955 9 35.5 9 z M 9.4765625 9.0566406 C 9.5668015 9.0647233 9.6637771 9.0984812 9.7636719 9.1601562 L 32 22.892578 L 32 25.107422 L 9.7636719 38.839844 C 9.364093 39.086546 9 38.883001 9 38.414062 L 9 9.5859375 C 9 9.3514688 9.091623 9.1841053 9.2324219 9.1054688 C 9.3028213 9.0661502 9.3863235 9.048558 9.4765625 9.0566406 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
8
games/templates/cotton/icon/finish.html
Normal file
8
games/templates/cotton/icon/finish.html
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 48 48"
|
||||
class="text-black dark:text-white w-4 h-4">
|
||||
<path fill="currentColor" d="M 7.4765625 4.9785156 A 1.50015 1.50015 0 0 0 6 6.5 L 6 31.5 L 6 43.5 A 1.50015 1.50015 0 1 0 9 43.5 L 9 33 L 40.5 33 C 41.329 33 42 32.328 42 31.5 L 42 6.5 C 42 5.672 41.329 5 40.5 5 L 7.7460938 5 A 1.50015 1.50015 0 0 0 7.4765625 4.9785156 z M 16 8 L 24 8 L 24 15 L 32 15 L 32 8 L 39 8 L 39 15 L 32 15 L 32 23 L 39 23 L 39 30 L 32 30 L 32 23 L 24 23 L 24 30 L 16 30 L 16 23 L 9 23 L 9 15 L 16 15 L 16 8 z M 16 15 L 16 23 L 24 23 L 24 15 L 16 15 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 643 B |
8
games/templates/cotton/icon/play.html
Normal file
8
games/templates/cotton/icon/play.html
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 48 48"
|
||||
class="text-black dark:text-white w-4 h-4">
|
||||
<path fill="currentColor" d="M 11.396484 4.1113281 C 9.1042001 4.2020187 7 6.0721788 7 8.5917969 L 7 39.408203 C 7 42.767694 10.742758 44.971891 13.681641 43.34375 L 41.490234 27.935547 C 44.513674 26.260259 44.513674 21.739741 41.490234 20.064453 L 13.681641 4.65625 C 12.94692 4.2492148 12.160579 4.0810979 11.396484 4.1113281 z M 11.431641 7.0664062 C 11.690234 7.0652962 11.961284 7.1323321 12.226562 7.2792969 L 40.037109 22.6875 C 41.13567 23.296212 41.13567 24.703788 40.037109 25.3125 L 12.226562 40.720703 C 11.165446 41.308562 10 40.620712 10 39.408203 L 10 8.5917969 C 10 7.9855423 10.290709 7.5116121 10.714844 7.2617188 C 10.926911 7.136772 11.173048 7.0675163 11.431641 7.0664062 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 861 B |
10
games/templates/cotton/icon/plus.html
Normal file
10
games/templates/cotton/icon/plus.html
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 48 48"
|
||||
class="w-4 h-4">
|
||||
<path fill="currentColor" d="M 23.976562 4.9785156 A 1.50015 1.50015 0 0 0 22.5 6.5 L 22.5 22.5 L 6.5 22.5 A 1.50015 1.50015 0 1 0 6.5 25.5 L 22.5 25.5 L 22.5 41.5 A 1.50015 1.50015 0 1 0 25.5 41.5 L 25.5 25.5 L 41.5 25.5 A 1.50015 1.50015 0 1 0 41.5 22.5 L 25.5 22.5 L 25.5 6.5 A 1.50015 1.50015 0 0 0 23.976562 4.9785156 z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 496 B |
@ -1,7 +1,8 @@
|
||||
<span data-popover-target={{ id }} class="{{ class }}">{{ wrapped_content|default:slot }}</span>
|
||||
<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">{{ slot }}</div>
|
||||
<div class="px-3 py-2">{{ popover_content }}</div>
|
||||
<div data-popper-arrow></div>
|
||||
</div>
|
||||
|
155
games/templates/showcase/buttons.html
Normal file
155
games/templates/showcase/buttons.html
Normal file
@ -0,0 +1,155 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="flex self-center m-4 flex-col gap-4 [&_h1]:mb-2">
|
||||
<div>
|
||||
<h1 class="text-white text-lg">No size</h1>
|
||||
<c-button>
|
||||
No attributes
|
||||
</c-button>
|
||||
<c-button color="blue">
|
||||
No attributes, blue
|
||||
</c-button>
|
||||
<c-button color="red">
|
||||
No attributes, red
|
||||
</c-button>
|
||||
<c-button color="green">
|
||||
No attributes, green
|
||||
</c-button>
|
||||
<c-button color="gray">
|
||||
No attributes, gray
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">No size, icons</h1>
|
||||
<c-button>
|
||||
<c-icon.edit />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Extra Small, icons</h1>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Small, icons</h1>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Base, icons</h1>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Large, icons</h1>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Extra Large, icons</h1>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Group (sm)</h1>
|
||||
<c-button-group>
|
||||
<c-button-group-button-sm>
|
||||
No attributes
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="blue">
|
||||
No attributes, blue
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="red">
|
||||
No attributes, red
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="green">
|
||||
No attributes, green
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="gray">
|
||||
No attributes, gray
|
||||
</c-button-group-button-sm>
|
||||
</c-button-group>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
@ -9,71 +9,57 @@
|
||||
<div id="game-info" class="mb-10">
|
||||
<div class="flex gap-5 mb-3">
|
||||
<span class="text-wrap max-w-80 text-4xl">
|
||||
<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>
|
||||
<c-popover id="popover-year">
|
||||
Original release year
|
||||
<span class="font-bold font-serif">{{ game.name }}</span>
|
||||
<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">
|
||||
{{ game.year_released }}
|
||||
</c-popover>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-4 dark:text-slate-400 mb-3">
|
||||
<span data-popover-target="popover-hours" 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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
{{ hours_sum }}
|
||||
<c-popover id="popover-hours">
|
||||
Total hours played
|
||||
</c-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 }}
|
||||
<c-popover id="popover-sessions">
|
||||
Number of sessions
|
||||
</c-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 }}
|
||||
<c-popover id="popover-average">
|
||||
Average playtime per session
|
||||
</c-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 }}
|
||||
<c-popover id="popover-playrange">
|
||||
Earliest and latest dates played
|
||||
</c-popover>
|
||||
</span>
|
||||
<c-popover id="popover-hours" popover_content="Total hours played" 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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
{{ hours_sum }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-sessions" popover_content="Number of 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 }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-average" popover_content="Average playtime per session" 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 }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-playrange" popover_content="Earliest and latest dates played" 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 }}
|
||||
</c-popover>
|
||||
</div>
|
||||
<div class="inline-flex rounded-md shadow-sm mb-3" role="group">
|
||||
<a href="{% url 'edit_game' game.id %}">
|
||||
@ -100,7 +86,7 @@
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge=session_count>Sessions</c-h1>
|
||||
<c-simple-table :rows=session_data.rows :columns=session_data.columns :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
|
||||
<c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
Reference in New Issue
Block a user