diff options
| author | Timotej Lazar <timotej.lazar@fri.uni-lj.si> | 2019-02-16 22:50:14 +0100 |
|---|---|---|
| committer | Timotej Lazar <timotej.lazar@fri.uni-lj.si> | 2019-02-16 22:50:14 +0100 |
| commit | 78f032649c7f61c63b8ca4d5455a4759af531fc7 (patch) | |
| tree | c96b02c08343b1a7d1d167fa345236ed39dc69f1 | |
| parent | 448ff2cd1168ccee81f848238170ad156a3684b4 (diff) | |
Improve task_greeting.html template
Fix semantics and improve style.
| -rw-r--r-- | kpov_judge/web/kpov_judge/static/style.css | 8 | ||||
| -rw-r--r-- | kpov_judge/web/kpov_judge/templates/task_greeting.html | 73 |
2 files changed, 47 insertions, 34 deletions
diff --git a/kpov_judge/web/kpov_judge/static/style.css b/kpov_judge/web/kpov_judge/static/style.css index 4511302..363fbc4 100644 --- a/kpov_judge/web/kpov_judge/static/style.css +++ b/kpov_judge/web/kpov_judge/static/style.css @@ -25,9 +25,15 @@ dd { margin-left: 1em; } -h1 { +h1, h2, h3 { margin-bottom: 0.5em; } +h2 { + font-size: 110%; +} +h3 { + font-size: 105%; +} p { hyphens: auto; diff --git a/kpov_judge/web/kpov_judge/templates/task_greeting.html b/kpov_judge/web/kpov_judge/templates/task_greeting.html index ee27853..4f1be3a 100644 --- a/kpov_judge/web/kpov_judge/templates/task_greeting.html +++ b/kpov_judge/web/kpov_judge/templates/task_greeting.html @@ -1,25 +1,31 @@ +<!DOCTYPE html> <html lang="{{lang}}"> +<meta charset="utf-8"> +<title>KPOV Judge</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <style> -body > h1 > span { - font-size: small; - font-weight: normal; -} img.setup { border: 1px solid black; - border-radius: 0.2em; + border-radius: 2px; float: right; - margin-left: 1.5em; max-width: 20em; + margin: 1em 0 1em 1em; +} +section.instructions { + column-span: all; + border: 1px solid gray; + border-radius: 2px; + background-color: #eee; + color: black; + padding: 0 1em 1em; } -section.data { - clear: both; +div.two-columns { columns: 2; + column-gap: 4em; } -section.data > section { +div.two-columns > section { display: inline-block; - margin: 0 1em; } section.disks > section > h1 { margin-bottom: 0; @@ -37,15 +43,16 @@ section > ul { <h1> <a href="{{ url_for('class_tasks', class_id=class_id) }}" class="back">↩</a> {{task_id}} - <span>[ + <span style="font-size: 50%; font-weight: normal;">[ {% for lang in ('en', 'si') %} <a href="{{ url_for('task_greeting', class_id=class_id, task_id=task_id, lang=lang) }}">{{lang}}</a> {% endfor %} ]</span> </h1> -<section> -<a href="setup.png"><img src="setup.png" class="setup"></a> +<section class="instructions"> +<a href="setup.png"><img src="setup.png" class="setup" alt="{{ _('Shema omrežja za nalogo.') }}"></a> +<h2>{{ _('Naloga') }}</h2> {% include instructions %} @@ -53,44 +60,43 @@ section > ul { <a href="howto/">{{ _('Podrobna navodila.') }}</a> </section> -<section class="data"> +<div class="two-columns"> <section class="disks"> -<h1>{{ _('Računalniki') }}</h1> +<h2>{{ _('Računalniki') }}</h2> {% if computers %} -<p> -{{ _('Za GNS3 uporabite slike v formatu qcow2 ali VMDK, za katere rabite še zaledne datoteke (angl. <em lang="en">backing files</em>). VirtualBox ne podpira zalednih datotek, zato so slike VDI precej večje. Namesto prenosa lahko slike VDI <a href="">dobite iz formata qcow2 ali VMDK</a>.') }} - -{% for c in computers %} -<ul> - <li>{{c['name']}} - <ul> +<dl> + {% for c in computers %} + <dt>{{c['name']}} + <dd><ul> {% for name, disk in c['disk_urls'].items() %} <li>{{name}} [ {% for fmt in disk['formats'] %}<a href="{{disk_base_url+disk[fmt][0]}}">{{fmt}}</a> {% endfor %}] {% else %} {% endfor %} - </ul> - </ul> + </ul></dd> {% endfor %} +</dl> + +<p> +{{ _('Za GNS3 uporabite slike v formatu qcow2 ali VMDK, za katere rabite še zaledne datoteke (angl. <em lang="en">backing files</em>). VirtualBox ne podpira zalednih datotek, zato so slike VDI precej večje. Namesto prenosa lahko slike VDI <a href="">dobite iz formata qcow2 ali VMDK</a>.') }} {% if backing_files %} <section> -<h1>{{ _('Zaledne datoteke') }}</h1> +<h3>{{ _('Zaledne datoteke') }}</h3> <p> {{ _('Vsako od spodnjih slik prenesete samo pri prvi nalogi, v kateri se pojavi. Vse datoteke morajo biti v istem imeniku.') }} -<ul> +<dl> {% for fmt, images in backing_files.items() %} {% if images %} - <li>{{fmt}} - <ul> + <dt>{{fmt}} + <dd><ul> {% for image in images %} <li><a href="{{disk_base_url+image}}">{{image}}</a></li> {% endfor %} - </ul> - </li> + </ul></dd> {% endif %} {% endfor %} -</ul> +</dl> </section> {% endif %} @@ -100,7 +106,7 @@ section > ul { </section> <section> -<h1>{{ _('Rezultat') }}</h1> +<h2>{{ _('Status') }}</h2> <p> {% if result is none %} {{ _('Naloga nima še nobenega poskusa.') }} @@ -113,7 +119,7 @@ section > ul { <p> <a href="../task.html">{{ _('Program za preverjanje.') }}</a> -<h1>{{ _('Parametri') }}</h1> +<h3>{{ _('Parametri') }}</h2> <dl> {% for p in params if p['value'] %} <dt><em>{{ p['name'] }}</em>{% if p['description'] %} … <small>{{ p['description'] }}</small>{% endif %}</dt> @@ -121,6 +127,7 @@ section > ul { {% endfor %} </dl> </section> +</div> {# <p> |