Galerie: stylování podle schůzky
This commit is contained in:
		
							parent
							
								
									1a768bef08
								
							
						
					
					
						commit
						84d7382ffb
					
				
					 4 changed files with 104 additions and 84 deletions
				
			
		|  | @ -5,10 +5,13 @@ | |||
| {{galerie.nazev}}: {{ obrazek.popis | default:"Fotka" }} | ||||
| {% endblock %} | ||||
| 
 | ||||
| 
 | ||||
| {# přecházení mezi fotkami pomocí šipek #} | ||||
| {% block script %} | ||||
|   {% with obrazky_predchozi|last as predchozi_obrazek %} | ||||
|   {% with obrazky_dalsi|first as dalsi_obrazek %} | ||||
|       <script type="text/javascript"> | ||||
|           $(document).ready(function() { | ||||
|             $(document).keydown(function(e) { | ||||
|                 {% if predchozi_obrazek %} | ||||
|                     // doleva | ||||
|  | @ -23,8 +26,14 @@ | |||
|                     } | ||||
|                 {% endif %} | ||||
|                 if (e.which == 27) { | ||||
|                   window.location.assign("../#obsah") | ||||
|                     window.location.assign("../#obsah"); | ||||
|                 } | ||||
|             }); | ||||
| 
 | ||||
|             $("#prostredni").click(function() { | ||||
|                 $("#prostredni").parent().append("<p style='text-align: center;'>Prohrál jsi</p>"); | ||||
|                 $("#prostredni").off("click"); | ||||
|             }); | ||||
|         }) | ||||
|       </script> | ||||
|   {% endwith %} | ||||
|  | @ -36,16 +45,11 @@ | |||
| 
 | ||||
|   <h2> | ||||
|     {% for g in cesta %} | ||||
|         <a href="../../{{ g.pk }}">{{ g.nazev }}</a> > | ||||
|         <a href="../../{{ g.pk }}">{{ g.nazev }}</a>{% if not forloop.last %} >{% endif %} | ||||
|     {% endfor %} | ||||
|     {{ obrazek.nazev }} | ||||
|   </h2> | ||||
|   <!--<div id="nahoru">--> | ||||
|   <!--<a title="Zpět do galerie" href="../#obsah">Zpět na: {{galerie.nazev}}</a>--> | ||||
|   <!--</div>--> | ||||
| 
 | ||||
| 
 | ||||
