Update actions menu layout and style

diff --git a/app/static/css/index.min.css b/app/static/css/index.min.css
index c498fc4b28fbf6e0560942f52055b6ea2e5ccee1..c1e0e65f42e934fd88c8f20f455420d1e82ed556 100644 (file)
--- a/app/static/css/index.min.css
+++ b/app/static/css/index.min.css
@@ -264,6 +264,18 @@ figure img {
   background-color: #F8E71C;
 }
 
+.tac {
+  text-align: center;
+}
+
+.tar {
+  text-align: right;
+}
+
+.tal {
+  text-align: left;
+}
+
 @media (max-width: 46.99em) {
   .hide-xxs {
     display: none;
@@ -306,13 +318,13 @@ figure img {
 .container, .container-fluid, .container-full, .container-fixed {
   margin-right: auto;
   margin-left: auto;
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-left: 30px;
+  padding-right: 30px;
 }
 @media screen and (max-width: 1072px) {
   .container, .container-fluid, .container-full, .container-fixed {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 15px;
+    padding-right: 15px;
   }
 }
 
@@ -321,8 +333,8 @@ figure img {
   box-sizing: border-box;
   position: relative;
   width: 100%;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 15px;
+  padding-right: 15px;
   min-height: 1px;
   float: left;
 }
@@ -344,7 +356,7 @@ figure img {
   padding-right: 0;
 }
 .container-fixed {
-  width: 1008px;
+  width: 1020px;
 }
 @media screen and (min-width: 1072px) {
   .container {
@@ -364,8 +376,8 @@ figure img {
   margin: 0;
   padding: 0;
   border: 0;
-  margin-left: -12px;
-  margin-right: -12px;
+  margin-left: -15px;
+  margin-right: -15px;
   /* Nested grid */
 }
 .row:after {
@@ -1425,6 +1437,45 @@ figure img {
     margin-left: 100%;
   }
 }
+.header__pre {
+  background: #1D1D1B;
+  height: 34px;
+  color: white;
+}
+
+.nav-actions {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+.nav-actions__item {
+  display: inline-block;
+  color: white;
+  text-transform: lowercase;
+  margin: 0px 12px;
+  margin: 0 0.75rem;
+}
+.nav-actions__item:nth-child(1), .nav-actions__item:nth-child(2) {
+  color: #F8E71C;
+}
+.nav-actions__item:nth-child(2):after {
+  content: '|';
+  display: inline-block;
+  margin: 0px 0px 0px 24px;
+  margin: 0 0 0 1.5rem;
+  color: white;
+}
+.nav-actions__item-link {
+  color: inherit;
+  text-decoration: none;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 34px;
+  line-height: 2.125rem;
+  font-family: "Oswald", sans-serif;
+}
+
 .breadcrumb {
   list-style-type: none;
   margin: 0;

diff --git a/app/static/js/index.min.js b/app/static/js/index.min.js
index df12d837a3d56e0e231ecf5d9a7eba85739bb2a7..76e93499cdf71eabd2fafda4cf2d3fce2d658909 100644 (file)
--- a/app/static/js/index.min.js
+++ b/app/static/js/index.min.js
@@ -8,7 +8,7 @@
 // Init all the modules
 //
 
-}).call(this,require("r7L21G"),typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},require("buffer").Buffer,arguments[3],arguments[4],arguments[5],arguments[6],"/fake_6b37e1a6.js","/")
+}).call(this,require("r7L21G"),typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},require("buffer").Buffer,arguments[3],arguments[4],arguments[5],arguments[6],"/fake_27103f06.js","/")
 },{"buffer":3,"r7L21G":5}],2:[function(require,module,exports){
 (function (process,global,Buffer,__argument0,__argument1,__argument2,__argument3,__filename,__dirname){
 var lookup = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

diff --git a/app/static/src/sass/config/_colors.scss b/app/static/src/sass/config/_colors.scss
index 71846dcd53cd063f2f591f4a1939b429b386b1c4..b576fbaee89345a31d6f1cc42a6a522c0898f172 100755 (executable)
--- a/app/static/src/sass/config/_colors.scss
+++ b/app/static/src/sass/config/_colors.scss
@@ -12,3 +12,4 @@ $color-youtube: #bb0000;
 
 $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 3aca5c9c9d0ff1e158fc83c57b0c6a464a6bf128..22e49328b310a262e52887734bed825dbd641085 100755 (executable)
--- a/app/static/src/sass/config/_variables.scss
+++ b/app/static/src/sass/config/_variables.scss
@@ -15,7 +15,7 @@ $breakpoints: (
 );
 
 $grid-columns: 12;
-$grid-gutter: 24px;
+$grid-gutter: 30px;
 $grid-container-prefix: 'container';
 $grid-row-prefix: 'row';
 $grid-col-prefix: 'col';
@@ -34,7 +34,7 @@ $headings-font-family: $primary-font-family;
 
 // Layout
 
-
+$header-pre-height: 34px;
 
 // Typey
 

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 33161f4e5fbe5e168bdb282e9009b687110af259..2482a64d796844f48f7a2998b0b3ba4630a2373d 100755 (executable)
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -31,6 +31,15 @@
 .bg {
     background-color: $color-main;
 }
+.tac {
+    text-align: center;
+}
+.tar {
+    text-align: right;
+}
+.tal {
+    text-align: left;
+}
 .hide-xxs {
     @include mq($until: xs) {
         display: none;

diff --git a/app/static/src/sass/layout/_header.scss b/app/static/src/sass/layout/_header.scss
index eb97354cca2775cc9c1a0def2c3a6944e2e67d88..17f173b5c0b32c57a226b625cdcb810a4bd5772a 100755 (executable)
--- a/app/static/src/sass/layout/_header.scss
+++ b/app/static/src/sass/layout/_header.scss
@@ -2,6 +2,12 @@ $module: ".header";
 
 #{$module} {
 
+    &__pre {
 
+        background: $color-black;
+        height: $header-pre-height;
+        color: white;
+
+    }
 
 }

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 8cdd138ac3044bb33caf38fbf642bc95999f7c1c..1baec8ae5ff1368ccb6d7809a1dea5310257a726 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -1,3 +1,6 @@
+// Navs
+@import "navs/nav-actions";
+
 @import 'breadcrumb';
 @import 'dashed';
 @import 'dotted';

diff --git a/app/static/src/sass/modules/_lang-switcher.scss b/app/static/src/sass/modules/_lang-switcher.scss
new file mode 100644 (file)
index 0000000..54a216b
--- /dev/null
+++ b/app/static/src/sass/modules/_lang-switcher.scss
@@ -0,0 +1,7 @@
+$module: ".lang-switcher";
+
+#{$module} {
+
+    list-style-type: none;
+
+}

diff --git a/app/static/src/sass/modules/navs/_nav-actions.scss b/app/static/src/sass/modules/navs/_nav-actions.scss
new file mode 100644 (file)
index 0000000..fea6ada
--- /dev/null
+++ b/app/static/src/sass/modules/navs/_nav-actions.scss
@@ -0,0 +1,46 @@
+$module: ".nav-actions";
+
+#{$module} {
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+
+    &__item {
+
+        display: inline-block;
+        color: white;
+        text-transform: lowercase;
+
+        @include margin(0 .5);
+
+        &:nth-child(1), &:nth-child(2) {
+
+            color: $color-main;
+
+        }
+
+        &:nth-child(2):after {
+
+            content: '|';
+            display: inline-block;
+            @include margin(0 0 0 1);
+            color: white;
+
+        }
+
+    }
+
+    &__item-link {
+
+        color: inherit;
+        text-decoration: none;
+
+        @include font-size(m);
+        @include line-height($header-pre-height);
+        @include typeface(sans-serif);
+
+    }
+
+}

diff --git a/app/templates/base.html b/app/templates/base.html
index 738d682c34bc49c960a0dfad69e83f5617c55063..11e778d2b0c0380bbd2e8008258bbaee6948b6db 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -37,35 +37,40 @@
     {% block extra_head %}{% endblock %}
 </head>
 
-{# <body id="{% block body_id %}body{% endblock %}"> #}
 <body id="{% block body_id %}body{% endblock %}">
     <div class="banner" role="banner">
         <div class="header">
             <div class="container">
+                <div class="row header__pre">
+                    <div class="col-md-10 col-md-push-1 tac">
+                        {% page_menu "pages/menus/action.html" %}
+                    </div>
+                    <div class="col-md-1 col-md-push-1 tar">
+                        {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
+                            {% nevercache %}
+                            {% include "includes/language_selector.html" %}
+                            {% endnevercache %}
+                            <ul class="lang-switcher">
+                                {% 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>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </div>
+                </div>
+
                 {% if settings.SITE_TITLE %}
                 <h1>
-                    <a class="header__logo" href="/">
-                        <span class="header__logo__text">{{ settings.SITE_TITLE }}</span>
-                        <img class="header__logo__img" src="{% static "img/logo_manifeste16_black.png" %}" alt="Logo Manifeste 2016 ircam" width="200">
-                    </a>
-                </h1>
-                    <div class="header__logo--right">
+                    <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>
-                {% endif %}
-
-                <button class="menu__toggle">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </button>
-
-                {% page_menu "pages/menus/action.html" %}
-
-                {% if settings.SITE_TAGLINE %}
-                <p class="header__baseline">{{ settings.SITE_TAGLINE }}</p>
+                </h1>
                 {% endif %}
 
             </div>
@@ -75,37 +80,6 @@
             {% page_menu "pages/menus/header.html" %}
         </div>
 
-        <div class="nav__complementary">
-
-            {% nevercache %}
-            {% include "includes/language_selector.html" %}
-            {# {% include "includes/user_panel.html" %} #}
-            {% endnevercache %}
-
-            <div class="container">
-                <ul class="nav__complementary__list">
-                    <li class="nav__complementary__item--facebook">
-                        <a href="https://www.facebook.com/iIRCAM" class="btn-icon--facebook" target="_blank">
-                            <i class="icon icon__facebook-f"></i>
-                        </a>
-                    </li>
-                    <li class="nav__complementary__item--twitter">
-                        <a href="https://twitter.com/ircam" class="btn-icon--twitter" target="_blank">
-                            <i class="icon icon__twitter"></i>
-                        </a>
-                    </li>
-                    {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
-                        {% for language in languages %}
-                            <li class="nav__complementary__item__lang {% if language.code == LANGUAGE_CODE %}is-active{% endif %}">
-                                <a href="#" onclic"$('#language_selector_select').val('{{ language.code }}'); $('#language_selector_form').submit();">
-                                  {{ language.code|title }}
-                                </a>
-                            </li>
-                        {% endfor %}
-                    {% endif %}
-                </ul>
-            </div>
-        </div>
     </div>
 
     {% if on_home %}

diff --git a/app/templates/pages/menus/action.html b/app/templates/pages/menus/action.html
index 20591526e9465fde733a4612d861429a97af8f4b..6f02104d5e4ec334ff215fe7510570cc84137a66 100644 (file)
--- a/app/templates/pages/menus/action.html
+++ b/app/templates/pages/menus/action.html
@@ -6,36 +6,19 @@
     {% for page in page_branch %}
         {% if page.is_primary %}
             {% if forloop.first %}
-                <div>
-                <ul>
-            {% endif %}
-            {% if page.in_menu %}
-                {# <ul class="list-unstyled"> #}
+                <ul class="nav-actions">
             {% endif %}
         {% endif %}
         {% if page.in_menu %}
             {% if forloop.first and not page.parent.in_menu and not page.is_primary %}
             {% endif %}
-            <li>
-                <h2>
-                    <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
-                </h2>
+            <li class="nav-actions__item {% if page.is_current_or_ascendant %}active{% endif %}">
+                <a class="nav-actions__item-link" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
             </li>
         {% endif %}
-        {% if page.in_menu and page.has_children_in_menu %}{% page_menu page %}{% endif %}
-        {% if page.in_menu %}
-            {% if forloop.first and not page.parent.in_menu and not page.is_primary %}
-            {# </li> #}
-            {% endif %}
-            {# </ul> #}
-        {% endif %}
         {% if page.is_primary %}
-            {% if page.in_menu %}
-            {# </ul> #}
-            {% endif %}
             {% if forloop.last %}
             </ul>
-            </div>
             {% endif %}
         {% endif %}
     {% endfor %}