CSS only taby + jejich použití v org_submit_list

mo/web/templates/org_submit_list.html

@@ -13,8 +13,18 @@
 
 {% if solution %}
 
-<h3>Odevzdaná řešení</h3>
+<div class="tabbed">
+	<input type="radio" id="tab1" name="css-tabs" checked>
+	<input type="radio" id="tab2" name="css-tabs">
+	<input type="radio" id="tab3" name="css-tabs">
 
+	<ul class="tabs">
+		<li class="tab"><label for="tab1">Odevzdaná řešení ({{ sol_papers|length }})</label>
+		<li class="tab"><label for="tab2">Opravená řešení ({{ fb_papers|length }})</label>
+		<li class="tab"><label for="tab3">Historie udělených bodů</label>
+	</ul>
+
+<div class="tab-content">
 <p><i>
 {% if sol_papers|length > 1 %}
 Existuje více než jedna verze řešení, finální je podbarvená.
@@ -62,9 +72,9 @@ Existuje více než jedna verze řešení, finální je podbarvená.
 {% else %}
 <p>Žádná.
 {% endif %}
+</div>
 
-<h3>Opravená řešení</h3>
-
+<div class="tab-content">
 <p><i>
 {% if fb_papers|length > 1 %}
 Existuje více než jedna verze oprav, finální je podbarvená.
@@ -113,10 +123,10 @@ Existuje více než jedna verze oprav, finální je podbarvená.
 {% else %}
 <p>Žádná.
 {% endif %}
+</div>
 
+<div class="tab-content">
 {% if points_history %}
-<h3>Historie udělených bodů</h3>
-
 <table class=data>
 	<thead>
 		<tr>
@@ -132,7 +142,11 @@ Existuje více než jedna verze oprav, finální je podbarvená.
 	</tr>
 	{% endfor %}
 </table>
+{% else %}
+<p>Zatím nebyly uděleny žádné body.
 {% endif %}
+</div>
+</div>
 
 {% else %}
 <p>Žádné odevzdané řešení. {% if form %}Můžete ho přidat pomocí formuláře níže.{% endif %}

static/mo.css

@@ -238,3 +238,64 @@ table.data tbody tr.job-failed:hover {
 div.alert + div.alert {
 	margin-top: -22px;
 }
+
+/* Tabs - source: https://codepen.io/MPDoctor/pen/mpJdYe */
+.tabbed {
+	margin: 15px 0px;
+}
+
+.tabbed [type="radio"] {
+	/* hiding the inputs */
+	display: none;
+}
+
+.tabs {
+	display: flex;
+	align-items: stretch;
+	list-style: none;
+	padding: 0;
+	margin-bottom: 0px;
+	border-bottom: 1px solid #ddd;
+}
+.tab > label {
+	display: block;
+	margin-bottom: -1px;
+	padding: 12px 15px;
+	border: 1px solid #ddd;
+	background: #eee;
+	color: #666;
+	font-size: 16px;
+	cursor: pointer;
+	transition: all 0.3s;
+}
+.tab:hover label {
+	border-top-color: #333;
+	color: #333;
+}
+
+.tab-content {
+	display: none;
+	margin: 0px;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-top: 0px;
+}
+
+/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
+.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
+.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
+.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
+.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
+.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
+	border-bottom-color: #fff;
+	border-top-color: #999;
+	background: #fff;
+	color: #222;
+}
+
+.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
+.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
+.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
+.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
+	display: block;
+}