gallery style

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index e258482f1e7334ef0ef5fa689720f9bb536800e5..d2a13832496952eac77eb1131fe2cae55731f964 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -709,7 +709,10 @@ h1.top#frequence {
 #Main{
        flex-grow: 1;
        position: relative;
-       z-index: 1;
+       z-index: 10;
+       @media screen and (max-width: $size_m) {
+               z-index: 1;
+       }
 }
 #Main >.wrapper{
        padding-bottom:2em;
@@ -1580,10 +1583,38 @@ div.publication-date.date.smooth {
        width: 150%;
 }
 
+div.gallery > div {
+       display: flex;
+       flex-direction: row;
+       flex-wrap: wrap;
+       > span {
+               display: block;
+               width: 25%;
+               height: 25vw;
+               position: relative;
+               @media screen and (max-width: $size_s) {
+                       width: 50%;
+                       height: 50vw;
+               }
+               img {
+                       width: 100%;
+                       height: 100%;
+                       cursor: pointer;
+               }
+               span.title {
+                       position: absolute;
+                       top: 0;
+                       left: 10px;
+                       background: $secondary;
+                       color: white;
+                       padding: 0.5ex 1ex;
+                       border-bottom: 3px solid $yellow;
+               }
+       }
+}
+
 div.gallery img {
-       padding: 2px;
        background: white;
-       border: 1px solid #333;
 }
 
 div#dialog-background,
@@ -1601,8 +1632,8 @@ div.gallery div.first {
 div.gallery div.first img {
        padding: 5px;
        padding-bottom: 25px;
-       margin-top: -240px;
-       margin-left: -320px;
+       margin-top: -300px;
+       margin-left: -500px;
        position: absolute;
        top: 50%;
        left: 50%;
@@ -1616,14 +1647,13 @@ div.portrait div.gallery div.first img {
 }
 
 div.gallery {
-       border-bottom: 1px solid #ccc;
 }
 
 div.gallery span.gallery-legend {
        display: inline-block;
        position: absolute;
        top: 50%;
-       margin-top: 250px;
+       margin-top: 304px;
        left: 0%;
        width: 100%;
        color: #000;

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 2ade50d85aa7104ab4113312f718c06a6fc8cf05..7cf6f581ede93640eaebaa2dd1a267d7c342a9c6 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -523,7 +523,17 @@ $(function() {
                    $gallery.find('div.first').show('fade');
                    return false;
                  });
-                 $gallery.find('div.first').on('click', function() { $(this).toggle('fade'); return false; });
+                 $gallery.find('div.first').on('click', function() {
+                         window.getSelection().removeAllRanges();
+                         $(this).toggle('fade');
+                         return false;
+                 });
+                 $gallery.find('div.first').delegate('img', 'click', function(ev) {
+                         var e = $.Event('keydown');
+                         e.which = 39;
+                         $('body').trigger(e);
+                         return false;
+                 });
                });
 
                 /* CHAT */

diff --git a/panikweb_templates/templates/combo/gallery.html b/panikweb_templates/templates/combo/gallery.html
index 49451a96643d81a480042e482e8bdcc81908c477..346e90985751ff1511d174116ca89e16e4b7a63e 100644 (file)
--- a/panikweb_templates/templates/combo/gallery.html
+++ b/panikweb_templates/templates/combo/gallery.html
@@ -9,19 +9,13 @@
 </div>
 <div>
   {% endif %}
-{% thumbnail image.image "200x100" crop="50% 25%" as im %}
-{% if cell.slug == 'portrait' %}
-{% thumbnail image.image "480x640" crop="50% 25%" as im_large %}
+{% thumbnail image.image "400x400" crop="50% 50%" as im %}
+{% thumbnail image.image "1000x600" crop="50% 25%" as im_large %}
 <span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
-        class="portrait" {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+  {% if image.title %}title="{{image.title}}"{% endif %}>
+  {% if image.title %}<span class="title">{{image.title}}</span>{% endif %}</span>
+</span>
 {% endthumbnail %}
-{% else %}
-{% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
-<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
-        {% if image.title %} title="{{image.title}}" {% endif %}/></span>
-{% endthumbnail %}
-
-{% endif %}
 {% endthumbnail %}
 {% endfor %}
 </div>

diff --git a/panikweb_templates/templates/combo/page_template_full_width.html b/panikweb_templates/templates/combo/page_template_full_width.html
index 4b3239f0c7711614eaac2475a3fda62957ce082a..9365b6eb3ab70a7c675548e9c2533f98eb96da9a 100644 (file)
--- a/panikweb_templates/templates/combo/page_template_full_width.html
+++ b/panikweb_templates/templates/combo/page_template_full_width.html
@@ -4,20 +4,9 @@
 {% block title %}{{ page.title }}{% endblock %}
 
 {% block toptitle %}
-<h1 class="top fullwidth">{{ page.title }}</h1>
-{% endblock %}
-
-{% block nav %}
-<div id="About">
-</div>
+<h1 class="top">{{ page.title }}</h1>
 {% endblock %}
 
 {% block main %}
-
-<div class="wrapper">
-       <div id="fiber-content">
-               <div class="text">{% placeholder "content" %}</div>
-       </div>
-</div>
-
+{% placeholder "content" %}
 {% endblock %}