//
// Require all the modules
//
+var LangSelector = require('./modules/lang-selector');
//
// Init all the modules
//
+window[LangSelector] = new LangSelector();
--- /dev/null
+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;
$color-vimeo: #4bf;
$color-youtube: #bb0000;
+$color-white: #FFFFFF;
$color-main: #F8E71C;
$color-gray: #C3C3C3;
$color-black: #1D1D1B;
// Layout
$header-pre-height: 34px;
+$header-height: 78px;
// Typey
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);
+}
}
+ &__nav {
+
+ background: $color-white;
+
+ }
+
}
// Navs
@import "navs/nav-actions";
+@import "navs/nav-header";
@import 'breadcrumb';
+@import 'lang-switcher';
@import 'dashed';
@import 'dotted';
@import 'tag';
margin: 0;
padding: 0;
+ background: white;
+ @include padding(0 1);
+
@include clearfix;
@include font-size(xs);
@include line-height(1);
#{$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);
+ }
}
--- /dev/null
+$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;
+ }
+
+ }
+
+}
{% compress css %}
<link rel="stylesheet" href="{% static "css/index.min.css" %}">
+ <link rel="stylesheet" href="{% static "font-awesome/css/font-awesome.css" %}">
{% endcompress %}
{% block extra_head %}{% endblock %}
</head>
<body id="{% block body_id %}body{% endblock %}">
+
+ {% nevercache %}
+ {% if messages %}
+ {% for message in messages %}
+ <div class="notification" id="js-notificationContainer">
+ <button type="button" class="btn btn-small js-notificationClose">X</button>
+ {{ message }}
+ </div>
+ {% endfor %}
+ {% endif %}
+ {% endnevercache %}
+
<div class="banner" role="banner">
<div class="header">
<div class="container">
{% nevercache %}
{% include "includes/language_selector.html" %}
{% endnevercache %}
- <ul class="lang-switcher">
+ <ul class="lang-switcher" id="langSelector">
{% for language in languages %}
- <li class="nav__complementary__item__lang {% if language.code == LANGUAGE_CODE %}active{% endif %}">
- <a href="#" onclick="$('#language_selector_select').val('{{ language.code }}'); $('#language_selector_form').submit();">
- {{ language.code|title }}
- </a>
- </li>
+ {% if language.code == LANGUAGE_CODE %}
+ <li class="lang-switcher__item active">
+ <a href="#">
+ {{ language.code|title }}
+ </a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ {% for language in languages %}
+ {% if language.code != LANGUAGE_CODE %}
+ <li class="lang-switcher__item">
+ <a href="#" data-lang="{{ language.code }}">
+ {{ language.code|title }}
+ </a>
+ </li>
+ {% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
-
- {% if settings.SITE_TITLE %}
- <h1>
- <div class="header__logo">
- <a href="http://www.ircam.fr" title="Url site ircam">
- <img class="header__logo__img" src="{% static "img/logo_ircam_black.png" %}" alt="Logo Manifeste 2016 ircam" width="200">
- </a>
+ <div class="row header__nav">
+ <div class="col-md-10 col-md-push-1 tac">
+ {% page_menu "pages/menus/header.html" %}
+ </div>
+ </div>
+ {% if not on_home %}
+ <div class="row">
+ <div class="col-md-8 col-md-push-2">
+ <ul class="breadcrumb">
+ {% spaceless %}
+ {% block breadcrumb_menu %}{% page_menu "pages/menus/breadcrumb.html" %}{% endblock %}
+ {% endspaceless %}
+ </ul>
+ </div>
</div>
- </h1>
{% endif %}
-
</div>
</div>
- <div class="navigation" role="navigation">
- {% page_menu "pages/menus/header.html" %}
- </div>
-
</div>
{% if on_home %}
- {% include "includes/slider.html" %}
- {% endif %}
-
- {% nevercache %}
- {% if messages %}
- {% for message in messages %}
- <div class="notification" id="js-notificationContainer">
- <button type="button" class="btn btn-small js-notificationClose">X</button>
- {{ message }}
- </div>
- {% endfor %}
+ {% include "includes/slider.html" %}
{% endif %}
- {% endnevercache %}
-
- {% comment %}
- <ul class="breadcrumb">
- {% spaceless %}
- {% block breadcrumb_menu %}{% page_menu "pages/menus/breadcrumb.html" %}{% endblock %}
- {% endspaceless %}
- </ul>
- {% endcomment %}
{% featured as featured_list %}
{% for page in page_branch %}
{% if not has_home and page.is_primary and forloop.first %}
- <li id="breadcrumb-menu-home">
- <a href="{% url "home" %}">{% trans "Home" %}</a>
+ <li class="breadcrumb__item" id="breadcrumb-menu-home">
+ <a class="breadcrumb__link" href="{% url "home" %}">{% trans "Home" %}</a>
</li>
{% endif %}
{% if page.is_current_or_ascendant %}
{% if page.is_current %}
- <li id="breadcrumb-menu-{{ page.html_id }}"
+ <li class="breadcrumb__item" id="breadcrumb-menu-{{ page.html_id }}"
class="active">{{ page.title }}</li>
{% else %}
- <li id="breadcrumb-menu-{{ page.html_id }}">
- <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+ <li class="breadcrumb__item" id="breadcrumb-menu-{{ page.html_id }}">
+ <a class="breadcrumb__link" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
</li>
{% endif %}
{% if page.has_children %}{% page_menu page %}{% endif %}
-{% 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 %}
- <ul class="menu">
- {% for page in page_branch %}
- {% if not has_home and page.is_primary and forloop.first %}
- <li class="menu__item{% if on_home %} active{% endif %}">
- <a href="{% url "home" %}" class="menu__item__link">{% trans "Home" %}</a>
- </li>
- {% endif %}
- {% if page.in_menu %}
- <li class="menu__item{% if page.has_children_in_menu %}header{% endif %}{% if page.is_current_or_ascendant %} active{% endif %}" id="{{ page.html_id }}">
- <a href="{{ page.get_absolute_url }}" class="menu__item__link" {% if page.has_children_in_menu %} data-toggle="header"{% endif %}>{{ page.title }}{% if page.has_children_in_menu %}<b class="caret"></b>{% endif %}</a>
- {% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
- </li>
+ {% for page in page_branch %}
+ {% if page.is_primary %}
+ {% if forloop.first %}
+ <ul class="nav-header" role="navigation">
+ <li class="nav-header__item nav-header__item--image">
+ <a href="/" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam.png" %}" width="118" height="80" /></a>
+ </li>
{% endif %}
- {% endfor %}
- </ul>
- {% else %}
- <ul class="header-menu">
- {% for page in page_branch %}
- {% if page.in_menu %}
- <li class="{% if page.has_children_in_menu %}header-submenu{% endif %}{% if page.is_current_or_ascendant %} active{% endif %}"id="{{ page.html_id }}">
- <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
- {% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
+ {% endif %}
+ {% if page.in_menu %}
+ <li class="nav-header__item {% if page.is_current_or_ascendant %}active{% endif %}">
+ <a class="nav-header__item-link" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
</li>
+ {% endif %}
+ {% if page.is_primary %}
+ {% if forloop.last %}
+ <li class="nav-header__item nav-header__item--special">
+ <a href="{% url 'event_list' %}"><span class="fss ffss">rendez-vous</span><br /><span class="fsxxxl ffss">15.16</span></a>
+ </li>
+ <li class="nav-header__item nav-header__item--image">
+ <a href="http://manifeste.ircam.fr" target="_blank" title="{% trans 'Manifest' %}"><img src="{% static "img/logo-manifest.png" %}" width="83" height="65" /></a>
+ </li>
+ <li class="nav-header__item nav-header__item--special nav-header__item--centered">
+ <a href="" class="fsxl"><i class="fa fa-search" aria-hidden="true"></i></a>
+ </li>
+ </ul>
{% endif %}
- {% endfor %}
- </ul>
- {% endif %}
+ {% endif %}
+ {% endfor %}
{% endif %}
{% endspaceless %}
projects / mezzo.git / commitdiff
