From 0d44800ad7d070333553c6abc2cd9223306773eb Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Thu, 30 Jun 2016 15:54:02 +0000 Subject: [PATCH] frontend work on sub example page | wip #516 @5 --- .../application/forms/CMS/Exemplessub.php | 2 +- .../forms/CMS/Sub/Contact/Footer.php | 31 ++++++++++++++++ .../application/forms/CMS/Sub/Home/Block.php | 4 +-- framework/application/forms/Settings.php | 4 +++ .../application/layouts/scripts/layout.phtml | 6 ++-- .../views/helpers/BackgroundBlock.php | 31 ++++++++++++++++ .../views/helpers/ContactFooter.php | 24 +++++++++++++ .../application/views/helpers/IntroBlock.php | 36 ++++++------------- .../views/scripts/templates/exemples.phtml | 2 +- .../views/scripts/templates/exemplessub.phtml | 4 +++ js/002-common.js | 1 - js/102-intro.js | 5 +++ less/001-variables.less | 1 + less/002-common.less | 11 +++--- less/003-mixins.less | 24 +++++++++++-- less/010-admin.less | 5 +-- less/102-intro.less | 19 ++++++++++ less/103-contact-footer.less | 22 ++++++++++++ less/220-exemples.less | 2 +- 19 files changed, 187 insertions(+), 47 deletions(-) create mode 100644 framework/application/forms/CMS/Sub/Contact/Footer.php create mode 100644 framework/application/views/helpers/BackgroundBlock.php create mode 100644 framework/application/views/helpers/ContactFooter.php create mode 100644 framework/application/views/scripts/templates/exemplessub.phtml create mode 100644 js/102-intro.js create mode 100644 less/102-intro.less create mode 100644 less/103-contact-footer.less diff --git a/framework/application/forms/CMS/Exemplessub.php b/framework/application/forms/CMS/Exemplessub.php index 93305e6..cc70ef2 100644 --- a/framework/application/forms/CMS/Exemplessub.php +++ b/framework/application/forms/CMS/Exemplessub.php @@ -1,5 +1,5 @@ setLabel('Titre'); + $intro_title->setAttrib('rows', 3); + $this->addElement($intro_title); + + $intro_content = new CubeIT_Form_Element_Markitup('content'); + $intro_content->setLabel('Contenu'); + $this->addElement($intro_content); + + $color = new CubeIT_Form_Element_Color('bg_color'); + $color->setLabel('Couleur de fond'); + $color->setValue('#ffffff'); + $this->addElement($color); + + $intro_bg = new CubeIT_Form_Element_File_Image('bg_image'); + $intro_bg->setLabel('Image de fond'); + $intro_bg->setMaxItems(1); + $this->addElement($intro_bg); + + $button = new CubeIT_Form_Element_Link(); + $button->setLabel('Bouton'); + $this->addSubForm($button, 'button'); + } +} \ No newline at end of file diff --git a/framework/application/forms/CMS/Sub/Home/Block.php b/framework/application/forms/CMS/Sub/Home/Block.php index 5c4bcad..bee7d1a 100644 --- a/framework/application/forms/CMS/Sub/Home/Block.php +++ b/framework/application/forms/CMS/Sub/Home/Block.php @@ -3,14 +3,12 @@ class Fluidbook_Form_CMS_Sub_Home_Block extends CubeIT_Form_SubForm { public function init() { parent::init(); - - + $title = new Zend_Form_Element_Text('title'); $title->setLabel('Titre'); $title->setOrder(10); $this->addElement($title); - $text = new CubeIT_Form_Element_Markitup("text"); $text->setLabel('Texte'); $text->setAttrib('rows', 8); diff --git a/framework/application/forms/Settings.php b/framework/application/forms/Settings.php index 7a8328b..2bf989c 100644 --- a/framework/application/forms/Settings.php +++ b/framework/application/forms/Settings.php @@ -46,6 +46,10 @@ class Fluidbook_Form_Settings extends CubeIT_Form_Settings { $footer_menu_contact->setAttrib('placeholder', 'Tapez un titre de la page'); $this->addElement($footer_menu_contact); + $contact_footer = new Fluidbook_Form_CMS_Sub_Contact_Footer(); + $contact_footer->setLabel('Bloc contact'); + $this->addSubFormLocalized($contact_footer, 'contact_footer'); + $footer = new CubeIT_Form_Element_Markitup('footer'); $footer->setLabel('Footer'); $footer->setAttrib('rows', 6); diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index 5dc0c51..7a49ead 100644 --- a/framework/application/layouts/scripts/layout.phtml +++ b/framework/application/layouts/scripts/layout.phtml @@ -5,6 +5,8 @@ if ($this->acl()->isAllowed('edition')) { } $this->headScript()->addIEConditionnals(); $this->headScript()->appendFile('/js/002-common.js'); +// +$this->headLink()->appendStylesheet('https://file.myfontastic.com/2VZntjQVKuJUUqArhhJzkD/icons.css'); $this->headLink()->appendStylesheet('/less/002-common.less', 'all'); $this->headScript()->addTagHandler(true); // Used by related articles selector in admin @@ -21,8 +23,8 @@ $this->headScript()->addTagHandler(true); // Used by related articles selector i */ // Fonts -$fonts = array('google' => array('families' => array('Open+Sans|Playfair+Display|Montserrat')), - 'custom' => array('families' => array('Montserrat'), 'urls' => array('/css/fonts/Montserrat/Montserrat.css'))); +$fonts = array('google' => array('families' => array('Open+Sans:400,300|Playfair+Display|Montserrat')), + 'custom' => array('families' => array('Montserrat'), 'urls' => array('/css/fonts/Montserrat/Montserrat.css'))); $this->headScript()->addWebFont($fonts); diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php new file mode 100644 index 0000000..fa28421 --- /dev/null +++ b/framework/application/views/helpers/BackgroundBlock.php @@ -0,0 +1,31 @@ + array('content-wrapper', 'no-shrink')); + + $bgimage = CubeIT_Util_Cms::extractFile($data['bg_image']); + $extra_attributes = array(); + if ($bgimage) { + $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage); + + // Work out the ratio of the background image + CubeIT_Image::getDimensions($image_path, $image_width, $image_height); + $image_ratio = $image_height / $image_width; + + $style = "background-image: url($image_path);"; + $attributes['data-bg-ratio'] = $image_ratio; + } + + if ($data['bg_color']) { + $style .= "background-color:" . $data['bg_color'] . ";"; + } + $attributes['style'] = $style; + + return $this->htmlElement($content, 'div', $attributes); + } +} \ No newline at end of file diff --git a/framework/application/views/helpers/ContactFooter.php b/framework/application/views/helpers/ContactFooter.php new file mode 100644 index 0000000..0d1635a --- /dev/null +++ b/framework/application/views/helpers/ContactFooter.php @@ -0,0 +1,24 @@ +option('contact_footer')); + + $this->addScriptAndStyle('103-contact-footer'); + + $res = $this->htmlElement($cf['title'], 'h2', array('class' => 'title')); + $res .= $this->markupDotclear($cf['content']); + $buttons = $this->linkCMS($cf['button']); + $buttons .= $this->linkQuote('Demander un devis'); + $res .= $this->htmlElement($buttons, 'div', array('class' => 'buttons')); + + $res = $this->htmlElement($res, 'div', array('class' => 'col-2')); + $res = $this->htmlElement($res, 'div', array('class' => 'grid')); + $res = $this->backgroundBlock($res, $cf); + + return $this->htmlElement($res, 'section', array('class' => 'contactFooter')); + } +} \ No newline at end of file diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php index 628c66c..ea4b5fa 100644 --- a/framework/application/views/helpers/IntroBlock.php +++ b/framework/application/views/helpers/IntroBlock.php @@ -3,31 +3,9 @@ class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract { public function introBlock($intro, $additionnalContent = '') { + $this->addScriptAndStyle('102-intro'); - $style = ''; - $extra_attributes = ''; - - $bgimage=CubeIT_Util_Cms::extractFile($intro['bg_image']); - - if ($bgimage) { - $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage); - - // Work out the ratio of the background image - CubeIT_Image::getDimensions($image_path, $image_width, $image_height); - $image_ratio = $image_height / $image_width; - - $style = "background-image: url($image_path);"; - $extra_attributes = 'data-bg-ratio="' . $image_ratio . '"'; - } - - if ($intro['bg_color']) { - $style .= "background-color:" . $intro['bg_color'] . ";"; - } - - - $res = '
'; - - $res .= '
'; + $res = '
'; $res .= '
'; $res .= '

