WIP #2033 @7.25

diff --git a/framework/application/views/helpers/AgencyBlocs.php b/framework/application/views/helpers/AgencyBlocs.php
index c2298717138ecaa197ee864b9c36e9e623781c6e..d09b8c5e96ac54737b2922bb27f5ac6783ae8cb1 100644 (file)
--- a/framework/application/views/helpers/AgencyBlocs.php
+++ b/framework/application/views/helpers/AgencyBlocs.php
@@ -12,9 +12,9 @@ class Cubedesigners_View_Helper_AgencyBlocs extends Zend_View_Helper_Abstract {
 
                foreach ($blocs as $id => $bloc) {
 
-                       if (($i % 2) == 0 && $i != 0) {
-                               $res.='<div class="spacer"></div>';
-                       }
+//                     if (($i % 2) == 0 && $i != 0) {
+//                             $res.='<div class="spacer"></div>';
+//                     }
 
                        $image = $this->view->imageProcess()->imageProcessGetUrl($bloc['photo'], $bloc['titre'], 120, 120);
 

diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php
index 64d2c3520f4a729a5a5dee2a3999936dda797594..8f46c4a8049193a52482b04a1fc3060bafe1edf2 100644 (file)
--- a/framework/application/views/helpers/RealisationsList.php
+++ b/framework/application/views/helpers/RealisationsList.php
@@ -9,9 +9,9 @@ class Cubedesigners_View_Helper_RealisationsList extends CubeIT_View_Helper_Abst
                $db = Zend_Db_Table::getDefaultAdapter();
                $s = $db->select()->from('realisations')
                        ->order('date DESC');
-               if (!$acl) {
+               //if (!$acl) {
                        $s->where('online = ?', 1);
-               }
+               //}
 
                $q = $s->query();
 

diff --git a/framework/application/views/scripts/templates/agence.phtml b/framework/application/views/scripts/templates/agence.phtml
index bfa2c39824ff14278c8908f9aeed18bcfaf3abe7..f627c352db5229d5a7c4b9748bc7dd864ffac4f4 100644 (file)
--- a/framework/application/views/scripts/templates/agence.phtml
+++ b/framework/application/views/scripts/templates/agence.phtml
@@ -3,17 +3,17 @@ $this->headScript()->addScriptAndStyle('agence');
 $this->headScript()->addScriptAndStyle('slideshow');
 echo $this->twocols();
 ?>
-<div class="agency-pictos">
+<div class="agency-pictos mb-4vw">
        <div class="bloc-holder content">
                <?php echo $this->agencyPictos($this->pictos); ?>
        </div>
 </div>
 
-<div class="agency-photo"><?php echo $this->imageSlideshowContinuous($this->photo, 650, array(), array('arrowspermanent' => 1)); ?></div>
+<div class="agency-photo mb-4vw"><?php echo $this->imageSlideshowContinuous($this->photo, 650, array(), array('arrowspermanent' => 1)); ?></div>
 
-<section class="agency-persons">
+<section class="agency-persons mb-4vw">
        <div class="bloc-holder content">
                <h2><?php echo ucfirst($this->equipe['titre']); ?></h2>
                <?php echo $this->agencyBlocs($this->equipe); ?>
        </div>
-</section>
\ No newline at end of file
+</section>

diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml
index b400925b61606e997b95dcf3e2a6b0c4fe6d5516..5e52e0c689c6a2f651a432b895d2f145436acaf1 100644 (file)
--- a/framework/application/views/scripts/templates/casestudies.phtml
+++ b/framework/application/views/scripts/templates/casestudies.phtml
@@ -3,7 +3,7 @@ $this->headScript()->addScriptAndStyle('casestudies');
 ?>
 
 <div class="content">
-       <div class="title text-block mx-auto mb-20 wow fadeInUp"><?php echo $this->markupDotclear($this->titre); ?></div>
+       <div class="title text-block mb-4vw wow fadeInUp"><?php echo $this->markupDotclear($this->titre); ?></div>
 
 
        <div id="casestudies-tagslist" class="wow fadeInUp">

diff --git a/js/common.js b/js/common.js
index 3b76f333ef1c38a9c3a3160d88911589560a17b5..de8f8729fe7ac9583c806981ba651baea8d13524 100644 (file)
--- a/js/common.js
+++ b/js/common.js
@@ -3,7 +3,12 @@ registerLoader(load_commons_once, true);
 
 function load_commons_once() {
 
-    new WOW().init(); // Set up wow.js on-scroll animations
+    // Modify WOW.js to allow resetting animated status (see taglist.js)
+    WOW.prototype.addBox = function(element){
+        this.boxes.push(element);
+    };
+    window.wow = new WOW();
+    wow.init(); // Set up wow.js on-scroll animations
 
 
     $('a[href^="mailto:"]').not('[data-event]').each(function () {

diff --git a/js/taglist.js b/js/taglist.js
index 14150e822f05841ed1816f9832854a29bacbed4c..9a707435e67f0d20bfb65e5a210e04c8af81ed0f 100644 (file)
--- a/js/taglist.js
+++ b/js/taglist.js
@@ -40,6 +40,9 @@
                     columnWidth: this.columnWidth,
                     gutter: this.gutter
                 },
+
+                // ToDo: refactor this so isotope isn't so tied to jQtaglist and so we can have different options - eg. disable animation on case studies isotope but leave on for portfolio? Maybe have a data attribute that is read by the JS?
+
                 transitionDuration: 0 // Disable isotope animations because they interfere with WOW.js
                 // animationOptions: {
                 //     duration: 0,
@@ -56,14 +59,6 @@
                 //             }
             });
 
-            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');
 
@@ -95,6 +90,24 @@
                 $('.tags li.active').removeClass('active');
                 $(this).addClass('active');
 
+                // Reset animations on elements for WOW.js when re-filtering
+                // Ref: https://github.com/matthieua/WOW/issues/46#issuecomment-133760823
+                $this.container.find('a').each(function() {
+
+                    $(this).css({
+                        'visibility' : 'hidden',
+                        'animation-name' : 'none'
+                    });
+
+                    $(this).removeClass('animated');
+
+                    wow.addBox(this);
+                });
+
+                // Bump scroll so WOW.js runs... There must be a better way to do this
+                window.scrollTo(window.scrollX, window.scrollY + 1);
+                window.scrollTo(window.scrollX, window.scrollY - 1);
+
                 var filterID = $(this).data('id');
 
                 $this.filter(filterID);
@@ -140,7 +153,7 @@
 
             var ww = Math.min($(window).width(), 1920);
 
-            ww *= 0.9; // Remove margins (5% each side)
+            ww *= 0.8; // Remove margins (10% each side)
 
             // Handle extra padding that is added for small screens
             //if ($('html').hasClass('small')) {

diff --git a/less/01-mixins.less b/less/01-mixins.less
index 2c87cb9e7122dddfb380dddc622112ccf0176902..6dfdc25270c8083f81b20f32d8129b2bd6c39799 100644 (file)
--- a/less/01-mixins.less
+++ b/less/01-mixins.less
@@ -1,3 +1,13 @@
+// Allow vw units to be used but cap them when screen is above content-max-width.\r
+.constrain(@property, @value) {\r
+               @{property}: @value;\r
+\r
+       @media (min-width: @content-max-width) {\r
+                       @{property}: unit(@value) / 100 * @content-max-width;\r
+       }\r
+}\r
+\r
+\r
 .media {\r
        overflow: hidden;\r
 }\r
@@ -34,14 +44,14 @@
 .content-center() {\r
        max-width: @content-max-width;\r
        min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale\r
-       padding-right: 5vw;\r
-       padding-left: 5vw;\r
+       .constrain(padding-right, 10vw);\r
+       .constrain(padding-left, 10vw);\r
        margin: 0 auto;\r
 \r
        // Above max content width, fix padding so it doesn't scale too much\r
        @media (min-width: @content-max-width) {\r
-               padding-right: 0.05 * @content-max-width;\r
-               padding-left: 0.05 * @content-max-width;\r
+               padding-right: 0.1 * @content-max-width;\r
+               padding-left: 0.1 * @content-max-width;\r
        }\r
 }\r
 \r

diff --git a/less/02-utilities.less b/less/02-utilities.less
index 605d57d704f5a0de60db6090734c58c9b66fe974..64efa60cbf015ba541c5aa8697bd9ccc278dbf45 100644 (file)
--- a/less/02-utilities.less
+++ b/less/02-utilities.less
@@ -6,42 +6,43 @@
   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;
-}
+.ml-0 { margin-left: 0; }
+.mr-0 { margin-right: 0; }
+
+// Bottom Margins
+.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; }
+
+// VW-based margins
+.mb-3vw { .constrain(margin-bottom, 3vw); }
+.mb-4vw { .constrain(margin-bottom, 4vw); }
+.mb-5vw { .constrain(margin-bottom, 5vw); }
+
+.ml-2vw { .constrain(margin-left, 2vw); }
+.ml-3vw { .constrain(margin-left, 3vw); }
+.ml-4vw { .constrain(margin-left, 4vw); }
+
+.mr-2vw { .constrain(margin-right, 2vw); }
+.mr-3vw { .constrain(margin-right, 3vw); }
+.mr-4vw { .constrain(margin-right, 4vw); }
+
+// VW-based padding
+.pb-3vw { .constrain(padding-bottom, 3vw); }
+.pb-4vw { .constrain(padding-bottom, 4vw); }
+.pb-5vw { .constrain(padding-bottom, 5vw); }
+
+.pl-2vw { .constrain(padding-left, 2vw); }
+.pl-3vw { .constrain(padding-left, 3vw); }
+.pl-4vw { .constrain(padding-left, 4vw); }
+
+.pr-2vw { .constrain(padding-right, 2vw); }
+.pr-3vw { .constrain(padding-right, 3vw); }
+.pr-4vw { .constrain(padding-right, 4vw); }

