diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss index a91349c17..87ce98b97 100644 --- a/assets/components/atoms/button/button.scss +++ b/assets/components/atoms/button/button.scss @@ -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; diff --git a/assets/components/atoms/input/input.scss b/assets/components/atoms/input/input.scss index 019ef94e0..e67b1b914 100644 --- a/assets/components/atoms/input/input.scss +++ b/assets/components/atoms/input/input.scss @@ -1,6 +1,7 @@ @charset "utf-8"; .form-control { + border-color: $input-border-color; height: auto; transition: color 0.3s, diff --git a/assets/components/atoms/link/link-button.twig b/assets/components/atoms/link/link-button.twig new file mode 100644 index 000000000..581e5fb01 --- /dev/null +++ b/assets/components/atoms/link/link-button.twig @@ -0,0 +1,2 @@ +Primary button link +Secondary button link diff --git a/assets/components/atoms/link/link.scss b/assets/components/atoms/link/link.scss index 3fad2bee2..e3e73ab63 100644 --- a/assets/components/atoms/link/link.scss +++ b/assets/components/atoms/link/link.scss @@ -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, diff --git a/assets/components/atoms/link/link.yml b/assets/components/atoms/link/link.yml index 55f486cac..b6920eccb 100644 --- a/assets/components/atoms/link/link.yml +++ b/assets/components/atoms/link/link.yml @@ -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). diff --git a/assets/components/atoms/picture/picture-news-thumb.twig b/assets/components/atoms/picture/picture-news-thumb.twig index 4bd7a500e..44f0843b7 100644 --- a/assets/components/atoms/picture/picture-news-thumb.twig +++ b/assets/components/atoms/picture/picture-news-thumb.twig @@ -1,3 +1,13 @@ +{% if light_image %} + + + + + + + ALT + +{% else %} @@ -6,3 +16,4 @@ ALT +{% endif %} diff --git a/assets/components/atoms/select/select.scss b/assets/components/atoms/select/select.scss index 784ffc074..ed513ce88 100644 --- a/assets/components/atoms/select/select.scss +++ b/assets/components/atoms/select/select.scss @@ -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; diff --git a/assets/components/atoms/tag/tag.scss b/assets/components/atoms/tag/tag.scss index 7ab50d00e..c5bcf62d2 100644 --- a/assets/components/atoms/tag/tag.scss +++ b/assets/components/atoms/tag/tag.scss @@ -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; diff --git a/assets/components/content-types/news/news-horizontal-listing-gray.twig b/assets/components/content-types/news/news-horizontal-listing-gray.twig new file mode 100644 index 000000000..0867a9016 --- /dev/null +++ b/assets/components/content-types/news/news-horizontal-listing-gray.twig @@ -0,0 +1,36 @@ +
+
+ {% for i in 1..10 %} +
+ +
+ {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %} +
+

Physics: new e-books for the AIAA Education Series

+

+ + — 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? +

+
+
+ +
+ {% endfor %} +
+ +
+
+ + +
+
+
diff --git a/assets/components/content-types/news/news-horizontal-listing.twig b/assets/components/content-types/news/news-horizontal-listing.twig new file mode 100644 index 000000000..c02d265df --- /dev/null +++ b/assets/components/content-types/news/news-horizontal-listing.twig @@ -0,0 +1,36 @@ +
+
+ {% for i in 1..10 %} +
+ +
+ {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %} +
+

Physics: new e-books for the AIAA Education Series

+

+ + — 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? +

+
+
+ +
+ {% endfor %} +
+ +
+
+ + +
+
+
diff --git a/assets/components/content-types/news/news.yml b/assets/components/content-types/news/news.yml index 90eba9016..a7a60881e 100644 --- a/assets/components/content-types/news/news.yml +++ b/assets/components/content-types/news/news.yml @@ -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 diff --git a/assets/components/molecules/key-number/key-number-hn-link.twig b/assets/components/molecules/key-number/key-number-hn-link.twig new file mode 100644 index 000000000..fb78b3271 --- /dev/null +++ b/assets/components/molecules/key-number/key-number-hn-link.twig @@ -0,0 +1,23 @@ +{% set icon = icon|default("https://via.placeholder.com/") %} + +
+
+
+
+

