From 5a94705e376bb0c07488af51f90be7e54fe29c9e Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 9 Jan 2019 17:17:48 +0000 Subject: [PATCH] WIP #2033 @8 --- .../application/layouts/scripts/layout.phtml | 1 + .../views/helpers/CasestudiesList.php | 35 ++++++++++++-- .../views/scripts/templates/casestudies.phtml | 7 +-- js/common.js | 2 + js/taglist.js | 33 ++++++++----- less/00-constants.less | 2 + less/02-utilities.less | 47 +++++++++++++++++++ less/03-animations.less | 29 ++++++++++++ less/casestudies.less | 17 ++++--- less/common.less | 17 ++++--- 10 files changed, 158 insertions(+), 32 deletions(-) create mode 100644 less/02-utilities.less create mode 100644 less/03-animations.less diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index 7b972cf..465c950 100644 --- 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 495c563..8e2b051 100644 --- 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 = '
'; $c.= $image; $c.= '
'; $c.= '

' . $s->titre . '

'; - $c.='

' . $s->description . '

'; + //$c.='

' . $s->description . '

'; + + $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.= '

' . implode(' / ', $tag_names) . '

'; + + 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 2acdcfe..b400925 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -3,11 +3,12 @@ $this->headScript()->addScriptAndStyle('casestudies'); ?>
-
markupDotclear($this->titre); ?>
+
markupDotclear($this->titre); ?>
-
+ +
CategoriesList('casestudies', 'casestudies-list', 382, 13); + echo $this->CategoriesList('casestudies', 'casestudies-list', 512, 96); ?>
diff --git a/js/common.js b/js/common.js index b84b09b..3b76f33 100644 --- 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 1c5ff25..14150e8 100644 --- 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 1ff4f80..5608f74 100644 --- a/less/00-constants.less +++ b/less/00-constants.less @@ -8,3 +8,5 @@ @yellow: #f6ae01; @import "01-mixins"; +@import "02-utilities"; +@import "03-animations"; diff --git a/less/02-utilities.less b/less/02-utilities.less new file mode 100644 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 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 85b3844..2f034ee 100644 --- 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 a18f594..af9b0b3 100644 --- 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; } -- 2.39.5