From 6c64388e55412ed4b29037a0184eceb7c7f6ec41 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Tue, 7 Feb 2017 10:37:36 +0100 Subject: [PATCH] First implementation of the layout and mobile navigation --- app/static/src/js/modules/lang-selector.js | 6 + app/static/src/sass/config/_colors.scss | 1 + app/static/src/sass/config/_config.scss | 2 +- app/static/src/sass/config/_variables.scss | 4 +- app/static/src/sass/global/_helpers.scss | 3 + app/static/src/sass/layout/_header.scss | 1 - app/static/src/sass/modules/_page.scss | 2 +- app/static/src/sass/modules/_sidebar.scss | 4 + .../src/sass/modules/navs/_nav-header.scss | 209 ++++++++++++++---- app/static/src/sass/vendors/_pushy.scss | 4 + app/templates/base.html | 7 +- app/templates/home/inc/bio.html | 6 +- app/templates/includes/footer.html | 2 +- app/templates/includes/languages.html | 23 +- app/templates/includes/sidebar.html | 32 --- app/templates/index.html | 9 - app/templates/pages/menus/header.html | 11 +- 17 files changed, 204 insertions(+), 122 deletions(-) diff --git a/app/static/src/js/modules/lang-selector.js b/app/static/src/js/modules/lang-selector.js index 8b252a6f..23bbf447 100644 --- a/app/static/src/js/modules/lang-selector.js +++ b/app/static/src/js/modules/lang-selector.js @@ -49,6 +49,12 @@ LangSelector.prototype.init = function() { }); + $('[data-lang]').click(function() { + + that.changeLanguage($(this).attr('data-lang')); + + }); + }; LangSelector.prototype.changeLanguage = function(lang) { diff --git a/app/static/src/sass/config/_colors.scss b/app/static/src/sass/config/_colors.scss index 595005b4..628e9d84 100755 --- a/app/static/src/sass/config/_colors.scss +++ b/app/static/src/sass/config/_colors.scss @@ -37,3 +37,4 @@ $color-black: #1D1D1B; $color-black-light: #343432; $color-background: #000F24; +$color-accent: #FF203C; diff --git a/app/static/src/sass/config/_config.scss b/app/static/src/sass/config/_config.scss index ad709bbb..665b2f32 100644 --- a/app/static/src/sass/config/_config.scss +++ b/app/static/src/sass/config/_config.scss @@ -21,7 +21,7 @@ // Layout $header-pre-height: 34px; -$header-height: 78px; +$header-height: 45px; $header-height-tablet: 70px; $header-height-mobile: 70px; $sidenav-width-tablet: 450px; diff --git a/app/static/src/sass/config/_variables.scss b/app/static/src/sass/config/_variables.scss index 055f833d..6e66a6c0 100755 --- a/app/static/src/sass/config/_variables.scss +++ b/app/static/src/sass/config/_variables.scss @@ -30,8 +30,8 @@ $breakpoints: ( xxs: 0px, xs: 752px, sm: 972px, - md: 1072px, - lg: 1372px + md: 1172px, + lg: 1440px ); $grid-columns: 16; diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss index 24d52bdd..6f5d3f53 100755 --- a/app/static/src/sass/global/_helpers.scss +++ b/app/static/src/sass/global/_helpers.scss @@ -206,6 +206,9 @@ .lh1 { @include line-height(1); } +.lh5 { + @include line-height(1.5); +} .lh2 { @include line-height(2); } diff --git a/app/static/src/sass/layout/_header.scss b/app/static/src/sass/layout/_header.scss index c332d87e..ff7d4beb 100755 --- a/app/static/src/sass/layout/_header.scss +++ b/app/static/src/sass/layout/_header.scss @@ -32,7 +32,6 @@ $module: ".header"; left: 0; z-index: 100; height: $header-height-tablet; - overflow: hidden; @include mq($until: xs) { height: $header-height-mobile; } diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss index 41f6e32c..d1f43574 100644 --- a/app/static/src/sass/modules/_page.scss +++ b/app/static/src/sass/modules/_page.scss @@ -226,7 +226,7 @@ $module: ".page"; &--accent { - background-color: white; + background-color: $color-accent; color: $color-background; text-align: center; font-family: $serif; diff --git a/app/static/src/sass/modules/_sidebar.scss b/app/static/src/sass/modules/_sidebar.scss index 686b0a8b..4f05e4d6 100644 --- a/app/static/src/sass/modules/_sidebar.scss +++ b/app/static/src/sass/modules/_sidebar.scss @@ -23,6 +23,10 @@ $module: ".sidebar"; #{$module} { @include padding-bottom(1); + /* Rectangle 2: */ + background-image: -webkit-linear-gradient(bottom, rgba(79,227,194,0.00) 0%, rgba(80,227,194,0.30) 100%); + background-image: -o-linear-gradient(bottom, rgba(79,227,194,0.00) 0%, rgba(80,227,194,0.30) 100%); + background-image: linear-gradient(to top, rgba(79,227,194,0.00) 0%, rgba(80,227,194,0.30) 100%); &__menu { diff --git a/app/static/src/sass/modules/navs/_nav-header.scss b/app/static/src/sass/modules/navs/_nav-header.scss index ec3b05f5..1d5e61c0 100644 --- a/app/static/src/sass/modules/navs/_nav-header.scss +++ b/app/static/src/sass/modules/navs/_nav-header.scss @@ -25,9 +25,9 @@ $module: ".nav-header"; list-style-type: none; margin: 0; padding: 0; - text-align: center; + text-align: left; - @include margin(.5 0); + @include margin(.5 0 0 0); @include mq($until: sm) { @include margin(0); @@ -40,7 +40,7 @@ $module: ".nav-header"; vertical-align: top; position: relative; - &:after { + &:before { content: ""; display: block; height: $header-height; @@ -48,13 +48,47 @@ $module: ".nav-header"; background: black; position: absolute; top: 0; - right: -1px; + left: -1px; + + @include margin-right(.5); - @include margin-left(.5); + @include mq($until: lg) { + height: $header-height - 10px; + } + } + + &--no-separator { + &:before { + display: none; + } + } + + &--separator { + @include padding-left(1.5); + &:before { + @include margin(0 1); + } + + @include mq($until: md) { + @include padding-left(1); + &:before { + @include margin(0 .5); + } + } } &:first-child { display: none; + z-index: 3; + &:before { + display: none; + } + } + + &:nth-child(2) { + &:before { + display: none; + } } &:last-child { @@ -82,7 +116,58 @@ $module: ".nav-header"; }*/ } + &--image-big { + vertical-align: top; + @include margin(0 1 0 2.5); + @include padding-right(.50); + + @include mq($until: lg) { + height: $header-height - 10px; + img { + width: 200px; + } + } + @include mq($until: md) { + height: $header-height - 10px; + img { + width: 160px; + } + } + + @include mq($until: sm) { + position: absolute; + top: 20px; + left: 0; + width: 100%; + z-index: 2; + @include padding(0); + @include margin(0); + text-align: center; + img { + width: auto; + height: 70px; + display: block; + margin: 0 auto; + } + } + + @include mq($until: xs) { + + img { + width: 200px; + height: auto; + display: block; + margin: 0 auto; + } + + } + + height: $header-height; + + } + &--special { + z-index: 3; vertical-align: top; @include margin(0 0 0 .5); @include padding-right(.5); @@ -94,18 +179,28 @@ $module: ".nav-header"; } &--centered { - line-height: $header-height; + z-index: 3; + line-height: $header-height - 10px; + @include mq($until: lg) { + line-height: $header-height - 13px; + } @include mq($until: sm) { line-height: $header-height-tablet; - height: $header-height-tablet; + height: $header-height-tablet - 10px; } @include mq($until: xs) { line-height: $header-height-mobile; - height: $header-height-mobile; + height: $header-height-mobile - 10px; } } + &--right { + + float: right; + + } + &.hover { &:before { content: ""; @@ -152,44 +247,66 @@ $module: ".nav-header"; &__item-link { - text-transform: lowercase; - color: inherit; + text-transform: uppercase; + color: $color-background; text-decoration: none; position: relative; z-index: 4; vertical-align: top; - @include font-size(xl); + @include font-size(l); @include line-height($header-pre-height); @include typeface(sans-serif); @include padding-right(1); - @include mq($until: md) { + @include mq($until: lg) { + @include font-size(m); @include padding-right(.75); } - /*@include mq($until: lg) { - @include font-size(l); - }*/ + @include mq($until: md) { + @include font-size(s); + @include padding-right(.5); + } + &:before { - display: inline; + display: inline-block; content: '.'; vertical-align: top; + @include margin-right(.25); + } + + &--no-dot { + + @include padding-right(.25); + font-weight: weight(light); + + &:before { + content: ''; + } + + &.active { + font-weight: weight(regular); + &:after { + display: none !important; + } + } + } &.active { &:after { position: absolute; - height: 40%; + height: 80%; display: block; - top: 30%; - left: 1px; + top: 10%; + left: 0px; content: ""; - background: #F8E71C; + background: $color-main; z-index: -1; - right: 0px; + right: 1px; } } @@ -392,31 +509,19 @@ $module: ".nav-header"; display: none; } - &:nth-child(2) { - @include margin-bottom(1.5); - } - - &:nth-child(6) { - @include margin-bottom(0); - &:after { - - display: block; - position: static; - content: ""; - background: #979797; - width: 240px; - height: 1px; - @include margin(1.5 0 .5 0); - - } - } - &.hover { &:before { display: none; } } + &--image-big { + position: static; + height: auto; + margin-top: 10px; + @include margin-bottom(3); + } + &--special { display: inline-block; @@ -444,15 +549,33 @@ $module: ".nav-header"; } } + &--right { + float: none; + } + + &--separator { + @include margin-top(3); + @include padding(0); + } + + &:before { + display: none; + } + } &__item-link { - color: black; - @include font-size(xxl); + color: $color-background; + @include font-size(l); &:hover { - color: black; + color: $color-background; + } + + &--no-dot { + display: inline-block; + width: auto; } } diff --git a/app/static/src/sass/vendors/_pushy.scss b/app/static/src/sass/vendors/_pushy.scss index 0f91cf14..b81b1d6a 100644 --- a/app/static/src/sass/vendors/_pushy.scss +++ b/app/static/src/sass/vendors/_pushy.scss @@ -33,6 +33,10 @@ padding: 0; } + ul:first-child { + margin-top: 0; + } + } .pushy-left { diff --git a/app/templates/base.html b/app/templates/base.html index a465b3f3..f08c4680 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -50,14 +50,11 @@
-
+
-
- {% include "includes/languages.html" %} -
@@ -70,6 +67,8 @@ {% block content_footer %}{% endblock %} + {% include "twitter/tweets.html" %} +
{% include "includes/footer.html" %}
diff --git a/app/templates/home/inc/bio.html b/app/templates/home/inc/bio.html index 078d45d1..a38f30c8 100644 --- a/app/templates/home/inc/bio.html +++ b/app/templates/home/inc/bio.html @@ -2,12 +2,8 @@
-
+
{{ host_organization.bio|safe }} -

hello

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus blanditiis ullam inventore nesciunt cumque rem. Nostrum debitis perferendis sed soluta molestiae. Commodi quis repudiandae voluptates delectus, laudantium libero corporis tenetur! -

diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html index f93ef068..4ca6e837 100644 --- a/app/templates/includes/footer.html +++ b/app/templates/includes/footer.html @@ -29,7 +29,7 @@
- {% include 'pages/page/includes/linked_organization_footer.html' %} + NEWSLETTER HERE
diff --git a/app/templates/includes/languages.html b/app/templates/includes/languages.html index eba0fbd8..a4232f53 100644 --- a/app/templates/includes/languages.html +++ b/app/templates/includes/languages.html @@ -3,24 +3,7 @@ {% nevercache %} {% include "includes/language_selector.html" %} {% endnevercache %} - + {% for language in languages %} + {{ language.code|title }} + {% endfor %} {% endif %} diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html index db5f589c..d3fbd0e1 100644 --- a/app/templates/includes/sidebar.html +++ b/app/templates/includes/sidebar.html @@ -3,37 +3,5 @@
{% page_menu "pages/menus/header.html" %} - {% page_menu "pages/menus/action.html" %} - - - -
diff --git a/app/templates/index.html b/app/templates/index.html index 38313b9c..39407d8e 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -13,19 +13,10 @@ {% block main %} -
- {% page_menu "pages/menus/header.html" %} -
- {% include "home/inc/slider.html" %} {% include "home/inc/body.html" %} -
-
- {% page_menu "pages/menus/header.html" %} -
- {% include "home/inc/bio.html" %} {% include "home/inc/services.html" %} diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html index 8818f8a3..aa46ff85 100644 --- a/app/templates/pages/menus/header.html +++ b/app/templates/pages/menus/header.html @@ -11,12 +11,12 @@ -
  • +
  • {% with host_organization.images|get_type:"logo_header" as images %} {% if images %} {% with images|first as img %} - + {% endwith %} {% endif %} {% endwith %} @@ -42,9 +42,14 @@ {% endif %} {% if page.is_primary %} {% if forloop.last %} -
  • + +
  • + {% include "includes/languages.html" %} +
    • +
    • + {% endif %} {% endif %} -- 2.39.5