From f47f04ce8be9166e5a725d47fd2763025722a8ba Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Mon, 27 Jun 2016 17:41:09 +0000 Subject: [PATCH] Contact page and general CSS structure WIP #486 @6.5 --- .../views/scripts/common/body.phtml | 17 ++++++++++ .../views/scripts/templates/contact.phtml | 29 ++++++++++++----- js/002-common.js | 6 ++++ less/001-variables.less | 4 ++- less/002-common.less | 16 ++++++++-- less/003-mixins.less | 15 +++++++++ less/101-header.less | 4 ++- less/102-footer.less | 2 ++ less/310-contact.less | 31 +++++++++++++++++++ 9 files changed, 112 insertions(+), 12 deletions(-) create mode 100644 framework/application/views/scripts/common/body.phtml diff --git a/framework/application/views/scripts/common/body.phtml b/framework/application/views/scripts/common/body.phtml new file mode 100644 index 0000000..cc5961b --- /dev/null +++ b/framework/application/views/scripts/common/body.phtml @@ -0,0 +1,17 @@ +body_class . ' ' . $this->bodyClass; + +// Set body class name for current page to allow easier page-specific CSS +$class = isset($this->navigation()->view->currentPage) ? $this->navigation()->view->currentPage->getName() : ''; +$class.=' '.$bodyClass; + +echo '' . "\n"; +echo $this->bannerCookies(); +echo $this->render('admin/mockup.phtml'); +echo $this->render('admin/nav.phtml'); +echo $this->render('common/content.phtml'); +echo $this->render('ajax/loader.phtml'); +echo "\n" . '' . "\n"; diff --git a/framework/application/views/scripts/templates/contact.phtml b/framework/application/views/scripts/templates/contact.phtml index 6150ce3..90fc73a 100644 --- a/framework/application/views/scripts/templates/contact.phtml +++ b/framework/application/views/scripts/templates/contact.phtml @@ -4,17 +4,32 @@ $this->headScript()->addScriptAndStyle('310-contact'); $intro_image_path = CubeIT_View_Helper_ImageCms::getPath($this->intro_bg_image); -// Work out the min-height based on the ratio of the image +// Work out the ratio of the background image CubeIT_Image::getDimensions($intro_image_path, $intro_image_width, $intro_image_height); -$intro_min_height = (($intro_image_height / $intro_image_width) * 100) .'vw'; // viewport-width units +$intro_ratio = $intro_image_height / $intro_image_width; + +$res .= '
'; -$res .= '
'; -$res .= '
'; $res .= '

'. nl2br($this->intro_title) .'

'; $res .= $this->markupDotclear($this->intro_content); -$res .= '
'; // .content-wrapper + +// Address +$address = $this->option('address'); +$locale = new Zend_Locale(); +$country = strtoupper($locale->getTranslation($address['pays'], 'Territory')); +$res .= '
'; +$res .= '

'. $address['company'] .'

'; +$res .= $address['adresse']; +$res .= '
'; +$res .= "{$address['code_postal']} {$address['ville']} - $country"; +$res .= '
'; +$res .= __('Tél :') . ' ' . $this->linkPhone($address['phone']); +$res .= '
'; +$res .= __('email :') . ' ' . $this->linkEmail($address['email']); +$res .= '
'; + $res .= '
'; // .contact-intro echo $res; \ No newline at end of file diff --git a/js/002-common.js b/js/002-common.js index 40f5236..9e87edd 100644 --- a/js/002-common.js +++ b/js/002-common.js @@ -15,4 +15,10 @@ 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'))); + }); } \ No newline at end of file diff --git a/less/001-variables.less b/less/001-variables.less index 9ac9a12..a22a4ac 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -9,6 +9,8 @@ @body-font: @opensans; //-- Colours +@color-text: #343c44; +@color-body-bg: @color-text; @color-footer-bg-primary: #263340; @color-footer-bg-secondary: #161e26; @color-green: #8aab41; @@ -16,4 +18,4 @@ //-- Content and breakpoints @mobile-breakpoint: 1024px; -@content-max-width: 1512px; \ No newline at end of file +@content-max-width: 1680px; \ No newline at end of file diff --git a/less/002-common.less b/less/002-common.less index 6e3087b..d1db1d8 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -5,26 +5,36 @@ } body { + background-color: @color-body-bg; font-family: @body-font; + font-size: 14px; + line-height: 26/14; } main{ background-color: #fff; - padding-top: 180px; + max-width: @content-max-width; + margin: 0 auto; } // Main heading style h1.title { - color: #343c44; + color: @color-text; font-family: @playfair; font-size: 60px; font-weight: 400; + line-height: 1.3; + .divider(85px); +} + +a { + color: @color-text; + text-decoration: underline; } .content-wrapper { width: 100%; padding: 0 5%; - //max-width: @content-max-width; } .cubeit-content{ diff --git a/less/003-mixins.less b/less/003-mixins.less index cc39248..46a64cd 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -49,4 +49,19 @@ background-color: darken(@base-color, 2%); border-color: darken(@base-color, 2%); } +} + +.divider(@bottom-padding: 100px) { + position: relative; + padding-bottom: @bottom-padding; + + &:after { + content: ''; + position: absolute; + bottom: 50px; + left: 0; + width: 120px; + height: 1px; + background-color: #343c44; + } } \ No newline at end of file diff --git a/less/101-header.less b/less/101-header.less index 7327b64..783759c 100644 --- a/less/101-header.less +++ b/less/101-header.less @@ -3,10 +3,12 @@ header { position: fixed; top: 0px; - left: 0px; + left: 50%; + transform: translateX(-50%); height: 90px; width: 100%; + max-width: @content-max-width; color: @color-header-grey; padding: 0 5%; diff --git a/less/102-footer.less b/less/102-footer.less index 9856f90..54e7cea 100644 --- a/less/102-footer.less +++ b/less/102-footer.less @@ -2,6 +2,8 @@ footer { .font-thinning(); + max-width: @content-max-width; + margin: 0 auto; a { color: #fff; diff --git a/less/310-contact.less b/less/310-contact.less index fb7f04c..6551b48 100644 --- a/less/310-contact.less +++ b/less/310-contact.less @@ -1,5 +1,36 @@ +@import "000-imports"; + .contact-intro { background-repeat: no-repeat; background-position: bottom right; background-size: 100%; + + // Vertically centre content + display: flex; + flex-direction: column; + justify-content: center; + + .dotclear { + position: relative; + .divider(); + } + + h4 { + .font-thinning(); + color: @color-text; + font-family: @montserrat; + font-weight: 600; + font-size: 15px; + text-transform: uppercase; + margin-bottom: 10px; + } + + address { + font-style: normal; + + a { + text-decoration: none; + } + } + } \ No newline at end of file -- 2.39.5