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