From 191bbeab734ca397fc409e1831b4c6ad3d3339fa Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Thu, 21 Mar 2019 16:02:00 +0000 Subject: [PATCH] WIP #2033 @5 --- .../views/helpers/CasestudiesList.php | 1 + .../views/helpers/FooterActualites.php | 2 +- .../views/helpers/FooterContact.php | 2 +- .../application/views/helpers/LinkArrow.php | 27 ++- .../views/scripts/studies/index.phtml | 2 +- .../views/scripts/templates/casestudies.phtml | 2 +- less/casestudies.less | 65 +++++- less/common.less | 2 +- less/link-arrow.less | 186 ++++++++++++++++++ 9 files changed, 268 insertions(+), 21 deletions(-) create mode 100644 less/link-arrow.less diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php index 3ae435d..3c4b068 100644 --- a/framework/application/views/helpers/CasestudiesList.php +++ b/framework/application/views/helpers/CasestudiesList.php @@ -167,6 +167,7 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr $c = '
'; $c.= $image; + $c.= ''; $c.= '
'; $c.= '

' . $s->titre . '

'; //$c.='

' . $s->description . '

'; diff --git a/framework/application/views/helpers/FooterActualites.php b/framework/application/views/helpers/FooterActualites.php index 1339080..c34563b 100644 --- a/framework/application/views/helpers/FooterActualites.php +++ b/framework/application/views/helpers/FooterActualites.php @@ -25,7 +25,7 @@ class Cubedesigners_View_Helper_FooterActualites extends CubeIT_View_Helper_Abst $res .= ''; } - $res .= $this->linkInternal(__('Voir plus d\'actualité') . $this->view->linkArrow(), 'news', array('class' => 'arrow-link')); + $res .= $this->linkInternal($this->view->linkArrow(__('Voir plus d\'actualité')), 'news', array('class' => 'animated-arrow')); $res .= ''; diff --git a/framework/application/views/helpers/FooterContact.php b/framework/application/views/helpers/FooterContact.php index be85f37..57cdb92 100644 --- a/framework/application/views/helpers/FooterContact.php +++ b/framework/application/views/helpers/FooterContact.php @@ -33,7 +33,7 @@ class Cubedesigners_View_Helper_FooterContact extends Zend_View_Helper_Abstract $res .= '
'; $event = array('category' => 'map', 'action' => 'click', 'label' => $bureau['coordonnees']['ville']); - $res .= $this->view->linkGeo(__("Voir le plan") . $this->view->linkArrow(), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'arrow-link', 'data-event' => $event)); + $res .= $this->view->linkGeo($this->view->linkArrow(__("Voir le plan")), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'animated-arrow', 'data-event' => $event)); $res .= '
'; $res .= ''; diff --git a/framework/application/views/helpers/LinkArrow.php b/framework/application/views/helpers/LinkArrow.php index 42724ef..a36ca76 100644 --- a/framework/application/views/helpers/LinkArrow.php +++ b/framework/application/views/helpers/LinkArrow.php @@ -2,13 +2,24 @@ class Cubedesigners_View_Helper_LinkArrow extends CubeIT_View_Helper_Abstract { - public function linkArrow() { - - return ' - - '; + public function linkArrow($text = '') { + + // HTML structure for link content. This doesn't include the link itself + // because it's more flexible to be able to provide the link contents to + // existing link helpers + // + // Based on: https://codepen.io/nicoencarnacion/pen/XpaRQV + + $this->headScript()->addScriptAndStyle('link-arrow'); + + return ' + + + + '. $text .' + + + + '; } } diff --git a/framework/application/views/scripts/studies/index.phtml b/framework/application/views/scripts/studies/index.phtml index 3c2a76d..0b56ca8 100644 --- a/framework/application/views/scripts/studies/index.phtml +++ b/framework/application/views/scripts/studies/index.phtml @@ -10,7 +10,7 @@ echo $this->CasestudiesDetail($this->studie); caseStudiesGrid(3, $this->studie->id); ?>