|   {# TODO šipky na přecházeni dodelat ve stylech #} | ||||
|   <div class="galerie"> | ||||
|     {% if obrazky_predchozi %} | ||||
|       {% with obrazky_predchozi|last as predchozi_obrazek %} | ||||
|  | @ -92,8 +96,9 @@ | |||
| 
 | ||||
|   <div class="galerie_nahledy"> | ||||
|     {# odkaz na predchozi galerii #} | ||||
|     <div class="navigace"> | ||||
|       {% if predchozi_galerie %} | ||||
|       Predchozi: <a href="../../{{predchozi_galerie.pk}}/{{predchozi_galerie.obrazek_set.last.pk}}/#nahoru"> | ||||
|         Předchozí: <a href="../../{{predchozi_galerie.pk}}/{{predchozi_galerie.obrazek_set.last.pk}}/#nahoru"> | ||||
|           {{predchozi_galerie}} | ||||
|         </a> | ||||
|       {% endif %} | ||||
|  | @ -101,21 +106,26 @@ | |||
|       {% for obrazek in obrazky_predchozi %} | ||||
|       <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a> | ||||
|       {% endfor %} | ||||
|     {# nahled aktualniho obrazku -- TODO po kliknuti vypsat: Prohrál jsi #} | ||||
|     </div> | ||||
| 
 | ||||
|     <img src={{obrazek.obrazek_maly.url}} | ||||
|        height="{{obrazek.obrazek_maly.height}}" | ||||
|        width="{{obrazek.obrazek_maly.width}}" | ||||
|        alt="{{obrazek.popis}}" | ||||
|          class="obrazek"> | ||||
|        class="obrazek" | ||||
|        id="prostredni"> | ||||
| 
 | ||||
|     <div class="navigace"> | ||||
|       {# nahledy nasledujicich obrazku #} | ||||
|       {% for obrazek in obrazky_dalsi %} | ||||
|       <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a> | ||||
|       {% endfor %} | ||||
|       {# odkaz na nasledujici galerii #} | ||||
|       {% if nasledujici_galerie %} | ||||
|       Nasledujici: <a href="../../{{nasledujici_galerie.pk}}/{{nasledujici_galerie.obrazek_set.first.pk}}/#nahoru"> | ||||
|         Následující: <a href="../../{{nasledujici_galerie.pk}}/{{nasledujici_galerie.obrazek_set.first.pk}}/#nahoru"> | ||||
|           {{nasledujici_galerie}} | ||||
|         </a> | ||||
|       {% endif %} | ||||
|     </div> | ||||
|   </div> | ||||
| {% endblock %} | ||||
|  |  | |||
|  | @ -21,11 +21,6 @@ Galerie {{galerie.nazev}} | |||
|     {% if galerie.titulni_obrazek %} | ||||
|       <img src="{{ galerie.titulni_obrazek.obrazek_stredni.url }}" style="border: 1px solid black;"> | ||||
|     {% endif %} | ||||
|     {% if galerie.popis %} | ||||
|       <div class="popis"> | ||||
|         {{ galerie.popis }} | ||||
|       </div> | ||||
|     {% endif %} | ||||
|    </div> | ||||
|   {% endif %} | ||||
| 
 | ||||
|  | @ -46,25 +41,29 @@ Galerie {{galerie.nazev}} | |||
|     {% if podgalerie %} | ||||
|       <div class="galerie_nahledy"> | ||||
|       {% for galerie in podgalerie %} | ||||
|         <div class="podgalerie_nahled"> | ||||
|         <a href="../{{galerie.pk}}" class="podgalerie_nahled"> | ||||
|         <!--<div class="podgalerie_nahled">--> | ||||
|           {% if galerie.zobrazit < 1 or user.is_staff %} | ||||
|             {% if galerie.titulni_obrazek %} | ||||
|               {% with galerie.titulni_obrazek.obrazek_maly as obrazek %} | ||||
|               <a href="../{{galerie.pk}}"><img src="{{ obrazek.url }}" | ||||
|               <img src="{{ obrazek.url }}" | ||||
|                  width={% widthratio obrazek.width 200 167 %} | ||||
|                  height={% widthratio obrazek.height 200 167 %} /></a> | ||||
|                  height={% widthratio obrazek.height 200 167 %} /> | ||||
|               {% endwith %} | ||||
|             {% endif %} | ||||
|            <div> | ||||
|               <a href="../{{ galerie.pk }}">{{ galerie }}</a> | ||||
|            {{ galerie }} | ||||
|            </div> | ||||
|          {#  {% if user.is_staff and galerie.zobrazit > 0 %} #} | ||||
|          {#    ({{galerie.poradi}}) #} | ||||
|          {#    <span class="plus"><a href="plus/{{galerie.pk}}/">+</a></span> #} | ||||
|          {#    <span class="minus"><a href="minus/{{galerie.pk}}/">-</a></span> #} | ||||
|          {#  {% endif %} #} | ||||
|           <!--</div>--> | ||||
|         </a> | ||||
|           {% comment %} | ||||
|             {% if user.is_staff and galerie.zobrazit > 0 %} | ||||
|               ({{galerie.poradi}}) | ||||
|               <span class="plus"><a href="plus/{{galerie.pk}}/">+</a></span> | ||||
|               <span class="minus"><a href="minus/{{galerie.pk}}/">-</a></span> | ||||
|             {% endif %} | ||||
|           {% endcomment %} | ||||
|           {% endif %} | ||||
|         </div> | ||||
|       {% endfor %} | ||||
|       </div> | ||||
|     {% endif %} | ||||
|  | @ -79,15 +78,11 @@ Galerie {{galerie.nazev}} | |||
|   {% if obrazky %} | ||||
|   <div class="galerie_nahledy"> | ||||
|     {% for obrazek in obrazky %} | ||||
|         <div class="galerie_nahled"> | ||||
|           <span class="vystredeno"></span> | ||||
|           <a title="Zobrazit tuto fotografii" href="./{{obrazek.pk}}#nahoru"> | ||||
|           <img | ||||
|         <a title="Zobrazit tuto fotografii" href="./{{obrazek.pk}}#nahoru" class="galerie_nahled"><span class="vystredeno"></span><img | ||||
|             src="{{obrazek.obrazek_maly.url}}" | ||||
|             width={% widthratio obrazek.obrazek_maly.width 200 167 %} | ||||
|             height={% widthratio obrazek.obrazek_maly.height 200 167 %} /> | ||||
|         </a> | ||||
|         </div> | ||||
|     {% endfor %} | ||||
|     <br> | ||||
|   </div> | ||||
|  |  | |||
|  | @ -489,7 +489,6 @@ div.zadani_azad_termin { | |||
| 
 | ||||
| .popis { | ||||
|   margin: 10px 10px 30px 0px; | ||||
|   clear: all; | ||||
|   text-align: center; | ||||
| } | ||||
| 
 | ||||
|  | @ -504,17 +503,22 @@ div.zadani_azad_termin { | |||
|   overflow: auto; | ||||
| } | ||||
| 
 | ||||
| .galerie_nahledy img{ | ||||
|   margin: 0 10px 0 10px; | ||||
| .galerie_nahledy div.navigace { | ||||
|     display: inline-block; | ||||
|     width: 150px; | ||||
| } | ||||
| 
 | ||||
| .galerie_nahledy a{ | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
| } | ||||
| /*.galerie_nahledy img{*/ | ||||
| /*margin: 0 10px 0 10px;*/ | ||||
| /*}*/ | ||||
| 
 | ||||
| /*.galerie_nahledy a{*/ | ||||
| /*height: 100%;*/ | ||||
| /*width: 100%;*/ | ||||
| /*}*/ | ||||
| 
 | ||||
| .galerie_nahled { /* frame */ | ||||
|   display: inline-block; | ||||
|   display: block; | ||||
|   position: relative; | ||||
|   float: left; | ||||
|   width: 200px; | ||||
|  | @ -531,6 +535,11 @@ div.zadani_azad_termin { | |||
|   margin: 10px 20px 10px 0px; | ||||
| } | ||||
| 
 | ||||
| .galerie_nahled:hover { | ||||
|     background-color: #ffd546; | ||||
|     border-color: #ffa500; | ||||
| } | ||||
| 
 | ||||
| .vystredeno{ /* helper */ | ||||
|   display: inline-block; | ||||
|   height: 100%; | ||||
|  | @ -545,8 +554,8 @@ div.zadani_azad_termin { | |||
| 
 | ||||
| } | ||||
| 
 | ||||
| .galerie_nahled img:hover { | ||||
|     /*border: 1px solid #ffa500;*/ | ||||
| .galerie_nahled img, .podgalerie_nahled img { | ||||
|     border-radius: 2px; | ||||
| } | ||||
| 
 | ||||
| .galerie_nahled div { | ||||
|  | @ -558,6 +567,7 @@ div.zadani_azad_termin { | |||
| 
 | ||||
| 
 | ||||
| .podgalerie_nahled { | ||||
|   display: block; | ||||
|   position: relative; | ||||
|   float: left; | ||||
|   width: 200px; | ||||
|  | @ -572,6 +582,11 @@ div.zadani_azad_termin { | |||
|   /*background-color: white;*/ | ||||
|   white-space: nowrap; | ||||
|   margin: 10px 20px 10px 0px; | ||||
|   font-weight: bold; | ||||
| } | ||||
| 
 | ||||
| .podgalerie_nahled:hover { | ||||
|     background-color: #ffa500; | ||||
| } | ||||
| 
 | ||||
| .podgalerie_nahled img { | ||||
|  |  | |||
|  | @ -43,19 +43,19 @@ | |||
|     {% for galerie in soustredeni.galerie_set.all %} | ||||
|       {% if galerie.zobrazit == 0 or user.is_staff %} | ||||
|         <li> | ||||
|           <a href="../{{soustredeni.pk}}/fotogalerie/{{galerie.pk}}">FOTOGALERIE: {{galerie}}</a> | ||||
|           <a href="../{{soustredeni.pk}}/fotogalerie/{{galerie.pk}}">Fotogalerie</a> | ||||
|           {# TODO kdyz je titulni obrazek, tak asi i titulni obrazek #} | ||||
|         </li> | ||||
|       {% endif %} | ||||
|     {% endfor %} | ||||
|   {% endif %} | ||||
| 	</ul> | ||||
|   {% if user.is_staff %} | ||||
|     <li> | ||||
|       <a href="../{{soustredeni.pk}}/fotogalerie/0/new/"> VYTVOŘIT NOVOU FOTOGALERII </a> | ||||
|     </li> | ||||
|     <div class="mam-org-only"> | ||||
|       <a href="../{{soustredeni.pk}}/fotogalerie/0/new/">Vytvořit novou fotogalerii</a> | ||||
|     </div> | ||||
|   {% endif %} | ||||
| 
 | ||||
| 	</ul> | ||||
| 
 | ||||
|         {# popis soustredeni #} | ||||
|         {% if soustredeni.text %} | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue
	
	 Matěj Kocián
						Matěj Kocián