diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fe3aed9e..ab094bf84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +*2.0.5* (2019-05-28) + - ✨ New implementations + - Improve the display of search and language selection for small screen devices + *2.0.4* (2019-05-13) - 🛠 Fixes & other - Set a generic name for theme light top menu (#387) diff --git a/VERSION b/VERSION index 2165f8f9b..e01025862 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.0.4 +2.0.5 diff --git a/assets/components/atoms/nav-lang/nav-lang.scss b/assets/components/atoms/nav-lang/nav-lang.scss index b3bfd54f9..6c6ef8bf2 100644 --- a/assets/components/atoms/nav-lang/nav-lang.scss +++ b/assets/components/atoms/nav-lang/nav-lang.scss @@ -17,6 +17,11 @@ font-size: $font-size-sm; font-weight: bold; transition: background 0.2s ease; + + @include media-breakpoint-up(sm) { + padding-top: ($spacer * 0.6); + padding-bottom: ($spacer * 0.7); + } } .dropdown-toggle { @@ -155,26 +160,18 @@ @include media-breakpoint-down(lg) { .nav-lang { - position: fixed; - right: 0; - bottom: $mm-lang-height * -1; - width: $mm-lang-width; - margin: 0; + //position: absolute; + //right: 120px; + //bottom: auto; + width: auto; + margin: 0 1rem !important; transition: bottom 0.3s ease; z-index: $zindex-mobile-lang; - - .dropdown-toggle, &.nav-lang-short ul { - height: $mm-lang-height; - padding-top: 0.67rem; - background: gray('600'); - border-color: gray('600'); - color: $white; - border-radius: 0; - - .icon { - color: $white; - } + + &.nav-lang-short { + margin: 0 .25rem !important; } + &.nav-lang-short ul{ display: flex; width: 100%; @@ -188,18 +185,19 @@ padding: 0; a, span{ display: block; - padding: 0; + padding: 0 0.4 * $spacer; line-height: $mm-lang-height; text-align: center; - color: gray('300'); + //color: gray('300'); &.active{ - color: $white; + //color: $white; } } & + li { &:before { - display: none; + //display: none; + top: 1.1 * $spacer } } } diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss index ba0db8f04..d8953edbf 100644 --- a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss +++ b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss @@ -4,13 +4,27 @@ display: flex; flex-flow: row nowrap; align-items: baseline; - margin-left: 1 * $spacer; - padding: (0.7 * $spacer) (1.2 * $spacer); - font-size: 1.25 * $font-size-base; + margin: 0; + padding: (.8 * $spacer) (.9 * $spacer); + font-size: 1 * $font-size-base; font-weight: bold !important; + + @include media-breakpoint-up(sm) { + padding: (.6 * $spacer) (.9 * $spacer); + } + + .label { + + @include media-breakpoint-down(xs) { + @include sr-only(); + } + } .hamburger { - margin-left: 0.4 * $spacer; + + @include media-breakpoint-up(sm) { + margin-left: 0.4 * $spacer; + } span { display: block; diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig index a72cdb138..36deb7659 100644 --- a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig +++ b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig @@ -1,5 +1,5 @@
- Menu + Menu
diff --git a/assets/components/base.js b/assets/components/base.js index d334c3b31..835be5944 100644 --- a/assets/components/base.js +++ b/assets/components/base.js @@ -15,6 +15,7 @@ import svgIcons from '../icons/svg-icons'; import nav from './organisms/nav-main/nav-main.js'; import drawer from './atoms/drawer/drawer.js'; import search from './molecules/search/search.js'; +import searchMobile from './molecules/search/search-mobile.js'; import coursebook from './content-types/coursebook/coursebook.js'; import cookieconsent, {get_cookieconsent_config} from './organisms/cookie-consent/cookie-consent.js'; import anchors from './anchors'; diff --git a/assets/components/molecules/search/search-mobile.js b/assets/components/molecules/search/search-mobile.js new file mode 100644 index 000000000..e343afb2b --- /dev/null +++ b/assets/components/molecules/search/search-mobile.js @@ -0,0 +1,31 @@ +/* global $ */ + +$(document).ready(function($){ + + $('html').addClass('redpandas-will-rule-the-world'); + + $('#search-mobile-toggle').click(function(event){ + + var searchContainer = $('.search-mobile'); + var searchField = searchContainer.find('.form-control'); + + searchContainer.toggleClass('show'); + $('body').toggleClass('search-open'); + + if ( searchContainer.hasClass('show') ) { + searchField.focus(); + } + + }); + + $('#search-mobile-close').click(function(event){ + + var searchContainer = $('.search-mobile'); + var searchField = searchContainer.find('.form-control'); + + searchContainer.removeClass('show'); + $('body').removeClass('search-open'); + + }); + +}); diff --git a/assets/components/molecules/search/search-mobile.twig b/assets/components/molecules/search/search-mobile.twig index 62c931a37..235c006d8 100644 --- a/assets/components/molecules/search/search-mobile.twig +++ b/assets/components/molecules/search/search-mobile.twig @@ -1,11 +1,21 @@
+ + {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %} + Afficher / masquer le formulaire de recherche + -
+ \ No newline at end of file diff --git a/assets/components/molecules/search/search.scss b/assets/components/molecules/search/search.scss index a55c597bc..1477ff7cb 100644 --- a/assets/components/molecules/search/search.scss +++ b/assets/components/molecules/search/search.scss @@ -23,16 +23,28 @@ } } +.search-mobile-toggle { + + .icon { + height: 16px; + width: 16px; + } +} + .search-mobile { display: none; @include media-breakpoint-down (xl) { + background: $black; display: flex; flex-flow: row nowrap; - position: fixed; - bottom: -$mm-lang-height; + position: absolute; + top: -$mm-lang-height; left: 0; - width: calc(100% - #{ $mm-lang-width }); + bottom: auto; + right: 0; + //width: calc(100% - #{ $mm-lang-width }); + width: 100%; height: $mm-lang-height; transition: bottom 0.3s; z-index: $zindex-mobile-lang - 1; @@ -59,5 +71,30 @@ .icon { color: gray('300'); } + + .searchform-controller .icon { + display: block; + transition: color .2s ease-in-out; + } + + .search-mobile-close { + align-items: center; + display: flex; + margin: 0 (0.9 * $spacer); + + &:hover .icon { + color: #fff; + } + } } } + +.site { + position: relative; + top: 0; + transition: top .3s ease-in-out; + + .search-open & { + top: $mm-lang-height; + } +} \ No newline at end of file diff --git a/assets/components/organisms/header/header.scss b/assets/components/organisms/header/header.scss index d66a32375..a374c7e41 100644 --- a/assets/components/organisms/header/header.scss +++ b/assets/components/organisms/header/header.scss @@ -4,7 +4,7 @@ display: flex; width: 100%; flex-flow: row nowrap; - justify-content: space-between; + justify-content: flex-end; align-items: center; height: $header-height; @@ -18,14 +18,17 @@ } .logo { - margin: 0; + margin: 0 auto 0 (3 * $spacer); border: none; background-image: none; - margin-left: 3 * $spacer; &:before { content: none; } + + @include media-breakpoint-up(xl) { + margin-right: 0; + } } .nav-header { diff --git a/assets/components/organisms/nav-main/nav-main.scss b/assets/components/organisms/nav-main/nav-main.scss index c6a0b5d2c..eaf4e145f 100644 --- a/assets/components/organisms/nav-main/nav-main.scss +++ b/assets/components/organisms/nav-main/nav-main.scss @@ -343,7 +343,7 @@ a.nav-arrow { } .nav-lang { - bottom: 0; + //bottom: 0; } .nav-lang-mobile { diff --git a/assets/components/templates/base/base.twig b/assets/components/templates/base/base.twig index 50a17931c..97180e0ad 100644 --- a/assets/components/templates/base/base.twig +++ b/assets/components/templates/base/base.twig @@ -1,4 +1,4 @@ - +
{% include '@molecules/access-nav/access-nav.twig' %} {% block fullintro %}{% endblock %} @@ -51,3 +51,4 @@ {% endblock %}
+
\ No newline at end of file diff --git a/package.json b/package.json index eab35b0da..c8a9d06bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epfl-elements", - "version": "2.0.4", + "version": "2.0.5", "license": "MIT", "main": "index.html", "repository": {