From 70388ac9a1bbc85291e6681bc5f1513250c07e86 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Tue, 12 Jul 2016 16:22:21 +0200 Subject: [PATCH] Update actions menu layout and style --- app/static/css/index.min.css | 69 ++++++++++++++--- app/static/js/index.min.js | 2 +- app/static/src/sass/config/_colors.scss | 1 + app/static/src/sass/config/_variables.scss | 4 +- app/static/src/sass/global/_helpers.scss | 9 +++ app/static/src/sass/layout/_header.scss | 6 ++ app/static/src/sass/modules/_all.scss | 3 + .../src/sass/modules/_lang-switcher.scss | 7 ++ .../src/sass/modules/navs/_nav-actions.scss | 46 ++++++++++++ app/templates/base.html | 74 ++++++------------- app/templates/pages/menus/action.html | 23 +----- 11 files changed, 162 insertions(+), 82 deletions(-) create mode 100644 app/static/src/sass/modules/_lang-switcher.scss create mode 100644 app/static/src/sass/modules/navs/_nav-actions.scss diff --git a/app/static/css/index.min.css b/app/static/css/index.min.css index c498fc4b..c1e0e65f 100644 --- 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 df12d837..76e93499 100644 --- 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 71846dcd..b576fbae 100755 --- 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 3aca5c9c..22e49328 100755 --- 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 33161f4e..2482a64d 100755 --- 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 eb97354c..17f173b5 100755 --- 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 8cdd138a..1baec8ae 100755 --- 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 index 00000000..54a216b4 --- /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 index 00000000..fea6adae --- /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 738d682c..11e778d2 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -37,35 +37,40 @@ {% block extra_head %}{% endblock %} -{# #}