diff --git a/less/agence.less b/less/agence.less
index e0d9ddad99d2c142bb8448178ff4747700e8d1bc..83c11e1eb70143117e5f5234b828d67a8dd0007b 100644 (file)
--- a/less/agence.less
+++ b/less/agence.less
@@ -6,8 +6,6 @@
 .agency-pictos {
        /* Agence pictos */
        .bloc-holder {
-               padding-bottom: 25px;
-               margin-top: -25px;
                overflow: hidden;
 
        }
@@ -15,6 +13,7 @@
        .bloc-holder h2 {
                font-weight: 300;
                font-size: 32px;
+               margin-bottom: 0 !important;
        }
 
        article {
@@ -77,8 +76,6 @@
        background-color: #fff;
        color: #222428;
        .bloc-holder {
-               padding-top: 50px;
-               padding-bottom: 25px;
                overflow: hidden;
        }
 
@@ -108,9 +105,16 @@
                vertical-align: top;
                width: 50%;
                min-width: 480px;
-               padding-right: 25px;
                margin: 25px 0;
 
+               &:nth-child(odd) {
+                       .pr-3vw;
+               }
+               &:nth-child(even) {
+                       .pl-3vw;
+               }
+
+
                @media screen and (max-width: 1048px) {
                        width: 100%;
                }

diff --git a/less/common.less b/less/common.less
index af9b0b3b98ec8ff1878951d7ada8d337915e2c23..6641cd54b39e6f69aed0fad4ca33ab4393a4fbd3 100644 (file)
--- a/less/common.less
+++ b/less/common.less
@@ -135,7 +135,7 @@ a {
 }
 
 .title {
-       margin: 50px auto 10px auto;
+       margin: 50px 0 10px;
        h1 {
                text-align: left;
                font-size: 56px;
@@ -174,7 +174,7 @@ a {
        }
 
        p {
-               line-height: 1.4;
+               line-height: 1.6;
        }
 }
 

diff --git a/less/contact.less b/less/contact.less
index 34439d605ef7cc0e81cbbcc8deb539bd557289df..7fd04a6b7f95f2eeebe4202dd290cc181e346546 100644 (file)
--- a/less/contact.less
+++ b/less/contact.less
@@ -19,10 +19,11 @@
        }
 
        .inner {
-               max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
-               padding-left: 34px;
-               float: right;
-               width: 100%;
+               .content-center();
+               //max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
+               //padding-left: 34px;
+               //float: right;
+               //width: 100%;
        }
 
        @media screen and (max-width: 790px) {
@@ -125,4 +126,4 @@
                display: none;
        }
 
-}
\ No newline at end of file
+}

