From fc8a18e5bbbc00b0fbcc6c5274101708c2888a8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Thu, 22 Apr 2021 20:17:45 +0200 Subject: [PATCH] Improve styling --- ui/html/base.layout.tmpl.html | 7 +- ui/html/home.page.tmpl.html | 70 ++++++++-------- ui/html/results.page.tmpl.html | 26 +++--- ui/static/game.css | 9 ++- ui/static/logo.svg | 142 +++++++++++++++++++++++++++++++++ ui/static/logo_tiny.svg | 115 ++++++++++++++++++++++++++ ui/static/results.css | 30 +++++++ ui/static/style.css | 33 ++++++-- 8 files changed, 382 insertions(+), 50 deletions(-) create mode 100644 ui/static/logo.svg create mode 100644 ui/static/logo_tiny.svg create mode 100644 ui/static/results.css diff --git a/ui/html/base.layout.tmpl.html b/ui/html/base.layout.tmpl.html index af06a07..1d6d5b6 100644 --- a/ui/html/base.layout.tmpl.html +++ b/ui/html/base.layout.tmpl.html @@ -3,14 +3,19 @@ + Tinyquiz + {{ block "additional-css" . }}{{ end }} {{ block "additional-js" . }}{{ end }} -
+ +
{{- block "header" . }}{{ end -}}
diff --git a/ui/html/home.page.tmpl.html b/ui/html/home.page.tmpl.html index 91456cc..739eb38 100644 --- a/ui/html/home.page.tmpl.html +++ b/ui/html/home.page.tmpl.html @@ -8,38 +8,40 @@ {{ end -}} -{{- define "main" }} -
-
-

Statistiky

-

- Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči. - Celkem je k dispozici {{ .Stats.Games }} kvízů. -

-
-
-

Připojit se ke hře

-
- - - -
-
-
-

Začít hrát

-
- - - -
-
-
-

Vytvořit nový kvíz

-
- - - -
-
-
+{{- define "header" }} +

Open source online quiz platform

+{{ end -}} + +{{- define "main" }} +
+

Statistiky

+

+ Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči. + Celkem je k dispozici {{ .Stats.Games }} kvízů. +

+
+
+

Připojit se ke hře

+
+ + + +
+
+
+

Začít hrát

+
+ + + +
+
+
+

Vytvořit nový kvíz

+
+ + + +
+
{{ end -}} diff --git a/ui/html/results.page.tmpl.html b/ui/html/results.page.tmpl.html index 76f20f1..ca22525 100644 --- a/ui/html/results.page.tmpl.html +++ b/ui/html/results.page.tmpl.html @@ -1,22 +1,30 @@ {{- template "base" . -}} {{- define "additional-css" -}} + {{ end -}} {{- define "additional-js" -}} {{ end -}} {{- define "header" }} -

{{ .Session.Edges.Game.Name }} hrána {{ .Session.Started.Format "2006.01.02 15:04:05 MST" }}

-

{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }} {{ .Player.Name }}

+

{{ .Session.Edges.Game.Name }}

{{ end -}} {{- define "main" }} - - - {{ range .Results }} - - {{ end }} - -
{{ .Place }}. místo{{ .Player.Name }}{{ .Points }}b
+
+
Hrána
+
{{ .Session.Started.Format "2006.01.02 15:04:05" }}
+
{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }}
+
{{ .Player.Name }}
+
+
+ + + {{ range .Results }} + + {{ end }} + +
{{ .Place }}{{ .Player.Name }}{{ .Points }}b
+
{{ end -}} diff --git a/ui/static/game.css b/ui/static/game.css index 07cd9e7..d8076ec 100644 --- a/ui/static/game.css +++ b/ui/static/game.css @@ -40,6 +40,13 @@ #question > h1 { font-size: 3rem; + text-align: center; +} + +#question .answers { + display: flex; + flex-wrap: wrap; + justify-content: center; } #question .answer { @@ -62,7 +69,7 @@ body.organiser #controls { display: flex; padding-right: 20vw; - justify-content: flex-end; + align-self: flex-end; } #session-code { diff --git a/ui/static/logo.svg b/ui/static/logo.svg new file mode 100644 index 0000000..5c954e3 --- /dev/null +++ b/ui/static/logo.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/static/logo_tiny.svg b/ui/static/logo_tiny.svg new file mode 100644 index 0000000..e296d00 --- /dev/null +++ b/ui/static/logo_tiny.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/static/results.css b/ui/static/results.css new file mode 100644 index 0000000..23e469d --- /dev/null +++ b/ui/static/results.css @@ -0,0 +1,30 @@ +td { + padding-left: 1rem; +} + +.place { + border-radius: 50%; + border: 1px solid black; + width: 3rem; + height: 3rem; + text-align: center; + padding: 0; +} + +.place.first { + background-color: gold; + box-shadow: 0 0 10px 5px gold; + border: none; +} + +.place.second { + background-color: silver; + box-shadow: 0 0 6px 3px silver; + border: none; +} + +.place.third { + background-color: chocolate; + box-shadow: 0 0 3px 1px chocolate; + border: none; +} diff --git a/ui/static/style.css b/ui/static/style.css index abd4059..7bdfb01 100644 --- a/ui/static/style.css +++ b/ui/static/style.css @@ -10,21 +10,44 @@ body { body { display: grid; grid-template-rows: 10vh auto; - grid-template-columns: auto; + grid-template-columns: 25vw 50vw 25vw; grid-template-areas: - "header" - "main"; + "empty1 header empty2" + "main main main"; } -header { +@media (orientation: portrait) { + body { + grid-template-rows: 10vh 10vh auto; + grid-template-columns: auto; + grid-template-areas: + "logo" + "header" + "main"; + } +} + +#logo { + grid-area: 1 / 1 / 1 / 1; + padding: 0.5rem; +} + +#logo img { + max-width: 100%; + max-height: 100%; +} + +#title { grid-area: header; display: flex; justify-content: center; + text-align: center; } main { grid-area: main; display: flex; - justify-content: space-around; + justify-content: center; + align-items: center; flex-direction: column; }