Improve styling

This commit is contained in:
Vojtěch Káně
2021-04-22 20:17:45 +02:00
parent e0c0348db2
commit fc8a18e5bb
8 changed files with 382 additions and 50 deletions

View File

@@ -3,14 +3,19 @@
<html lang='cs'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width">
<title>Tinyquiz</title>
<link rel="stylesheet" href="/static/style.css">
<link rel="icon" type="image/svg+xml" href="/static/logo_tiny.svg">
{{ block "additional-css" . }}{{ end }}
<script src="/static/script.js" defer type="text/javascript"></script>
{{ block "additional-js" . }}{{ end }}
</head>
<body>
<header>
<header id="logo">
<a href="/"><img src="/static/logo.svg" alt="Tinyquiz logo"></a>
</header>
<header id="title">
{{- block "header" . }}{{ end -}}
</header>
<main>

View File

@@ -8,38 +8,40 @@
<script src="/static/home.js"></script>
{{ end -}}
{{- define "main" }}
<main>
<section>
<h1>Statistiky</h1>
<p>
Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči.
Celkem je k dispozici {{ .Stats.Games }} kvízů.
</p>
</section>
<section>
<h1>Připojit se ke hře</h1>
<form id="join" method="post">
<label>Kód hry: <input type="text" name="code" placeholder="Kód hry"></label>
<label>Jméno hráče: <input type="text" name="player" placeholder="Jméno"></label>
<input type="submit" value="Připojit do hry">
</form>
</section>
<section>
<h1>Začít hrát</h1>
<form id="play" method="post" action="/session">
<label>Kód kvízu: <input type="text" name="code" placeholder="Kód kvizu"></label>
<label>Jméno organizátora: <input type="text" name="organiser" placeholder="Jméno"></label>
<input type="submit" value="Začit hrát">
</form>
</section>
<section>
<h1>Vytvořit nový kvíz</h1>
<form id="new" method="get" action="/new">
<label>Jméno kvízu: <input type="text" name="quiz" placeholder="Jméno kvízu"></label>
<label>Jméno autora: <input type="text" name="author" placeholder="Jméno"></label>
<input type="submit" value="Vytvořit">
</form>
</section>
</main>
{{- define "header" }}
<h1>Open source online quiz platform</h1>
{{ end -}}
{{- define "main" }}
<section>
<h1>Statistiky</h1>
<p>
Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči.
Celkem je k dispozici {{ .Stats.Games }} kvízů.
</p>
</section>
<section>
<h1>Připojit se ke hře</h1>
<form id="join" method="post">
<label>Kód hry: <input type="text" name="code" placeholder="Kód hry"></label>
<label>Jméno hráče: <input type="text" name="player" placeholder="Jméno"></label>
<input type="submit" value="Připojit do hry">
</form>
</section>
<section>
<h1>Začít hrát</h1>
<form id="play" method="post" action="/session">
<label>Kód kvízu: <input type="text" name="code" placeholder="Kód kvizu"></label>
<label>Jméno organizátora: <input type="text" name="organiser" placeholder="Jméno"></label>
<input type="submit" value="Začit hrát">
</form>
</section>
<section>
<h1>Vytvořit nový kvíz</h1>
<form id="new" method="get" action="/new">
<label>Jméno kvízu: <input type="text" name="quiz" placeholder="Jméno kvízu"></label>
<label>Jméno autora: <input type="text" name="author" placeholder="Jméno"></label>
<input type="submit" value="Vytvořit">
</form>
</section>
{{ end -}}

View File

@@ -1,22 +1,30 @@
{{- template "base" . -}}
{{- define "additional-css" -}}
<link rel="stylesheet" href="/static/results.css">
{{ end -}}
{{- define "additional-js" -}}
{{ end -}}
{{- define "header" }}
<h1>{{ .Session.Edges.Game.Name }} hrána {{ .Session.Started.Format "2006.01.02 15:04:05 MST" }}</h1>
<h2>{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }} {{ .Player.Name }}</h2>
<h1>{{ .Session.Edges.Game.Name }}</h1>
{{ end -}}
{{- define "main" }}
<table>
<tbody>
{{ range .Results }}
<tr><td>{{ .Place }}. místo</td><td>{{ .Player.Name }}</td><td>{{ .Points }}b</td></tr>
{{ end }}
</tbody>
</table>
<dl style="margin-bottom: 3rem;">
<dt>Hrána</dt>
<dd>{{ .Session.Started.Format "2006.01.02 15:04:05" }}</dd>
<dt>{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }}</dt>
<dd>{{ .Player.Name }}</dd>
</dl>
<div style="flex-grow: 1;">
<table>
<tbody>
{{ range .Results }}
<tr><td class="place{{ if eq .Place 1 }} first{{ else if eq .Place 2 }} second{{ else if eq .Place 3 }} third{{ end }}">{{ .Place }}</td><td>{{ .Player.Name }}</td><td>{{ .Points }}b</td></tr>
{{ end }}
</tbody>
</table>
</div>
{{ end -}}