près de 18'000

+
+
+ Pictogramme avec deux personnages +
+
+
+
+
+
+
+

étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique

+
+
+
+
+ diff --git a/assets/components/molecules/key-number/key-number-hn.twig b/assets/components/molecules/key-number/key-number-hn.twig new file mode 100644 index 000000000..ad8a82a14 --- /dev/null +++ b/assets/components/molecules/key-number/key-number-hn.twig @@ -0,0 +1,23 @@ +{% set icon = icon|default("https://via.placeholder.com/") %} +
+
+
+
+
+

près de 18'000

+
+
+ Pictogramme avec deux personnages +
+
+
+
+
+
+
+

étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique

+
+
+
+
+
diff --git a/assets/components/molecules/key-number/key-number.yml b/assets/components/molecules/key-number/key-number.yml index e7f6b018e..00431fb73 100644 --- a/assets/components/molecules/key-number/key-number.yml +++ b/assets/components/molecules/key-number/key-number.yml @@ -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 diff --git a/assets/components/molecules/list-group/list-group-teasers.twig b/assets/components/molecules/list-group/list-group-teasers.twig index e51d6db6d..25a02cdc6 100644 --- a/assets/components/molecules/list-group/list-group-teasers.twig +++ b/assets/components/molecules/list-group/list-group-teasers.twig @@ -1,5 +1,5 @@
- {% for i in 1..4 %} + {% for i in 1..2 %}
@@ -18,6 +18,40 @@
{% endfor %} +
+
+ + {% include '@atoms/picture/picture-news-thumb.twig' %} +
+ +
+
+

Physics: new e-books for the AIAA Education Series

+

+ + — 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? +

+
+
+ +
+
+ + {% include '@atoms/picture/picture-news-thumb.twig' with { light_image: true } %} +
+ +
+
+

Physics: new e-books for the AIAA Education Series

+

+ + — 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? +

+
+
+
diff --git a/assets/components/molecules/list-group/list-group.scss b/assets/components/molecules/list-group/list-group.scss index a4603d232..92c3b8065 100644 --- a/assets/components/molecules/list-group/list-group.scss +++ b/assets/components/molecules/list-group/list-group.scss @@ -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); + } +} diff --git a/assets/components/molecules/search/search-mobile.js b/assets/components/molecules/search/search-mobile.js index aa0e9b059..77b72ee13 100644 --- a/assets/components/molecules/search/search-mobile.js +++ b/assets/components/molecules/search/search-mobile.js @@ -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'); diff --git a/assets/components/molecules/search/search.js b/assets/components/molecules/search/search.js index 9129663ce..dcaf4b015 100644 --- a/assets/components/molecules/search/search.js +++ b/assets/components/molecules/search/search.js @@ -2,6 +2,6 @@ export default () => { $('.search').on('shown.bs.dropdown', () => { - $('.search input[type="text"]').focus(); + $('.search input[type="text"]').trigger('focus'); }); }; diff --git a/assets/components/organisms/footer/footer-legal.twig b/assets/components/organisms/footer/footer-legal.twig index c05e94950..eaaa00945 100644 --- a/assets/components/organisms/footer/footer-legal.twig +++ b/assets/components/organisms/footer/footer-legal.twig @@ -6,9 +6,12 @@ Accessibilité Mentions légales Protection des données + {% if isNews %} + Charte + {% endif %}
-

© 2023 EPFL, tous droits réservés

+

© 2024 EPFL, tous droits réservés

{% endif %} @@ -18,9 +21,12 @@ Accessibility Disclaimer Privacy policy + {% if isNews %} + Charter + {% endif %}
-

© 2023 EPFL, all rights reserved

+

© 2024 EPFL, all rights reserved

