mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: leaderboard responsiveness

This commit is contained in:
Ferdinand Mütsch 2022-10-06 20:42:05 +02:00
parent ef87445e43
commit 2ce720c20f
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/assets/css/app.css
View File

@ -141,3 +141,9 @@ body {
filter: invert(1);
cursor: pointer;
}
.max-available {
max-width: -moz-available;
max-width: -webkit-fill-available;
max-width: fill-available;
}

2
static/assets/css/app.dist.css
View File

File diff suppressed because one or more lines are too long

BIN
static/assets/css/app.dist.css.br
View File

Binary file not shown.

16
views/leaderboard.tpl.html
View File

@ -19,7 +19,7 @@
{{ end }}
<main class="mt-10 flex-grow flex justify-center w-full" id="leaderboard-page">
<div class="flex flex-col flex-grow mt-10">
<div class="flex flex-col flex-grow mt-10 max-available">
<h1 class="h1" style="margin-bottom: 0.5rem">Leaderboard</h1>
<p class="block text-sm text-gray-300 w-full lg:w-3/4 mb-8">
@ -37,10 +37,10 @@
</ul>
{{ if ne .By "" }}
<div class="flex space-x-2 mb-4">
{{ range $i, $key := (strslice .TopKeys 0 20) }}
<div class="inline-block">
<a href="leaderboard?by={{ $.By }}&key={{ $key }}" class="{{ if eq $.Key (lower $key) }} btn-primary {{ else }} btn-default {{ end }} btn-small cursor-pointer">
<div class="flex flex-wrap space-x-2 mb-4">
{{ range $i, $key := (strslice .TopKeys 0 10) }}
<div class="inline-block mb-4">
<a href="leaderboard?by={{ $.By }}&key={{ $key }}" class="{{ if eq $.Key (lower $key) }} btn-primary {{ else }} btn-default {{ end }} btn-small cursor-pointer whitespace-nowrap">
{{ if and (eq (lower $.By) "language") ($.LangIcon $key) }}
<span class="align-middle leading-none"><span class="iconify inline text-white text-base" data-icon="{{ ($.LangIcon $key) | urlSafe }}"></span>&nbsp;</span>
{{ end }}
@ -51,7 +51,7 @@
</div>
{{ end }}
<div class="flex flex-col space-y-4 mt-8 text-gray-300 w-full lg:w-3/4">
<div class="flex flex-col space-y-4 mt-4 text-gray-300 w-full lg:w-3/4">
{{ if len .Items }}
<ol>
{{ range $i, $item := .Items }}
@ -65,14 +65,14 @@
{{ end }}
<strong class="text-ellipsis truncate">@{{ $item.UserID }}</strong>
</div>
<span class="w-5/12 mx-1 truncate leading-6 align-middle">
<div class="w-5/12 mx-1 truncate leading-6 align-middle">
{{ range $i, $lang := (index $.UserLanguages $item.UserID) }}
{{ if $.LangIcon $lang }}
<span class="align-middle leading-none"><span class="iconify inline text-white text-base" data-icon="{{ ($.LangIcon $lang) | urlSafe }}"></span></span>
{{ end }}
<span class="text-sm leading-6">{{ $lang }}{{ if lt $i (add (len (index $.UserLanguages $item.UserID)) -1) }},&nbsp;{{ end }}</span>
{{ end }}
</span>
</div>
<div class="w-3/12 ml-1 text-right"><span>{{ $item.Total | duration }}</span></div>
</li>
{{ end }}