- linkInternal(__('Voir tous les projets') . $this->linkArrow(), 'casestudies', array('class' => 'arrow-link')); ?> + linkInternal($this->linkArrow(__('Voir tous les projets')), 'casestudies', array('class' => 'animated-arrow')); ?>

diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml index 19253bf..aa2e3fb 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -20,7 +20,7 @@ $this->headScript()->addScriptAndStyle('casestudies');

- linkInternal(__('Voir les archives') . $this->linkArrow(), 'Portfolio', array('class' => 'arrow-link')); ?> + linkInternal($this->linkArrow(__('Voir les archives')), 'Portfolio', array('class' => 'animated-arrow')); ?>

diff --git a/less/casestudies.less b/less/casestudies.less index 16372cb..341d075 100644 --- a/less/casestudies.less +++ b/less/casestudies.less @@ -32,7 +32,8 @@ width: 100%; height: 100%; background-color: currentColor; // Inherit from .img-wrapper - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAABp1BMVEUAAAD2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH5x1H967/84Z/////+9d/714D5zGH3sxH85q/++u/98M/4vTH4wkH3uCH60nH7249RxKUJAAAAfHRSTlMAIlmJsM/k8/LOrocCRJvjmEIeiOGGHCWc+ZkjDI77+lLlTgqdCB/QzBsy598mOO/qM/DtLejJBp6PU/5MDQ+NJIuCBd4BSj6R1Bdainmizcfg3ezx+NfGr6FRIRXSmkg76dx+GSDiTwnF2xYuKMsYn/aTHYUDQ5dBetmgCFBy9QAAArJJREFUeF6l1Plb01gYxfFTwKgD0gpYiaAFR8UqKhRwwKogBXVQlEVU3HBlAGdFcT3dV5Y/2oY+eabc5N4m8fN7v3lv3txCyldX37BP208e0A7+0ljngztNh5r9FPgDh5vgVEurRlttR4Jw4mi7Tin9WAdq6Tx+gkqh+k4odXWzpraTkPv1FB0JnIbEmR46dDYMW+fO07HeC7Bx8RJd6Ou3mSFCVwYGIQgO0SV/UNhFD127/BuqDdODEVS5Qi+iV2HCNY2eaNdhGqVHo2Zh7AQ9CvlQcYqeDWNXi04b8WQilUonMltU0YMw3KBVNp0yJZSRcZTF+ijK5VNVClnKTUwCuGktFFOGdCKfqERUjVsAminanSFfoiFbMBqblLoNQKMgXnlw9UjpHGV+BzooMt7ktnAs+VGiU7hDQcnYAqtslhNFSnXhLgUZy0ONMeQnmUaD3cvMCVHVC72H+xQYi+Qem8rEDGZrJ7LKxBzmKUiWE1ustqNMRKBTsF1OZCxbptQDLFCwZVyLnNDMUzHFPEX5vT8pFZTnoIZeWscwGuYccaOQoNxDcanm5KlCpkTm4pW7upMtUeYRHtMqmbLKUmIRjRSZV9xULCob06ijna2kGUlnmVTO8QRPKRHPlG2XzHPJGtFnQBtryRUVjecAXvCnGiMAlvhTjZcAYq/cNOJC4fUkylrpoiF+p29gCOrOG+JJ9LfYFaCC+p+8HRW+kLNGoiAWFt6hAvX06C5Mncv0ZPkaTPiDXkSXUCVAD+pRbeUsXVuNYY+gny6tvYdgcICu9I3Bor+PLgz9CRt/zdKxuTHYCv9Nh2b+gUTseJQORFtjkLuqsaaJJShdH9WppI+voBbfvyFK/bfeAic+fOymre7xKTi18enzHAVr61824E646+vi6rfuSET7tvp9uisMmR8A02/S/W9HBAAAAABJRU5ErkJggg=='); + // Magnifying glass icon + // background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAABp1BMVEUAAAD2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH5x1H967/84Z/////+9d/714D5zGH3sxH85q/++u/98M/4vTH4wkH3uCH60nH7249RxKUJAAAAfHRSTlMAIlmJsM/k8/LOrocCRJvjmEIeiOGGHCWc+ZkjDI77+lLlTgqdCB/QzBsy598mOO/qM/DtLejJBp6PU/5MDQ+NJIuCBd4BSj6R1Bdainmizcfg3ezx+NfGr6FRIRXSmkg76dx+GSDiTwnF2xYuKMsYn/aTHYUDQ5dBetmgCFBy9QAAArJJREFUeF6l1Plb01gYxfFTwKgD0gpYiaAFR8UqKhRwwKogBXVQlEVU3HBlAGdFcT3dV5Y/2oY+eabc5N4m8fN7v3lv3txCyldX37BP208e0A7+0ljngztNh5r9FPgDh5vgVEurRlttR4Jw4mi7Tin9WAdq6Tx+gkqh+k4odXWzpraTkPv1FB0JnIbEmR46dDYMW+fO07HeC7Bx8RJd6Ou3mSFCVwYGIQgO0SV/UNhFD127/BuqDdODEVS5Qi+iV2HCNY2eaNdhGqVHo2Zh7AQ9CvlQcYqeDWNXi04b8WQilUonMltU0YMw3KBVNp0yJZSRcZTF+ijK5VNVClnKTUwCuGktFFOGdCKfqERUjVsAminanSFfoiFbMBqblLoNQKMgXnlw9UjpHGV+BzooMt7ktnAs+VGiU7hDQcnYAqtslhNFSnXhLgUZy0ONMeQnmUaD3cvMCVHVC72H+xQYi+Qem8rEDGZrJ7LKxBzmKUiWE1ustqNMRKBTsF1OZCxbptQDLFCwZVyLnNDMUzHFPEX5vT8pFZTnoIZeWscwGuYccaOQoNxDcanm5KlCpkTm4pW7upMtUeYRHtMqmbLKUmIRjRSZV9xULCob06ijna2kGUlnmVTO8QRPKRHPlG2XzHPJGtFnQBtryRUVjecAXvCnGiMAlvhTjZcAYq/cNOJC4fUkylrpoiF+p29gCOrOG+JJ9LfYFaCC+p+8HRW+kLNGoiAWFt6hAvX06C5Mncv0ZPkaTPiDXkSXUCVAD+pRbeUsXVuNYY+gny6tvYdgcICu9I3Bor+PLgz9CRt/zdKxuTHYCv9Nh2b+gUTseJQORFtjkLuqsaaJJShdH9WppI+voBbfvyFK/bfeAic+fOymre7xKTi18enzHAVr61824E646+vi6rfuSET7tvp9uisMmR8A02/S/W9HBAAAAABJRU5ErkJggg=='); background-position: center; background-repeat: no-repeat; position: absolute; @@ -71,7 +72,6 @@ h3 { font-size: 16px; line-height: 1.4; - height: 18px; color: #545454; margin-top: -3px; @@ -80,12 +80,8 @@ a:hover { - .img-wrapper { - - &:before { - opacity: 1; - background-size: 66px; - } + .arrows-animation, .img-wrapper:before { + opacity: 1; } img { @@ -154,3 +150,56 @@ margin-bottom: 4em; text-align: right; } + +// Animated arrows (>>) +.arrows-animation { + font-size: 66px; // Controls size of animated arrows element + border: 2px solid #fff; + width: 1em; + height: 1em; + border-radius: 100%; + cursor: pointer; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; + opacity: 0; // Hidden until hovered + transition: opacity 0.2s ease-out; + + &:before, &:after { + content: ''; + position: absolute; + bottom: 0; + width: 0.3em; + height: 0.3em; + background-size: contain; + top: 0.35em; + left: 30%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M319.1 217l-190-190C109 6.8 76 7.1 55.5 27.6s-20.8 53.5-.7 73.7l152.5 152.5L54.8 406.2c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190c10.1-10.1 15.1-23.4 15-36.8.1-13.3-4.9-26.6-15-36.7z'/%3E%3C/svg%3E"); + } + + &:after { + margin-left: 0.2em; + } + + &:hover, &.animating + { + &:before, &:after { + animation-name: bounceAlpha; + animation-duration:1.4s; + animation-iteration-count:infinite; + animation-timing-function:linear; + } + &:before { + animation-delay:0.2s; + } + } +} + +@keyframes bounceAlpha { + 0% {opacity: 1; transform: translateX(0) scale(1);} + 25%{opacity: 0; transform:translateX(0.125em) scale(0.9);} + 26%{opacity: 0; transform:translateX(-0.125em) scale(0.9);} + 55% {opacity: 1; transform: translateX(0) scale(1);} +} diff --git a/less/common.less b/less/common.less index 836a233..0a3010a 100644 --- a/less/common.less +++ b/less/common.less @@ -22,7 +22,7 @@ img.responsive { } body { - background-color: #e4e5ec; + background-color: #fafafa; font-family: @roboto; font-size: 18px; font-weight: 300; diff --git a/less/link-arrow.less b/less/link-arrow.less new file mode 100644 index 0000000..1c97668 --- /dev/null +++ b/less/link-arrow.less @@ -0,0 +1,186 @@ +// Animated arrow links based on https://codepen.io/nicoencarnacion/pen/XpaRQV + +@import "00-constants"; + +// Variables +@black: #666; +@hover-color: @yellow; + +@text-arrow-space: 10px; +@shaft-width: 40px; +@shaft-thickness: 1px; +@arrow-head-width: 8px; +@arrow-head-thickness: @shaft-thickness; + + +// Todo: check why colour of right-hand arrow is glitchy on mouseout. See original codepen - maybe related to using currentColor... + + +// The Arrow +.the-arrow { + width: @shaft-width; + transition: all 0.2s; + + &.-left { + position: absolute; + top: 60%; + left: 0; + + > .shaft { + width: 0; + background-color: currentColor; + + &:before, + &:after { + width: 0; + background-color: currentColor; + } + + &:before { + transform: rotate(0); + } + + &:after { + transform: rotate(0); + } + } + } + + &.-right { + top: 3px; + + > .shaft { + width: @shaft-width; + transition-delay: 0.2s; + + &:before, + &:after { + width: @arrow-head-width; + transition-delay: 0.3s; + transition: all 0.5s; + } + + &:before { + transform: rotate(40deg); + } + + &:after { + transform: rotate(-40deg); + } + } + } + + > .shaft { + background-color: currentColor; + display: block; + height: @shaft-thickness; + position: relative; + transition: all 0.2s; + transition-delay: 0; + will-change: transform; + + &:before, + &:after { + background-color: currentColor; + content: ''; + display: block; + height: @arrow-head-thickness; + position: absolute; + top: 0; + right: 0; + transition: all 0.2s; + transition-delay: 0; + } + + &:before { + transform-origin: top right; + } + + &:after { + transform-origin: bottom right; + } + } +} + + + +// Animated Arrow Button + +.animated-arrow { + display: inline-block; + //color: currentColor; + //font-size: 1.25em; + //font-style: italic; + //text-decoration: none; + position: relative; + transition: all 0.2s; + + &:hover { + color: @hover-color; + + > .the-arrow.-left { + > .shaft { + width: @shaft-width; + transition-delay: 0.1s; + background-color: @hover-color; + + &:before, + &:after { + width: @arrow-head-width; + transition-delay: 0.1s; + background-color: @hover-color; + } + + &:before { + transform: rotate(40deg); + } + + &:after { + transform: rotate(-40deg); + } + } + } + + > .main { + transform: translateX(@shaft-width + @text-arrow-space); + + > .the-arrow.-right { + > .shaft { + width: 0; + transform: translateX(200%); + transition-delay: 0; + + &:before, + &:after { + width: 0; + transition-delay: 0; + transition: all 0.1s; + } + + &:before { + transform: rotate(0); + } + + &:after { + transform: rotate(0); + } + } + } + } + } + + > .main { + display: flex; + align-items: center; + transition: all 0.2s; + + > .text { + margin: 0 @text-arrow-space 0 0; + line-height: 1; + } + + > .the-arrow { + position: relative; + } + } +} -- 2.39.5