WIP #2033 @8

diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml
index 7b972cfa0933609aeb0602007c24565e3bd3ce1c..465c950b0a6d5b877b5fb95cc269ea9745c0bd42 100644 (file)
--- a/framework/application/layouts/scripts/layout.phtml
+++ b/framework/application/layouts/scripts/layout.phtml
@@ -17,6 +17,7 @@ $fonts = [
 
 $this->headScript()->addWebFont($fonts);
 $this->headScript()->addFastclick();
+$this->headScript()->addWOW(); // For reveal on scroll animations
 
 if ($this->acl()->isAllowed('edition')) {
        $this->headScript()->addCommonsAdmin();

diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php
index 495c5635e160b0b7ed4de14e80abfa9fdee00edc..8e2b051ec17fb7c38f64d41b50ce4d63509999db 100644 (file)
--- a/framework/application/views/helpers/CasestudiesList.php
+++ b/framework/application/views/helpers/CasestudiesList.php
@@ -3,6 +3,7 @@
 class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstract {
 
        protected $_datas;
+       protected $_tags;
 
        public function CasestudiesList($datas, $currentStudie = null, $categories = null, $limit = null, $IDs = null) {
 
@@ -158,19 +159,47 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr
                  } */
 
         // Max display size is 318 but we over-sample the size by 20% because there is a CSS scale effect on hover
-        $image = $this->view->imageProcess($s->visuel, $s->titre, 382, 382);
+        $image = $this->view->imageProcess($s->visuel, $s->titre, 512, 'auto');
         $url = Cubedesigners_Util::generateAutoUri($s, $this->_datas['seourl_stu']);
 
         $c = '<div class="img-wrapper">';
         $c.= $image;
         $c.= '</div>';
                $c.= '<h2>' . $s->titre . '</h2>';
-               $c.='<h3>' . $s->description . '</h3>';
+               //$c.='<h3>' . $s->description . '</h3>';
+
+               $tag_names = [];
 
                // Todo: display names of secondary categories (via join?) using IDs in: $s->tags_secondaires);
+        foreach ($s->tags_secondaires as $categoryID) {
+            $tag_names[] = $this->_getTagName($categoryID);
+        }
+
+        $c.= '<h3>' . implode(' / ', $tag_names) . '</h3>';
+
+               return $this->link($c, $url, array(
+                'data-cat' => $s->categories,
+                'class' => 'wow fadeInUp',
+                'data-wow-delay' => '300ms',
+            )) . ' '; // Space needed between elements for justified alignment
+       }
 
+       // Get secondary category names
+    protected function _getTagName($catID) {
+
+           // Cache the query data if it's not already done
+           if (!$this->_tags) {
+
+            $db = Zend_Db_Table::getDefaultAdapter();
+            $query = $db->select()->from('tags')->query();
+
+            while ($category = $query->fetch()) {
+                $category = CubeIT_Util_Cms::unserializeRow($category);
+                $this->_tags[$category->id] = CubeIT_Util_Object::toArray($category);
+            }
+        }
 
-               return $this->link($c, $url, array('data-cat' => $s->categories)) . ' '; // Space needed between elements for justified alignment
+           return $this->_tags[$catID]['name'];
        }
 
 }

diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml
index 2acdcfee1e5e5b4a00c2a941a32036a583271630..b400925b61606e997b95dcf3e2a6b0c4fe6d5516 100644 (file)
--- a/framework/application/views/scripts/templates/casestudies.phtml
+++ b/framework/application/views/scripts/templates/casestudies.phtml
@@ -3,11 +3,12 @@ $this->headScript()->addScriptAndStyle('casestudies');
 ?>
 
 <div class="content">
-       <div class="title"><?php echo $this->markupDotclear($this->titre); ?></div>
+       <div class="title text-block mx-auto mb-20 wow fadeInUp"><?php echo $this->markupDotclear($this->titre); ?></div>
 
-       <div id="casestudies-tagslist">
+
+       <div id="casestudies-tagslist" class="wow fadeInUp">
                <?php
-               echo $this->CategoriesList('casestudies', 'casestudies-list', 382, 13);
+               echo $this->CategoriesList('casestudies', 'casestudies-list', 512, 96);
                ?>
        </div>
 

diff --git a/js/common.js b/js/common.js
index b84b09b46ac3bfba662851624d82a21e6b9af97e..3b76f333ef1c38a9c3a3160d88911589560a17b5 100644 (file)
--- a/js/common.js
+++ b/js/common.js
@@ -3,6 +3,8 @@ registerLoader(load_commons_once, true);
 
 function load_commons_once() {
 
+    new WOW().init(); // Set up wow.js on-scroll animations
+
 
     $('a[href^="mailto:"]').not('[data-event]').each(function () {
         var email = $(this).attr('href').split(':');

diff --git a/js/taglist.js b/js/taglist.js
index 1c5ff25d8493265f1cf5f3fa5f14df7c04040adc..14150e822f05841ed1816f9832854a29bacbed4c 100644 (file)
--- a/js/taglist.js
+++ b/js/taglist.js
@@ -40,11 +40,12 @@
                     columnWidth: this.columnWidth,
                     gutter: this.gutter
                 },
-                animationOptions: {
-                    duration: 750,
-                    easing: 'linear',
-                    queue: false
-                }
+                transitionDuration: 0 // Disable isotope animations because they interfere with WOW.js
+                // animationOptions: {
+                //     duration: 0,
+                //     easing: 'linear',
+                //     queue: false
+                // }
                 //             hiddenStyle: {
                 //                     opacity: 0,
                 //                     transform: 'scale(2)'
@@ -55,6 +56,14 @@
                 //             }
             });
 
+            this.container.on('arrangeComplete', function () {
+                // Todo: figure out how to make WOW transitions trigger properly each time isotope finishes rearranging. Note: isotope is called multiple times by resize function so that might cause problems with triggering methods...
+                console.log('Isotope arrangeComplete');
+                $("#casestudies-list a").removeClass('animated').addClass('animated');
+                // $("#casestudies-list a").addClass("wow fadeInUp")
+                // $("#casestudies-list a").attr("style","visibility: visible; animation-name: fadeInUp;");
+            });
+
             // Show the container now Isotope is active
             this.container.css('display', 'block');
 
@@ -129,9 +138,9 @@
             var naturalWidth = this.columnWidth;
             var scaleFactor = 1;
 
-            var ww = Math.min($(window).width(), 1048);
+            var ww = Math.min($(window).width(), 1920);
 
-            ww -= 68; // Remove margins
+            ww *= 0.9; // Remove margins (5% each side)
 
             // Handle extra padding that is added for small screens
             //if ($('html').hasClass('small')) {
@@ -155,10 +164,10 @@
             // Resize elements
             var a = $(container).find('a');
             $(a).css('width', ew);
-            var naturalHeight = $(a).find('img').attr('height');
-            var imageRatio = naturalWidth / naturalHeight;
-            $(a).find('img').css({width: ew, height: ew / imageRatio});
-            $(a).find('.img-wrapper').css({width: ew, height: ew / imageRatio});
+            //var naturalHeight = $(a).find('img').attr('height');
+            //var imageRatio = naturalWidth / naturalHeight;
+            //$(a).find('img').css({width: ew, height: ew / imageRatio});
+            //$(a).find('.img-wrapper').css({width: ew, height: ew / imageRatio});
 
             // Reset isotope grid
             $(container).isotope({
@@ -188,4 +197,4 @@ function load_taglist() {
     $('#main').css('overflow-y', 'hidden'); // Stops extra scrollbars appearing
 
     $('ul.tags').taglist();
-}
\ No newline at end of file
+}

diff --git a/less/00-constants.less b/less/00-constants.less
index 1ff4f8055dead053ef935938cd2c0762165f52d2..5608f74db9d2d65c2ba442bf0a3a9fa68079ad10 100644 (file)
--- a/less/00-constants.less
+++ b/less/00-constants.less
@@ -8,3 +8,5 @@
 @yellow: #f6ae01;\r
 \r
 @import "01-mixins";\r
+@import "02-utilities";\r
+@import "03-animations";\r

diff --git a/less/02-utilities.less b/less/02-utilities.less
new file mode 100644 (file)
index 0000000..605d57d
--- /dev/null
+++ b/less/02-utilities.less
@@ -0,0 +1,47 @@
+/* Utility CSS classes */
+// Inspiration from tailwindcss.com
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: .25rem;
+}
+
+.mb-2 {
+  margin-bottom: .5rem;
+}
+
+.mb-3 {
+  margin-bottom: .75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}

diff --git a/less/03-animations.less b/less/03-animations.less
new file mode 100644 (file)
index 0000000..8a32401
--- /dev/null
+++ b/less/03-animations.less
@@ -0,0 +1,29 @@
+/* CSS animations */
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+@media (prefers-reduced-motion) {
+  .animated {
+    animation: unset !important;
+    transition: none !important;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(140px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  animation-name: fadeInUp;
+}

diff --git a/less/casestudies.less b/less/casestudies.less
index 85b384426cc50afb03c8eda6a6195b26ed44dae1..2f034eec4ccc872f1569b39f837408e952518a52 100644 (file)
--- a/less/casestudies.less
+++ b/less/casestudies.less
@@ -14,7 +14,8 @@
 
        a {
                display: inline-block;
-        margin-bottom: 4.333333%;
+        margin-bottom: 5%;
+        text-align: center;
 
       .img-wrapper {
         overflow: hidden; // Give blurred image hovers a sharp edge by hiding any blur bleed
@@ -50,15 +51,17 @@
             transition: transform 0.25s ease-out; // Speed of the hover-out animation
                }
                h2, h3 {
-                       white-space: nowrap;
-                       overflow: hidden;
-                       max-width: 300px;
-                       text-overflow: ellipsis;
+                       //white-space: nowrap;
+                       //overflow: hidden;
+                       //max-width: 300px;
+                       //text-overflow: ellipsis;
                }
                h2 {
-                       font-size: 32px;
+                       font-size: 50px;
                        line-height: 1.3em; // 38px/32px
-                       color: #1b1b1b;
+                       color: #000;
+            font-weight: 300;
+            margin-top: 0.7em;
                }
                h3 {
                        font-size: 16px;

diff --git a/less/common.less b/less/common.less
index a18f59480747e4596780eaaab2c99f75dabafc7b..af9b0b3b98ec8ff1878951d7ada8d337915e2c23 100644 (file)
--- a/less/common.less
+++ b/less/common.less
@@ -49,11 +49,7 @@ h1, h2, h3, h4, h5, h6, blockquote {
        -webkit-font-smoothing: antialiased;
 }
 
-h1, h2 {
-       font-weight: 400;
-}
-
-h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
        font-weight: 300;
 }
 
@@ -161,15 +157,22 @@ a {
        }
 }
 
+.text-block {
+       max-width: 54rem; // = 864px or 45% of 1920px
+}
+
 .dotclear {
        a {
                //color: #1b1b1b;
                text-decoration: underline;
        }
 
-       h3, h4 {
-               font-weight: 400;
+       h1, h2 {
+               &:not(:last-child) {
+                       margin-bottom: 0.75em;
+               }
        }
+
        p {
                line-height: 1.4;
        }