diff --git a/less/list.less b/less/list.less
index b9559ac6aa57c029b43d297764b133b3387bece8..b6abc9575794ffc1d4603130ad3450dee3d1bc90 100644 (file)
--- a/less/list.less
+++ b/less/list.less
@@ -56,9 +56,11 @@ section.list {
                 padding-right: 20px;
                 margin-bottom: 50px;
 
-                &:nth-of-type(2n) {
-                    padding-right: 0;
-                    padding-left: 20px;
+                &:nth-of-type(odd) {
+                    .pr-2vw;
+                }
+                &:nth-of-type(even) {
+                    .pl-2vw;
                 }
 
                 @media screen and (max-width: 990px) {
@@ -87,4 +89,4 @@ section.list {
         }
     }
 
-}
\ No newline at end of file
+}

diff --git a/less/realisations.less b/less/realisations.less
index afc072ab4302f098ef9af3054a90eb9da9d1e080..40b820f911925af2741f88e1d98380e9db00353d 100644 (file)
--- a/less/realisations.less
+++ b/less/realisations.less
@@ -1,7 +1,7 @@
 @import "00-constants";
 
 #realisations-list {
-       max-width: 980px;
+       //max-width: 980px;
        margin: 0 auto;
        padding: 14px 0 50px 0;
 
@@ -38,6 +38,8 @@
                img {
                        display: block;
             transition: transform 0.25s ease-out; // Speed of the hover-out animation
+                       max-width: 100%;
+                       height: auto;
 
                }
                h2, h3 {
@@ -259,4 +261,4 @@
                        }
                }
        }
-}
\ No newline at end of file
+}

diff --git a/less/twocols.less b/less/twocols.less
index 50b0f15872cc9483af4344a50a2610a92d870dee..f216083fdb6063f588b69c1a0f4c18316b69eaf9 100644 (file)
--- a/less/twocols.less
+++ b/less/twocols.less
@@ -2,12 +2,12 @@
 
 .twocols {
 
-       max-width: 980px;
+       //max-width: 980px;
        margin: 0 auto;
 
        .dotclear {
                p {
-                       margin: 20px 0;
+                       margin: 1.5em 0;
                }
 
                ul {
@@ -31,12 +31,12 @@
                        white-space: normal;
                        display: inline-block;
                        width: 50%;
-                       padding-right: 20px;
+                       .pr-2vw;
                        vertical-align: top;
 
                        &:last-child {
                                padding-right: 0;
-                               padding-left: 20px;
+                               .pl-2vw;
                        }
                }
 
@@ -55,4 +55,4 @@
                        }
                }
        }
-}
\ No newline at end of file
+}