Skip to content

Commit

Permalink
Merge branch 'release/2.0.5'
Browse files Browse the repository at this point in the history
  • Loading branch information
GregLeBarbar committed May 28, 2019
2 parents c30c16d + 64bc8a6 commit b2d6891
Show file tree
Hide file tree
Showing 13 changed files with 138 additions and 39 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2.0.4
2.0.5
40 changes: 19 additions & 21 deletions assets/components/atoms/nav-lang/nav-lang.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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%;
Expand All @@ -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
}
}
}
Expand Down
22 changes: 18 additions & 4 deletions assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="btn btn-secondary nav-toggle-mobile d-xl-none">
Menu
<span class="label">Menu</span>
<div class="hamburger">
<span></span>
<span></span>
Expand Down
1 change: 1 addition & 0 deletions assets/components/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
31 changes: 31 additions & 0 deletions assets/components/molecules/search/search-mobile.js
Original file line number Diff line number Diff line change
@@ -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');

});

});
16 changes: 13 additions & 3 deletions assets/components/molecules/search/search-mobile.twig
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
<form action="#" class="d-xl-none">
<a id="search-mobile-toggle" class="search-mobile-toggle searchform-controller" href="#">
{% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
<span class="toggle-label sr-only">Afficher / masquer le formulaire de recherche</span>
</a>
<div class="input-group search-mobile" role="search">
<div class="input-group-prepend">
<span class="input-group-text">
{% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
</span>
</div>
<label for="search" class="sr-only">Rechercher sur le site</label>
<input type="text" class="form-control" name="search" placeholder="Rechercher">
<label for="search" class="sr-only">Rechercher sur le site</label>
<input type="text" class="form-control" name="search" placeholder="Rechercher">
<div class="input-group-append">
<a id="search-mobile-close" class="search-mobile-close searchform-controller" href="#">
{% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
<span class="toggle-label sr-only">Masquer le formulaire de recherche</span>
</a>
</div>
</div>
</form>
</form>
43 changes: 40 additions & 3 deletions assets/components/molecules/search/search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
9 changes: 6 additions & 3 deletions assets/components/organisms/header/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion assets/components/organisms/nav-main/nav-main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ a.nav-arrow {
}

.nav-lang {
bottom: 0;
//bottom: 0;
}

.nav-lang-mobile {
Expand Down
3 changes: 2 additions & 1 deletion assets/components/templates/base/base.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

<div class="site">
{% include '@molecules/access-nav/access-nav.twig' %}

{% block fullintro %}{% endblock %}
Expand Down Expand Up @@ -51,3 +51,4 @@
{% endblock %}
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "epfl-elements",
"version": "2.0.4",
"version": "2.0.5",
"license": "MIT",
"main": "index.html",
"repository": {
Expand Down

0 comments on commit b2d6891

Please sign in to comment.