Skip to content
Snippets Groups Projects
Commit a013db1b authored by Jan Prachař's avatar Jan Prachař
Browse files

Více responsive org rozhraní

parent d74095ac
Branches
No related tags found
No related merge requests found
...@@ -92,7 +92,7 @@ class Context: ...@@ -92,7 +92,7 @@ class Context:
def breadcrumbs(self, table: bool = False, action: Optional[str] = None) -> Markup: def breadcrumbs(self, table: bool = False, action: Optional[str] = None) -> Markup:
elements = [(url_for('org_rounds'), 'Soutěže')] elements = [(url_for('org_rounds'), 'Soutěže')]
elements.append((url_for('org_rounds'), f'{self.round.year}. ročník')) elements.append((url_for('org_rounds'), f'{self.round.year}. ročník'))
elements.append((url_for('org_round', round_id=self.round_id), f'{self.round.name} kategorie {self.round.category}')) elements.append((url_for('org_round', round_id=self.round_id), f'{self.round.name} {self.round.category}'))
if self.hier_place: if self.hier_place:
parents = g.gatekeeper.get_ancestors(self.hier_place) parents = g.gatekeeper.get_ancestors(self.hier_place)
for p in parents[1:]: for p in parents[1:]:
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>{% block title %}{% endblock %} | OSMO | Fyzikální olympiáda</title> <title>{% block title %}{% endblock %} | OSMO | Fyzikální olympiáda</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet href="{{ asset_url('css/bootstrap.min.css') }}" type='text/css' media=all> <link rel=stylesheet href="{{ asset_url('css/bootstrap.min.css') }}" type='text/css' media=all>
<link rel=stylesheet href="{{ asset_url('mo.css') }}" type='text/css' media=all> <link rel=stylesheet href="{{ asset_url('mo.css') }}" type='text/css' media=all>
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
...@@ -24,15 +25,20 @@ ...@@ -24,15 +25,20 @@
<body> <body>
<header class="container"> <header class="container">
<div id="header-text"> <div id="header-text">
<a href="http://fyzikalniolympiada.cz" class="main-title">FYZIKÁLNÍ OLYMPIÁDA</a> <span class="main-title">
<small> <a href="http://fyzikalniolympiada.cz">FYZIKÁLNÍ OLYMPIÁDA</a>
{{current_year}}.&nbsp;ročník ve školním roce {{current_school_year}}
</small>
{% if web_flavor == "test" %} {% if web_flavor == "test" %}
<a href="/">Odevzdávací hřiště OSMO</a> <a href="/">Osmo hřiště</a>
{% else %} {% else %}
<a href="/">Odevzdávací systém OSMO</a> <a href="/" style="white-space: nowrap">
<span class="glyphicon glyphicon-th"></span>
OSMO
</a>
{% endif %} {% endif %}
</span>
<small>
{{current_year}}.&nbsp;ročník ve školním roce {{current_school_year}}
</small>
</div> </div>
</div> </div>
<div id="logo"> <div id="logo">
......
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
<div class="btn-group col-lg-offset-2"> <div class="btn-group col-lg-offset-2">
{{ wtf.form_field(form.submit, class="btn btn-primary") }} {{ wtf.form_field(form.submit, class="btn btn-primary") }}
{{ wtf.form_field(form.reset) }} {{ wtf.form_field(form.reset) }}
<a class='btn btn-default' href='{{ url_for('create_acct') }}'>Založit nový účet</a>
</div> </div>
</form> </form>
......
...@@ -194,7 +194,8 @@ ...@@ -194,7 +194,8 @@
<h3>Úlohy</h3> <h3>Úlohy</h3>
{% if tasks %} {% if tasks %}
<table class="table table-bordered table-responsive"> <div class="table-responsive">
<table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>Kód <th>Kód
...@@ -231,6 +232,7 @@ ...@@ -231,6 +232,7 @@
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div>
{% else %} {% else %}
<p><i>Zatím nebyly přidány žádné úlohy.</i></p> <p><i>Zatím nebyly přidány žádné úlohy.</i></p>
{% endif %} {% endif %}
......
...@@ -34,9 +34,12 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -34,9 +34,12 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
<form class="form" method="POST"> <form class="form" method="POST">
{{ edit_form.csrf_token }} {{ edit_form.csrf_token }}
{% endif %} {% endif %}
{% for i in range((tasks|length)//4 + (1 if (tasks|length)%4 > 0 else 0)) %}
<div class="table-responsive">
<table class="table table-bordered table-hover table-condensed"> <table class="table table-bordered table-hover table-condensed">
<colgroup style="border-right: 2px #aaa solid;"><col span="2"></colgroup> <colgroup style="border-right: 2px #aaa solid;"><col span="2"></colgroup>
{% for task in tasks %} {% for task in tasks[4*i:4*(i+1)] %}
<colgroup style="border-right: 2px #aaa solid;"><col span="4"></colgroup> <colgroup style="border-right: 2px #aaa solid;"><col span="4"></colgroup>
{% endfor %} {% endfor %}
<colgroup><col></colgroup> <colgroup><col></colgroup>
...@@ -44,7 +47,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -44,7 +47,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
<tr> <tr>
<th rowspan=2>Účastník <th rowspan=2>Účastník
<th rowspan=2>Stav účasti</th> <th rowspan=2>Stav účasti</th>
{% for task in tasks %}<th colspan=4> {% for task in tasks[4*i:4*(i+1)] %}<th colspan=4>
<a href="{{ ctx.url_for('org_contest_task', task_id=task.task_id) }}">{{ task.code }}</a> <a href="{{ ctx.url_for('org_contest_task', task_id=task.task_id) }}">{{ task.code }}</a>
{% if rights.can_edit_points() %} {% if rights.can_edit_points() %}
<a title="Editovat body" href="{{ ctx.url_for('org_contest_task_points', task_id=task.task_id) }}" class="icon pull-right"></a> <a title="Editovat body" href="{{ ctx.url_for('org_contest_task_points', task_id=task.task_id) }}" class="icon pull-right"></a>
...@@ -53,7 +56,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -53,7 +56,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
<th rowspan=2>Body celkem <th rowspan=2>Body celkem
</tr> </tr>
<tr> <tr>
{% for task in tasks %}<th title="Řešení">Ř<th title="Oprava">O<th title="Body">B<th title="Detail"><span class="icon">🔍</span>{% endfor %} {% for task in tasks[4*i:4*(i+1)] %}<th title="Řešení">Ř<th title="Oprava">O<th title="Body">B<th title="Detail"><span class="icon">🔍</span>{% endfor %}
</tr> </tr>
</thead> </thead>
{% for pion in pions %} {% for pion in pions %}
...@@ -62,7 +65,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -62,7 +65,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
<th>{{ u|pion_link(contest.contest_id) }} <th>{{ u|pion_link(contest.contest_id) }}
<td>{{ pion.state.friendly_name() }} <td>{{ pion.state.friendly_name() }}
{% set sum_points = [] %} {% set sum_points = [] %}
{% for task in tasks %} {% for task in tasks[4*i:4*(i+1)] %}
{% if u.user_id in tasks_sols[task.task_id] %} {% if u.user_id in tasks_sols[task.task_id] %}
{% set sol = tasks_sols[task.task_id][u.user_id] %} {% set sol = tasks_sols[task.task_id][u.user_id] %}
{% if sol.final_submit_obj %} {% if sol.final_submit_obj %}
...@@ -113,7 +116,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -113,7 +116,7 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
{% endfor %} {% endfor %}
<tfoot> <tfoot>
<tr><td><td> <tr><td><td>
{% for task in tasks %} {% for task in tasks[4*i:4*(i+1)] %}
<td colspan=4> <td colspan=4>
<a class='btn btn-xs btn-primary' href="{{ ctx.url_for('org_generic_batch_download', task_id=task.task_id) }}"><span class="glyphicon glyphicon-cloud-download"></span> Stáhnout</a> <a class='btn btn-xs btn-primary' href="{{ ctx.url_for('org_generic_batch_download', task_id=task.task_id) }}"><span class="glyphicon glyphicon-cloud-download"></span> Stáhnout</a>
{% if rights.can_upload_feedback() %} {% if rights.can_upload_feedback() %}
...@@ -123,6 +126,8 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast ...@@ -123,6 +126,8 @@ Odkazem v záhlaví se lze dostat na podrobný výpis odevzdání všech účast
<td> <td>
</tfoot> </tfoot>
</table> </table>
</div>
{% endfor %}
{% if edit_form %} {% if edit_form %}
<div> <div>
{{ wtf.form_field(edit_form.submit, class="btn btn-primary") }} {{ wtf.form_field(edit_form.submit, class="btn btn-primary") }}
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
{% endblock %} {% endblock %}
{% block pretitle %} {% block pretitle %}
<div class="panel panel-default pull-right"> <div class="panel panel-default pull-right" style="margin-left: 1rem">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
Soutěž {{ contest.place.name_locative() }} Soutěž {{ contest.place.name_locative() }}
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</div> </div>
</form> </form>
{% else %} {% else %}
<div> <p>
<a class='btn btn-primary' href="{{ ctx.url_for('org_generic_batch_download') }}"><span class="glyphicon glyphicon-cloud-download"></span> Stáhnout řešení</a> <a class='btn btn-primary' href="{{ ctx.url_for('org_generic_batch_download') }}"><span class="glyphicon glyphicon-cloud-download"></span> Stáhnout řešení</a>
{% if allow_upload_feedback %} {% if allow_upload_feedback %}
<a class='btn btn-primary' href="{{ ctx.url_for('org_generic_batch_upload') }}"><span class="glyphicon glyphicon-cloud-upload"></span> Nahrát ZIP opravených řešení</a> <a class='btn btn-primary' href="{{ ctx.url_for('org_generic_batch_upload') }}"><span class="glyphicon glyphicon-cloud-upload"></span> Nahrát ZIP opravených řešení</a>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
{% if not ctx.site and allow_edit_points %} {% if not ctx.site and allow_edit_points %}
<a class="btn btn-primary" href="{{ ctx.url_for('org_contest_task_points') }}"><span class="glyphicon glyphicon-pencil"></span> Zadat body</a> <a class="btn btn-primary" href="{{ ctx.url_for('org_contest_task_points') }}"><span class="glyphicon glyphicon-pencil"></span> Zadat body</a>
{% endif %} {% endif %}
</div> </p>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
...@@ -49,7 +49,9 @@ Rozkliknutím bodů se lze dostat na detail daného řešení. ...@@ -49,7 +49,9 @@ Rozkliknutím bodů se lze dostat na detail daného řešení.
{{ edit_form.csrf_token }} {{ edit_form.csrf_token }}
{% endif %} {% endif %}
<div class="table-responsive">
{{ table.to_html() }} {{ table.to_html() }}
</div>
{% if edit_form %} {% if edit_form %}
{{ wtf.form_field(edit_form.submit, class="btn btn-primary pull-right") }} {{ wtf.form_field(edit_form.submit, class="btn btn-primary pull-right") }}
......
...@@ -210,12 +210,14 @@ Existuje více než jedna verze oprav, finální je podbarvená. ...@@ -210,12 +210,14 @@ Existuje více než jedna verze oprav, finální je podbarvená.
{{ wtf.form_field(form.file_note, form_type='horizontal', horizontal_columns=('sm', 2, 10)) }} {{ wtf.form_field(form.file_note, form_type='horizontal', horizontal_columns=('sm', 2, 10)) }}
<div class="form-group"> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<p>
{% if allow_upload_solutions %} {% if allow_upload_solutions %}
{{ wtf.form_field(form.submit_sol, class='btn btn-primary', value=action + ' a nahrát soubor jako řešení' )}} {{ wtf.form_field(form.submit_sol, class='btn btn-primary', value=action + ' a nahrát soubor jako řešení' )}}
{% endif %} {% endif %}
{% if allow_upload_feedback %} {% if allow_upload_feedback %}
{{ wtf.form_field(form.submit_fb, class='btn btn-success', value=action + ' a nahrát soubor jako opravu' )}} {{ wtf.form_field(form.submit_fb, class='btn btn-success', value=action + ' a nahrát soubor jako opravu' )}}
{% endif %} {% endif %}
</p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
......
...@@ -11,10 +11,7 @@ finální (ve výchozím stavu poslední nahrané).{% elif rights.can_upload_sol ...@@ -11,10 +11,7 @@ finální (ve výchozím stavu poslední nahrané).{% elif rights.can_upload_sol
{% endif %} {% endif %}
</i></p> </i></p>
<p><i>Legenda: <span class='text-danger icon'></span> odevzdané po termínu, <div class="table-responsive">
<span class="icon">🛈</span> nahráno někým jiným, než řešitelem, <span class="icon">🗐</span> existuje více verzí. Symboly po najetí myší zobrazí bližší informace.
</i></p>
<table class="table table-bordered table-hover table-condensed"> <table class="table table-bordered table-hover table-condensed">
<thead> <thead>
<tr> <tr>
...@@ -110,3 +107,8 @@ finální (ve výchozím stavu poslední nahrané).{% elif rights.can_upload_sol ...@@ -110,3 +107,8 @@ finální (ve výchozím stavu poslední nahrané).{% elif rights.can_upload_sol
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div>
<p><i>Legenda: <span class='text-danger icon'></span> odevzdané po termínu,
<span class="icon">🛈</span> nahráno někým jiným, než řešitelem, <span class="icon">🗐</span> existuje více verzí. Symboly po najetí myší zobrazí bližší informace.
</i></p>
...@@ -9,23 +9,22 @@ ...@@ -9,23 +9,22 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block title %}{{ round.name }} {{ round.year }}. ročníku kategorie {{ round.category }}: {{ contest.place.name }}{% endblock %} {% block title %}{{ round.name }} {{ round.year }}. ročníku kategorie {{ round.category }} {{ contest.place.name_locative() }}{% endblock %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href='{{ url_for('user_index') }}'>Soutěže</a> <li><a href='{{ url_for('user_index') }}'>Soutěže</a>
<li><a href='{{ url_for('user_contest', id=contest.contest_id) }}'>{{ round.name }} {{ round.year }}. ročníku kategorie {{ round.category }}: {{ contest.place.name }}</a> <li>{{ round.name }} {{ round.category }}
<li>Seznam úloh
{% endblock %} {% endblock %}
{% block body %} {% block body %}
{% if round.ct_tasks_start is not none %} {% if round.ct_tasks_start is not none %}
{% if round.ct_submit_end is not none %} {% if round.ct_submit_end is not none %}
<p class="small"><i>Od {{ round.ct_tasks_start|time_and_timedelta }} do {{ round.ct_submit_end|time_and_timedelta }}.</i></p> <p class="small">Od {{ round.ct_tasks_start|timeformat }} do {{ round.ct_submit_end|timeformat }}.</i></p>
{% else %} {% else %}
<p class="small"><i>Od {{ round.ct_tasks_start|time_and_timedelta }}.</i></p> <p class="small">Od {{ round.ct_tasks_start|timeformat }}.</i></p>
{% endif %} {% endif %}
{% else %} {% else %}
{% if round.ct_submit_end is not none %} {% if round.ct_submit_end is not none %}
<p class="small"><i>Do {{ round.ct_submit_end|time_and_timedelta }}.</i></p> <p class="small">Do {{ round.ct_submit_end|timeformat }}.</i></p>
{% endif %} {% endif %}
{% endif %} {% endif %}
...@@ -44,6 +43,7 @@ ...@@ -44,6 +43,7 @@
<p> <p>
Soutěžní kolo se <b>připravuje</b>{% if round.ct_tasks_start and round.ct_tasks_start > g.now %}, Soutěžní kolo se <b>připravuje</b>{% if round.ct_tasks_start and round.ct_tasks_start > g.now %},
začne <b>{{ round.ct_tasks_start|time_and_timedelta }}</b>{% endif %}. začne <b>{{ round.ct_tasks_start|time_and_timedelta }}</b>{% endif %}.
<p>
Až začne, uvidíte na této stránce {% if round.has_tasks() %}text zadání,{% endif %} Až začne, uvidíte na této stránce {% if round.has_tasks() %}text zadání,{% endif %}
přehled úloh a budete zde moci odevzdat svá řešení k jednotlivým úlohám. přehled úloh a budete zde moci odevzdat svá řešení k jednotlivým úlohám.
Do té doby zde nenajdete nic jiného. Do té doby zde nenajdete nic jiného.
......
...@@ -7,6 +7,12 @@ body { ...@@ -7,6 +7,12 @@ body {
min-height: 100vh; min-height: 100vh;
} }
@media (max-width: 767px) {
.container {
width: 100%; /* needed because body is flex */
}
}
.flavor-test { .flavor-test {
background-color: sandybrown; background-color: sandybrown;
} }
...@@ -25,7 +31,7 @@ header { ...@@ -25,7 +31,7 @@ header {
header #header-text { header #header-text {
flex: 1 1 auto; flex: 1 1 auto;
font-size: 50px; font-size: 60px;
} }
header #logo { header #logo {
...@@ -38,38 +44,42 @@ header #logo img { ...@@ -38,38 +44,42 @@ header #logo img {
width: 100%; width: 100%;
} }
header a { header .main-title {
display: block; display: block;
line-height: 1.1em; line-height: 1.3em;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
} }
header a.main-title { header a:first-child {
line-height: 1.2em; margin-right: 1em;
font-size: 1em;
} }
header a, header a:hover {text-decoration: none; color: #000;} header a, header a:hover {
text-decoration: none; color: #000;
}
header small { header small {
display: block; display: block;
font-size: 0.4em; color: #888; font-size: 0.5em; color: #888;
padding-left: 1em; padding-left: 1em;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
header #header-text {font-size: 45px} header #header-text {font-size: 50px}
header #logo {width: 90px} header #logo {width: 90px}
} }
@media (max-width: 767px) { @media (max-width: 767px) {
header #header-text {font-size: 40px} header #header-text {font-size: 45px}
header #logo {width: 80px} header #logo {width: 80px}
} }
@media (max-width: 577px) { @media (max-width: 577px) {
header #header-text {font-size: 36px} header #header-text {font-size: 28px}
header #logo {width: 72px} header #logo {width: 72px}
} }
@media (max-width: 400px) {
header a:first-child { margin-right: 0; }
}
nav { nav {
position: sticky !important; position: sticky !important;
...@@ -105,6 +115,26 @@ span.unknown { ...@@ -105,6 +115,26 @@ span.unknown {
color: red; color: red;
} }
h2 {
font-size: 32px;
margin-top: 0px;
}
p > .btn, .panel-body > .btn {
margin-top: 5px;
margin-bottom: 5px;
}
tfoot td > .btn-xs {
margin-top: 2px;
margin-bottom: 2px;
}
th > .btn-xs {
float: right;
margin-top: -2px;
}
table.table-auto { table.table-auto {
width: auto; width: auto;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment