From: vincent@cubedesigners.com Date: Fri, 8 Jul 2016 17:16:46 +0000 (+0000) Subject: wip #539 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=132f4ccca638f47738f095cb17bf4812b6f79f47;p=fluidbook-v3.git wip #539 @8 --- diff --git a/framework/application/views/helpers/HeaderContactNav.php b/framework/application/views/helpers/HeaderContactNav.php index e3af51f..e625ace 100644 --- a/framework/application/views/helpers/HeaderContactNav.php +++ b/framework/application/views/helpers/HeaderContactNav.php @@ -6,7 +6,7 @@ class Fluidbook_View_Helper_HeaderContactNav extends CubeIT_View_Helper_Abstract */ public function headerContactNav() { - $this->headScript()->addScriptAndStyle('315-quote'); // Needed for styling and handling the AJAX quote form + $res = array(); diff --git a/framework/application/views/helpers/LinkQuote.php b/framework/application/views/helpers/LinkQuote.php index 032f1a6..6c7bee6 100644 --- a/framework/application/views/helpers/LinkQuote.php +++ b/framework/application/views/helpers/LinkQuote.php @@ -5,6 +5,7 @@ class Fluidbook_View_Helper_LinkQuote extends CubeIT_View_Helper_Abstract { * @return string */ public function linkQuote($label) { + $this->headScript()->addScriptAndStyle('315-quote'); return $this->linkPopup($label, '/ajaxpopup/quoteForm', array('class' => 'quoteLink')); } } \ No newline at end of file diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index adde5c0..659d3e1 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -12,9 +12,7 @@ if (!is_null($homepage)) { } $header = $this->headerLogo(); -$header .= $this->headerNav(); -$header .= $this->headerContactNav(); -$header .= '
'; +$header .= $this->render('common/nav.phtml'); $header = $this->htmlElement($header, 'div', array('id' => 'header', 'class' => 'content')); -echo $this->htmlElement($header, 'header', array('class' => $this->headerClass)); \ No newline at end of file +echo $this->htmlElement($header, 'header', array('id' => 'h', 'class' => CubeIT_Util_Array::merge($this->headerClass, 'fixed'))); \ No newline at end of file diff --git a/framework/application/views/scripts/common/nav.phtml b/framework/application/views/scripts/common/nav.phtml new file mode 100644 index 0000000..6f39b80 --- /dev/null +++ b/framework/application/views/scripts/common/nav.phtml @@ -0,0 +1,9 @@ +headScript() + ->addMMenu() + ->addScriptAndStyle('104-nav'); + +$nav = $this->headerNav(); +$nav .= $this->headerContactNav(); +$nav .= ''; +echo $nav; \ No newline at end of file diff --git a/js/002-common.js b/js/002-common.js index 4fbb3da..8e7c6b0 100644 --- a/js/002-common.js +++ b/js/002-common.js @@ -30,7 +30,12 @@ function setZoom(ww) { if (ww >= 1680) { zoom = ww / 1680; } - $('#z,header').css('transform', 'scale(' + zoom + ')'); + var transform = ''; + if (zoom > 1) { + transform = 'scale(' + zoom + ')'; + } + + $('#z,header').css('transform', transform); } \ No newline at end of file diff --git a/js/101-header.js b/js/101-header.js index 36a01ed..4a9db39 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -8,7 +8,7 @@ var htl; registerLoader(load_header, true); function load_header() { - var h = $('header'); + var h = $('#h'); htl = new TimelineMax(); // Background-color & height @@ -46,7 +46,7 @@ function resizeHeader() { function headerScroll() { var s = $(window).scrollTop(); - var h = $('header'); + var h = $('#h'); // If no move since last call, nothing to do if (s == formerScroll) { @@ -61,7 +61,7 @@ function headerScroll() { if ($("#adminBar:visible").length > 0) { adminHeight = $("#adminBar").outerHeight() } - var headerHeight = $("header").outerHeight() * zoom; + var headerHeight = $(h).outerHeight() * zoom; if (scrollUp != goingUp) { lastDirChange = s; scrolledDistance = 0; @@ -89,7 +89,11 @@ function headerScroll() { } } // Normalize top value - $("header").css('top', Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight))); + var top = Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight)); + $(h).css('top', top); + var icon = $("#nav-icon"); + $(icon).css('top', ''); + $(icon).css('top', parseInt($(icon).css('top')) + top); // Update formerScroll = s; scrollUp = goingUp; diff --git a/js/104-nav.js b/js/104-nav.js new file mode 100644 index 0000000..16ad0ae --- /dev/null +++ b/js/104-nav.js @@ -0,0 +1,80 @@ +registerLoader(load_nav, true); + +function load_nav() { + var menu = ''; + $("body").append(menu); + + var mdup = ''; + $("#menu,#contactnav").find('>ul>li').each(function () { + mdup += $(this)[0].outerHTML; + }); + + $("#mmenu>ul").append(mdup); + + var social = []; + + $(".footer-social a").each(function () { + social.push($(this)[0].outerHTML); + }); + + fb(social); + + + $("#mmenu").mmenu({ + offCanvas: { + position: "left", + zposition: "front" + }, + + dragOpen: { + open: true, + maxStart: 50, + threshold: 0, + }, + dragClose: { + close: true, + }, + extensions: [ + "pagedim-black" + ], + navbars: [ + { + "position": "bottom", + "content": social, + } + ] + }, { + dragOpen: { + width: { + perc: 1, + min: 320, + max: 610, + } + }, + classNames: { + fixedElements: { + fixed: "header" + } + } + }); + var mmenu = $('#mmenu').data('mmenu'); + + $("#nav-icon").on('click', function () { + if ($("html").hasClass('mm-opened')) { + mmenu.close(); + } else { + mmenu.open(); + } + return false; + }); + + // Remove navbar label when it's just a "menu" + $(".mm-navbar").each(function () { + if ($(this).find('a[href]').length == 0) { + $(this).parent().removeClass('mm-hasnavbar'); + $(this).remove(); + } + }); + + $("body").prepend($("#nav-icon")); +} \ No newline at end of file diff --git a/less/002-common.less b/less/002-common.less index e458e8a..ad0664f 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -9,7 +9,7 @@ html { } body { - background-color: @color-body-bg; + background-color: #fff; font-family: @body-font; font-size: 14px; line-height: 26/14; diff --git a/less/101-header.less b/less/101-header.less index 16228e2..54920d7 100644 --- a/less/101-header.less +++ b/less/101-header.less @@ -1,12 +1,14 @@ @import "000-imports"; -header { +header#h { + transition: left 0.4s ease 0s; + position: fixed; top: 0px; - //left: 50%; z-index: 10; transform-origin: 0 0 0; + height: 90px; width: 100%; max-width: @content-max-width; @@ -23,8 +25,8 @@ header { height: 96px !important; } - @media @m320 { - height: 50px !important; + @media @m768 { + height: 68px !important; } #header { @@ -37,189 +39,17 @@ header { } } - nav { - font-family: @montserrat; - font-weight: 300; - a { - text-transform: uppercase; - text-decoration: none; - font-size: 12px; - color: @color-header-grey; - - &:hover { - color: currentColor; - } - } - ul { - list-style: none; - li { - display: inline-block; - } - } - } - - nav#menu { - position: relative; - top: 57px; - left: 43.5%; - width: 800px; - margin-left: -400px; - - display: inline-block; - text-align: center; - @media @m1280 { - left: 312px !important; - top: 24px !important; - } - - @media @m1024 { - left: 270px !important; - } - - @media @m900 { - display: none; - } - - a { - line-height: 9px; - border: 1px solid transparent; - padding-bottom: 13px; - display: inline-block; - } - - > ul { - > li { - - margin: 0 25px; - position: relative; - - @media @m1024 { - margin: 0 15px; - } - - @media (max-width: 900px) { - margin: 0 7px; - } - - > a { - position: relative; - &:after { - content: ""; - height: 1px; - width: 0; - position: absolute; - background-color: @color-header-grey; - left: 0; - bottom: 0; - transition: @transition-time-buttons width; - } - } - - &.active > a, a:hover { - color: @color-header-grey; - &:after { - width: 100%; - } - } - &:hover { - > ul { - display: block; - } - } - - > ul { - position: absolute; - top: 40px; - left: -20px; - background-color: #fff; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); - white-space: nowrap; - display: none; - &:before { - content: ""; - background-color: transparent; - height: 20px; - width: 100%; - top: -20px; - left: 0px; - position: absolute; - } - - > li { - display: block; - text-align: left; - - margin: 10px 20px; - - a { - transition: @transition-time-buttons color; - } - - &.active a, a:hover { - border-bottom-color: transparent; - color: #e86f68; - } - } - } - } - } - } - - nav#contactnav { - position: absolute; - right: 0; - bottom: 1px; - - @media @m900 { - bottom: -10px; - } - - li { - margin-left: 19px; - @media (max-width: 900px ) { - margin-left: 10px; - } - } - a { - .rounded-button(); - &.quoteLink { - .background-button-green(); - color: #fff; - @media @m640 { - display: none; - } - } - &.agencies { - .border-button-fill(@color-header-grey, #c2c4c7, 5%); - @media @m900 { - display: none; - } - } - .smallarrow-button(10px, 30px, 10px, 7px); - - @media @m1024 { - padding-left: 15px; - padding-right: 15px; - } - - @media @m900 { - padding-left: 29px; - padding-right: 29px; - } - - @media @m768 { - padding-left: 15px; - padding-right: 15px; - } - } - } - .logo { position: absolute; display: inline-block; top: 35px; height: 50px; width: 220px; + transition: all 0.4s; + + //.mm-opening & { + // transform: translateX(440px); + //} @media @m1280 { top: 12px !important; @@ -232,12 +62,8 @@ header { } @media @m768 { - transform: scale(0.75); - } - - @media @m320 { - transform: scale(0.5); - top: -5px !important; + transform: scale(0.67); + top: 6px !important; } .leave { @@ -293,45 +119,4 @@ header { } } } - - .nav-icon { - display: none; - - height: 37px; - color: #343c44; - text-transform: uppercase; - font-family: @montserrat; - font-size: 12px; - line-height: 9px; - font-weight: 300; - cursor: pointer; - position: absolute; - left: 0px; - bottom: 1px; - - &:after { - content: "b"; - font-family: @icons; - text-transform: lowercase; - position: absolute; - top: 24px; - left: 0px; - font-size: 37px; - @media @m640 { - font-size: 30px; - top: 20px; - left:10px; - } - @media @m320 { - font-size: 18px; - top: 0px; - } - - } - - @media @m900 { - display: inline-block; - } - - } -} \ No newline at end of file +} diff --git a/less/102-footer.less b/less/102-footer.less index 52b17c2..3fb5ca3 100644 --- a/less/102-footer.less +++ b/less/102-footer.less @@ -14,11 +14,11 @@ footer { a { color: #fff; text-decoration: none; - transition: color 0.2s; + transition: color 0.2s; - &:hover { - color: @color-green; - } + &:hover { + color: @color-green; + } } } @@ -79,27 +79,6 @@ footer.site { } } - .social-link { - margin-right: 20px; - display: inline-block; - border-radius: 50%; - border: 1px solid #fff; - transition: all 0.25s; - - &:last-of-type { - margin-right: 0; - } - - &:hover { - background-color: currentColor; - border-color: currentColor; - } - - img { - display: block; - } - } - .workshop { text-align: right; @@ -127,6 +106,30 @@ footer.site { } } +.social-link { + margin-right: 20px; + display: inline-block; + border-radius: 50%; + border: 1px solid #fff; + transition: all 0.25s; + height: 54px; + width: 54px; + color: #fff; + + &:last-of-type { + margin-right: 0; + } + + &:hover { + background-color: currentColor; + border-color: currentColor; + } + + img { + display: block; + } +} + .footer-menu { line-height: 32/14; flex-grow: 2; diff --git a/less/104-nav.less b/less/104-nav.less new file mode 100644 index 0000000..f6f02fe --- /dev/null +++ b/less/104-nav.less @@ -0,0 +1,260 @@ +@import "000-imports"; + +nav { + font-family: @montserrat; + font-weight: 300; + a { + text-transform: uppercase; + text-decoration: none; + font-size: 12px; + color: @color-header-grey; + + &:hover { + color: currentColor; + } + } + ul { + list-style: none; + li { + display: inline-block; + } + } +} + +nav#menu { + position: relative; + top: 57px; + left: 43.5%; + width: 800px; + margin-left: -400px; + + display: inline-block; + text-align: center; + @media @m1280 { + left: 312px !important; + top: 24px !important; + } + + @media @m1024 { + left: 270px !important; + } + + @media @m900 { + display: none; + } + + a { + line-height: 9px; + border: 1px solid transparent; + padding-bottom: 13px; + display: inline-block; + } + + > ul { + > li { + + margin: 0 25px; + position: relative; + + @media @m1024 { + margin: 0 15px; + } + + @media (max-width: 900px) { + margin: 0 7px; + } + + > a { + position: relative; + &:after { + content: ""; + height: 1px; + width: 0; + position: absolute; + background-color: @color-header-grey; + left: 0; + bottom: 0; + transition: @transition-time-buttons width; + } + } + + &.active > a, a:hover { + color: @color-header-grey; + &:after { + width: 100%; + } + } + &:hover { + > ul { + display: block; + } + } + + > ul { + position: absolute; + top: 40px; + left: -20px; + background-color: #fff; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + white-space: nowrap; + display: none; + &:before { + content: ""; + background-color: transparent; + height: 20px; + width: 100%; + top: -20px; + left: 0px; + position: absolute; + } + + > li { + display: block; + text-align: left; + + margin: 10px 20px; + + a { + transition: @transition-time-buttons color; + } + + &.active a, a:hover { + border-bottom-color: transparent; + color: #e86f68; + } + } + } + } + } +} + +nav#contactnav { + position: absolute; + right: 0; + bottom: 1px; + + @media @m900 { + bottom: -10px; + } + + @media @m768 { + bottom: 5px; + } + + li { + margin-left: 19px; + @media (max-width: 900px ) { + margin-left: 10px; + } + } + a { + .rounded-button(); + &.quoteLink { + .background-button-green(); + color: #fff; + @media @m640 { + display: none; + } + } + &.agencies { + .border-button-fill(@color-header-grey, #c2c4c7, 5%); + @media @m900 { + display: none; + } + } + .smallarrow-button(10px, 30px, 10px, 7px); + + @media @m1024 { + padding-left: 15px; + padding-right: 15px; + } + + @media @m900 { + padding-left: 29px; + padding-right: 29px; + } + + @media @m768 { + padding-left: 15px; + padding-right: 15px; + } + } +} + +#nav-icon { + width: 31px; + height: 26px; + position: fixed; + transform: rotate(0deg); + cursor: pointer; + top: 36px; + left: 50px; + display: none; + z-index: 12; + + @media @m900 { + display: block; + } + + @media @m768 { + width: 18px; + height: 18px; + top: 25px; + left: 25px; + } + + span { + display: block; + position: absolute; + height: 2px; + width: 100%; + background: #2a3743; + border-radius: 0px; + opacity: 1; + left: 0; + transform: rotate(0deg); + transition: .25s ease-in-out; + + &:nth-child(1) { + top: 0px; + } + &:nth-child(2) { + top: 12px; + @media @m768 { + top: 8px; + } + } + + &:nth-child(3) { + top: 24px; + @media @m768 { + top: 16px; + } + } + } + + .mm-opened & { + span { + &:nth-child(1) { + top: 12px; + transform: rotate(135deg); + @media @m768 { + top: 8px; + } + } + &:nth-child(2) { + opacity: 0; + left: -30px; + } + &:nth-child(3) { + top: 12px; + transform: rotate(-135deg); + @media @m768 { + top: 8px; + } + } + } + } +} + +@import "105-mmenu"; \ No newline at end of file diff --git a/less/105-mmenu.less b/less/105-mmenu.less new file mode 100644 index 0000000..224b233 --- /dev/null +++ b/less/105-mmenu.less @@ -0,0 +1,150 @@ +@import "000-imports"; + +#mmenu { + border-top: 90px solid #fff; + z-index: 11; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + + @media @m768 { + border-top-width: 68px; + } +} + +.mm-menu { + background-color: #fff; +} + +html.mm-front #mm-blocker { + z-index: 10; +} + +#mm-0 { + transform: none !important; +} + +.mm-listview > li:not(.mm-divider)::after { + left: 9px; + right: 9px; + border-color: #d6d8da; +} + +.mm-listview > li > a, .mm-listview > li > span { + color: #343c44; + font-size: 12px; + padding: 20px 50px; + @media @m768 { + padding: 20px 25px; + } + transition: color @transition-time-buttons; + &:hover { + color: #86a542; + } +} + +.mm-listview .mm-next::before { + border-left-width: 0; +} + +.mm-arrow::after, .mm-next::after { + right: 45px; +} + +.mm-arrow, .mm-next, .mm-prev { + &:after { + content: ">"; + border: 0; + font-family: @icons; + color: #343c44; + transform: translate3d(0, 0, 0); + font-size: 20px; + top: -10px; + } + &:hover { + &:after { + color: #86a542; + } + } +} + +.mm-prev { + &:before { + border: 0; + } + &:after { + content: "<"; + } +} + +.mm-navbar { + left: 9px; + right: 9px; + height: 60px; + padding-left: 0; + padding-right: 0; + + .mm-prev { + display: none; + } + + .mm-title { + font-size: 12px; + padding: 20px 20px 20px 60px; + @media @m768 { + padding: 20px; + } + text-align: left; + color: #a5acb2; + top: -5px; + position: relative; + + &:before { + content: "<"; + font-family: @icons; + font-size: 22px; + position: relative; + left: -22px; + top: 5px; + + @media @m768 { + left: -10px; + } + } + } + + &:hover { + + .mm-title { + color: #86a542 !important; + } + } +} + +.mm-panels > .mm-panel > .mm-navbar + .mm-listview { + margin-top: 0px; +} + +.mm-panel > *:first-child { + + &:before { + content: ""; + position: absolute; + border-top: 1px solid #d6d8da; + left: 9px; + right: 9px; + top: 0; + display: block; + } +} + +.mm-panel > .mm-navbar:first-child { + &:before { + left: 0; + right: 0; + } +} + +#mmenu { + .social-link { + color: #a5acb2; + } +}