$text_color->setLabel('Text colour (leave blank for default)');
$this->addElement($text_color);
- $margin = new CubeIT_Form_Element_Int('margin');
- $margin->setLabel("Décalage vertical du bloc (en pixels)");
- $this->addElement($margin);
-
- $zindex = new Zend_Form_Element_Select('zindex');
- $options = array('default' => 'Par défaut');
- for ($i = 1; $i <= 10; $i++) {
- $options[$i] = $i;
- }
- $zindex->setMultiOptions($options);
- $zindex->setLabel('z-index du bloc');
- $this->addElement($zindex);
-
- $annee = new Zend_Form_Element_Text('annee');
- $annee->setLabel('Année');
- $this->addElement($annee);
+// $margin = new CubeIT_Form_Element_Int('margin');
+// $margin->setLabel("Décalage vertical du bloc (en pixels)");
+// $this->addElement($margin);
+//
+// $zindex = new Zend_Form_Element_Select('zindex');
+// $options = array('default' => 'Par défaut');
+// for ($i = 1; $i <= 10; $i++) {
+// $options[$i] = $i;
+// }
+// $zindex->setMultiOptions($options);
+// $zindex->setLabel('z-index du bloc');
+// $this->addElement($zindex);
+//
+// $annee = new Zend_Form_Element_Text('annee');
+// $annee->setLabel('Année');
+// $this->addElement($annee);
$titre = new Zend_Form_Element_Text('titre');
$titre->setLabel('Titre');
$visuel->setMaxItems(1);
$this->addElementLocalized($visuel, $isCompactTrad);
- $visuelpadding = new CubeIT_Form_Element_Int('visuelpadding');
- $visuelpadding->setLabel('Margin intérieur sous le visuel');
- $visuelpadding->setValue(50);
- $this->addElement($visuelpadding);
+// $visuelpadding = new CubeIT_Form_Element_Int('visuelpadding');
+// $visuelpadding->setLabel('Margin intérieur sous le visuel');
+// $visuelpadding->setValue(50);
+// $this->addElement($visuelpadding);
$video = new CubeIT_Form_Element_WebVideo('video');
$video->setLabel('URL de la vidéo');
$visuel->setMaxItems(1);
$this->addElementLocalized($visuel, $isCompactTrad, true);
+ $hover_color = new CubeIT_Form_Element_Color('hover_color');
+ $hover_color->setLabel('Hover overlay colour (for thumbnail)');
+ $this->addElement($hover_color);
+
$visuel_detail = new CubeIT_Form_Element_File_Image('visuel_detail');
$visuel_detail->setLabel('Visuel de la page de détail');
$visuel_detail->setMaxItems(1);
protected $url;
protected $visuel;
protected $visuel_detail;
+ protected $hover_color;
protected $legende;
protected $header_style;
protected $couleur;
$casestudies->addColumn('url', 'text');
$casestudies->addColumn('visuel', 'string', array('length' => 128));
$casestudies->addColumn('visuel_detail', 'string', array('length' => 128));
+ $casestudies->addColumn('hover_color', 'string', array('length' => 32));
$casestudies->addColumn('legende', 'text');
$casestudies->addColumn('header_style', 'text');
$casestudies->addColumn('couleur', 'text');
--- /dev/null
+<?php
+
+class Cubedesigners_View_Helper_CaseStudiesGrid extends CubeIT_View_Helper_Abstract {
+
+ protected $_tags;
+ protected $_page_data;
+ protected $_counter = 0;
+
+ public function caseStudiesGrid($limit = 3, $exclude_ID = null) {
+
+ $this->addScriptAndStyle('casestudies_grid');
+
+ // ToDo: see if there's a better way to do this
+ $this->_page_data = Bootstrap::getInstance()->getCMSDatasOfPage(4); // ID 4 = casestudies page
+
+ $db = Zend_Db_Table::getDefaultAdapter();
+ $select = $db->select()->from('casestudies')
+ ->order('RAND()');
+
+ if ($exclude_ID) {
+ $select->where('id != ?', $exclude_ID);
+ }
+
+ $select->limit($limit);
+
+ $query = $select->query();
+
+ $res = '<div class="casestudies-grid">';
+
+
+ while ($study = $query->fetch()) {
+ $res .= $this->_study(CubeIT_Util_Cms::unserialize($study));
+ }
+
+ $res .= '</div>'; // .casestudies-grid
+
+ return $res;
+ }
+
+ protected function _study($study) {
+
+ // Max display size is 512 but we over-sample the size by 20% because there is a CSS scale effect on hover
+ $image = $this->view->imageProcess($study->visuel, $study->titre, 615, 615, ['class' => 'responsive casestudies-grid-item-image']);
+ $url = Cubedesigners_Util::generateAutoUri($study, $this->_page_data['seourl_stu']);
+ $tag_names = [];
+
+ foreach ($study->tags_secondaires as $categoryID) {
+ $tag_names[] = $this->_getTagName($categoryID);
+ }
+
+ $hover_style = empty($study->hover_color) ? '' : 'background-color:'. CubeIT_Util_Cms::hexToRGBA($study->hover_color, 0.75) .';';
+
+ $c = $image;
+ $c.= '<div class="casestudies-grid-item-label" style="'. $hover_style .'">';
+ $c.= '<h2 class="casestudies-grid-item-title">' . $study->titre . '</h2>';
+ $c.= '<h3 class="casestudies-grid-item-tags">' . implode(' / ', $tag_names) . '</h3>';
+ $c.= '</div>'; // .casestudies-grid-item-label
+
+
+
+ // Create a staggered delay for each row (3 items per row)
+ $delay = 300 + (($this->_counter % 3) * 200);
+
+ $this->_counter++;
+
+ return $this->link($c, $url, array(
+ 'data-cat' => $study->categories,
+ 'class' => 'casestudies-grid-item wow fadeInUp',
+ 'data-wow-delay' => $delay . 'ms',
+ )) . ' '; // 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->_tags[$catID]['name'];
+ }
+
+}
$res .= '<div class="casestudies-detail-content" style="' . $style . ';">';
+ // To simplify spacing, blocks are separated by margins (top & bottom)
+ // which collapse into each other so we don't end up with unwanted double spacing.
+ // Blocks are grouped into sections that have the same background colour.
+ // This gives the needed spacing between colour changes because margins are contained within each section
+
$blocs = $studie->blocs;
+ $current_bg = '';
+
+ foreach ($blocs as $bloc_index => $bloc) {
+
+ $section_style = empty($bloc->bg_color) ? '' : ' style="background-color:'. $bloc->bg_color .'"';
+
+ // Are we on the first block? If so, start the first section and record the current bg colour
+ if ($bloc_index == 0) {
+ $current_bg = $bloc->bg_color;
+ $res .= '<section'. $section_style .'>';
+ } elseif ($bloc->bg_color !== $current_bg) {
+ $current_bg = $bloc->bg_color;
+ // Background change, so start a new section
+ $res .= '</section>';
+ $res .= '<section'. $section_style .'>';
+ }
- foreach ($blocs as $bloc) {
// fb($bloc);
$margin = '';
$colours = '';
- if ($bloc->bg_color != '') {
- $colours .= 'background-color:'. $bloc->bg_color .';';
- }
+// if ($bloc->bg_color != '') {
+// $colours .= 'background-color:'. $bloc->bg_color .';';
+// }
if ($bloc->text_color != '') {
$colours .= 'color:'. $bloc->text_color .';';
}
-
- // TODO: Manage padding better so it can be disabled for blocks that have the same colour where we don't want a double gap between them.
-
- $res .= '<div class="detail-block" style="'. $colours .'">';
+ $res .= '<div class="detail-block wow fadeInUp" style="'. $colours .'">';
//--------------
$width = -1;
$height = -1;
CubeIT_Image::getDimensions($visuel, $width, $height);
- $padding = isset($bloc->visuelpadding) ? $bloc->visuelpadding : 50;
+ //$padding = isset($bloc->visuelpadding) ? $bloc->visuelpadding : 50;
// Convert padding into a relative measure (%) for responsive images
- $padding = $padding / 1200 * 100;
+ //$padding = $padding / 1200 * 100;
+ $padding = 0;
//$res .= '<div class="detail-visuel" style="background-image:url(\'' . $visuel . '\');height:' . $height . 'px;' . $margin . '' . $zindex . ';padding-bottom:' . $padding . 'px;"></div>';
$res .= '<div class="detail-visuel">';
$res .= '</div>'; // .detail-block
}
- $res .= '</div>';
- $res .= '</div>';
+ $res .= '</section>'; // Always close the last section that was opened...
+ $res .= '</div>'; // .casestudies-detail-content
+ $res .= '</div>'; // .case
return $res;
}
$image = $this->view->imageProcess($s->visuel, $s->titre, 512, 'auto');
$url = Cubedesigners_Util::generateAutoUri($s, $this->_datas['seourl_stu']);
- $c = '<div class="img-wrapper">';
+ $s->hover_color = empty($s->hover_color) ? '#000' : $s->hover_color;
+ $hover_style = 'color:'. CubeIT_Util_Cms::hexToRGBA($s->hover_color, 0.5) .';'; // Using color so CSS can pass currentColor to :before pseudo element
+
+ $c = '<div class="img-wrapper" style="'. $hover_style .'">';
$c.= $image;
$c.= '</div>';
$c.= '<h2>' . $s->titre . '</h2>';
echo $this->CasestudiesDetail($this->studie);
?>
-<div class="casestudies-list related content jgroup">
- <div class="title">
- <?php echo $this->markupDotclear($this->casestudies_titre); ?>
- </div>
+<div class="content casestudies-related">
+ <?php echo $this->caseStudiesGrid(3, $this->studie->id); ?>
+
+ <p class="casestudies-archive-link">
+ <?php echo $this->linkInternal(__('Voir tous les projets') . $this->linkArrow(), 'casestudies', array('class' => 'arrow-link')); ?>
+ </p>
- <?php echo $this->CasestudiesList($this->datas, $this->studie); ?>
</div>
echo $this->markupDotclear($this->case_studies['texte'], array(), array('class' => 'intro'));
-echo '<div class="casestudies-list jgroup">';
-echo $this->CasestudiesList($case_studies_data, null, null, $this->case_studies['display_count']);
+echo '<div class="casestudies">';
+echo $this->caseStudiesGrid(6);
echo '</div>';
if ($this->case_studies['button']['label']) {
function initSelectType() {
$("select[data-name='selected-type']").each(function () {
- var cible = $(this).parent().parent();
+ var cible = $(this).closest('fieldset');
displayFormTypeElements(cible, this.value);
});
$(document).on("change", "select[data-name='selected-type']", function () {
- var cible = $(this).parent().parent();
+ var cible = $(this).closest('fieldset');
displayFormTypeElements(cible, this.value);
});
}
function displayFormTypeElements(cible, choice) {
+ cible.find('.legend').text('Edition du contenu (' + choice + ')');
+
switch (choice) {
case 'text' :
- cible.children("#titre-element").css("display", "block");
- cible.children("#texte-element").css("display", "block");
- cible.children("#visuel-element").css("display", "none");
- cible.children("#visuelpadding-element").css("display", "none");
- cible.children("#video-element").css("display", "none");
- cible.children(".elementwrap-video_background").css("display", "none");
+ cible.find("#titre-element").show();
+ cible.find("#texte-element").show();
+ cible.find("#visuel-element").hide();
+ cible.find("#visuelpadding-element").hide();
+ cible.find("#video-element").hide();
+ cible.find(".elementwrap-video_background").hide();
+ cible.find(".elementwrap-text_color").show();
break;
case 'visuel' :
- cible.children("#titre-element").css("display", "none");
- cible.children("#texte-element").css("display", "none");
- cible.children("#visuel-element").css("display", "block");
- cible.children("#visuelpadding-element").css("display", "block");
- cible.children("#video-element").css("display", "none");
- cible.children(".elementwrap-video_background").css("display", "none");
+ cible.find("#titre-element").hide();
+ cible.find("#texte-element").hide();
+ cible.find("#visuel-element").show();
+ cible.find("#visuelpadding-element").show();
+ cible.find("#video-element").hide();
+ cible.find(".elementwrap-video_background").hide();
+ cible.find(".elementwrap-text_color").hide();
break;
case 'video' :
- cible.children("#titre-element").css("display", "none");
- cible.children("#texte-element").css("display", "none");
- cible.children("#visuel-element").css("display", "none");
- cible.children("#visuelpadding-element").css("display", "none");
- cible.children("#video-element").css("display", "block");
- cible.children(".elementwrap-video_background").css("display", "block");
+ cible.find("#titre-element").hide();
+ cible.find("#texte-element").hide();
+ cible.find("#visuel-element").hide();
+ cible.find("#visuelpadding-element").hide();
+ cible.find("#video-element").show();
+ cible.find(".elementwrap-video_background").show();
+ cible.find(".elementwrap-text_color").hide();
break;
}
-}
\ No newline at end of file
+}
display: block;
width: 100%;
height: 100%;
- background-color: transparent;
+ 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==');
background-position: center;
background-repeat: no-repeat;
}
.casestudies-detail-content {
- background-color: #0194d5;
+
+ section {
+ overflow: hidden; // So margins are contained within each section, extending the section bg colour
+ }
.detail-block {
- .constrain(padding-top, 7.5vw);
- .constrain(padding-bottom, 7.5vw);
+ .constrain(margin-top, 5vw);
+ .constrain(margin-bottom, 5vw);
.constrain(padding-left, 10vw);
.constrain(padding-right, 10vw);
+
+ //&:first-of-type {
+ // margin-top: 0;
+ // .constrain(padding-top, 5vw);
+ //}
}
.detail-text {
font-size: 60px;
line-height: 1.1;
margin-bottom: 0.5em;
+
+ @media screen and (max-width: 1000px) {
+ font-size: 5.85vw;
+ }
+ @media screen and (max-width: 685px) {
+ font-size: 40px;
+ }
}
.detail-text .dotclear {
img {
min-width: 462px; // 530 - 34*2
- vertical-align: bottom; // Stops gap under image when right at the bottom
+ display: block;
+ margin: 0 auto;
+ //vertical-align: bottom; // Stops gap under image when right at the bottom
// (caused by images being inline elements and having space for character descenders).
// This is a better solution than setting it to display:block because images can still be aligned this way.
}
}
}
-.casestudies-list {
- padding-top: 60px;
+.casestudies-related {
+ .constrain(padding-top, 2.5vw);
+ .constrain(padding-bottom, 5vw);
+}
+
+.casestudies-archive-link {
+ text-align: right;
}
--- /dev/null
+@import "00-constants";
+
+.casestudies-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ .constrain(grid-gap, 5vw);
+ .constrain(margin-top, 2.5vw);
+ .constrain(margin-bottom, 2.5vw);
+
+ @media screen and (max-width: 1400px) {
+ grid-gap: 2.5vw
+ }
+
+ &-item {
+ position: relative;
+ &:hover {
+ .casestudies-grid-item-label {
+ opacity: 1;
+ }
+ }
+
+ &-image {
+ display: block;
+ }
+
+ &-label {
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ background-color: rgba(0, 0, 0, 0.6);
+ color: #fff;
+ padding: 1em;
+ opacity: 0;
+ transition: opacity 0.3s ease-out;
+ }
+
+ &-title, h2 {
+ font-size: 50px;
+ line-height: 1;
+
+ @media screen and (max-width: 1400px) {
+ font-size: 3.5vw;
+ }
+ @media screen and (max-width: 1400px) {
+ font-size: 24px;
+ }
+ }
+
+ &-tags, h3 {
+ font-size: 18px;
+ margin-top: 0.5em;
+
+ @media screen and (max-width: 1000px) {
+ font-size: 15px;
+ }
+ }
+ }
+}
projects / cubedesigners-v7.git / commitdiff