First implementation of the layout and mobile navigation

diff --git a/app/static/src/js/modules/lang-selector.js b/app/static/src/js/modules/lang-selector.js
index 8b252a6f67cb957bd450d71a3ef892c83532d081..23bbf4475912c559f0bd760e26f19e4bdf60704b 100644 (file)
--- 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 595005b444480e421cee52fc12fac7f9852f5982..628e9d84a71ea07321c3ff3beb1baef18f7ab2a9 100755 (executable)
--- 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 ad709bbbc3c3ed0a81905700ed1f9498d1b8bdd4..665b2f3225aacf56e7f4cbbfb7f65d4ada8dbbcc 100644 (file)
--- 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 055f833d047bbd2750a9816eb91d4fbc1b708930..6e66a6c06c39f349aa83860af0270265d69a8c33 100755 (executable)
--- 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 24d52bdd7ec0c4cf679ab511acac2f710ed8aee6..6f5d3f53dbb1c8b36b6088e526aae28e5faaae23 100755 (executable)
--- 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 c332d87e41f043fe7df2c7171710dc0a0bfd8fdc..ff7d4beb6f0580d6737511e5f52ec47c85a711a0 100755 (executable)
--- 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 41f6e32c0e24cb57e657e1b9b4f8ce2ef773bf44..d1f43574edc7731f1544953ee3f5f2f1da84fab4 100644 (file)
--- 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 686b0a8bbde84497cd288ee59c7e47ecdc474d33..4f05e4d6ee4f7f8d2eacd1c2dde7fa388516d8af 100644 (file)
--- 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 ec3b05f513c448bbc78f7d9b6e52294879d038d6..1d5e61c07963bef1baf672a56264e6ddc339ef6a 100644 (file)
--- 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 0f91cf14cee2daad259a491aac07696022c3954e..b81b1d6a178f716b4df7e280f25bb1d8e1744aec 100644 (file)
--- 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 a465b3f37394f53bff74c5488c39a2e85dad60d1..f08c46807e870959bc70e3e439bbb2bfbe7663d9 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -50,14 +50,11 @@
 
         <div class="container">
             <div class="row header__nav">
-                <div class="col-md-10 tac">
+                <div class="col-md-16 tal">
                     <div id="navHeader">
                         {% page_menu "pages/menus/header.html" %}
                     </div>
                 </div>
-                <div class="col-md-6 tac">
-                    {% include "includes/languages.html" %}
-                </div>
             </div>
         </div>
 
@@ -70,6 +67,8 @@
             {% block content_footer %}{% endblock %}
         </main>
 
+        {% include "twitter/tweets.html" %}
+
         <footer class="footer" role="footer">
             {% include "includes/footer.html" %}
         </footer>

diff --git a/app/templates/home/inc/bio.html b/app/templates/home/inc/bio.html
index 078d45d1f4d17b2018d3368319fc1f6ad68a8253..a38f30c81c5104dd5cf25372343b7a0999255d24 100644 (file)
--- a/app/templates/home/inc/bio.html
+++ b/app/templates/home/inc/bio.html
@@ -2,12 +2,8 @@
 <div class="page__block page__block--accent">
     <div class="container">
         <div class="row">
-            <div class="col-xs-16 col-md-16 col-lg-14 col-lg-push-1">
+            <div class="col-xs-16 col-md-16 col-lg-10 fsxl lh5 ffss fwl">
                 {{ host_organization.bio|safe }}
-                <h2>hello</h2>
-                <p>
-                    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!
-                </p>
             </div>
         </div>
     </div>

diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html
index f93ef06870087e0753be7c14fa577b3bad5d11a3..4ca6e837c8a9a52b18806eb895237c121aff0228 100644 (file)
--- a/app/templates/includes/footer.html
+++ b/app/templates/includes/footer.html
@@ -29,7 +29,7 @@
 
                     <div class="col-xxs-16">
 
-                        {% include 'pages/page/includes/linked_organization_footer.html' %}
+                        NEWSLETTER HERE
 
                     </div>
 

