Browse Source

Galerie: stylování

remotes/origin/imagekit
Matěj Kocián 9 years ago
parent
commit
daf6af4315
  1. 29
      galerie/templates/galerie/Galerie.html
  2. 60
      galerie/templates/galerie/GalerieNahled.html
  3. 33
      galerie/views.py
  4. 64
      mamweb/static/css/mamweb.css

29
galerie/templates/galerie/Galerie.html

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

60
galerie/templates/galerie/GalerieNahled.html

@ -5,13 +5,42 @@ Galerie {{galerie.nazev}}
{% endblock %} {% endblock %}
{% block content %} {% 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 #} {# podgalerie #}
{% if podgalerie or galerie.galerie_up %} {% if podgalerie or galerie.galerie_up %}
<h3> PODGALERIE </h3>
{% if galerie.galerie_up %} {% if sourozenci|length > 1 %}
<a href="../{{galerie.galerie_up.pk}}">..</a> {% 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 %} {% endif %}
{% if podgalerie %} {% if podgalerie %}
@ -37,12 +66,11 @@ Galerie {{galerie.nazev}}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
</ul>
{% endif %} {% endif %}
{% if user.is_staff and galerie.zobrazit > 0 %} {% if user.is_staff and galerie.zobrazit > 0 %}
<ul> <div class="mam-org-only">
<li><a href="./new">VYTVOŘIT NOVOU PODGALERII </a> <a href="./new">Vytvořit novou podgalerii </a>
</ul> </div>
{% endif %} {% endif %}
{# obrazky v galerii #} {# obrazky v galerii #}
@ -61,9 +89,25 @@ Galerie {{galerie.nazev}}
{% endfor %} {% endfor %}
<br> <br>
</div> </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 %} {% else %}
{% if not podgalerie %}
<div class="zadne-vysledky"> <div class="zadne-vysledky">
V galerii nejsou žádné fotky. V galerii nejsou žádné fotky.
</div> </div>
{% endif %} {% endif %}
{% endif %}
{% endblock content %} {% endblock content %}

33
galerie/views.py

@ -20,17 +20,49 @@ def zobrazit(galerie, request):
raise Http404 raise Http404
return preview 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): def nahled(request, pk, soustredeni):
"""Zobrazeni nahledu vsech fotek ve skupine.""" """Zobrazeni nahledu vsech fotek ve skupine."""
galerie = get_object_or_404(Galerie, pk=pk) galerie = get_object_or_404(Galerie, pk=pk)
podgalerie = Galerie.objects.filter(galerie_up = galerie).order_by('poradi') podgalerie = Galerie.objects.filter(galerie_up = galerie).order_by('poradi')
obrazky = Obrazek.objects.filter(galerie = galerie).order_by('datum') obrazky = Obrazek.objects.filter(galerie = galerie).order_by('datum')
preview = zobrazit(galerie, request) 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', return render(request, 'galerie/GalerieNahled.html',
{'galerie' : galerie, {'galerie' : galerie,
'podgalerie' : podgalerie, 'podgalerie' : podgalerie,
'obrazky' : obrazky, 'obrazky' : obrazky,
'preview' : preview, 'preview' : preview,
'cesta': cesta,
'sourozenci': sourozenci,
'predchozi': predchozi,
'nasledujici': nasledujici,
}) })
def detail(request, pk, fotka, soustredeni): def detail(request, pk, fotka, soustredeni):
@ -90,6 +122,7 @@ def detail(request, pk, fotka, soustredeni):
'obrazky_dalsi' : obrazky_dalsi, 'obrazky_dalsi' : obrazky_dalsi,
'preview' : preview, 'preview' : preview,
'form' : form, 'form' : form,
'cesta': cesta_od_korene(galerie),
}) })

64
mamweb/static/css/mamweb.css

@ -15,6 +15,7 @@ body {
background: #fff0d7; background: #fff0d7;
padding: 10px; padding: 10px;
margin: 10px -10px; margin: 10px -10px;
border: orange 2px dashed;
} }
table .border-r { table .border-r {
@ -150,6 +151,10 @@ div.menu li.selected a {
z-index: 15px; z-index: 15px;
} }
h2 a:hover {
text-decoration: none;
}
#submenu { #submenu {
position: relative; position: relative;
top: -15px; top: -15px;
@ -471,15 +476,20 @@ div.zadani_azad_termin {
position: relative; position: relative;
text-align: center; text-align: center;
/*width: 100%;*/ /*width: 100%;*/
margin: 0 auto 0 auto; margin: 20px auto 0 auto;
} }
.galerie h2 { .galerie h2 {
text-align: center; text-align: center;
} }
.galerie_hlavicka {
margin: 30px auto 30px auto;
}
.popis { .popis {
margin: 10px 10px 30px 10px; margin: 10px 10px 30px 0px;
clear: all;
} }
#nahoru { #nahoru {
@ -488,7 +498,7 @@ div.zadani_azad_termin {
.galerie_nahledy{ .galerie_nahledy{
/*margin: 1em 0;*/ /*margin: 1em 0;*/
margin: 0 auto 0 auto; margin: 0 auto 30px auto;
text-align: center; text-align: center;
overflow: auto; overflow: auto;
} }
@ -503,6 +513,7 @@ div.zadani_azad_termin {
} }
.galerie_nahled{ /* frame */ .galerie_nahled{ /* frame */
display: inline-block;
position: relative; position: relative;
float: left; float: left;
width: 200px; width: 200px;
@ -516,7 +527,7 @@ div.zadani_azad_termin {
/*background-color: #ffb52d;*/ /*background-color: #ffb52d;*/
background-color: white; background-color: white;
white-space: nowrap; white-space: nowrap;
margin: 10px; margin: 10px 20px 10px 0px;
} }
.vystredeno{ /* helper */ .vystredeno{ /* helper */
@ -526,10 +537,15 @@ div.zadani_azad_termin {
} }
.galerie_nahled img { .galerie_nahled img {
border-radius: 2px;
vertical-align: middle; vertical-align: middle;
max-height: 180px; max-height: 180px;
max-width: 180px; max-width: 180px;
/*border: 1px solid white;*/
}
.galerie_nahled img:hover {
/*border: 1px solid #ffa500;*/
} }
.galerie_nahled div { .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 */ /* titulni stranka */
.zjistit_vic{ .zjistit_vic{

Loading…
Cancel
Save