' . nl2br($intro['title']) . '

'; @@ -38,8 +16,14 @@ class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract { $res .= '
'; // .col-2 $res .= '
'; // .grid - $res .= '
'; // .content-wrapper + $res .= '
'; + + $res = $this->backgroundBlock($res, $intro); - return $res; + if ($intro['chapo']) { + $res .= $this->htmlElement(nl2br($intro['chapo']), 'blockquote'); + } + + return $this->htmlElement($res, 'section', array('class' => 'intro')); } } \ No newline at end of file diff --git a/framework/application/views/scripts/templates/exemples.phtml b/framework/application/views/scripts/templates/exemples.phtml index 8341ac0..1968de5 100644 --- a/framework/application/views/scripts/templates/exemples.phtml +++ b/framework/application/views/scripts/templates/exemples.phtml @@ -1,3 +1,3 @@ introBlock($this->intro, ''); -echo $this->exemples(1, $this->title); \ No newline at end of file +echo $this->exemples($this->category, $this->title); \ No newline at end of file diff --git a/framework/application/views/scripts/templates/exemplessub.phtml b/framework/application/views/scripts/templates/exemplessub.phtml new file mode 100644 index 0000000..f88dbb9 --- /dev/null +++ b/framework/application/views/scripts/templates/exemplessub.phtml @@ -0,0 +1,4 @@ +introBlock($this->intro, ''); +echo $this->exemples($this->category, $this->title); +echo $this->contactFooter(); \ No newline at end of file diff --git a/js/002-common.js b/js/002-common.js index 9e87edd..d5b02ce 100644 --- a/js/002-common.js +++ b/js/002-common.js @@ -16,7 +16,6 @@ function resize() { $('main').css('min-height', mainHeight); - // Handle divs with background images that must have a proportional min-height $('[data-bg-ratio]').each(function() { $(this).css('min-height', Math.round($(this).outerWidth() * $(this).data('bg-ratio'))); diff --git a/js/102-intro.js b/js/102-intro.js new file mode 100644 index 0000000..94a4cb7 --- /dev/null +++ b/js/102-intro.js @@ -0,0 +1,5 @@ +registerLoader(load_intro); + +function load_intro(){ + +} diff --git a/less/001-variables.less b/less/001-variables.less index 3800b5b..b84d9b4 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -2,6 +2,7 @@ @opensans: 'Open Sans', sans-serif; @playfair: 'Playfair Display', serif; @montserrat: 'Montserrat', sans-serif; +@icons: 'fluidbook'; //-- General Fonts @heading-font: @playfair; diff --git a/less/002-common.less b/less/002-common.less index 753d6ba..6a88247 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -40,12 +40,9 @@ a { .content-wrapper { width: 100%; - padding-top: 5%; + padding-top: 4%; padding-bottom: 5%; - &:first-of-type { - padding-top: 152px; // Minimum clearance and top for fixed menu - } } .no-shrink { @@ -96,6 +93,8 @@ a { flex-basis: percentage(6/6); } -.intro { - background-size: 1680px auto; +.dotclear { + ul { + .list(); + } } \ No newline at end of file diff --git a/less/003-mixins.less b/less/003-mixins.less index f7f76d2..b466aff 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -20,6 +20,8 @@ font-family: @montserrat; font-weight: 300; text-transform: uppercase; + text-decoration: none; + text-align: center; cursor: pointer; } @@ -46,17 +48,23 @@ } .border-button-fill(@border-color,@color-text) { + .button(); transition: all 200ms; - border-color: @border-color; + border: 1px solid @border-color; color: @border-color; &:hover { - background-color:@border-color; + background-color: @border-color; color: @color-text; } } + &:active { + background-color: darken(@border-color, 2%); + border-color: darken(@border-color, 2%); + } +} .background-button(@base-color) { transition: all 200ms; @@ -87,4 +95,16 @@ height: 1px; background-color: #343c44; } +} + +.list() { + list-style: none; + li { + &:before { + content: '>'; + font-family: @icons; + margin-right: 0.8em; + font-size: 0.7em; + } + } } \ No newline at end of file diff --git a/less/010-admin.less b/less/010-admin.less index e288793..fb82d62 100644 --- a/less/010-admin.less +++ b/less/010-admin.less @@ -1,6 +1,7 @@ @import "000-imports"; #adminBar{ position: fixed; + z-index: 11; top:0px; left:0px; background-color:@color-footer-bg-secondary; @@ -14,7 +15,3 @@ } } } - -header { - top:25px !important; -} \ No newline at end of file diff --git a/less/102-intro.less b/less/102-intro.less new file mode 100644 index 0000000..d6b31d8 --- /dev/null +++ b/less/102-intro.less @@ -0,0 +1,19 @@ +@import "000-imports"; + +.intro { + .content-wrapper { + background-size: 1680px auto; + padding-top: 152px; // Minimum clearance and top for fixed menu + } + + blockquote { + background-color: #f3f3f3; + padding: 60px 20%; + color: #343c44; + font-family: @opensans; + font-weight: 300; + font-size: 22px; + text-align: center; + line-height: 35px; + } +} \ No newline at end of file diff --git a/less/103-contact-footer.less b/less/103-contact-footer.less new file mode 100644 index 0000000..b2c38b5 --- /dev/null +++ b/less/103-contact-footer.less @@ -0,0 +1,22 @@ +@import "000-imports"; + +.contactFooter { + .content-wrapper { + background-size: 1680px auto; + } + + .buttons { + margin-top: 50px; + a { + .border-button-fill(#343c44, #f3f3f3); + width: 220px; + margin-right: 20px; + + &.quoteLink { + color: #fff; + .background-button(#8aab41); + } + } + + } +} \ No newline at end of file diff --git a/less/220-exemples.less b/less/220-exemples.less index 9faff23..939d7bd 100644 --- a/less/220-exemples.less +++ b/less/220-exemples.less @@ -79,7 +79,7 @@ button{ color:#fff; border:1px solid #fff; - padding:16px 20px; + padding:0 20px; margin-left:20px; margin-top: 5px; -- 2.39.5