Updated program list page layout (masonry)

diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css
index 17bde558e0752c396ea802fe1d0c407156e3fd1a..df8f62e79e6835665e601790f9b1746f3c2022cc 100755 (executable)
--- a/app/festival/static/css/index.css
+++ b/app/festival/static/css/index.css
@@ -1954,18 +1954,24 @@ th {
   zoom: 1;
 }
 
-/* line 34, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
+/* line 31, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
+.pagination > li.active a {
+  font-weight: 700;
+  color: #000;
+}
+
+/* line 38, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
 .pagination > li > a {
   padding: 0.45rem;
   margin: -0.45rem;
 }
 
-/* line 39, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
+/* line 43, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
 .pagination-first a:before {
   content: "\00AB" "\00A0";
 }
 
-/* line 43, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
+/* line 47, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_pagination.scss */
 .pagination-last a:after {
   content: "\00A0" "\00BB";
 }
@@ -2906,30 +2912,31 @@ th {
 
 /* line 9, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__sizer,
+.msry__sizer,
 .artist__item {
   width: 50%;
 }
 
-/* line 17, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item {
   float: left;
   padding: 0.5rem;
 }
 
-/* line 25, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 26, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item__inner {
   position: relative;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
 }
 
-/* line 38, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 39, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item .artist__img {
   position: relative;
   padding: 0;
   margin: 0;
 }
 
-/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 43, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item .artist__img__copyright {
   position: absolute;
   bottom: 0;
@@ -2942,12 +2949,12 @@ th {
   color: white;
 }
 
-/* line 55, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 56, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item img {
   display: block;
 }
 
-/* line 59, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 60, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item__name {
   display: block;
   width: 100%;
@@ -2957,7 +2964,7 @@ th {
   margin: 0;
 }
 
-/* line 70, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+/* line 71, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
 .artist__item__name span {
   display: inline-block;
   *display: inline;
@@ -3535,28 +3542,29 @@ th {
   }
   /* line 9, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__sizer,
+  .msry__sizer,
   .artist__item{
     width: 33.33333%;
   }
-  /* line 17, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+  /* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__item{
     padding: 0 0.5rem 1rem;
   }
-  /* line 25, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+  /* line 26, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__item__inner{
     transition: .3s;
   }
-  /* line 31, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+  /* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__item__inner:hover{
     box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.8);
     -webkit-transform: scale(1.01);
     transform: scale(1.01);
   }
-  /* line 59, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+  /* line 60, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__item__name{
     padding: 0.8rem;
   }
-  /* line 70, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
+  /* line 71, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/artist-card.scss */
   .artist__item__name span{
     font: 700 0.8rem "Interstate", "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
@@ -3572,7 +3580,7 @@ th {
   .event__card, .event__card--alt, .event__card--full{
     float: left;
     width: 31%;
-    margin: 0 .5rem 0 .5rem;
+    margin: 0 .5rem 1rem .5rem;
   }
   /* line 19, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */
   .event__card--full{

diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js
index 56e951f3f0fd056d1be833ebd42f6bb7e864f7c0..e2569fd41b87525c9ee9c0bdb7ba8e6b123c0666 100644 (file)
--- a/app/festival/static/js/index.js
+++ b/app/festival/static/js/index.js
@@ -4,12 +4,12 @@ $(function() {
      * Masonry
      * @author Philippe Barbosa
      */
-    var $grid = $('.artist__list');
+    var $grid = $('.msry__container');
     $grid.imagesLoaded( function(){
         $grid.masonry({
-          itemSelector: '.artist__item',
+          itemSelector: '.msry__item',
           percentPosition: true,
-          columnWidth: '.artist__sizer'
+          columnWidth: '.msry__sizer'
         });
     });
 

diff --git a/app/festival/static/scss/modules/artist-card.scss b/app/festival/static/scss/modules/artist-card.scss
index a1aab0e11e65d1ad177cd5ddf9fb85638f289b08..4230d84b308fa4be273314af29e96e66493c4fe3 100644 (file)
--- a/app/festival/static/scss/modules/artist-card.scss
+++ b/app/festival/static/scss/modules/artist-card.scss
@@ -7,6 +7,7 @@
 }
 
 .artist__sizer,
+.msry__sizer,
 .artist__item {
   width: 50%;
   @media (min-width : $desktop ) {

diff --git a/app/festival/static/scss/modules/event-card.scss b/app/festival/static/scss/modules/event-card.scss
index 1e9d9a55967bd45eb89b202514323c8d10814d7b..394a1f4d615c16aa93a7b635e7cc3a46aa465b9d 100644 (file)
--- a/app/festival/static/scss/modules/event-card.scss
+++ b/app/festival/static/scss/modules/event-card.scss
@@ -13,7 +13,7 @@
   @media (min-width : $desktop ) {
       float: left;
       width: 31%;
-      margin: 0 .5rem 0 .5rem
+      margin: 0 .5rem 1rem .5rem;
   }
 
 &--full {

diff --git a/app/festival/templates/festival/artist_list.html b/app/festival/templates/festival/artist_list.html
index 1e532c5b8bae3041437bd6c81a6e692143725a23..01359d2e9968959d230847e4af1f9fbb1029e4bf 100644 (file)
--- a/app/festival/templates/festival/artist_list.html
+++ b/app/festival/templates/festival/artist_list.html
@@ -7,10 +7,10 @@
 {% endblock %}
 
 {% block main %}
-<div class="artist__list">
-    <div class="artist__sizer"></div>
+<div class="artist__list msry__container">
+    <div class="msry__sizer"></div>
      {% for artist in object_list %}
-        <div class="artist__item">
+        <div class="artist__item msry__item">
             <div class="artist__item__inner">
                 <a href="{% url 'festival-artist-detail' artist.slug %}" class="artist__item__inner">
                     <figure class="artist__img">

diff --git a/app/templates/agenda/event_list.html b/app/templates/agenda/event_list.html
index 0fc41093d42497222fcf092d925d462f944c79de..b3d787ed8fab93daf2c8757edd3d168e21e29991 100644 (file)
--- a/app/templates/agenda/event_list.html
+++ b/app/templates/agenda/event_list.html
@@ -66,9 +66,11 @@
     {% endif %}
 {% endif %}
 
+<div class="msry__container">
+    <div class="msry__sizer">
 {% for event in events.object_list %}
     {% block event_list_event_title %}
-        <div class="event__card">
+        <div class="event__card msry__item">
             {% if event.featured_image %}
                 {% block event_list_event_featured_image %}
                     <a href="{{ event.get_absolute_url }}" class="event__thumbnail">
@@ -135,6 +137,8 @@
 {% endblock %}
 </div>
 {% endfor %}
+    </div>
+</div>
 
 <a href='{% icalendar_url %}' target="_blank" class="small  push-ical">{% trans "Subscribe to all events in" %} Google Calendar/Outlook/iCal</a>