From 78f032649c7f61c63b8ca4d5455a4759af531fc7 Mon Sep 17 00:00:00 2001
From: Timotej Lazar <timotej.lazar@fri.uni-lj.si>
Date: Sat, 16 Feb 2019 22:50:14 +0100
Subject: Improve task_greeting.html template

Fix semantics and improve style.
---
 kpov_judge/web/kpov_judge/static/style.css         |  8 ++-
 .../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>
-- 
cgit v1.2.1

