Velká revize stylů (a některých JS) #44
					 6 changed files with 81 additions and 78 deletions
				
			
		|  | @ -602,42 +602,6 @@ div.odpocet { | |||
| 	} | ||||
| } | ||||
| 
 | ||||
| /*stránka organizátorů*/ | ||||
| 
 | ||||
| div.seznam_orgu, div.rozcestnik_temat, div.seznam_archiv { | ||||
| 	text-align: center; | ||||
| 	padding-bottom: 10px; | ||||
| } | ||||
| 
 | ||||
| div.org_pole, div.rocnik_pole, div.tema_pole { | ||||
| 	display: inline-block; | ||||
| 	width: 30%; | ||||
| 	min-width: 300px; | ||||
| 	text-align: center; | ||||
| } | ||||
| 
 | ||||
| div.tema_pole { | ||||
| 	display: inline-block; | ||||
| 	width: 40%; | ||||
| 	min-width: 350px; | ||||
| 	padding-bottom: 20px; | ||||
| 	text-align: center; | ||||
| } | ||||
| 
 | ||||
| div.cislo_pole { | ||||
| 	display: inline-block; | ||||
| 	width: 15%; | ||||
| 	min-width: 165px; | ||||
| 	text-align: center; | ||||
| 	padding: 10px; | ||||
| } | ||||
| 
 | ||||
| div.seznam_orgu h3 { | ||||
| 	text-align: center; | ||||
| 	margin-top: 10px; | ||||
| 	margin-bottom: 0; | ||||
| } | ||||
| 
 | ||||
| /* aktuální zadání */ | ||||
| .stranka_aktualni_zadani { | ||||
| 	text-align: center; | ||||
|  |  | |||
|  | @ -51,32 +51,14 @@ li.mam-org-only { | |||
| 
 | ||||
| /**** OTÁČECÍ KARTY ****/ | ||||
| /* (orgové, archiv) */ | ||||
| 
 | ||||
| /** Samotné karty **/ | ||||
| .flip-card { | ||||
| 	perspective: 1000px; /* Remove this if you don't want the 3D effect */ | ||||
| 	margin-left: auto; | ||||
| 	margin-right: auto; | ||||
| } | ||||
| 
 | ||||
| #organizatori.flip-card { | ||||
| 	width: 200px; | ||||
| 	height: 250px; | ||||
| } | ||||
| 
 | ||||
| #archiv.flip-card { | ||||
| 	width: 210px; | ||||
| 	height: 298px; | ||||
| } | ||||
| 
 | ||||
| #archiv-rocnik.flip-card { | ||||
| 	width: 144px; | ||||
| 	height: 205px; | ||||
| } | ||||
| 
 | ||||
| #tema-rozcestnik.flip-card { | ||||
| 	width: 300px; | ||||
| 	height: 300px; | ||||
| } | ||||
| 
 | ||||
