mam/mamweb
11
0
Fork 0
Code Issues Pull requests 11 Projects Wiki Activity Actions

práce na stránce organizátorů

Browse source
This commit is contained in:
Kateřina Čížková 2020-02-17 13:47:22 +01:00
parent fa9a6e16f5
commit e84003b6e7
2 changed files with 66 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
mamweb/static/css/mamweb.css
View file

@ -144,7 +144,7 @@ h1 {
font-weight: 400;
font-variant: small-caps;
text-align: center;
text-decoration: bold;
text-decoration: none;
padding-top: 8px;
text-shadow: none;
}
@ -554,8 +554,7 @@ ul.submenu {
/*todo pro mobily*/
div.seznam_orgu {
}
div.org_pole {
display: inline-block;
@ -574,6 +573,50 @@ div.seznam_orgu h3 {
margin-top: 10px;
}
/*otáčecí karty organizátorů*/
.flip-card {
width: 300px;
height: 200px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
}
/* Style the back side */
.flip-card-back {
background-color: #e84e10;
color: #fffbf6;
transform: rotateY(180deg);
}
/* galerie */

30
seminar/templates/seminar/cojemam/organizatori.html
View file

@ -36,6 +36,13 @@
{{org.osoba.prijmeni}}
</h3>
{# karta organizátora - zepředu fotka, zezadu popis, u neaktivních data kdy organizovali #}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="foto_org">
{% if org.osoba.foto %}
<a href="{{org.osoba.foto.url}}"><img src="{{org.osoba.foto_male.url}}" height="{{org.osoba.foto_male.height}}" alt="{{org.osoba.jmeno}} {{org.osoba.prijmeni}}"></a>
@ -44,34 +51,38 @@
{% endif %}
</div>
</div>
<div class="flip-card-back">
<ul>
{% if aktivni %}
{% if org.organizuje_od %}
<li>
Organizuje od roku {{org.organizuje_od.year}}
{{org.strucny_popis_organizatora}}
{% endif %}
{% else %}
<li>
Aktivní v letech {{org.organizuje_od | default:"?" }}&ndash;{{org.organizuje_do | default:"?" }}
Aktivní v letech {{org.organizuje_od.year | default:"?" }}&ndash;{{org.organizuje_do.year | default:"?" }}
{% endif %}
{% if org.skola %}
<li>{{org.studuje}} na {{org.skola}}
{% endif %}
{% if org.osoba.email %}
<li>Kontakt:
<li>
{# zobrazeni e-mailu (na jednom radku, aby nevznikaly mezery navic) #}
{% for znak in org.osoba.email %}{% if znak == '@' %} &#60;at&#62; {% elif znak == '.' %} &#60;dot&#62; {% else %}{{znak}}{% endif %}{% endfor %}
{#{% for znak in org.osoba.email %}{% if znak == '@' %} &#60;at&#62; {% elif znak == '.' %} &#60;dot&#62; {% else %}{{znak}}{% endif %}{% endfor %}#}
{{org.osoba.email}}
{% endif %}
</ul>
{# {{org.strucny_popis_organizatora}} #}
</div>
</div>
</div>
{# konec karty organizátora #}
<hr>
</div>
{% endfor %}
@ -84,4 +95,3 @@
{% endif %}
{% endblock content %}