From: Jérémy Fabre Date: Tue, 19 Jul 2016 13:15:56 +0000 (+0200) Subject: Update logo, language switcher and breadcrumb X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=6bdb68719ab4d8bc068a2f7c4e3facc72dff336e;p=mezzo.git Update logo, language switcher and breadcrumb --- diff --git a/app/static/src/assets/img/logo-ircam.png b/app/static/src/assets/img/logo-ircam.png new file mode 100644 index 00000000..7110541b Binary files /dev/null and b/app/static/src/assets/img/logo-ircam.png differ diff --git a/app/static/src/assets/img/logo-manifest.png b/app/static/src/assets/img/logo-manifest.png new file mode 100644 index 00000000..7b364f57 Binary files /dev/null and b/app/static/src/assets/img/logo-manifest.png differ diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index 0cdeb118..a55e5d1b 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -1,7 +1,9 @@ // // Require all the modules // +var LangSelector = require('./modules/lang-selector'); // // Init all the modules // +window[LangSelector] = new LangSelector(); diff --git a/app/static/src/js/modules/lang-selector.js b/app/static/src/js/modules/lang-selector.js new file mode 100644 index 00000000..954ae62c --- /dev/null +++ b/app/static/src/js/modules/lang-selector.js @@ -0,0 +1,51 @@ +var LangSelector = function() { + + this.$element = null; + + // + // Init + // + this.init(); + +}; + +LangSelector.prototype.init = function() { + + var that = this; + + that.$element = $('#langSelector'); + that.$element.find('li:first-child a').click(function(e) { + + e.preventDefault(); + that.$element.toggleClass('open'); + + if(that.$element.hasClass('open')) { + + that.$element.one('mouseleave', function() { + that.$element.removeClass('open'); + }) + + } + + return false; + + }); + + that.$element.find('li:not(:first-child) a').click(function(e) { + + e.preventDefault(); + that.changeLanguage($(this).attr('data-lang')); + return false; + + }); + +}; + +LangSelector.prototype.changeLanguage = function(lang) { + + $('#language_selector_select').val(lang); + $('#language_selector_form').submit(); + +} + +module.exports = LangSelector; diff --git a/app/static/src/sass/config/_colors.scss b/app/static/src/sass/config/_colors.scss index b576fbae..a6ec95a5 100755 --- a/app/static/src/sass/config/_colors.scss +++ b/app/static/src/sass/config/_colors.scss @@ -10,6 +10,7 @@ $color-soundcloud: #f50; $color-vimeo: #4bf; $color-youtube: #bb0000; +$color-white: #FFFFFF; $color-main: #F8E71C; $color-gray: #C3C3C3; $color-black: #1D1D1B; diff --git a/app/static/src/sass/config/_variables.scss b/app/static/src/sass/config/_variables.scss index 22e49328..a744d3e7 100755 --- a/app/static/src/sass/config/_variables.scss +++ b/app/static/src/sass/config/_variables.scss @@ -35,6 +35,7 @@ $headings-font-family: $primary-font-family; // Layout $header-pre-height: 34px; +$header-height: 78px; // Typey diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss index 2482a64d..8cba3fd8 100755 --- a/app/static/src/sass/global/_helpers.scss +++ b/app/static/src/sass/global/_helpers.scss @@ -65,3 +65,30 @@ display: none; } } +.ffss { + @include typeface(sans-serif); +} +.ffs { + @include typeface(serif); +} +.fsxxxl { + @include font-size(xxxl); +} +.fsxxl { + @include font-size(xxl); +} +.fsxl { + @include font-size(xl); +} +.fsl { + @include font-size(l); +} +.fsm { + @include font-size(m); +} +.fss { + @include font-size(s); +} +.fsxs { + @include font-size(xs); +} diff --git a/app/static/src/sass/layout/_header.scss b/app/static/src/sass/layout/_header.scss index 17f173b5..c53e71bf 100755 --- a/app/static/src/sass/layout/_header.scss +++ b/app/static/src/sass/layout/_header.scss @@ -10,4 +10,10 @@ $module: ".header"; } + &__nav { + + background: $color-white; + + } + } diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index 1baec8ae..e46c4217 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -1,7 +1,9 @@ // Navs @import "navs/nav-actions"; +@import "navs/nav-header"; @import 'breadcrumb'; +@import 'lang-switcher'; @import 'dashed'; @import 'dotted'; @import 'tag'; diff --git a/app/static/src/sass/modules/_breadcrumb.scss b/app/static/src/sass/modules/_breadcrumb.scss index e3b9a9f3..119a1532 100644 --- a/app/static/src/sass/modules/_breadcrumb.scss +++ b/app/static/src/sass/modules/_breadcrumb.scss @@ -6,6 +6,9 @@ $module: ".breadcrumb"; margin: 0; padding: 0; + background: white; + @include padding(0 1); + @include clearfix; @include font-size(xs); @include line-height(1); diff --git a/app/static/src/sass/modules/_lang-switcher.scss b/app/static/src/sass/modules/_lang-switcher.scss index 54a216b4..e7e08218 100644 --- a/app/static/src/sass/modules/_lang-switcher.scss +++ b/app/static/src/sass/modules/_lang-switcher.scss @@ -3,5 +3,66 @@ $module: ".lang-switcher"; #{$module} { list-style-type: none; + padding: 0; + margin: 0; + @include padding-right(.5); + + position: absolute; + top: 0; + right: .25rem; + + &__item { + + @include font-size(s); + @include line-height($header-pre-height); + @include typeface(sans-serif); + + @include padding(0 .5); + + text-transform: uppercase; + display: none; + + >a { + color: white; + } + + &.active { + display: block; + } + + } + + &.open { + + #{$module}__item { + + display: block; + background: $color-black; + + } + + &:after { + + @include transform(rotate(180deg)); + + } + + } + + &:after { + display: block; + content: '\f107'; + color: white; + position: absolute; + top: 0; + right: 0; + + font-family: FontAwesome; + font-size: 0.8em; + + @include line-height($header-pre-height); + @include margin-right(.5); + @include transition(all 0.2s ease-in-out); + } } diff --git a/app/static/src/sass/modules/navs/_nav-header.scss b/app/static/src/sass/modules/navs/_nav-header.scss new file mode 100644 index 00000000..825d7f17 --- /dev/null +++ b/app/static/src/sass/modules/navs/_nav-header.scss @@ -0,0 +1,76 @@ +$module: ".nav-header"; + +#{$module} { + + list-style-type: none; + margin: 0; + padding: 0; + text-align: center; + + @include margin(.5 0); + + &__item { + + display: inline-block; + color: black; + text-transform: lowercase; + vertical-align: top; + position: relative; + + @include padding-right(.5); + + &:after { + content: ""; + display: block; + height: $header-height; + width: 1px; + background: black; + position: absolute; + top: 0; + right: 0; + + @include margin-left(.5); + } + + &:last-child { + &:after { + display: none; + } + } + + &--image { + vertical-align: top; + @include margin(0 0 0 .5); + } + + &--special { + vertical-align: top; + @include margin(0 0 0 .5); + } + + &--centered { + line-height: $header-height; + } + + } + + &__item-link { + + color: inherit; + text-decoration: none; + + vertical-align: top; + + @include font-size(xl); + @include line-height($header-pre-height); + @include typeface(sans-serif); + + &:before { + display: inline; + content: '.'; + vertical-align: top; + } + + } + +} diff --git a/app/templates/base.html b/app/templates/base.html index 39d6deb8..eac5ed0a 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -32,12 +32,25 @@ {% compress css %} + {% endcompress %} {% block extra_head %}{% endblock %} + + {% nevercache %} + {% if messages %} + {% for message in messages %} +
+ + {{ message }} +
+ {% endfor %} + {% endif %} + {% endnevercache %} + - - {% if on_home %} - {% include "includes/slider.html" %} - {% endif %} - - {% nevercache %} - {% if messages %} - {% for message in messages %} -
- - {{ message }} -
- {% endfor %} + {% include "includes/slider.html" %} {% endif %} - {% endnevercache %} - - {% comment %} - - {% endcomment %} {% featured as featured_list %} diff --git a/app/templates/pages/menus/breadcrumb.html b/app/templates/pages/menus/breadcrumb.html index 5bd1a7f8..f7c3c2fb 100644 --- a/app/templates/pages/menus/breadcrumb.html +++ b/app/templates/pages/menus/breadcrumb.html @@ -6,18 +6,18 @@ {% for page in page_branch %} {% if not has_home and page.is_primary and forloop.first %} -
  • + {% trans "Home" %}
    • {% endif %} {% if page.is_current_or_ascendant %} {% if page.is_current %} -
  • {{ page.title }}
    • {% else %} -
  • + {{ page.title }}
    • {% endif %} {% if page.has_children %}{% page_menu page %}{% endif %} diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html index 8a5b1a09..6b8e6535 100644 --- a/app/templates/pages/menus/header.html +++ b/app/templates/pages/menus/header.html @@ -1,35 +1,36 @@ -{% load i18n pages_tags %} +{% load i18n pages_tags staticfiles %} {% get_language_info_list for LANGUAGES as languages %} {% spaceless %} {% if page_branch_in_menu %} - {% if branch_level == 0 %} - - {% endif %} + {% endif %} + {% endfor %} {% endif %} {% endspaceless %}