Merge remote-tracking branch 'origin/Galerie'

galerie/templates/galerie/Galerie.html

@@ -5,14 +5,16 @@
 {% endblock %}{% endblock %}
 
 {% block content %}
-  <h1><a title="Zpět na náhled fotek" href="../#obsah">{{galerie.nazev}}</a></h1>
+  <div id="popis">
+    <h2><a title="Zpět na náhled fotek" href="../#obsah">{{galerie.nazev}}</a></h2>
+  </div>
 
 
   {# TODO šipky na přecházeni dodelat ve stylech #}
   <div class="galerie">
     {% if obrazky_predchozi %}
       {% with obrazky_predchozi|last as predchozi_obrazek %}
-        <div id="popis">
+        <div>
           <a title="Předchozí" class="predchozi_obrazek" href="../{{predchozi_obrazek.pk}}#popis"></a>
         </div>
       {% endwith %}

galerie/templates/galerie/GalerieNahled.html

@@ -34,41 +34,20 @@
 
   {# obrazky v galerii #}
   {% if obrazky %}
-  <table class="galerie_nahled">
+  <div class="galerie_nahledy">
     {% for obrazek in obrazky %}
-      {% if forloop.counter|add:-1|divisibleby:3 %}
-        <tr>
-      {% endif %}
-        <td class="vystredeno">
-          <a title="Zobrazit tuto fotografii" href="./{{obrazek.pk}}#popis"
-            class="jednoducha-galerie">
+        <div class="galerie_nahled">
+          <span class="vystredeno"></span>
+          <a title="Zobrazit tuto fotografii" href="./{{obrazek.pk}}#popis">
           <img
             src="{{obrazek.obrazek_maly.url}}"
             width={% widthratio obrazek.obrazek_maly.width 200 167 %}
             height={% widthratio obrazek.obrazek_maly.height 200 167 %} />
           </a>
-          <!--<a href="{{obrazek.obrazek_velky.url}}"
-            class="javascript-galerie" data-lightbox="galerie" data-title="{{obrazek.popis}}"
-            style="display: none;">
-          <img
-            src="{{obrazek.obrazek_maly.url}}"
-            width={% widthratio obrazek.obrazek_maly.width 200 167 %}
-            height={% widthratio obrazek.obrazek_maly.height 200 167 %} />
-          </a>-->
-	</td>
-      {% if forloop.last %}
-        {% if not forloop.counter|divisibleby:3 %}
-          <td></td>
-        {% endif %}
-        {% if not forloop.counter|divisibleby:2 %}
-          <td></td>
-        {% endif %}
-      {% endif %}
-      {% if forloop.counter|divisibleby:3 or forloop.last %}
-        </tr>
-      {% endif %}
+        </div>
     {% endfor %}
-  </table>
+    <br>
+  </div>
   {% else %}
     <div class="zadne-vysledky">
       V galerii nejsou žádné fotky.

mamweb/static/css/mamweb.css

@@ -469,25 +469,63 @@ div.zadani_azad_termin {
 
 .galerie{
   position: relative;
+  text-align: center;
+  width: 630px;
+  margin: 0 auto 0 auto;
+}
+
+.galerie h2{
+  text-align: center;
+}
+
+.popis{
+  text-align: center;
+  margin: 10px 10px 30px 10px;
 }
 
 .galerie_nahledy{
-  margin: 1em 0;
+  /*margin: 1em 0;*/
+  margin: 0 auto 0 auto;
   text-align: center;
 }
-.galerie_index{
+
+.galerie_nahledy img{
+  margin: 0 10px 0 10px;
+}
+
+.galerie_nahledy a{
+  height: 100%;
   width: 100%;
 }
-.galerie_index td{
-  width: 50%;
+
+.galerie_nahled{ /* frame */
+  float: left;
+  width: 190px;
+  height: 190px;
+  text-align: center;
+  border: solid;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: #ffa500;
+  background-color: #ffb52d;
+  white-space: nowrap;
+  margin: 10px;
 }
-.galerie_nahled{
-  width: 100%;
+
+.vystredeno{ /* helper */
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
 }
-.galerie_nahled td{
-  width: 33%;
+
+.galerie_nahled img{
+  border-radius: 2px;
+  vertical-align: middle;
+  max-height: 180px;
+  max-width: 180px;
 }
 
+
 /* titulni stranka */
 
 .zjistit_vic{