categories page done

user/config/site.yaml

@@ -10,7 +10,7 @@ author:
   name: Bachir Soussi Chiadmi                      # Default author name
   # email: 'john@email.com'                   # Default author email
 
-taxonomies: [tag]                  # Arbitrary list of taxonomy types
+taxonomies: [tag, category, client]                  # Arbitrary list of taxonomy types
 #[édition,édition jeunesse,art,identité visuelle,signalétique,évènement
 
 metadata:

user/themes/labonneadresse/js/dist/script.min.js

@@ -1,4 +1,6 @@
 
 jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();console.log('topOfWindow',topOfWindow);if(topOfWindow>100){$("#top-bar").addClass("reduced");}
-else{$("#top-bar").removeClass("reduced");}});if($('body').is('.categories')){var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).children('section.projet-block').each(function(index,el){$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
+else{$("#top-bar").removeClass("reduced");}});if($('body').is('.categories')){console.log('hello')
+var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).find('li.project').each(function(index,el){console.log(index)
+$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
 var $grid=$('.grid').masonry({itemSelector:'.grid-block'});});

user/themes/labonneadresse/js/script.js

@@ -14,10 +14,12 @@ jQuery(document).ready(function($) {
 
   // init categories content images behaviour
   if($('body').is('.categories')){
+    console.log('hello')
     var $diapo = $('<div id="diaporama"></div>');
     $("#categories-content")
       .before($diapo)
-      .children('section.projet-block').each(function(index, el) {
+      .find('li.project').each(function(index, el) {
+        console.log(index)
         $(this)
           .addClass('projet-'+index)
           .hover(function (e) {

user/themes/labonneadresse/scss/_settings.scss

@@ -77,10 +77,10 @@ $include-html-global-classes: $include-html-classes;
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // $include-html-grid-classes: $include-html-classes;
-// $include-xl-html-grid-classes: false;
+$include-xl-html-grid-classes: true;
 
 //$row-width: rem-calc(2000);
-$total-columns: 24;
+$total-columns: 12;
 $column-gutter: rem-calc(5);
 
 // c. Global

user/themes/labonneadresse/scss/styles.scss

@@ -1,11 +1,7 @@
 @import '../bower_components/foundation/scss/normalize.scss';
-$include-xl-html-grid-classes: true;
-@import '../bower_components/foundation/scss/foundation.scss';
 
 @import "_settings.scss";
-
+@import '../bower_components/foundation/scss/foundation.scss';
-// $include-html-grid-classes: $include-html-classes;
-
 @import '../bower_components/foundation/scss/foundation/components/_global.scss';
 @import '../bower_components/foundation/scss/foundation/components/_grid.scss';
 
@@ -28,8 +24,8 @@ $font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-ser
 body{font-family: $font; letter-spacing: 1px;}
 
 h1,h2,h3,h4,h5,h6{font-family: $font;}
-
 a, a:hover{color:inherit;}
+ul,li{padding:0; margin:0; list-style: none;}
 
 // @media $large-up {
 //   .row.fullwidth{width:1200px;}
@@ -277,7 +273,6 @@ div#center{
   .projet{
     .row{margin:0;}
     h1{
-      // font-family: $font; font-size: 1.05em; font-weight: bold;
       @include fontbold;
       line-height:0.6; display:inline-block; position:relative;
       margin:0; padding:0 0.7em;
@@ -345,6 +340,7 @@ div#center{
   #diaporama{
     position:relative;
     height:20vw;
+    margin:0 0 1.5em;
     >*{
       position:absolute; top:0; left:0;
       height:100%; width:100%;
@@ -356,6 +352,26 @@ div#center{
       img{height:100%;}
     }
   }
+  .client-block{
+    margin:0 0 1em;
+    h3{
+      @include fontbold;
+      line-height:0.6; display:inline-block; position:relative;
+      margin:0; padding:0;
+      // $green overline
+      &:after{
+        content: "";
+        display: block; margin-top:-.5em; margin-bottom:.5em;
+        border-top:0.5em solid $green;
+        transition:border-color 0.3s ease-in;
+      }
+    }
+    h4{
+      margin:0;
+      @include fontnormal;
+    }
+
+  }
 }
 
 /*

user/themes/labonneadresse/templates/categories.html.twig

@@ -8,11 +8,32 @@
     {% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag', 'display':'inline'} %}
   </nav>
 
+  {% set contents = page.collection %}
+  {% set taxlist = taxonomylist.get() %}
+
   <div id="categories-content" class="grid">
-    {% for child in page.collection %}
+    {% for tax,value in taxlist['client'] %}
-      <section class="projet-block projet-block-text grid-block columns large-3 medium-6 small-12">
+      {% set posts = taxonomy.findTaxonomy({'client':tax}) %}
-        {% include 'partials/projet-block.html.twig' with {'page':child, 'display':'text'} %}
+
-      </section>
+      {% set disposts = {} %}
+      {% for p,v in posts %}
+        {% if v in contents %}
+          {% set disposts = disposts|merge({(p):v}) %}
+        {% endif %}
+      {% endfor %}
+
+      {% if disposts|length %}
+        <section class="client-block client-block-text grid-block columns large-3 medium-6 small-12">
+          <h3>{{ tax }}</h3>
+          <ul>
+          {% for post in disposts %}
+            <li class="project">
+              {% include 'partials/projet-block.html.twig' with {'page':post,'display':'text'} %}
+            </li>
+          {% endfor %}
+          </ul>
+        </section>
+      {% endif %}
     {% endfor %}
   </div>
 

user/themes/labonneadresse/templates/home.html.twig

@@ -7,7 +7,7 @@
     {% for child in page.collection %}
       {% if child.header.home == true %}
         <section class="projet-block projet-block-img grid-block columns xlarge-3 large-4 medium-6 small-12">
-          {% include 'partials/projet-block.html.twig' with {'page':child,'display':'img'} %}
+          {% include 'partials/projet-block.html.twig' with {'page':child,'display':'img', 'context':'home'} %}
         </section>
       {% endif %}
     {% endfor %}

user/themes/labonneadresse/templates/partials/projet-block.html.twig

@@ -1,10 +1,9 @@
 {% if display == 'img' %}
-  {% set image = page.media.images|first %}
 
-  {# {% set image = child.media.files|first %} #}
+  {% set image = page.media['00-home.jpg'] %}
-  {# {% if image == null %} #}
+  {% if image == null %}
-  {#   {% set image = child.media.images|first %} #}
+    {% set image = page.media.images|first %}
-  {# {% endif %}  #}
+  {% endif %}
 
   <a href="{{ page.url }}">{{ image.resize(500).html }}</a>
   <header>
@@ -14,12 +13,10 @@
 {% endif %}
 
 {% if display == 'text' %}
-  <h1><a href="{{ page.url }}">{{page.title}}</a></h1>
+  <h4><a href="{{ page.url }}">{{page.title}} - {{page.date|date("Y")}}</a></h4>
-  <h2>{{page.header.subtitle}}</h2>
+  {% set image = page.media['00-cat.jpg'] %}
-
+  {% if image == null %}
-  {{ page.summary() }}
+    {% set image = page.media.images|first %}
-
+  {% endif %}
-  {% set image = page.media.images|first %}
   <a class="projet-img" href="{{ page.url }}">{{ image.resize(500).html }}</a>
-
 {% endif %}