{% endif %} @@ -30,9 +36,12 @@ Zugänglichkeit Impressum Datenschutzerklärung + {% if isNews %} + Richtlinien + {% endif %}
-

© 2023 EPFL, alle Rechte vorbehalten

+

© 2024 EPFL, alle Rechte vorbehalten

{% endif %} diff --git a/assets/components/organisms/key-number-group/key-number-group-hn.twig b/assets/components/organisms/key-number-group/key-number-group-hn.twig new file mode 100644 index 000000000..391445fc0 --- /dev/null +++ b/assets/components/organisms/key-number-group/key-number-group-hn.twig @@ -0,0 +1,7 @@ +
+
+ {% 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' %} +
+
diff --git a/assets/components/organisms/key-number-group/key-number-group.yml b/assets/components/organisms/key-number-group/key-number-group.yml index 81d3e874c..9fe573a45 100644 --- a/assets/components/organisms/key-number-group/key-number-group.yml +++ b/assets/components/organisms/key-number-group/key-number-group.yml @@ -1,3 +1,6 @@ title: Key number group name: key-number-group wrapper: bg-gray-100 +variants: + - name: hn + title: Highlighted number diff --git a/assets/components/pages/blog-single/blog-single.twig b/assets/components/pages/blog-single/blog-single.twig index 921d2ad6f..945ceed82 100644 --- a/assets/components/pages/blog-single/blog-single.twig +++ b/assets/components/pages/blog-single/blog-single.twig @@ -6,9 +6,9 @@ {% block content %} -
+
-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Publié le 9 décembre 2019

@@ -20,10 +20,22 @@
-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at pharetra est, non bibendum dolor. Proin turpis neque, viverra a augue vitae, dapibus iaculis tellus. Morbi ante nisi, venenatis vel velit id, ultrices efficitur nisl. Morbi consectetur non turpis eu interdum. Phasellus nec felis at justo efficitur cursus sed quis sapien. Proin facilisis sapien sit amet venenatis pellentesque. Nulla efficitur, massa a facilisis egestas, massa nulla scelerisque tellus, quis fringilla orci ante sed risus.

-

Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc. Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.

+ +
+ {% include "@atoms/picture/picture.twig" %} +
+ +

Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc.

+ +
+ {% include "@atoms/picture/picture.twig" %} +
+ +

Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.

+

In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam.

@@ -33,12 +45,17 @@

In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam. Praesent fringilla neque ante, et auctor augue gravida at. Nunc pulvinar, nibh fringilla suscipit interdum, augue velit convallis enim, tempor rutrum risus justo ac mauris. Praesent lobortis odio augue. Curabitur vestibulum condimentum ipsum, a rhoncus est malesuada quis. Fusce luctus nisl et tortor varius ornare.

+ +
+ {% include '@atoms/video/video.twig' %} +
+

Nunc id imperdiet est. Phasellus a semper ante. Sed purus nisi, iaculis non purus id, ultricies vulputate leo. Ut dignissim vitae quam eget gravida. Nulla nec metus tortor. Nullam quis nisl at purus commodo consequat. Nullam sem dolor, faucibus in turpis eleifend, condimentum ultricies nisi. Phasellus vitae gravida lectus. Nam tellus magna, lacinia vel congue non, egestas at erat. Mauris consequat, justo in lobortis pharetra, nibh sapien gravida risus, vitae commodo nunc tellus eu nisi. Fusce tempus nisl laoreet diam luctus dictum. Aenean nisi felis, maximus nec ante ut, sodales viverra nisl. Vivamus iaculis fermentum lorem, vel sagittis erat imperdiet ac. In hac habitasse platea dictumst. Vivamus congue augue eget mi mollis tristique.

Cras non sem sed erat feugiat pellentesque. In in risus est. Praesent ut lectus sit amet leo viverra scelerisque. Nulla facilisi. Cras vel lectus tortor. In auctor dictum odio vitae mollis. Donec fringilla viverra suscipit. Curabitur cursus nibh a purus volutpat imperdiet. Integer mollis varius enim eu porttitor.

-