]> _ Git - fluidbook-v3.git/commitdiff
projects / fluidbook-v3.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: b721517)
Contact page and general CSS structure WIP #486 @6.5
authorstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Mon, 27 Jun 2016 17:41:09 +0000 (17:41 +0000)
committerstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Mon, 27 Jun 2016 17:41:09 +0000 (17:41 +0000)
framework/application/views/scripts/common/body.phtml [new file with mode: 0644] patch | blob
framework/application/views/scripts/templates/contact.phtml patch | blob | history
js/002-common.js patch | blob | history
less/001-variables.less patch | blob | history
less/002-common.less patch | blob | history
less/003-mixins.less patch | blob | history
less/101-header.less patch | blob | history
less/102-footer.less patch | blob | history
less/310-contact.less patch | blob | history

diff --git a/framework/application/views/scripts/common/body.phtml b/framework/application/views/scripts/common/body.phtml
new file mode 100644 (file)
index 0000000..cc5961b
--- /dev/null
+++ b/framework/application/views/scripts/common/body.phtml
@@ -0,0 +1,17 @@
+<?php
+
+/* @var $this Zend_View */
+
+$bodyClass = $this->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 '<body class="' . trim($class) . '">' . "\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" . '</body>' . "\n";
diff --git a/framework/application/views/scripts/templates/contact.phtml b/framework/application/views/scripts/templates/contact.phtml
index 6150ce34b876bb50747cb90b227a266af6d8fd87..90fc73af60298c3db935d24d39545f44675fcd34 100644 (file)
--- 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');
 \r
 $intro_image_path = CubeIT_View_Helper_ImageCms::getPath($this->intro_bg_image);\r
 \r
-// Work out the min-height based on the ratio of the image\r
+// Work out the ratio of the background image\r
 CubeIT_Image::getDimensions($intro_image_path, $intro_image_width, $intro_image_height);\r
-$intro_min_height = (($intro_image_height / $intro_image_width) * 100) .'vw'; // viewport-width units\r
+$intro_ratio = $intro_image_height / $intro_image_width;\r
+\r
+$res .= '<div class="contact-intro content-wrapper" \r
+              style="background-image: url('. $intro_image_path .');"\r
+              data-bg-ratio="'. $intro_ratio .'">';\r
 \r
-$res .= '<div class="contact-intro" \r
-              style="background-image: url('. $intro_image_path .');\r
-              min-height: '. $intro_min_height .'">';\r
-$res .= '<div class="content-wrapper">';\r
 $res .= '<h1 class="title">'. nl2br($this->intro_title) .'</h1>';\r
 $res .= $this->markupDotclear($this->intro_content);\r
-$res .= '</div>'; // .content-wrapper\r
+\r
+// Address\r
+$address = $this->option('address');\r
+$locale = new Zend_Locale();\r
+$country = strtoupper($locale->getTranslation($address['pays'], 'Territory'));\r
+$res .= '<address>';\r
+$res .= '<h4>'. $address['company'] .'</h4>';\r
+$res .= $address['adresse'];\r
+$res .= '<br>';\r
+$res .= "{$address['code_postal']} {$address['ville']} - $country";\r
+$res .= '<br>';\r
+$res .= __('Tél :') . ' ' . $this->linkPhone($address['phone']);\r
+$res .= '<br>';\r
+$res .= __('email :') . ' ' . $this->linkEmail($address['email']);\r
+$res .= '</address>';\r
+\r
 $res .= '</div>'; // .contact-intro\r
 \r
 echo $res;
\ No newline at end of file
diff --git a/js/002-common.js b/js/002-common.js
index 40f5236e27e1c02b6755c6c9f701206f21b94a94..9e87edd0ff03956e49bbc0de7f453e35d889246d 100644 (file)
--- a/js/002-common.js
+++ b/js/002-common.js
@@ -15,4 +15,10 @@ function resize() {
     });\r
 \r
     $('main').css('min-height', mainHeight);\r
+\r
+\r
+    // Handle divs with background images that must have a proportional min-height\r
+    $('[data-bg-ratio]').each(function() {\r
+        $(this).css('min-height', Math.round($(this).outerWidth() * $(this).data('bg-ratio')));\r
+    });\r
 }
\ No newline at end of file
diff --git a/less/001-variables.less b/less/001-variables.less
index 9ac9a12950f56df3cb8996195d840d6928fe4a06..a22a4ac7ecfde71e1405ebaa4b7706dcd3ccec35 100644 (file)
--- 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 6e3087be406a78efa44f39477a86d94d6a8227f9..d1db1d80e8ac4e13c1c0e682a65e89fb46877e49 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -5,26 +5,36 @@
 }\r
 \r
 body {\r
+       background-color: @color-body-bg;\r
        font-family: @body-font;\r
+       font-size: 14px;\r
+       line-height: 26/14;\r
 }\r
 \r
 main{\r
        background-color: #fff;\r
-       padding-top: 180px;\r
+       max-width: @content-max-width;\r
+       margin: 0 auto;\r
 }\r
 \r
 // Main heading style\r
 h1.title {\r
-       color: #343c44;\r
+       color: @color-text;\r
        font-family: @playfair;\r
        font-size: 60px;\r
        font-weight: 400;\r
+       line-height: 1.3;\r
+       .divider(85px);\r
+}\r
+\r
+a {\r
+       color: @color-text;\r
+       text-decoration: underline;\r
 }\r
 \r
 .content-wrapper {\r
        width: 100%;\r
        padding: 0 5%;\r
-       //max-width: @content-max-width;\r
 }\r
 \r
 .cubeit-content{\r
diff --git a/less/003-mixins.less b/less/003-mixins.less
index cc39248c4c8a45488a2c53d6fe6e2d626ceb311f..46a64cdaa91cb191dff0bb0dac7d0e85710ad8e6 100644 (file)
--- 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 7327b6455ce1d9df4c56a50a36902cf7c51c0e98..783759ce18ae15aeeb3809c5f51c74c6da70bb23 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -3,10 +3,12 @@
 header {\r
        position: fixed;\r
        top: 0px;\r
-       left: 0px;\r
+       left: 50%;\r
+       transform: translateX(-50%);\r
 \r
        height: 90px;\r
        width: 100%;\r
+       max-width: @content-max-width;\r
 \r
        color: @color-header-grey;\r
        padding: 0 5%;\r
diff --git a/less/102-footer.less b/less/102-footer.less
index 9856f90f32fe5ff7b3d14eb8daf05ea83be6094d..54e7ceac5bbfce4101af4bc28db076df5a6cba78 100644 (file)
--- 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 fb7f04cb0c324a8523e54624a4cf1a2674473c95..6551b487af6e29308e8d6063d11bd02cb166322c 100644 (file)
--- 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
Unnamed repository; edit this file 'description' to name the repository.