]> _ Git - cubedesigners-v7.git/commitdiff
WIP #2033 @3
authorstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Thu, 7 Feb 2019 16:35:31 +0000 (16:35 +0000)
committerstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Thu, 7 Feb 2019 16:35:31 +0000 (16:35 +0000)
framework/application/forms/CMS/Sub/Casestudies/Content/Bloc.php
framework/application/forms/CMS/Sub/Casestudies/Content/Blocs.php
framework/application/views/helpers/CasestudiesDetail.php
less/casestudies_detail.less

index 7e6ca7f836806de6fd9a4e55e9cbf99127a43f20..9475469b2fcfb098939c930bdb70e942e206a36c 100644 (file)
@@ -11,6 +11,14 @@ class Cubedesigners_Form_CMS_Sub_Casestudies_Content_Bloc extends CubeIT_Form_Su
                $select->setAttrib('data-name', 'selected-type');
                $this->addElement($select);
 
+               $bg_color = new CubeIT_Form_Element_Color('bg_color');
+        $bg_color->setLabel('Block background colour (leave blank for default)');
+        $this->addElement($bg_color);
+
+               $text_color = new CubeIT_Form_Element_Color('text_color');
+        $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);
index 9812c7cec0bf4a64a6ac0f11c40cca90e6607a20..eb1e01e1d119a56999846050572490188a8494ff 100644 (file)
@@ -11,4 +11,4 @@ class Cubedesigners_Form_CMS_Sub_Casestudies_Content_Blocs extends CubeIT_Form_M
                $this->setNewLegend('Nouveau contenu');
        }
 
-}
\ No newline at end of file
+}
index c6526d327da914e323d2ccc0ad5cbfdbc2d16cb9..8e92b87293652a20e918d3e4a283390ef54f3981 100644 (file)
@@ -12,8 +12,8 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 
                $res = '<div class="case">';
                $res.='<div class="casestudies-detail-header" style="background-image:url('. $header_image .')">';
-               $res.='<h1 class="casestudies-detail-title">' . $studie->titre . '</h1>';
-               $res.='<h2>' . $studie->legende . '</h2>';
+               $res.='<h1 class="casestudies-detail-title wow fadeInUp">' . $studie->titre . '</h1>';
+               $res.='<h2 class="wow fadeInUp">' . $studie->legende . '</h2>';
                $res.='</div>';
 
 //             $res .= '<div class="casestudies-detail-visuel">';
@@ -54,9 +54,25 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
                                $zindex = 'z-index:' . $bloc->zindex . ';';
                        }
 
+                       $colours = '';
+
+                       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 .'">';
+
+                       //--------------
+
                        if ($bloc->selectedtype == "text") {
 
-                               $res .= '<div class="detail-text content" style="' . $margin . '' . $zindex . '" >';
+                               $res .= '<div class="detail-text" style="'. $colours . $margin . $zindex .'">';
                                $res .= '<div class="titre">' . $bloc->titre . '</div>';
                                $res .= $this->markupDotclear($bloc->texte);
                                $res .= '</div>';
@@ -104,6 +120,8 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
                                $res .= '<div style="z-index:10;position:relative">' . $video . '</div>';
                                $res .= '</div>';
                        }
+
+                       $res .= '</div>'; // .detail-block
                }
                $res .= '</div>';
                $res .= '</div>';
index 64576d11f7e4ba1f0eb2ef4fee023e49c8cdc46e..ab1fc397bbb93ff46828c2865a49ee649d67a9a6 100644 (file)
        }
 
        .casestudies-detail-content {
-               text-align: center;
                background-color: #0194d5;
-               padding: 50px 0 0px 0;
+
+               .detail-block {
+                       .constrain(padding-top, 7.5vw);
+                       .constrain(padding-bottom, 7.5vw);
+                       .constrain(padding-left, 10vw);
+                       .constrain(padding-right, 10vw);
+               }
 
                .detail-text {
                        color: #fff;
-                       max-width: 708px; // 640 + 34*2
-                       margin: auto;
+                       max-width: 850px;
+                       margin: auto;
                        position: relative;
                        z-index: 10;
 
@@ -87,8 +92,9 @@
                }
 
                .detail-text .titre {
-                       font-size: 32px;
-                       padding-bottom: 10px;
+                       font-size: 60px;
+                       line-height: 1.1;
+                       margin-bottom: 0.5em;
                }
 
                .detail-text .dotclear {
                .detail-visuel {
                        //                      padding: 0px 0 50px 0;
                        //                      z-index: 1;
-                       padding-left: 34px;
-                       padding-right: 34px;
-                       max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images
+                       //padding-left: 34px;
+                       //padding-right: 34px;
+                       //max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images
                        margin: 0 auto;
 
                        img {