| /* This container is needed to position the front and back side */ | ||||
| .flip-card-inner { | ||||
| 	position: relative; | ||||
|  | @ -109,21 +91,79 @@ div.flip-card-foto, div.flip-card-foto img { | |||
| 
 | ||||
| /* Style the back side */ | ||||
| .flip-card-back { | ||||
| 	background-color: var(--svetla-oranzova); | ||||
| 	color: black; | ||||
| 	transform: rotateY(180deg); | ||||
| 	padding: 10px; | ||||
| 	padding-top: 20px; | ||||
| } | ||||
| 
 | ||||
| #archiv.flip-card-back { | ||||
| 	background-color: white; | ||||
| } | ||||
| 
 | ||||
| /* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */ | ||||
| @media(hover: none) { | ||||
| 	.flip-card-foto a { pointer-events: none; } | ||||
| } | ||||
| /*******************/ | ||||
| 
 | ||||
| 
 | ||||
| .flip-card-back { | ||||
| 	background-color: var(--svetla-oranzova); | ||||
| 	color: black; | ||||
| } | ||||
| 
 | ||||
| .otaceci_cisla .flip-card-back { | ||||
| 	background-color: white; | ||||
| 	color: unset; | ||||
| } | ||||
| 
 | ||||
| /* Otáčecí karta musí mít kolem sebe nějaké místo a mívá nějaký nadpis */ | ||||
| .flip_card_container { | ||||
| 	display: inline-block; | ||||
| 	width: 30%; | ||||
| 	min-width: 300px; | ||||
| 	text-align: center; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| /** Jednotlivá použití **/ | ||||
| .seznam_orgu .flip-card { | ||||
| 	width: 200px; | ||||
| 	height: 250px; | ||||
| } | ||||
| 
 | ||||
| .seznam_orgu .flip_card_container h3 { | ||||
| 	margin-bottom: 0; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| .seznam_archiv .flip-card { | ||||
| 	width: 210px; | ||||
| 	height: 298px; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| .cisla-v-rocniku .flip-card { | ||||
| 	width: 144px; | ||||
| 	height: 205px; | ||||
| } | ||||
| 
 | ||||
| .cisla-v-rocniku .flip_card_container { | ||||
| 	width: 15%; | ||||
| 	min-width: 165px; | ||||
| 	padding: 10px; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| .rozcestnik_temat .flip-card { | ||||
| 	width: 300px; | ||||
| 	height: 300px; | ||||
| } | ||||
| 
 | ||||
| .rozcestnik_temat .flip_card_container { | ||||
| 	width: 40%; | ||||
| 	min-width: 350px; | ||||
| 	padding-bottom: 20px; | ||||
| } | ||||
| /************************/ | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| /* karty archiv */ | ||||
| 
 | ||||
|  | @ -136,7 +176,7 @@ div.popis_rocniku { | |||
| 
 | ||||
| div.popis_rocniku a, div.cislo_odkazy a { | ||||
| 	font-weight: bold; | ||||
| 	color: black; | ||||
| 	color: unset; | ||||
| } | ||||
| 
 | ||||
| div.popis_rocniku a:hover, | ||||
|  |  | |||
|  | @ -7,11 +7,11 @@ | |||
|       Archiv čísel | ||||
|     {% endblock %} | ||||
|   </h2> | ||||
|   <div class="seznam_archiv"> | ||||
|   <div class="seznam_archiv otaceci_cisla"> | ||||
| 
 | ||||
|     {% for rocnik, url_png in object_list.items %} | ||||
| 
 | ||||
|     <div class="rocnik_pole"> | ||||
|     <div class="flip_card_container"> | ||||
| 
 | ||||
|       <h3> | ||||
|       <a href='{{ rocnik.verejne_url }}'>Ročník {{ rocnik }}</a> | ||||
|  | @ -20,7 +20,7 @@ | |||
| 
 | ||||
|       {# karta ročníku - zepředu obrázek prvního čísla, zezadu odkaz na jednotlivá čísla a výsledkovku #} | ||||
| 
 | ||||
|       <div class="flip-card" id="archiv"> | ||||
|       <div class="flip-card"> | ||||
| 
 | ||||
|       <div class="flip-card-inner"> | ||||
|         <div class="flip-card-front"> | ||||
|  | @ -30,7 +30,7 @@ | |||
|       </div> | ||||
| 
 | ||||
|       </div> | ||||
|        <div class="flip-card-back" id="archiv"> | ||||
|        <div class="flip-card-back"> | ||||
|       <div class="popis_rocniku"> | ||||
|         Jednotlivá čísla: | ||||
|         <ul> | ||||
|  |  | |||
|  | @ -19,13 +19,13 @@ | |||
| 
 | ||||
| <h2>Čísla</h2> | ||||
| 
 | ||||
| <div class="cisla-v-rocniku"> | ||||
| <div class="cisla-v-rocniku otaceci_cisla"> | ||||
|   {% for c in rocnik.verejna_cisla %} | ||||
|     <div class="cislo_pole"> | ||||
|     <div class="flip_card_container"> | ||||
| 
 | ||||
|       <h6> Číslo {{ c.kod }}</h6> | ||||
| 
 | ||||
|       <div class="flip-card" id="archiv-rocnik"> | ||||
|       <div class="flip-card"> | ||||
| 
 | ||||
|       <div class="flip-card-inner"> | ||||
|         <div class="flip-card-front"> | ||||
|  | @ -65,13 +65,13 @@ | |||
| 
 | ||||
| {% if user.je_org and rocnik.neverejna_cisla %} | ||||
| <div class="mam-org-only"> | ||||
|     <div class="cisla-v-rocniku"> | ||||
|     <div class="cisla-v-rocniku otaceci_cisla"> | ||||
|         {% for c in rocnik.neverejna_cisla %} | ||||
|             <div class="cislo_pole"> | ||||
|             <div class="flip_card_container"> | ||||
| 
 | ||||
|                 <h6> Číslo {{ c.kod }}</h6> | ||||
| 
 | ||||
|                 <div class="flip-card" id="archiv-rocnik"> | ||||
|                 <div class="flip-card"> | ||||
| 
 | ||||
|                     <div class="flip-card-inner"> | ||||
|                         <div class="flip-card-front"> | ||||
|  |  | |||
|  | @ -18,7 +18,7 @@ | |||
| 
 | ||||
| <div class="seznam_orgu"> | ||||
|   {% for org in object_list %} | ||||
|   <div class="org_pole"> | ||||
|   <div class="flip_card_container"> | ||||
| 
 | ||||
|     <h3> | ||||
|     {{org.osoba.jmeno}} | ||||
|  | @ -37,7 +37,7 @@ | |||
| 
 | ||||
|     {# karta organizátora - zepředu fotka, zezadu popis, u neaktivních data kdy organizovali #} | ||||
| 
 | ||||
|     <div class="flip-card" id="organizatori"> | ||||
|     <div class="flip-card"> | ||||
| 
 | ||||
|     <div class="flip-card-inner"> | ||||
|       <div class="flip-card-front"> | ||||
|  |  | |||
|  | @ -19,15 +19,14 @@ | |||
| <div class="rozcestnik_temat"> | ||||
| 
 | ||||
| {% for tematko in tematka %} | ||||
| 
 | ||||
| {# karta témátka - zepředu ilustrační, zezadu abstrakt #} | ||||
| <div class="tema_pole"> | ||||
| <div class="flip_card_container"> | ||||
| 
 | ||||
|   <h3> | ||||
|     <a href='{{ tematko.verejne_url }}'>Téma {{ tematko.nazev }}</a> | ||||
|   </h3> | ||||
| 
 | ||||
|   <div class="flip-card" id="tema-rozcestnik"> | ||||
|   <div class="flip-card"> | ||||
| 
 | ||||
|     <div class="flip-card-inner"> | ||||
|       <div class="flip-card-front"> | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue