diff --git a/CHANGELOG.md b/CHANGELOG.md index 131a675df..bfe507a96 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,20 @@ # CHANGELOG +*1.2.1* (2018-08-29 +- ⚠️ breaking markup changes + - none + + - ✨ New implementations + - d3304126e8429eb7f907c58c767c390177b5017a card-deck looks beeter when on grey background + - card deck variants + + - 🛠 Fixes & other + - 5e5daf8fb350f96b90f1af6adfb6c9ffb39b6275 faculties page: 3 columns instead of 2 + - prevent margin between two followed gray containers + - added key numbers on example pages + + *1.2.0* (2018-08-27) - ⚠️ breaking markup changes - **Organisms** : diff --git a/VERSION b/VERSION index 26aaba0e8..6085e9465 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.2.0 +1.2.1 diff --git a/assets/components/content-types/event/event.yml b/assets/components/content-types/event/event.yml index 27685400c..75d1060d1 100644 --- a/assets/components/content-types/event/event.yml +++ b/assets/components/content-types/event/event.yml @@ -17,7 +17,7 @@ variants: title: Just finished - name: wrapper title: Slider wrapper - wrapper: bg-gray-100 + wrapper: bg-gray-100 overflow-hidden notes: | ### Basic teaser diff --git a/assets/components/molecules/card-deck/card-deck-duo-gray.twig b/assets/components/molecules/card-deck/card-deck-duo-gray.twig new file mode 100644 index 000000000..32a967b40 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-duo-gray.twig @@ -0,0 +1,4 @@ +
+ {% include '@molecules/card/card.twig' %} + {% include '@molecules/card/card.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-duo.twig b/assets/components/molecules/card-deck/card-deck-duo.twig index d85586865..32a967b40 100644 --- a/assets/components/molecules/card-deck/card-deck-duo.twig +++ b/assets/components/molecules/card-deck/card-deck-duo.twig @@ -1,11 +1,4 @@ -
- {% include '@molecules/card/card-link.twig' %} - {% include '@molecules/card/card-link.twig' %} -
-
-
-
{% include '@molecules/card/card.twig' %} {% include '@molecules/card/card.twig' %} -
\ No newline at end of file + diff --git a/assets/components/molecules/card-deck/card-deck-link-duo-gray.twig b/assets/components/molecules/card-deck/card-deck-link-duo-gray.twig new file mode 100644 index 000000000..0d1b68602 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-link-duo-gray.twig @@ -0,0 +1,4 @@ +
+ {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-link-duo.twig b/assets/components/molecules/card-deck/card-deck-link-duo.twig new file mode 100644 index 000000000..0d1b68602 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-link-duo.twig @@ -0,0 +1,4 @@ +
+ {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-link-single-gray.twig b/assets/components/molecules/card-deck/card-deck-link-single-gray.twig new file mode 100644 index 000000000..f84c79e37 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-link-single-gray.twig @@ -0,0 +1,3 @@ +
+ {% include '@molecules/card/card-link.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-link-single.twig b/assets/components/molecules/card-deck/card-deck-link-single.twig new file mode 100644 index 000000000..f84c79e37 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-link-single.twig @@ -0,0 +1,3 @@ +
+ {% include '@molecules/card/card-link.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-single-gray.twig b/assets/components/molecules/card-deck/card-deck-single-gray.twig new file mode 100644 index 000000000..f84c79e37 --- /dev/null +++ b/assets/components/molecules/card-deck/card-deck-single-gray.twig @@ -0,0 +1,3 @@ +
+ {% include '@molecules/card/card-link.twig' %} +
diff --git a/assets/components/molecules/card-deck/card-deck-single.twig b/assets/components/molecules/card-deck/card-deck-single.twig index e850724d1..a790b786e 100644 --- a/assets/components/molecules/card-deck/card-deck-single.twig +++ b/assets/components/molecules/card-deck/card-deck-single.twig @@ -1,9 +1,3 @@ -
- {% include '@molecules/card/card-link.twig' %} -
-
-
-
{% include '@molecules/card/card.twig' %} -
\ No newline at end of file + diff --git a/assets/components/molecules/card-deck/card-deck.scss b/assets/components/molecules/card-deck/card-deck.scss index 9272d28ef..3489d56ab 100644 --- a/assets/components/molecules/card-deck/card-deck.scss +++ b/assets/components/molecules/card-deck/card-deck.scss @@ -7,30 +7,6 @@ flex-wrap: wrap; @include media-breakpoint-up(lg) { - &.card-deck-line { - - &:before { - content: ' '; - position: absolute; - top: 50%; - left: 5%; - width: 30%; - z-index: 0; - border-bottom: 1px solid $gray-100; - } - - &:after { - content: ' '; - position: absolute; - top: 50%; - right: 5%; - width: 30%; - z-index: 0; - border-bottom: 1px solid $gray-100; - } - - } - > .card { z-index: 1; margin: $spacer * 0.5; @@ -47,7 +23,7 @@ flex: 0 0 33%; margin-left: auto; } - + &:nth-last-child(n + 2) ~ * { flex: 0 0 33%; margin-right: auto; @@ -61,106 +37,162 @@ } } - /* - * for plain cards, we add pseudo elements, allowing the lines not to touch the cards - */ - > div.card { - &:first-child:last-child { - position: relative; - - &:before { - content: ' '; - display: block; - position: absolute; - top: 0; - left: calc(#{$spacer * -1} - 1px); - width: $spacer; - height: 100%; - background: white; - } + &.card-deck-line { - &:after { - content: ' '; - display: block; - position: absolute; - top: 0; - right: calc(#{$spacer * -1} - 1px); - width: $spacer; - height: 100%; - background: white; - } + &:before { + content: ' '; + position: absolute; + top: 50%; + left: 5%; + width: 30%; + z-index: 0; + border-bottom: 1px solid $gray-100; + .bg-gray-100 & { + border-bottom-color: $gray-300; + } } - // two cards are present - &:nth-last-child(n + 2) { - &:before { - content: ' '; - display: block; - position: absolute; - top: 0; - left: calc(#{$spacer * -1} - 1px); - width: $spacer; - height: 100%; - background: white; + &:after { + content: ' '; + position: absolute; + top: 50%; + right: 5%; + width: 30%; + z-index: 0; + border-bottom: 1px solid $gray-100; + + .bg-gray-100 & { + border-bottom-color: $gray-300; } } - - &:nth-last-child(n + 2) ~ * { - &:after { - content: ' '; - display: block; - position: absolute; - top: 0; - right: calc(#{$spacer * -1} - 1px); - width: $spacer; - height: 100%; - background: white; + + /* + * for plain cards, we add pseudo elements, allowing the lines not to touch the cards + */ + > div.card { + &:first-child:last-child { + position: relative; + + &:before { + content: ' '; + display: block; + position: absolute; + top: 0; + left: calc(#{$spacer * -1} - 1px); + width: $spacer; + height: 100%; + background: white; + + .bg-gray-100 & { + background-color: $gray-100; + } + } + + &:after { + content: ' '; + display: block; + position: absolute; + top: 0; + right: calc(#{$spacer * -1} - 1px); + width: $spacer; + height: 100%; + background: white; + + .bg-gray-100 & { + background-color: $gray-100; + } + } } - } - // three or more cards are present - &:nth-last-child(n + 3), - &:nth-last-child(n + 3) ~ * { - - &:before, - &:after { - content: none; + // two cards are present + &:nth-last-child(n + 2) { + &:before { + content: ' '; + display: block; + position: absolute; + top: 0; + left: calc(#{$spacer * -1} - 1px); + width: $spacer; + height: 100%; + background: white; + + .bg-gray-100 & { + background-color: $gray-100; + } + } } - } - } + &:nth-last-child(n + 2) ~ * { + &:after { + content: ' '; + display: block; + position: absolute; + top: 0; + right: calc(#{$spacer * -1} - 1px); + width: $spacer; + height: 100%; + background: white; + + .bg-gray-100 & { + background-color: $gray-100; + } + } + } - /* - * Styles for card-links. this is tricky because we already use before and after pseudo elements - * on card-links. So to avoid the line touching the card, we add a border - */ - > a.card { + // three or more cards are present + &:nth-last-child(n + 3), + &:nth-last-child(n + 3) ~ * { - // only one card is present - &:first-child:last-child { - flex: 0 0 calc(33% + #{$spacer * 1.5}); - border-left: 1rem solid white; - border-right: 1rem solid white; - } + &:before, + &:after { + content: none; + } - // two cards are present - &:nth-last-child(n + 2) { - flex: 0 0 calc(33% + #{$spacer * 1.5}); - border-left: 1rem solid white; - } - - &:nth-last-child(n + 2) ~ * { - flex: 0 0 calc(33% + $spacer); - border-right: 1rem solid white; + } } - // three or more cards are present - &:nth-last-child(n + 3), - &:nth-last-child(n + 3) ~ * { - flex: 1 1 30%; - border: none; + /* + * Styles for card-links. this is tricky because we already use before and after pseudo elements + * on card-links. So to avoid the line touching the card, we add a border + */ + > a.card { + + // only one card is present + &:first-child:last-child { + flex: 0 0 calc(33% + #{$spacer * 1.5}); + border-left: 1rem solid white; + border-right: 1rem solid white; + .bg-gray-100 & { + border-right-color: $gray-100; + border-left-color: $gray-100; + } + } + + // two cards are present + &:nth-last-child(n + 2) { + flex: 0 0 calc(33% + #{$spacer * 1.5}); + border-left: 1rem solid white; + .bg-gray-100 & { + border-left-color: $gray-100; + } + } + + &:nth-last-child(n + 2) ~ * { + flex: 0 0 calc(33% + $spacer); + border-right: 1rem solid white; + .bg-gray-100 & { + border-right-color: $gray-100; + } + } + + // three or more cards are present + &:nth-last-child(n + 3), + &:nth-last-child(n + 3) ~ * { + flex: 1 1 30%; + border: none; + } } } } -} \ No newline at end of file +} diff --git a/assets/components/molecules/card-deck/card-deck.twig b/assets/components/molecules/card-deck/card-deck.twig index 8043b0671..70efaa8db 100644 --- a/assets/components/molecules/card-deck/card-deck.twig +++ b/assets/components/molecules/card-deck/card-deck.twig @@ -3,11 +3,3 @@ {% include '@molecules/card/card-link.twig' %} {% include '@molecules/card/card-link.twig' %} -
-
-
-
- {% include '@molecules/card/card.twig' %} - {% include '@molecules/card/card.twig' %} - {% include '@molecules/card/card.twig' %} -
diff --git a/assets/components/molecules/card-deck/card-deck.yml b/assets/components/molecules/card-deck/card-deck.yml index 0a22bae76..5c8cf07a9 100644 --- a/assets/components/molecules/card-deck/card-deck.yml +++ b/assets/components/molecules/card-deck/card-deck.yml @@ -3,10 +3,30 @@ name: card-deck variants: - name: duo title: Duo + - name: duo-gray + title: Duo with gray background + notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them. + wrapper: bg-gray-100 py-4 my-4 - name: single title: Single + - name: single-gray + title: Single with gray background + wrapper: bg-gray-100 py-4 my-4 + notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them. + - name: link-duo + title: Link Duo + - name: link-duo-gray + title: Link Duo with gray background + wrapper: bg-gray-100 py-4 my-4 + notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them. + - name: link-single + title: Link Single + - name: link-single-gray + title: Link Single with gray background + wrapper: bg-gray-100 py-4 my-4 + notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them. notes: | This component allows you to display multiple cards side by side, in a set of equal width and height. You just have to wrap cards inside of a `.card-deck` component.

- Add the `.card-deck-line` class to the container, when you want to display 1 ou 2 cards only, to add a visual touch on desktop helping readability \ No newline at end of file + Add the `.card-deck-line` class to the container, when you want to display 1 ou 2 cards only, to add a visual touch on desktop helping readability diff --git a/assets/components/pages/campus/campus.twig b/assets/components/pages/campus/campus.twig index 59839fc1b..2903f1eb3 100644 --- a/assets/components/pages/campus/campus.twig +++ b/assets/components/pages/campus/campus.twig @@ -55,8 +55,11 @@ -
-

Composant "chiffre clés"

+
+
+

Key numbers

+
+ {% include '@organisms/key-number-group/key-number-group.twig' %}
diff --git a/assets/components/pages/education/education.twig b/assets/components/pages/education/education.twig index 51c1e652d..7dcc7421d 100644 --- a/assets/components/pages/education/education.twig +++ b/assets/components/pages/education/education.twig @@ -19,8 +19,11 @@

-
-

Composant "chiffre clés"

+
+
+

Key numbers

+
+ {% include '@organisms/key-number-group/key-number-group.twig' %}
diff --git a/assets/components/pages/facultes/facultes.twig b/assets/components/pages/facultes/facultes.twig index 3e92b6cf1..12b214c57 100644 --- a/assets/components/pages/facultes/facultes.twig +++ b/assets/components/pages/facultes/facultes.twig @@ -19,8 +19,8 @@
- {% for i in 1..8 %} -
+ {% for i in 1..10 %} +
{% include '@content-types/faculty/faculty.twig' %}
{% endfor %} diff --git a/assets/components/pages/homepage/homepage.twig b/assets/components/pages/homepage/homepage.twig index 73656ecc2..791aebc08 100644 --- a/assets/components/pages/homepage/homepage.twig +++ b/assets/components/pages/homepage/homepage.twig @@ -85,7 +85,7 @@ {# The Calendar section #} {# TODO add card-slider from Yann PR #} -
+
{% include '@molecules/datepicker/datepicker-fancy.twig' %}
diff --git a/assets/components/pages/innovation/innovation.twig b/assets/components/pages/innovation/innovation.twig index 05b139bfe..47f326ad7 100644 --- a/assets/components/pages/innovation/innovation.twig +++ b/assets/components/pages/innovation/innovation.twig @@ -19,11 +19,13 @@

-
-

Composant "chiffre clés"

+
+
+

Key numbers

+
+ {% include '@organisms/key-number-group/key-number-group.twig' %}
-
{% include '@content-types/news/news-latest-two.twig' %}
diff --git a/assets/components/pages/research/research.twig b/assets/components/pages/research/research.twig index 0c01f5534..8e63058c9 100644 --- a/assets/components/pages/research/research.twig +++ b/assets/components/pages/research/research.twig @@ -11,13 +11,22 @@
-
+

- Insérer le composant "Key numbers" + L'EPFL s'engage dans des projets novateurs alliant recherche fondamentale et recherche appliquée. Cette orientation permet de transformer l'excellence scientifique en compétitivité économique, en emplois et en qualité de vie, grâce au transfert des technologies.

+

L'Ecole dispose d'une organisation unique pour stimuler les recherches transdisciplinaires et favoriser les partenariats avec d'autres institutions.

+

Avec plus de 300 laboratoires et groupes de recherche sur son campus, l'EPFL figure parmi les institutions les plus innovantes et les plus productives sur le plan scientifique.

+
+
+

Key numbers

+
+ {% include '@organisms/key-number-group/key-number-group.twig' %} +
+

The last news

@@ -34,17 +43,7 @@
-
-
-

- L'EPFL s'engage dans des projets novateurs alliant recherche fondamentale et recherche appliquée. Cette orientation permet de transformer l'excellence scientifique en compétitivité économique, en emplois et en qualité de vie, grâce au transfert des technologies.

-

L'Ecole dispose d'une organisation unique pour stimuler les recherches transdisciplinaires et favoriser les partenariats avec d'autres institutions.

-

Avec plus de 300 laboratoires et groupes de recherche sur son campus, l'EPFL figure parmi les institutions les plus innovantes et les plus productives sur le plan scientifique.

-

-
-
- -
+

Explore

@@ -69,7 +68,6 @@
-
diff --git a/assets/config/layout.scss b/assets/config/layout.scss index fe51d3613..faa412755 100644 --- a/assets/config/layout.scss +++ b/assets/config/layout.scss @@ -59,7 +59,7 @@ grid-column: content; } - .container-full, + .container-full, .container, .embed-responsive, & > iframe { @@ -67,6 +67,8 @@ } } +.container-full[class*="bg-"] + .container-full[class*="bg-"] { margin-top: 0 !important; } + @include ie11('.container-grid') { display: block; } diff --git a/package.json b/package.json index e7a9c67cc..fcbfde6b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epfl-elements", - "version": "1.2.0", + "version": "1.2.1", "license": "MIT", "main": "index.html", "repository": {