Skip to content

Commit

Permalink
Header + Footer update for translations (#349)
Browse files Browse the repository at this point in the history
  • Loading branch information
jdelasoie authored Nov 21, 2018
1 parent 95c19a5 commit 3b53212
Show file tree
Hide file tree
Showing 26 changed files with 581 additions and 106 deletions.
12 changes: 12 additions & 0 deletions assets/components/atoms/nav-lang/nav-lang-short.twig
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<nav class="nav-lang nav-lang-short ml-auto">
<ul>
{% if language == 'fr' %}
<li>
<span class="active" aria-label="Français">FR</span>
</li>
<li>
<a href="/en" aria-label="English">EN</a>
</li>
{% endif %}
{% if language == 'en' %}
<li>
<a href="/en" aria-label="English">FR</a>
</li>
<li>
<span class="active" aria-label="Français">EN</span>
</li>
{% endif %}
</ul>
</nav>
12 changes: 5 additions & 7 deletions assets/components/atoms/social-icon/social-icon-link-group.twig
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
{% set round = round ? round : false %}
{% set discrete = discrete ? discrete : false %}
{% set negative = negative ? negative : false %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Mailplane', icon: 'icon-mail-plane', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'WhatsApp', icon: 'icon-whatsapp', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'GooglePlus', icon: 'icon-googleplus', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative, url: 'https://twitter.com/epfl' } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative, url: 'https://www.youtube.com/user/epflnews' } %}
{% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
{% set round = round ? ' social-icon-round' : '' %}
{% set discrete = discrete ? ' social-icon-discrete' : '' %}
{% set negative = negative ? ' social-icon-negative' : '' %}
<a href="#" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}">
{% set url = url or '#' %}
<a href="{{ url }}" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}">
{% include '@atoms/icon/icon.twig' with { icon: icon } %}
<span class="sr-only">Follow us on {{ pretty_name }}.</span>
</a>
4 changes: 4 additions & 0 deletions assets/components/atoms/social-icon/social-icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ a.social-icon {
background-color: $linkedin;
}

.social-icon-youtube {
background-color: $youtube;
}

// From https://codepen.io/katydecorah/pen/PNLePj
%instagradient {
background:
Expand Down
17 changes: 13 additions & 4 deletions assets/components/organisms/footer/footer-buttons.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
<p class="footer-title footer-title-no-underline">Portail interne de l’EPFL</p>
<a href="#" class="btn btn-secondary btn-sm">Enseignants et chercheurs</a>
<a href="#" class="btn btn-secondary btn-sm">Étudiants</a>
<a href="#" class="btn btn-secondary btn-sm">Collaborateurs</a>
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

{% if language == 'fr' %}
<p class="footer-title footer-title-no-underline">Pratique</p>
<a href="https://www2018.epfl.ch/campus/services" class="btn btn-secondary btn-sm">Services et ressources</a>
<a href="tel:+41216933000" class="btn btn-secondary btn-sm">Urgences : +41 21 693 3000</a>
{% endif %}

{% if language == 'en' %}
<p class="footer-title footer-title-no-underline">Practical</p>
<a href="https://www2018.epfl.ch/campus/services" class="btn btn-secondary btn-sm">Services and ressources</a>
<a href="tel:+41216933000" class="btn btn-secondary btn-sm">Emergencies: +41 21 693 3000</a>
{% endif %}
16 changes: 14 additions & 2 deletions assets/components/organisms/footer/footer-col.twig
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

{% for col in footer %}
<div class="footer-sitemap-col">
<button class="footer-title collapse-title collapsed" type="button" data-toggle="collapse" data-target="#collapse-footer-{{loop.index ?: 1}}" aria-expanded="false" aria-controls="collapse-footer-{{loop.index ?: 1}}">
<strong>{{col.heading}}</strong>
{% if language == 'fr' %}
<strong>{{col.headingfr}}</strong>
{% endif %}
{% if language == 'en' %}
<strong>{{col.headingen}}</strong>
{% endif %}
</button>
<div class="collapse collapse-item" id="collapse-footer-{{loop.index ?: 1}}">
<ul class="footer-links">
{% for item in col.items %}
<li>
<a href="#">{{item}}</a>
{% if language == 'fr' %}
<a href="{{item.urlfr}}">{{item.namefr}}</a>
{% endif %}
{% if language == 'en' %}
<a href="{{item.urlen}}">{{item.nameen}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
Expand Down
1 change: 1 addition & 0 deletions assets/components/organisms/footer/footer-dark-en.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "@organisms/footer/footer.twig" %}
21 changes: 21 additions & 0 deletions assets/components/organisms/footer/footer-en.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<footer class="footer" role="contentinfo">

<div class="footer-group footer-sitemap">
{% include "@organisms/footer/footer-col.twig" with {'language': 'en'} %}
</div>

<div class="footer-group">
{% include "@organisms/footer/footer-faculties.twig" with {'language': 'en'} %}
</div>

<div class="footer-group footer-buttons">
{% include "@organisms/footer/footer-buttons.twig" with {'language': 'en'} %}
</div>

<div class="footer-group footer-socials">
{% include "@organisms/footer/footer-socials.twig" with {'language': 'en'} %}
</div>

{% include "@organisms/footer/footer-legal.twig" with {'language': 'en'} %}

</footer>
34 changes: 15 additions & 19 deletions assets/components/organisms/footer/footer-faculties.twig
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<div class="footer-faculties">
<button class="footer-title collapse-title collapsed" type="button" data-toggle="collapse" data-target="#collapse-fac" aria-expanded="false" aria-controls="collapse-fac">
{% if language == 'fr' %}
Facultés
{% endif %}
{% if language == 'en' %}
Schools
{% endif %}
</button>
<div class="collapse collapse-item" id="collapse-fac">
<ul class="footer-links">
{% for school in schools %}
<li>
<a href="#">Environnement Naturel, Architectural et Construit <strong>ENAC</strong></a>
</li>
<li>
<a href="#">Sciences de Base <strong>SB</strong></a>
</li>
<li>
<a href="#">Sciences et Techniques de l'Ingénieur <strong>STI</strong></a>
</li>
<li>
<a href="#">Informatique et Communications <strong>IC</strong></a>
</li>
<li>
<a href="#">Sciences de la Vie <strong>SV</strong></a>
</li>
<li>
<a href="#">Collège du Management de la Technologie <strong>CDM</strong></a>
</li>
<li>
<a href="#">Collège des Humanités <strong>CDH</strong></a>
{% if language == 'fr' %}
<a href="{{school.urlfr}}">{{school.namefr}} <strong>{{school.acronym}}</strong></a>
{% endif %}
{% if language == 'en' %}
<a href="{{school.urlen}}">{{school.nameen}} <strong>{{school.acronym}}</strong></a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
21 changes: 18 additions & 3 deletions assets/components/organisms/footer/footer-legal.twig
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

{% if language == 'fr' %}
<div class="footer-legal">
<div class="footer-legal-links">
<a href="">Accessibilité</a>
<a href="">Mentions légales</a>
<a href="https://epfl-idevelop.github.io/elements/#/doc/accessibility.html">Accessibilité</a>
<a href="https://mediacom.epfl.ch/mentions-legales">Mentions légales</a>
</div>
<div>
<p>&copy; 2018 EPFL, tous droits réservés</p>
</div>
</div>
</div>
{% endif %}
{% if language == 'en' %}
<div class="footer-legal">
<div class="footer-legal-links">
<a href="https://epfl-idevelop.github.io/elements/#/doc/accessibility.html">Accessibility</a>
<a href="https://mediacom.epfl.ch/disclaimer">Legals</a>
</div>
<div>
<p>&copy; 2018 EPFL, all rights reserved</p>
</div>
</div>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include '@organisms/footer/footer-light-dark.twig' with { 'language': 'en' } %}
13 changes: 10 additions & 3 deletions assets/components/organisms/footer/footer-light-dark.twig
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<footer class="footer-light" role="contentinfo">
<div class="row">
<div class="col-xl-11 mx-xl-auto">
Expand All @@ -15,12 +17,17 @@
<li class="list-inline-item text-gray-300 pl-3"><small>+41 21 693 11 11</small></li>
</ul>
<p class="footer-light-socials">
<small class="text-white">Suivre les pulsations de l’EPFL sur les réseaux sociaux</small>
{% if language == 'fr' %}
<small>Suivre les pulsations de l’EPFL sur les réseaux sociaux</small>
{% endif %}
{% if language == 'en' %}
<small>Follow the EPFL on social media</small>
{% endif %}
<span>
{% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
{% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
</span>
</p>
{% include "@organisms/footer/footer-legal.twig" %}
{% include "@organisms/footer/footer-legal.twig" with { 'language': language } %}
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions assets/components/organisms/footer/footer-light-en.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include '@organisms/footer/footer-light.twig' with { 'language': 'en' } %}
13 changes: 10 additions & 3 deletions assets/components/organisms/footer/footer-light.twig
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<footer class="footer-light" role="contentinfo">
<div class="row">
<div class="col-6 mx-auto mx-md-0 mb-4 col-md-3 col-lg-2">
Expand All @@ -13,12 +15,17 @@
<li class="list-inline-item text-muted pl-3"><small>+41 21 693 11 11</small></li>
</ul>
<p class="footer-light-socials">
<small>Suivre les pulsations de l’EPFL sur les réseaux sociaux</small>
{% if language == 'fr' %}
<small>Suivez l'EPFL sur les réseaux sociaux</small>
{% endif %}
{% if language == 'en' %}
<small>Follow EPFL on social media</small>
{% endif %}
<span>
{% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
{% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
</span>
</p>
{% include "@organisms/footer/footer-legal.twig" %}
{% include "@organisms/footer/footer-legal.twig" with { 'language': language } %}
</div>
</div>
</div>
Expand Down
10 changes: 8 additions & 2 deletions assets/components/organisms/footer/footer-socials.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<p class="footer-title footer-title-no-underline">Suivre les pulsations de l’EPFL sur les réseaux sociaux</p>
{% if language is not defined %}{% set language = 'fr' %}{% endif %}
{% if language == 'fr' %}
<p class="footer-title footer-title-no-underline">Suivez l'EPFL sur les réseaux sociaux</p>
{% endif %}
{% if language == 'en' %}
<p class="footer-title footer-title-no-underline">Follow EPFL on social media</p>
{% endif %}
<div class="footer-social">
{% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
</div>
</div>
10 changes: 5 additions & 5 deletions assets/components/organisms/footer/footer.twig
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<footer class="footer" role="contentinfo">

<div class="footer-group footer-sitemap">
{% include "@organisms/footer/footer-col.twig" %}
{% include "@organisms/footer/footer-col.twig" with {'language': 'fr'} %}
</div>

<div class="footer-group">
{% include "@organisms/footer/footer-faculties.twig" %}
{% include "@organisms/footer/footer-faculties.twig" with {'language': 'fr'} %}
</div>

<div class="footer-group footer-buttons">
{% include "@organisms/footer/footer-buttons.twig" %}
{% include "@organisms/footer/footer-buttons.twig" with {'language': 'fr'} %}
</div>

<div class="footer-group footer-socials">
{% include "@organisms/footer/footer-socials.twig" %}
{% include "@organisms/footer/footer-socials.twig" with {'language': 'fr'} %}
</div>

{% include "@organisms/footer/footer-legal.twig" %}
{% include "@organisms/footer/footer-legal.twig" with {'language': 'fr'} %}

</footer>
18 changes: 17 additions & 1 deletion assets/components/organisms/footer/footer.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,32 @@ title: Footer
name: footer
wrapper: container
variants:
- name: en
notes: english
- name: light
title: Footer light
notes: french
- name: light-en
notes: english
- name: dark
title: Footer Dark
notes: french
wrapper: bg-dark container
notes: Add .bg-dark to the container\:
- name: dark-en
notes: english
wrapper: bg-dark container
- name: light-dark
title: Footer Light Dark
title: Footer dark light
notes: french
wrapper: bg-dark container
notes: To get the light footer in dark, use this specific html and add .bg-dark to the container:
- name: light-dark-en
notes: english
wrapper: bg-dark container
notes: |
<br>
### Standard
french
1 change: 1 addition & 0 deletions assets/components/organisms/header/header-en.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "@organisms/header/header.twig" with {'language': 'en'} %}
1 change: 1 addition & 0 deletions assets/components/organisms/header/header-fr.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "@organisms/header/header.twig" with {'language': 'fr'} %}
1 change: 1 addition & 0 deletions assets/components/organisms/header/header-light-en.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "@organisms/header/header-light.twig" with {'language': 'en'} %}
1 change: 1 addition & 0 deletions assets/components/organisms/header/header-light-fr.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "@organisms/header/header-light.twig" with {'language': 'fr'} %}
18 changes: 10 additions & 8 deletions assets/components/organisms/header/header-light.twig
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}
{% set site_title = site_title|default('sub site name') %}
<header role="banner" class="header header-light">
{% include '@atoms/drawer/drawer.twig' %}
Expand All @@ -19,15 +20,16 @@
</div>
</li>
{% else %}
<li id="menu-item-888">
<a class="nav-item" href="/propos-0/">À propos</a>
</li>
<li id="menu-item-999">
<a class="nav-item" href="/campus-1/">Campus</a>
</li>
<li id="menu-item-666">
<a class="nav-item" href="/ducation-2/">Éducation</a>
{% for head in header %}
<li id="menu-item-{{ loop.index }}">
{% if language == 'fr' %}
<a class="nav-item" href="{{ head.urlfr }}">{{ head.namefr }}</a>
{% endif %}
{% if language == 'en' %}
<a class="nav-item" href="{{ head.urlen }}">{{ head.nameen }}</a>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
{% include '@molecules/search/search-mobile.twig' %}
Expand Down
11 changes: 9 additions & 2 deletions assets/components/organisms/header/header.twig
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<header role="banner" class="header">
<a class="logo" href="#">
<img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
</a>
<ul aria-hidden="true" class="nav-header d-none d-xl-flex">
{% for item in homepage.navbar_items %}
{% for head in header %}
<li id="menu-item-{{ loop.index }}"{# {% if loop.index == 2 %} class="active"{% endif %}#}>
<a class="nav-item" href="#">{{ item }}</a>
{% if language == 'fr' %}
<a class="nav-item" href="{{ head.urlfr }}">{{ head.namefr }}</a>
{% endif %}
{% if language == 'en' %}
<a class="nav-item" href="{{ head.urlen }}">{{ head.nameen }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
Expand Down
Loading

0 comments on commit 3b53212

Please sign in to comment.