fix some stuff on material theme

README.md

@@ -211,7 +211,6 @@ image:
   auto-orient: False
 ```
 
-
 ### Different kind of sections
 
 A gallery is composed of a succession of sections as you can see on this [wonderfully
@@ -250,6 +249,7 @@ With text:
       title: Big picture title
       sub_title: Some text
       date: 2016-01-15
+      date_end: 2016-01-24 (Optional)
 ```
 
 Without text:
@@ -344,6 +344,36 @@ How to use it:
     image: 7.jpg
 ```
 
+### Images caption
+
+
+Prosopopée has a support of caption in images, you can use it on bordered-picture and pictures-group.
+
+Exemple on bordered-picture :
+
+```yaml
+  - type: bordered-picture
+    image: another_picture.jpg
+    text: This is a caption
+```
+
+And on pictures-group
+
+```yaml
+  - type: pictures-group
+    images:
+      -
+        - name: image1.jpg
+          text: This is a caption
+        - image2.jpg
+        - image3.jpg
+      -
+        - image4.jpg
+        - image5.jpg
+```
+
+
+
 ### Example
 
 As a recap, here is how the files of the example gallery are organised:

prosopopee/themes/material/static/css/styles.css

@@ -61,10 +61,6 @@ main {
     transform: translateY(0);
 }
 
-.bordered-picture .caption__overlay {
-    margin-left: 11.5% !important;
-    margin-right: 11.5% !important;
-}
 
 .caption .card-panel {
     margin: 0;
@@ -79,3 +75,40 @@ main {
     margin-right: 11.5%;
 }
 
+.bordered-picture .caption__overlay {
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
+.pictures-line {
+    min-width: 77%;
+    width: 77%;
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+    display: flex;
+    margin-bottom: 0.5em;
+}
+
+.pictures-line .picture img {
+    width: 100%;
+    height: 100%;
+}
+
+.small-card {
+    height: 400px;
+}
+
+.chip .tag {
+    position: absolute;
+    left: -3px;
+    font-size: 22px;
+    line-height: 34px;
+}
+
+.image {
+    position: relative;
+}
+
+.card-action .right {
+    margin-top: -5px;
+}

prosopopee/themes/material/templates/index.html

@@ -9,15 +9,14 @@
 <div class="container">
     <div class="row">
         {% for galleries_line in galleries|reverse|batch(3)|reverse %}
-        <div class="galleries-line covers-{{ galleries_line|length }}">
         {% for gallery in galleries_line|reverse %}
         {% if loop.length is divisibleby 2 %}
-            <div class="col m6 l6">
+        <div class="col s12 m12 l6">
             {% else %}
             {% if loop.last %}
-            <div class="col m12 l12">
+            <div class="col s12 m12 l12">
                 {% else %}
-            <div class="col m6 l6">
+                <div class="col s12 m12 l6">
                     {% endif %}    
                     {% endif %}
                     <a href="{{ gallery.link }}">    
@@ -25,16 +24,38 @@
                             <div class="card-image">
                                 {% set cover = Image(gallery.cover) %}
                                 {{ cover.copy() }}
-                        <img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
+                                <img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}">
-                        <span class="card-title truncate">{{ gallery.title }}</span>
+                                <img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
-                    </div>
+                                <span class="card-title truncate">{{ gallery.title }}
-                    <div class="card-content">
+                                    {% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
-                        <span class="card-title truncate">{% if gallery.sub_title %}{{ gallery.sub_title }}{% endif %}</span>
+                                </span>
-                        {% if gallery.tags %}{% for tag in gallery.tags -%}<div class="chip right"><i class="mdi-action-label"></i> {{ tag }} </div>{% endfor -%}{% endif %}
                             </div>
                             <div class="card-action">
+                                <div class="left">
                                     <a href="{{ gallery.link }}">Read more..</a>
-                        {% if gallery.date %}<div class="right">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
+                                </div>
+                                {% if gallery.tags or gallery.date %}
+                                <div class="right">
+                                    {% if gallery.tags %}{% for tag in gallery.tags -%}
+                                    <div class="chip">
+                                        <div class="image">
+                                            <img class="grey">
+                                            <div class="tag white-text">
+                                                {{ tag[0].capitalize() }}
+                                            </div>
+                                            </img>
+                                            {{ tag }}
+                                        </div>
+                                    </div>
+                                    {% endfor -%}
+                                    {% endif %}
+                                    {% if gallery.date %}
+                                    <div class="chip">
+                                        {{ gallery.date.strftime("%d %B %Y") }}
+                                    </div>
+                                    {% endif %}
+                                </div>
+                                {% endif %}
                             </div>
                         </div>
                     </a>    
@@ -43,7 +64,6 @@
             </div>
             {% endfor %}
         </div>
-        </div>
 
         <script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>

prosopopee/themes/material/templates/sections/pictures-group.html

@@ -1,29 +1,27 @@
-<div class="container">
+<div class="pictures-group baguette">
-    <div class="row baguette">
+    <div class="row">
         {% for line in section.images %}
+        <div class="pictures-line">
             {% for image in line %}
             {% set caption = image.text %}
             {% set image = Image(image) %}
             {{ image.copy() }}
-        {% set plop =  12 // loop.length %}
+            <div class="col">
-        <div class="col m{{ plop }} l{{ plop }}">
                 <div class="card">
-                <div class="card-image caption">
+                    <div class="picture card-image caption">
                         <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-                        <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
+                            <img src="{{ image.generate_thumbnail("x600") }}">
                             {% if caption %}
-                        <div class="caption__overlay card-panel center">
+                            <div class="caption__overlay center">
-                            <h5 class="black-white">{{ caption }}</h5>
+                                <h5 class="caption__overlay__title">{{ caption }}</h5>
                             </div>
                             {% endif %}
                         </a>
                     </div>
                 </div>
             </div>
-        {% if not loop.last %}
-        <div class="separator"></div>
-        {% endif %}
             {% endfor %}
+        </div>
         {% endfor %}
     </div>
 </div>