diff --git a/app/templates/includes/languages.html b/app/templates/includes/languages.html
index eba0fbd892fbe8935203ef634b626a69d679a620..a4232f538cb5e00cce4a94d405050acc5aaf054e 100644 (file)
--- a/app/templates/includes/languages.html
+++ b/app/templates/includes/languages.html
@@ -3,24 +3,7 @@
     {% nevercache %}
         {% include "includes/language_selector.html" %}
     {% endnevercache %}
-    <ul class="lang-switcher" id="langSelector">
-        {% for language in languages %}
-            {% 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>
+    {% for language in languages %}
+        <a data-lang="{{ language.code }}" href="#" class="nav-header__item-link nav-header__item-link--no-dot {% if language.code == LANGUAGE_CODE %} active{% endif %}">{{ language.code|title }}</a>
+    {% endfor %}
 {% endif %}

diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html
index db5f589ccfc16a17263bee15d62bd5dbc053d785..d3fbd0e1514f693a5195e14dc6637ecaaa0e4eb3 100644 (file)
--- a/app/templates/includes/sidebar.html
+++ b/app/templates/includes/sidebar.html
@@ -3,37 +3,5 @@
 <div class="sidebar">
 
     {% page_menu "pages/menus/header.html" %}
-    {% page_menu "pages/menus/action.html" %}
-
-    <ul class="sidebar__menu">
-        <li class="sidebar__menu-item">
-            <a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a>
-            {% page_menu "pages/menus/magazine.html" %}
-        </li>
-        <li class="sidebar__menu-item">
-            <a href="{% url 'organization-playlist-list' %}" title="{% trans "Medias" %}">{% trans "Medias" %}</a>
-        </li>
-    </ul>
-
-    <ul class="lang-switcher" id="langSelectorMobile">
-        {% for language in languages %}
-            {% 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>
 
 </div>

diff --git a/app/templates/index.html b/app/templates/index.html
index 38313b9c11773dba928ff850b470de24ce8ae99b..39407d8e67cc905f3965ec9fe4dcb269a07d90fd 100644 (file)
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -13,19 +13,10 @@
 
 {% block main %}
 
-    <div class="home-mobile-nav">
-        {% page_menu "pages/menus/header.html" %}
-    </div>
-
     {% include "home/inc/slider.html" %}
 
     {% include "home/inc/body.html" %}
 
-    <div class="home-mobile-subnav">
-        <hr class="mt0" />
-        {% page_menu "pages/menus/header.html" %}
-    </div>
-
     {% 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 8818f8a3a5c64c60a791f7da2fc60f57b0a06482..aa46ff85c094b9625e91cdcefd09b1b76d5cc54e 100644 (file)
--- a/app/templates/pages/menus/header.html
+++ b/app/templates/pages/menus/header.html
@@ -11,12 +11,12 @@
                         <span class="first"></span>
                         <span class="second"></span>
                     </li>
-                    <li class="nav-header__item nav-header__item--image">
+                    <li class="nav-header__item nav-header__item--image-big">
                         <a href="{% url "home" %}" title="{% trans 'Home' %}">
                           {% with host_organization.images|get_type:"logo_header" as images %}
                             {% if images %}
                              {% with images|first as img %}
-                              <img src="{{ MEDIA_URL }}{{ img }}" title="{{ img.title }}" width="118" height="80" />
+                              <img src="{{ MEDIA_URL }}{{ img }}" title="{{ img.title }}" width="242" height="70" />
                              {% endwith %}
                             {% endif %}
                           {% endwith %}
@@ -42,9 +42,14 @@
         {% endif %}
         {% if page.is_primary %}
             {% if forloop.last %}
-                <li class="nav-header__item nav-header__item--special nav-header__item--centered">
+
+                <li class="nav-header__item nav-header__item--right nav-header__item--separator">
+                    {% include "includes/languages.html" %}
+                </li>
+                <li class="nav-header__item nav-header__item--centered nav-header__item--right nav-header__item--no-separator">
                     <a href="#" class="fsxl" data-open-button="search" data-search-button><i class="fa fa-search" aria-hidden="true"></i></a>
                 </li>
+
             </ul>
             {% endif %}
         {% endif %}