Skip to content

Commit

Permalink
Merge branch 'dev' into styleguide/new-epfl-icons
Browse files Browse the repository at this point in the history
  • Loading branch information
williambelle committed May 17, 2024
2 parents f2898bf + 83bce32 commit 52c3e98
Show file tree
Hide file tree
Showing 39 changed files with 331 additions and 79 deletions.
2 changes: 1 addition & 1 deletion assets/components/atoms/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ input[type="button"] {

.btn-secondary {
background: transparent;
border-color: $gray-300;
border-color: $gray-500;

.bg-dark & {
border-color: $gray-600;
Expand Down
1 change: 1 addition & 0 deletions assets/components/atoms/input/input.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@charset "utf-8";

.form-control {
border-color: $input-border-color;
height: auto;
transition:
color 0.3s,
Expand Down
2 changes: 2 additions & 0 deletions assets/components/atoms/link/link-button.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<a class="btn btn-primary" href="#">Primary button link</a>
<a class="btn btn-secondary" href="#">Secondary button link</a>
6 changes: 1 addition & 5 deletions assets/components/atoms/link/link.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
@charset 'utf-8';

// All links are underlined by default. Supported browsers will have the right color. https://caniuse.com/#feat=text-decoration
a,
a:visited {
color: $black;
text-decoration: underline;
background-color: transparent;
a {
text-decoration-color: $link-hover-color;
transition:
text-decoration-color 0.2s ease-in-out,
Expand Down
6 changes: 6 additions & 0 deletions assets/components/atoms/link/link.yml
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,9 @@ variants:
- name: login
title: Login link
notes:
- name: button
title: Button link
notes: |
Use the classes `btn`, `btn-primary` or `btn-secondary` to create a link with the look of a button.
⚠️ Button links should be used to target a page or section of a page – like a regular link. To trigger an action, use an [HTML button](#/atoms/button).
11 changes: 11 additions & 0 deletions assets/components/atoms/picture/picture-news-thumb.twig
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
{% if light_image %}
<picture>
<source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
<source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
<source media="(min-width: 720px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-80x45.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-160x90.jpg 2x">
<source media="(min-width: 541px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-120x68.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-240x135.jpg 2x">
<source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-1080x608.jpg 2x">
<img src="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg" class="img-fluid" alt="ALT">
</picture>
{% else %}
<picture>
<source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
<source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
Expand All @@ -6,3 +16,4 @@
<source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-1080x608.jpg 2x">
<img src="./images/styleguide/news-thumbs/news_thumb-95x53.jpg" class="img-fluid" alt="ALT">
</picture>
{% endif %}
4 changes: 4 additions & 0 deletions assets/components/atoms/select/select.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@charset "utf-8";

.custom-select {
border-color: $custom-select-border-color;
}

.ms-offscreen {
clip: rect(0 0 0 0)!important;
position: absolute!important;
Expand Down
2 changes: 1 addition & 1 deletion assets/components/atoms/tag/tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ a.tag, button.tag, span.tag, div.tag, p.tag {
padding: 0.4em 0.6em;
text-decoration: none;
background: $white;
border: 1px solid $gray-300;
border: 1px solid $gray-500;
font-size: inherit;
line-height: 1;
font-weight: 400;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div class="card-slider-wrapper">
<div class="card-slider">
{% for i in 1..10 %}
<div class="card-slider-cell">
<a href="#" class="card link-trapeze-horizontal">
<div class="card-body">
{% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
<div itemscope itemtype="http://schema.org/Article">
<h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
<p>
<time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
<span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
Epicureum esse, si probarem, quae ille diceret?</span>
</p>
</div>
</div>
</a>
</div>
{% endfor %}
</div>

<div class="card-slider-footer">
<div>
<button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chevron-left"></use>
</svg>
</button>
<button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
</div>
36 changes: 36 additions & 0 deletions assets/components/content-types/news/news-horizontal-listing.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div class="card-slider-wrapper">
<div class="card-slider">
{% for i in 1..10 %}
<div class="card-slider-cell">
<a href="#" class="card card-gray link-trapeze-horizontal">
<div class="card-body">
{% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
<div itemscope itemtype="http://schema.org/Article">
<h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
<p>
<time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
<span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
Epicureum esse, si probarem, quae ille diceret?</span>
</p>
</div>
</div>
</a>
</div>
{% endfor %}
</div>

<div class="card-slider-footer">
<div>
<button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chevron-left"></use>
</svg>
</button>
<button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
</div>
7 changes: 7 additions & 0 deletions assets/components/content-types/news/news.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
title: News
name: news
variants:
- name: horizontal-listing
title: Horizontal Listing
notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
- name: horizontal-listing-gray
title: Horizontal Listing with gray background
notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
wrapper: bg-gray-100 py-4 my-4
- name: highlighted
title: Highlighted
- name: highlighted-carousel
Expand Down
23 changes: 23 additions & 0 deletions assets/components/molecules/key-number/key-number-hn-link.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% set icon = icon|default("https://via.placeholder.com/") %}
<a class="card link-trapeze-horizontal" href="#">
<div class="card border-0 bg-white m-0 h-100">
<div class="card-header border-0">
<div class="row">
<div class="col-md-6">
<p class="h4">près de 18'000</p>
</div>
<div class="col-md-6 text-right">
<img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
</div>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col-md-12">
<hr />
<p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
</div>
</div>
</div>
</div>
</a>
23 changes: 23 additions & 0 deletions assets/components/molecules/key-number/key-number-hn.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% set icon = icon|default("https://via.placeholder.com/") %}
<div class="card">
<div class="card border-0 bg-white m-0 h-100">
<div class="card-header border-0">
<div class="row">
<div class="col-md-6">
<p class="h4">près de 18'000</p>
</div>
<div class="col-md-6 text-right">
<img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
</div>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col-md-12">
<hr />
<p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
</div>
</div>
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions assets/components/molecules/key-number/key-number.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@ variants:
- name: large
title: Large
wrapper: 'bg-gray-100'
- name: hn
title: Highlighted number
- name: hn-link
title: Highlighted number with link
36 changes: 35 additions & 1 deletion assets/components/molecules/list-group/list-group-teasers.twig
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="list-group">
{% for i in 1..4 %}
{% for i in 1..2 %}

<div class="list-group-teaser list-group-item list-group-teaser-container">
<div class="list-group-teaser-thumbnail">
Expand All @@ -18,6 +18,40 @@
</div>
{% endfor %}

<div class="list-group-teaser list-group-item list-group-teaser-container">
<div class="list-group-teaser-thumbnail">
<a href="#" class="link-trapeze-horizontal">
{% include '@atoms/picture/picture-news-thumb.twig' %}
<div class="news-video-overlay"></div>
</a>
</div>
<div class="list-group-teaser-content">
<h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
<p>
<time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
<span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
Epicureum esse, si probarem, quae ille diceret?</span>
</p>
</div>
</div>

<div class="list-group-teaser list-group-item list-group-teaser-container">
<div class="list-group-teaser-thumbnail">
<a href="#" class="link-trapeze-horizontal">
{% include '@atoms/picture/picture-news-thumb.twig' with { light_image: true } %}
<div class="news-video-overlay"></div>
</a>
</div>
<div class="list-group-teaser-content">
<h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
<p>
<time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
<span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
Epicureum esse, si probarem, quae ille diceret?</span>
</p>
</div>
</div>

<div class="list-group-teaser list-group-item list-group-teaser-container teaser-img-right">
<div class="list-group-teaser-thumbnail">
<a href="#" class="link-trapeze-horizontal">
Expand Down
22 changes: 22 additions & 0 deletions assets/components/molecules/list-group/list-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -192,3 +192,25 @@

}
}

.list-group-teaser-thumbnail .news-video-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: transparent;

&:before {
content: "";
width: 2.25rem;
height: 2.25rem;
background: url(../images/icons/icon-teaser-video.svg);
background-size: 100%;
border-radius: 50%;
box-shadow: 0 0 1rem rgba(0,0,0,0.16);
}
}
15 changes: 7 additions & 8 deletions assets/components/molecules/search/search-mobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,23 @@

export default () => {

$('#search-mobile-toggle').click(function(event){
$('#search-mobile-toggle').on('click', () => {

var searchContainer = $('.search-mobile');
var searchField = searchContainer.find('.form-control');
const searchContainer = $('.search-mobile');
const searchField = searchContainer.find('.form-control');

searchContainer.toggleClass('show');
$('body').toggleClass('search-open');

if ( searchContainer.hasClass('show') ) {
searchField.focus();
if (searchContainer.hasClass('show')) {
searchField.trigger('focus');
}

});

$('#search-mobile-close').click(function(event){
$('#search-mobile-close').on('click', () => {

var searchContainer = $('.search-mobile');
var searchField = searchContainer.find('.form-control');
const searchContainer = $('.search-mobile');

searchContainer.removeClass('show');
$('body').removeClass('search-open');
Expand Down
2 changes: 1 addition & 1 deletion assets/components/molecules/search/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

export default () => {
$('.search').on('shown.bs.dropdown', () => {
$('.search input[type="text"]').focus();
$('.search input[type="text"]').trigger('focus');
});
};
15 changes: 12 additions & 3 deletions assets/components/organisms/footer/footer-legal.twig
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@
<a href="https://www.epfl.ch/about/overview/fr/reglements-et-directives/mentions-legales/">Accessibilité</a>
<a href="https://www.epfl.ch/about/overview/fr/reglements-et-directives/mentions-legales/">Mentions légales</a>
<a href="https://go.epfl.ch/protection-des-donnees/">Protection des données</a>
{% if isNews %}
<a href="https://go.epfl.ch/charte">Charte</a>
{% endif %}
</div>
<div>
<p>&copy; 2023 EPFL, tous droits réservés</p>
<p>&copy; 2024 EPFL, tous droits réservés</p>
</div>
</div>
{% endif %}
Expand All @@ -18,9 +21,12 @@
<a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Accessibility</a>
<a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Disclaimer</a>
<a href="https://go.epfl.ch/privacy-policy/">Privacy policy</a>
{% if isNews %}
<a href="https://go.epfl.ch/guidelines">Charter</a>
{% endif %}
</div>
<div>
<p>&copy; 2023 EPFL, all rights reserved</p>
<p>&copy; 2024 EPFL, all rights reserved</p>
</div>
</div>
{% endif %}
Expand All @@ -30,9 +36,12 @@
<a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Zugänglichkeit</a>
<a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Impressum</a>
<a href="https://go.epfl.ch/privacy-policy/">Datenschutzerklärung</a>
{% if isNews %}
<a href="https://go.epfl.ch/guidelines">Richtlinien</a>
{% endif %}
</div>
<div>
<p>&copy; 2023 EPFL, alle Rechte vorbehalten</p>
<p>&copy; 2024 EPFL, alle Rechte vorbehalten</p>
</div>
</div>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="container">
<div class="card-deck">
{% include '@molecules/key-number/key-number-hn-link.twig' %}
{% include '@molecules/key-number/key-number-hn-link.twig' %}
{% include '@molecules/key-number/key-number-hn.twig' %}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
title: Key number group
name: key-number-group
wrapper: bg-gray-100
variants:
- name: hn
title: Highlighted number
Loading

0 comments on commit 52c3e98

Please sign in to comment.