From: vincent@cubedesigners.com Date: Thu, 7 Jul 2016 17:13:21 +0000 (+0000) Subject: wip #539 @6 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2685d7a57e9f73200c41b72cbf4034b0ac8b83f6;p=fluidbook-v3.git wip #539 @6 --- diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index 45bbca9..adde5c0 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -14,7 +14,7 @@ if (!is_null($homepage)) { $header = $this->headerLogo(); $header .= $this->headerNav(); $header .= $this->headerContactNav(); -$header .= '
'; +$header .= '
'; $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 diff --git a/js/101-header.js b/js/101-header.js index c13f7b5..36a01ed 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -13,18 +13,20 @@ function load_header() { htl = new TimelineMax(); // Background-color & height htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 75}), 0); + htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'transparent', boxShadow: '0 0 0 rgba(0,0,0,0)'}, {backgroundColor: "#fff", boxShadow: '0 0 120px rgba(0,0,0,0.3)'}), 1); htl.add(TweenMax.fromTo($(h).find('#header'), 1.5, {height: 90}, {height: 56}), 0); + // Logo var logo = $(h).find('.logo'); - htl.add(TweenMax.fromTo($(logo), 1.5, {top: 35}, {top: 12}), 0); + htl.add(TweenMax.fromTo($(logo), 1, {top: 35}, {top: 12}), 0); // Navigation var nav = $(h).find('#menu'); htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0); //Typo logo - htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 1.5); + htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 0); // Menu position - htl.add(TweenMax.fromTo(nav, 1, {left: '50%'}, {left: 312}), 2); - htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'transparent', boxShadow: '0 0 0 rgba(0,0,0,0)'}, {backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: '0 0 120px rgba(0,0,0,0.3)'}), 2); + htl.add(TweenMax.fromTo(nav, 1, {left: '43.5%'}, {left: 312}), 2); + htl.stop(); $(window).on('cubeitresize', resizeHeader); @@ -36,7 +38,9 @@ function load_header() { } function resizeHeader() { - headerScroll(); + setTimeout(function () { + headerScroll(); + }, 100); } @@ -53,7 +57,10 @@ function headerScroll() { if (formerScroll < s) { goingUp = false; } - var adminHeight = $("#adminBar").outerHeight(); + var adminHeight = 0; + if ($("#adminBar:visible").length > 0) { + adminHeight = $("#adminBar").outerHeight() + } var headerHeight = $("header").outerHeight() * zoom; if (scrollUp != goingUp) { lastDirChange = s; diff --git a/less/001-variables.less b/less/001-variables.less index dc99949..8142d5d 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -26,4 +26,12 @@ @content-max-width: 1680px; // -- transition times -@transition-time-buttons:200ms; \ No newline at end of file +@transition-time-buttons: 200ms; + +//-- Break points +@m1280: ~"(max-width: 1280px)"; +@m1024: ~"(max-width: 1024px)"; +@m900: ~"(max-width: 900px)"; +@m768: ~"(max-width: 768px)"; +@m640: ~"(max-width: 640px)"; +@m320: ~"(max-width: 320px)"; \ No newline at end of file diff --git a/less/010-admin.less b/less/010-admin.less index 25a4c86..1f4f8d2 100644 --- a/less/010-admin.less +++ b/less/010-admin.less @@ -14,6 +14,10 @@ color:#c00; } } + + @media @m1280{ + display: none; + } } diff --git a/less/101-header.less b/less/101-header.less index d2a3f3c..16228e2 100644 --- a/less/101-header.less +++ b/less/101-header.less @@ -15,12 +15,26 @@ header { padding: 0 5%; vertical-align: bottom; + @media @m1280 { + height: 75px !important; + } + + @media @m900 { + height: 96px !important; + } + + @media @m320 { + height: 50px !important; + } #header { height: 90px; width: 100%; position: relative; transform-origin: 0 0 0; + @media @m1280 { + height: 56px !important; + } } nav { @@ -42,18 +56,29 @@ header { display: inline-block; } } - } nav#menu { position: relative; top: 57px; - left: 50%; + 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; @@ -68,6 +93,14 @@ header { margin: 0 25px; position: relative; + @media @m1024 { + margin: 0 15px; + } + + @media (max-width: 900px) { + margin: 0 7px; + } + > a { position: relative; &:after { @@ -118,14 +151,13 @@ header { margin: 10px 20px; - a{ + a { transition: @transition-time-buttons color; } &.active a, a:hover { border-bottom-color: transparent; color: #e86f68; - } } } @@ -138,19 +170,47 @@ header { 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; + } } } @@ -161,12 +221,41 @@ header { height: 50px; width: 220px; + @media @m1280 { + top: 12px !important; + } + + @media @m900 { + left: 50%; + margin-left: -110px; + top: 15px !important; + } + + @media @m768 { + transform: scale(0.75); + } + + @media @m320 { + transform: scale(0.5); + top: -5px !important; + } + .leave { position: absolute; top: 0; left: 0; } + .text { + @media @m1280 { + display: none; + } + @media @m900 { + display: block; + opacity: 1 !important; + } + } + .text-white, .text-dark { position: absolute; left: 35px; @@ -204,4 +293,45 @@ 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