Galerie: stylování

galerie/templates/galerie/Galerie.html

@@ -5,10 +5,15 @@
 {% endblock %}
 
 {% block content %}
-  <h2>{{ obrazek.nazev }}</h2>
-  <div id="nahoru">
-    <a title="Zpět do galerie" href="../#obsah">Zpět na: {{galerie.nazev}}</a>
-  </div>
+  <h2>
+    {% for g in cesta %}
+        <a href="../../{{ g.pk }}">{{ g.nazev }}</a> >
+    {% 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 #}
@@ -24,7 +29,7 @@
          height="{{vyska}}"
          width="{{sirka}}"
          alt="{{obrazek.popis}}"
-         class="obrazek">
+         class="obrazek" id="nahoru">
          
     {% if obrazky_dalsi %}
       {% with obrazky_dalsi|first as dalsi_obrazek %}
@@ -34,14 +39,14 @@
       {% endwith %}
     {% endif%}
   </div>
-  {# <div> #}
-  {#  <a href="{{ obrazek.obrazek_velky.url }}">Obrázek v plné velikosti</a> #}
-  {# </div> #}
+  <!--<div>-->
+  <!--<a href="{{ obrazek.obrazek_velky.url }}">Obrázek v plné velikosti</a>-->
+  <!--</div>-->
 
   {# Popisek fotky #}
   <div class="popis">
-    {% if preview %}
-    <form action=".#popis" method="post">
+    {% if not preview %}
+    <form action=".#nahoru" method="post">
       {% csrf_token %}
       <table>
         <tr><td><label>Aktuální komentář:</label></td><td>{{obrazek.popis}}</td>
@@ -58,7 +63,7 @@
 
   <div class="galerie_nahledy">
     {% for obrazek in obrazky_predchozi %}
-    <a href="../{{obrazek.pk}}#popis"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
+    <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
     {% endfor %}
     <img src={{obrazek.obrazek_maly.url}}
          height="{{obrazek.obrazek_maly.height}}"
@@ -66,7 +71,7 @@
                    alt="{{obrazek.popis}}"
                         class="obrazek">
     {% for obrazek in obrazky_dalsi %}
-    <a href="../{{obrazek.pk}}#popis"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
+    <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
     {% endfor %}
   </div>
 {% endblock %}

galerie/templates/galerie/GalerieNahled.html

@@ -5,15 +5,44 @@ Galerie {{galerie.nazev}}
 {% endblock %}
 
 {% block content %}
-  <h2>{{galerie.nazev}}</h2>
+
+  <h2>
+    {% for g in cesta %}
+      {% if not forloop.last %}
+        <a href="../{{ g.pk }}">{{ g.nazev }}</a> >
+      {% else %}
+        {{ g.nazev }}
+      {% endif %}
+    {% endfor %}
+  </h2>
+
+  {% if not obrazky %}
+   <div class="galerie_hlavicka">
+    {% 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 %}
 
   {# podgalerie #}
   {% if podgalerie or galerie.galerie_up %}
-    <h3> PODGALERIE </h3>
-    {% if galerie.galerie_up %}
-      <a href="../{{galerie.galerie_up.pk}}">..</a>
+
+    {% if sourozenci|length > 1 %}
+      {% for g in sourozenci %}
+        {% if g.pk != galerie.pk %}
+          <a href="../{{ g.pk }}">{{ g.nazev }}</a>
+        {% else %}
+          {{ g.nazev }}
+        {% endif %}
+        <span style="width: 1em; display: inline-block;"></span>
+      {% endfor %}
     {% endif %}
-    
+
     {% if podgalerie %}
       <div class="galerie_nahledy">
       {% for galerie in podgalerie %}
@@ -37,12 +66,11 @@ Galerie {{galerie.nazev}}
       {% endfor %}
       </div>
     {% endif %}
-  </ul>
   {% endif %}
   {% if user.is_staff and galerie.zobrazit > 0 %}
-  <ul>
-    <li><a href="./new">VYTVOŘIT NOVOU PODGALERII </a>
-  </ul>
+  <div class="mam-org-only">
+      <a href="./new">Vytvořit novou podgalerii </a>
+  </div>
   {% endif %}
 
   {# obrazky v galerii #}
@@ -61,9 +89,25 @@ Galerie {{galerie.nazev}}
     {% endfor %}
     <br>
   </div>
+
+  <div class="galerie_predchozi_nasledujici">
+    {% if predchozi %}
+      <div class="predchozi">
+        <a href="../{{ predchozi.pk }}">Předchozí: {{ predchozi.nazev }}</a>
+      </div>
+    {% endif %}
+    {% if nasledujici %}
+      <div class="nasledujici">
+        <a href="../{{ nasledujici.pk }}">Následující: {{ nasledujici.nazev }}</a>
+      </div>
+    {% endif %}
+  </div>
+
   {% else %}
-    <div class="zadne-vysledky">
-      V galerii nejsou žádné fotky.
-    </div>
+    {% if not podgalerie %}
+      <div class="zadne-vysledky">
+        V galerii nejsou žádné fotky.
+      </div>
+    {% endif %}
   {% endif %}
 {% endblock content %}

galerie/views.py

@@ -20,18 +20,50 @@ def zobrazit(galerie, request):
             raise Http404
     return preview
 
+
+def cesta_od_korene(g):
+    """Vrátí seznam galerií od kořene ke g"""
+    cesta = []
+    while g != None:
+        cesta.append(g)
+        g = g.galerie_up
+    return reversed(cesta)
+
+
 def nahled(request, pk, soustredeni):
-  """Zobrazeni nahledu vsech fotek ve skupine."""
-  galerie = get_object_or_404(Galerie, pk=pk)
-  podgalerie = Galerie.objects.filter(galerie_up = galerie).order_by('poradi')
-  obrazky = Obrazek.objects.filter(galerie = galerie).order_by('datum')
-  preview = zobrazit(galerie, request)
-  return render(request, 'galerie/GalerieNahled.html',
-      {'galerie' : galerie,
-       'podgalerie' : podgalerie,
-       'obrazky' : obrazky,
-       'preview' : preview,
-      })
+    """Zobrazeni nahledu vsech fotek ve skupine."""
+    galerie = get_object_or_404(Galerie, pk=pk)
+    podgalerie = Galerie.objects.filter(galerie_up = galerie).order_by('poradi')
+    obrazky = Obrazek.objects.filter(galerie = galerie).order_by('datum')
+    preview = zobrazit(galerie, request)
+
+    sourozenci = []
+    if galerie.galerie_up:
+        sourozenci = galerie.galerie_up.galerie_set.all().order_by('poradi')
+
+    predchozi = None
+    nasledujici = None
+    minuly = None
+    for g in sourozenci:
+        if g.pk == galerie.pk:
+            predchozi = minuly
+        if minuly != None and minuly.pk == galerie.pk:
+            nasledujici = g
+            break
+        minuly = g
+
+    cesta = cesta_od_korene(galerie)
+
+    return render(request, 'galerie/GalerieNahled.html',
+        {'galerie' : galerie,
+         'podgalerie' : podgalerie,
+         'obrazky' : obrazky,
+         'preview' : preview,
+         'cesta': cesta,
+         'sourozenci': sourozenci,
+         'predchozi': predchozi,
+         'nasledujici': nasledujici,
+        })
 
 def detail(request, pk, fotka, soustredeni):
   """Zobrazeni nahledu fotky s id 'fotka'."""
@@ -90,6 +122,7 @@ def detail(request, pk, fotka, soustredeni):
        'obrazky_dalsi' : obrazky_dalsi,
        'preview' : preview,
        'form' : form,
+       'cesta': cesta_od_korene(galerie),
       })
 
 

mamweb/static/css/mamweb.css

@@ -15,6 +15,7 @@ body {
   background: #fff0d7;
   padding: 10px; 
   margin: 10px -10px; 
+  border: orange 2px dashed;
 }
 
 table .border-r {
@@ -150,6 +151,10 @@ div.menu li.selected a {
 	z-index: 15px;
 }
 
+h2 a:hover {
+    text-decoration: none;
+}
+
 #submenu {
 	position: relative;
 	top: -15px;
@@ -471,15 +476,20 @@ div.zadani_azad_termin {
   position: relative;
   text-align: center;
   /*width: 100%;*/
-  margin: 0 auto 0 auto;
+  margin: 20px auto 0 auto;
 }
 
 .galerie h2 {
   text-align: center;
 }
 
+.galerie_hlavicka {
+    margin: 30px auto 30px auto;
+}
+
 .popis {
-  margin: 10px 10px 30px 10px;
+  margin: 10px 10px 30px 0px;
+  clear: all;
 }
 
 #nahoru {
@@ -488,7 +498,7 @@ div.zadani_azad_termin {
 
 .galerie_nahledy{
   /*margin: 1em 0;*/
-  margin: 0 auto 0 auto;
+  margin: 0 auto 30px auto;
   text-align: center;
   overflow: auto;
 }
@@ -503,6 +513,7 @@ div.zadani_azad_termin {
 }
 
 .galerie_nahled{ /* frame */
+  display: inline-block;
   position: relative;
   float: left;
   width: 200px;
@@ -516,7 +527,7 @@ div.zadani_azad_termin {
   /*background-color: #ffb52d;*/
   background-color: white;
   white-space: nowrap;
-  margin: 10px;
+  margin: 10px 20px 10px 0px;
 }
 
 .vystredeno{ /* helper */
@@ -526,10 +537,15 @@ div.zadani_azad_termin {
 }
 
 .galerie_nahled img {
-  border-radius: 2px;
   vertical-align: middle;
   max-height: 180px;
   max-width: 180px;
+  /*border: 1px solid white;*/
+
+}
+
+.galerie_nahled img:hover {
+    /*border: 1px solid #ffa500;*/
 }
 
 .galerie_nahled div {
@@ -540,6 +556,44 @@ div.zadani_azad_termin {
 }
 
 
+.podgalerie_nahled {
+  position: relative;
+  float: left;
+  width: 200px;
+  height: 200px;
+  text-align: center;
+  border: solid;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: #ffa500;
+  /*border-color: #ffd546;*/
+  background-color: #ffd546;
+  /*background-color: white;*/
+  white-space: nowrap;
+  margin: 10px 20px 10px 0px;
+}
+
+.podgalerie_nahled img {
+    margin-top: 20px;
+    margin-bottom: 15px;
+}
+
+
+/* Odkazy na předchozí a následující podgalerii */
+.galerie_predchozi_nasledujici {
+    overflow: auto;
+    margin: 10px auto 10px auto;
+}
+
+.galerie_predchozi_nasledujici .predchozi {
+    float: left;
+}
+
+.galerie_predchozi_nasledujici .nasledujici {
+    float: right;
+}
+
+
 /* titulni stranka */
 
 .zjistit_vic{