mam/mamweb
13
1
Fork 0
Code Issues Pull requests 12 Projects Wiki Activity Actions

rozcestník témátek

Browse source
This commit is contained in:
Kateřina Č 2020-11-10 20:44:29 +01:00
parent 9726dca10a
commit b2563ba1e3
3 changed files with 60 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
mamweb/static/css/mamweb.css
View file

@ -759,17 +759,26 @@ div.odpocet {
/*stránka organizátorů*/ /*stránka organizátorů*/
div.seznam_orgu { div.seznam_orgu, div.rozcestnik_temat {
text-align: center; text-align: center;
padding-bottom: 10px;
} }
div.org_pole, div.rocnik_pole { div.org_pole, div.rocnik_pole, div.tema_pole {
display: inline-block; display: inline-block;
width: 30%; width: 30%;
min-width: 300px; min-width: 300px;
text-align: center; text-align: center;
} }
div.tema_pole {
display: inline-block;
width: 40%;
min-width: 350px;
padding-bottom: 20px;
text-align: center;
}
div.cislo_pole { div.cislo_pole {
display: inline-block; display: inline-block;
width: 15%; width: 15%;
@ -812,6 +821,11 @@ div.org_email {
height: 205px; height: 205px;
} }
#tema-rozcestnik.flip-card {
width: 300px;
height: 300px;
}
/* This container is needed to position the front and back side */ /* This container is needed to position the front and back side */
.flip-card-inner { .flip-card-inner {
position: relative; position: relative;
@ -835,7 +849,8 @@ div.org_email {
backface-visibility: hidden; backface-visibility: hidden;
} }
div.flip-card-foto img {
div.flip-card-foto, div.flip-card-foto img {
width: 100%; width: 100%;
height: 100%; height: 100%;

BIN
seminar/static/images/tema-bez-obrazku.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 300 KiB

55
seminar/templates/seminar/tematka/rozcestnik.html
View file

@ -2,24 +2,53 @@
{% block content %} {% block content %}
<p style="text-align:justify">Témata jsou texty nejen z oblasti matematiky, fyziky a informatiky, které popisují nějaký problém a jsou doprovázeny návodnými úlohami. Vaším úkolem je&nbsp;zamyslet se nad daným problémem a sepsat vaše úvahy ve formě krátkého textu.</p>
<p style="text-align:justify"><a href="/co-je-MaM/jak-resit/">Jak řešit téma?</a></p> <h2>
{% block nadpis1a %}{% block nadpis1b %}
Aktuální témata
{% endblock %}{% endblock %}
</h2>
<p style="text-align:justify">&nbsp;</p> <p>Témata jsou texty nejen z oblasti matematiky, fyziky a informatiky, které popisují nějaký
problém a jsou doprovázeny návodnými úlohami. Vaším úkolem je&nbsp;zamyslet se nad daným
problémem a sepsat vaše úvahy ve formě krátkého textu.</p>
<h1>Aktuální témata</h1> <p><a href="/co-je-MaM/jak-resit/">Jak řešit téma?</a></p>
<div class="rozcestnik_temat">
{% for tematko in tematka %} {% for tematko in tematka %}
<h2>{{tematko.nazev}}</h2>
<div class="tematko-obrazek"> {# karta témátka - zepředu ilustrační, zezadu abstrakt #}
{% if tematko.obrazek %} <div class="tema_pole">
<a href="{{tematko.obrazek.url}}" class="ref-tema-obr"><img src="{{tematko.obrazek.url}}" height="{{tematko.obrazek.height}}" alt="{{tematko.nazev}}"></a>
{% else %} {# pokud témátko nemá fotku, zobrazuje se defaultní obrázek #} <h3>
{% load static %} <img src="{% static 'images/no-photo.png' %}" height=200px alt="{{tematko.nazev}}"> <a href='{{ rocnik.verejne_url }}'>Téma {{ tematko.nazev }}</a>
{% endif %} </h3>
<div class="flip-card" id="tema-rozcestnik">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-card-foto">
{% if tematko.obrazek %}
<img src="{{ tematko.obrazek.url }}" alt="{{ tematko.nazev }}">
{% else %} {# pokud témátko nemá fotku, zobrazuje se defaultní obrázek #}
{% load static %} <img src="{% static 'images/tema-bez-obrazku.png' %}" alt="{{ tematko.nazev }}">
{% endif %}
</div>
</div>
<div class="flip-card-back">
<p>{{ tematko.abstrakt }}</p>
</div>
</div>
</div>
</div>
{# konec karty témátka #}
{% endfor %}
</div> </div>
<p>{{tematko.abstrakt}}</p>
{% endfor %}
{% endblock %} {% endblock %}