From: stephen@cubedesigners.com Date: Thu, 10 Jan 2019 16:37:03 +0000 (+0000) Subject: WIP #2033 @7.25 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c63904e93815db16f9ebc109caffae4f7ef0713a;p=cubedesigners-v7.git WIP #2033 @7.25 --- diff --git a/framework/application/views/helpers/AgencyBlocs.php b/framework/application/views/helpers/AgencyBlocs.php index c229871..d09b8c5 100644 --- 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.='
'; - } +// if (($i % 2) == 0 && $i != 0) { +// $res.='
'; +// } $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 64d2c35..8f46c4a 100644 --- 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 bfa2c39..f627c35 100644 --- 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(); ?> -
+
agencyPictos($this->pictos); ?>
-
imageSlideshowContinuous($this->photo, 650, array(), array('arrowspermanent' => 1)); ?>
+
imageSlideshowContinuous($this->photo, 650, array(), array('arrowspermanent' => 1)); ?>
-
+

equipe['titre']); ?>

agencyBlocs($this->equipe); ?>
-
\ No newline at end of file +
diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml index b400925..5e52e0c 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -3,7 +3,7 @@ $this->headScript()->addScriptAndStyle('casestudies'); ?>
-
markupDotclear($this->titre); ?>
+
markupDotclear($this->titre); ?>
diff --git a/js/common.js b/js/common.js index 3b76f33..de8f872 100644 --- 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 14150e8..9a70743 100644 --- 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 2c87cb9..6dfdc25 100644 --- 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. +.constrain(@property, @value) { + @{property}: @value; + + @media (min-width: @content-max-width) { + @{property}: unit(@value) / 100 * @content-max-width; + } +} + + .media { overflow: hidden; } @@ -34,14 +44,14 @@ .content-center() { max-width: @content-max-width; min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale - padding-right: 5vw; - padding-left: 5vw; + .constrain(padding-right, 10vw); + .constrain(padding-left, 10vw); margin: 0 auto; // Above max content width, fix padding so it doesn't scale too much @media (min-width: @content-max-width) { - padding-right: 0.05 * @content-max-width; - padding-left: 0.05 * @content-max-width; + padding-right: 0.1 * @content-max-width; + padding-left: 0.1 * @content-max-width; } } diff --git a/less/02-utilities.less b/less/02-utilities.less index 605d57d..64efa60 100644 --- 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 e0d9dda..83c11e1 100644 --- 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 af9b0b3..6641cd5 100644 --- 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 34439d6..7fd04a6 100644 --- 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 b9559ac..b6abc95 100644 --- 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 afc072a..40b820f 100644 --- 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 50b0f15..f216083 100644 --- 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 +}