From e5147a76ded7e28a4e06dfeaeff00bad2febf2b6 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 30 Dec 2014 17:48:33 +0000 Subject: [PATCH] Update Portfolio + Case Study sections to use Isotope library for filtering items. Also begin preparations for making the content responsive. --- .../views/helpers/CasestudiesList.php | 15 +- .../views/helpers/CategoriesList.php | 4 +- framework/application/views/helpers/Tags.php | 1 + .../views/scripts/studies/index.phtml | 2 +- .../views/scripts/templates/casestudies.phtml | 2 +- .../scripts/templates/realisations.phtml | 2 +- js/common.js | 9 +- js/taglist.js | 144 +++++++++++++++--- less/casestudies.less | 22 +-- less/common.less | 21 ++- less/realisations.less | 18 +-- 11 files changed, 173 insertions(+), 67 deletions(-) diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php index aab0611..34f853a 100644 --- a/framework/application/views/helpers/CasestudiesList.php +++ b/framework/application/views/helpers/CasestudiesList.php @@ -36,7 +36,7 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr while ($r = $q->fetch()) { - if ($r->id != $currentStudie->id) { + if (null === $currentStudie || $r->id != $currentStudie->id) { $r = CubeIT_Util_Cms::unserialize($r); $r->point = 0; @@ -110,7 +110,7 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr } else if ($r->point > $listStudies[2]->point) { $listStudies[2] = $r; } else { - + } } @@ -130,13 +130,13 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr foreach ($listStudies as $i => $s) { - $res.=$this->_case($s, $i); + $res.=$this->_case($s); } } return $res; } - protected function _case($s, $i) { + protected function _case($s) { $addOffline = ''; /* if ($acl && $s->online == 0) { @@ -150,12 +150,7 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr $c.= '

' . $s->titre . '

'; $c.='

' . $s->description . '

'; - $class = array(); - if ($i % 3 == 2) { - $class[] = 'last'; - } - - return $this->link($c, $url, array('data-cat' => $s->categories, 'class' => $class)); + return $this->link($c, $url, array('data-cat' => $s->categories)); } } diff --git a/framework/application/views/helpers/CategoriesList.php b/framework/application/views/helpers/CategoriesList.php index 1619c5c..2e18f4e 100644 --- a/framework/application/views/helpers/CategoriesList.php +++ b/framework/application/views/helpers/CategoriesList.php @@ -2,7 +2,7 @@ class Cubedesigners_View_Helper_CategoriesList extends Zend_View_Helper_Abstract { - public function CategoriesList($rubrique, $listId, $itemsPerLine) { + public function CategoriesList($rubrique, $listId, $columnWidth = '170', $gutterSize = '32') { $acl = Bootstrap::getInstance()->isAllowed("edition"); @@ -36,7 +36,7 @@ class Cubedesigners_View_Helper_CategoriesList extends Zend_View_Helper_Abstract $tags[$r->id] = $r->name; } } - $res = $this->view->tags($tags, array('data-perline' => $itemsPerLine, 'data-list' => '#' . $listId)); + $res = $this->view->tags($tags, array('data-list' => '#' . $listId, 'data-column-width' => $columnWidth, 'data-gutter' => $gutterSize)); return $res; } diff --git a/framework/application/views/helpers/Tags.php b/framework/application/views/helpers/Tags.php index 2c1df3c..d805067 100644 --- a/framework/application/views/helpers/Tags.php +++ b/framework/application/views/helpers/Tags.php @@ -5,6 +5,7 @@ class Cubedesigners_View_Helper_Tags extends CubeIT_View_Helper_ListUnordered { function tags($tags, $attrs = array()) { $tags = CubeIT_Util_Cms::unserialize($tags); + $this->headScript()->addIsotope(); $this->addScriptAndStyle('taglist'); if (isset($attrs['class'])) { $attrs['class'].=" tags"; diff --git a/framework/application/views/scripts/studies/index.phtml b/framework/application/views/scripts/studies/index.phtml index 013cbbf..1eff9a4 100644 --- a/framework/application/views/scripts/studies/index.phtml +++ b/framework/application/views/scripts/studies/index.phtml @@ -9,6 +9,6 @@ echo $this->CasestudiesDetail($this->studie);
markupDotclear($this->casestudies_titre); ?>
-
+ \ 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 afa7782..35611e5 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -7,7 +7,7 @@ $this->headScript()->addScriptAndStyle('casestudies');
CategoriesList('casestudies', 'casestudies-list', 3); + echo $this->CategoriesList('casestudies', 'casestudies-list', 300, 40); ?>
diff --git a/framework/application/views/scripts/templates/realisations.phtml b/framework/application/views/scripts/templates/realisations.phtml index db3ceec..510a938 100644 --- a/framework/application/views/scripts/templates/realisations.phtml +++ b/framework/application/views/scripts/templates/realisations.phtml @@ -6,7 +6,7 @@ $this->headScript()->addScriptAndStyle('realisations');
CategoriesList("realisations", 'realisations-list', 5); + echo $this->CategoriesList("realisations", 'realisations-list', 170, 32); ?>
diff --git a/js/common.js b/js/common.js index 19e8595..49565f8 100644 --- a/js/common.js +++ b/js/common.js @@ -1,9 +1,14 @@ registerLoader(load_commons); function load_commons() { - + $(window).on('cubeitresize', resize); + resize(); } function resize() { - + if ($(window).width() < 1020) { + $("html").addClass('small'); + } else { + $("html").removeClass('small'); + } } \ No newline at end of file diff --git a/js/taglist.js b/js/taglist.js index 65bd71c..8191752 100644 --- a/js/taglist.js +++ b/js/taglist.js @@ -5,9 +5,15 @@ this.storageID = $(element).parent().attr('id') + '-filter'; this.element = element; - this.perline = parseInt(this.element.data('perline')); + this.columnWidth = parseInt(this.element.data('column-width')); + this.gutter = parseInt(this.element.data('gutter')); this.list = $(this.element.data('list')); + this.container = $(this.list); + // Store font size for headings - used to scale fonts in resize function + this.headingSize = parseInt($(this.container).find('h2').css('font-size')); + + // Persist filter settings var initFilter = 0; if (Modernizr.sessionstorage) { var f = sessionStorage.getItem(this.storageID); @@ -22,47 +28,134 @@ JQtaglist.prototype = { init: function (initFilter) { var $this = this; - this.element.on('click', "li[data-id]", function () { - var id = $(this).data('id'); - $this.filter(id); + // Run filter based on any previous settings + $this.filter(initFilter); + + // Set up Isotope + this.container.isotope({ + itemSelector: 'a', + layoutMode: 'masonry', + masonry: { + columnWidth: this.columnWidth, + gutter: this.gutter + }, + animationOptions: { + duration: 750, + easing: 'linear', + queue: false + } + // hiddenStyle: { + // opacity: 0, + // transform: 'scale(2)' + // }, + // visibleStyle: { + // opacity: 1, + // transform: 'scale(1)' + // } + }); + + // Also handle resizing of the window + $(window).on('cubeitresize', function () { + $this.resize(); + }); + $this.resize(); + window.setTimeout(function () { + $this.resize(); + }, 500); + + // Make sure grid is sized properly once page has loaded fully + $(window).load(function () { + $this.resize(); + }); + + + // Set up filter buttons + $('.tags li').click(function () { + $('.tags li.active').removeClass('active'); + $(this).addClass('active'); + + var filterID = $(this).data('id'); + + $this.filter(filterID); return false; }); - $this.filter(initFilter); + }, filter: function (id) { - var $this = this; - this.list.find('[data-cat]:hidden').show().removeClass('last'); - if (id != 0) { - this.list.find('[data-cat][data-cat!="' + id + '"]').hide(); - } - this.element.find('[data-id]').removeClass('active'); + //fb('Filter ID: ' + id); + + // Select button + this.element.find('.active').removeClass('active'); this.element.find('[data-id="' + id + '"]').addClass('active'); - this.updateMargins(); - setTimeout(function () { - $this.updateMargins(); - }, 500); + var filterClass; + if (id == 0) { + filterClass = '*'; + } else { + filterClass = '[data-cat="' + id + '"]'; + } + + //fb('Filtering... ' + filterClass); + this.container.isotope({ + filter: filterClass + }); + + // Save filter for future sessions if (Modernizr.sessionstorage) { sessionStorage.setItem(this.storageID, id); } }, - updateMargins: function () { - var i = 1; - var $this = this; + resize: function () { + + fb('Running resize...'); + + var container = this.container + var margin = this.gutter; + var naturalWidth = this.columnWidth; + var scaleFactor = 1; + + var ww = Math.min($(window).width(), 980); + + // Handle extra padding that is added for small screens + if ($('html').hasClass('small')) { + //ww = ww - parseInt($('#main .content').css('paddingLeft')) - parseInt($('#main .content').css('paddingRight')); + ww = ww - 40; + } - this.list.find('[data-cat]:visible').each(function () { - if (i % $this.perline == 0) { - $(this).addClass('last'); - } else { - $(this).removeClass('last'); + var nbcol = Math.ceil(ww / (naturalWidth + margin)); + var ew = Math.floor((ww - (margin * (nbcol - 1))) / nbcol); + if (ew > naturalWidth) { + nbcol++; // Add a column when elements are too big + ew = Math.floor((ww - (margin * (nbcol - 1))) / nbcol); + } + + // Dynamically size text based on element width + if (ew < naturalWidth) { + scaleFactor = ew / naturalWidth; + $(container).find('h2').css('font-size', Math.ceil(scaleFactor * this.headingSize)); + } + + // 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}); + + // Reset isotope grid + $(container).isotope({ + masonry: { + columnWidth: ew, + gutter: margin } - i++; }); + } + }; jQuery.fn.taglist = function () { @@ -77,5 +170,8 @@ registerLoader(load_taglist); 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/casestudies.less b/less/casestudies.less index 4eec6d0..47e11c1 100644 --- a/less/casestudies.less +++ b/less/casestudies.less @@ -3,19 +3,18 @@ } #casestudies-list { - min-width: 980px; + //min-width: 980px; max-width: 980px; margin: 0 auto; padding: 0 0 50px 0; overflow: hidden; a { - width:300px; display:inline-block; - margin:0 40px 0 0; + margin:0; img { - width:300px; - height:225px; + //width:100%; + //height:auto; display: block; background-color: #ccc; margin:0 0 10px 0; @@ -28,8 +27,7 @@ } h2 { font-size: 32px; - line-height: 35px; - height:38px; + line-height: 1.3em; // 38px/32px color:#1b1b1b; } h3 { @@ -40,10 +38,16 @@ margin:-3px 0 20px; } - &.last{ + } + + // Styling for related case studies at the bottom of the case study detail page + &.related a { + margin-right: 40px; + + &:last-of-type{ margin-right: 0; } - } + } .blocmargin { margin-right:40px; diff --git a/less/common.less b/less/common.less index ae70280..5e53350 100644 --- a/less/common.less +++ b/less/common.less @@ -1,16 +1,23 @@ @roboto: 'Roboto Condensed', sans-serif; .content,.cubeit-content{ - width:980px; + max-width:980px; margin:0 auto; position:relative; } +.small{ + .content,.cubeit-content{ + padding:0 20px; + } +} + + body { - font-family: @roboto; - font-size:16px; - font-weight:300; - color:#1b1b1b; + font-family: @roboto; + font-size:16px; + font-weight:300; + color:#1b1b1b; opacity:0; transition:opacity 0.25s linear; } @@ -25,7 +32,7 @@ body { } h1,h2,h3,h4,h5,h6 { - font-weight: 300; + font-weight: 300; } strong,b{ font-weight: 400; @@ -60,7 +67,7 @@ a.but { #main{ - overflow-x:hidden; + overflow-x:hidden; overflow-y:visible; .main-holder { diff --git a/less/realisations.less b/less/realisations.less index c2eaf90..44d5ec9 100644 --- a/less/realisations.less +++ b/less/realisations.less @@ -1,5 +1,5 @@ #realisations-list { - min-width: 980px; + // min-width: 980px; max-width: 980px; margin: 0 auto; padding: 0 0 50px 0; @@ -7,35 +7,33 @@ a,a:hover { color:#000; display:inline-block; - margin:0 32px 30px 0; - width:170px; - height:170px; + margin:0 0 30px 0; + //height:170px; img{ display: block; - width:170px; - height:127px; + } h2,h3{ white-space: nowrap; overflow-x: hidden; overflow-y: visible; - max-width: 170px; + max-width: 100%; text-overflow: ellipsis; } h2 { font-size: 23px; - line-height: 20px; color:#1b1b1b; margin:8px 0 0 0; - height:25px; + line-height:1.3; + height: 1.35em; } h3 { font-size: 14px; line-height: 16px; color:#545454; height:18px; - margin:0 0 20px 0; + margin:0 0 0 0; } &.last{ margin-right: 0px; -- 2.39.5