From 05a607515c9a89a31f6ccb4b6e3299c0eeec9812 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 4 Dec 2019 15:07:34 +0100 Subject: [PATCH 01/10] Fix card deck display bug on medium size devices --- .../molecules/card-deck/card-deck.scss | 22 +++++++++++++++++-- .../molecules/card-deck/card-deck.twig | 3 +++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/assets/components/molecules/card-deck/card-deck.scss b/assets/components/molecules/card-deck/card-deck.scss index 753caf9ce..e9258c0be 100644 --- a/assets/components/molecules/card-deck/card-deck.scss +++ b/assets/components/molecules/card-deck/card-deck.scss @@ -5,6 +5,26 @@ margin-left: $spacer * -0.5; margin-right: $spacer * -0.5; flex-wrap: wrap; + + @include media-breakpoint-up(sm) { + + > .card { + + // only one card is present + &:first-child:last-child { + flex: 0 0 60%; + margin-left: auto; + margin-right: auto; + } + + // two or more cards are present + &:nth-last-child(n + 2), + &:nth-last-child(n + 2) ~ * { + flex: 1 1 47%; + margin: $spacer * 0.5; + } + } + } @include media-breakpoint-up(lg) { > .card { @@ -14,8 +34,6 @@ // only one card is present &:first-child:last-child { flex: 0 0 33%; - margin-left: auto; - margin-right: auto; } // two cards are present diff --git a/assets/components/molecules/card-deck/card-deck.twig b/assets/components/molecules/card-deck/card-deck.twig index 70efaa8db..f8b683e26 100644 --- a/assets/components/molecules/card-deck/card-deck.twig +++ b/assets/components/molecules/card-deck/card-deck.twig @@ -2,4 +2,7 @@ {% include '@molecules/card/card-link.twig' %} {% include '@molecules/card/card-link.twig' %} {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} From 31f3d6300e1e9c16d16fb7faaf02be197ed31a25 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 4 Dec 2019 15:30:49 +0100 Subject: [PATCH 02/10] Add 'thinner-teaser' class which can be applied to 'fullwidth-teaser-horizontal' --- .../fullwidth-teaser-horizontal.twig | 4 +++- .../fullwidth-teaser/fullwidth-teaser.scss | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig index 08d78e591..a9016a6a1 100644 --- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig +++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig @@ -1,4 +1,6 @@ -
+{% set thinner_teaser = thinner_teaser|default(false) %} + +
{% if not img %}{% set img %}./images/styleguide/basic_page_teaser.jpg{% endset %}{% endif %} An image description diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss index ccfde61e0..47b356b05 100644 --- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss +++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss @@ -283,3 +283,22 @@ } } } + +.fullwidth-teaser-horizontal.thinner-teaser { + background: yellow; + min-height: 24rem; + + @include media-breakpoint-up(xl) { + + picture, + figure { + height: 30vw; + max-height: 50vh; + min-height: 24rem; + } + + .fullwidth-teaser-text { + padding-bottom: $spacer * 3; + } + } +} From 9c78a093106007cd6a906354287cf9f6a19e645a Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 4 Dec 2019 15:31:40 +0100 Subject: [PATCH 03/10] Create a 'filters' variant for the blog home --- .../molecules/filters/filters-blog.twig | 48 +++++++++++++++++++ .../components/molecules/filters/filters.yml | 5 ++ .../molecules/form-group/form-group.scss | 6 ++- 3 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 assets/components/molecules/filters/filters-blog.twig diff --git a/assets/components/molecules/filters/filters-blog.twig b/assets/components/molecules/filters/filters-blog.twig new file mode 100644 index 000000000..39e0d6b9e --- /dev/null +++ b/assets/components/molecules/filters/filters-blog.twig @@ -0,0 +1,48 @@ + diff --git a/assets/components/molecules/filters/filters.yml b/assets/components/molecules/filters/filters.yml index 444b3e001..f0b47725a 100644 --- a/assets/components/molecules/filters/filters.yml +++ b/assets/components/molecules/filters/filters.yml @@ -2,3 +2,8 @@ name: filters title: Filters notes: | The filters are displayed (in a sidebar) on desktop but have to be collapsed in on mobile. + variants: + - name: blog + title: Blog content filters + notes: | + diff --git a/assets/components/molecules/form-group/form-group.scss b/assets/components/molecules/form-group/form-group.scss index de2826549..e2a312614 100644 --- a/assets/components/molecules/form-group/form-group.scss +++ b/assets/components/molecules/form-group/form-group.scss @@ -2,8 +2,12 @@ .form-group { label { - font-size: $font-size-sm; color: $gray-600; + font-size: 1em; + } + + .custom-control label { + font-size: $font-size-sm; } } From ff5be77f96dc1800b4ef7447155370afbdadb3e2 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 4 Dec 2019 15:31:53 +0100 Subject: [PATCH 04/10] Update blog homepage --- .../pages/blog-homepage/blog-homepage.twig | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/assets/components/pages/blog-homepage/blog-homepage.twig b/assets/components/pages/blog-homepage/blog-homepage.twig index 486bed77c..dc19f28dd 100644 --- a/assets/components/pages/blog-homepage/blog-homepage.twig +++ b/assets/components/pages/blog-homepage/blog-homepage.twig @@ -1,5 +1,3 @@ -{% set isSpecial = true %} - {% extends "@templates/base/base.twig" %} {% block header %} @@ -7,21 +5,29 @@ {% endblock %} {% block content %} -
- {% include '@content-types/news/news-highlighted.twig' %} + +
+ {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with { thinner_teaser: true } %}
-
-
- {% for 1 in 1..12 %} - {% include '@content-types/news/news-basic-teaser.twig' %} - {% endfor %} +
+
+
+ {% include '@molecules/filters/filters-blog.twig' %} +
+
+
+ {% for 1 in 1..12 %} + {% include '@content-types/news/news-basic-teaser.twig' %} + {% endfor %} +
+
+ {% include '@molecules/pagination/pagination.twig' %} +
+
-
- {% include '@molecules/pagination/pagination-center.twig' %} -
{% endblock %} {% block footer_container %} From 7d7e92ff59b1db6400fa8c8b2ddc3f875df08166 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 4 Dec 2019 15:47:41 +0100 Subject: [PATCH 05/10] Display 9 posts instead of 12 --- assets/components/pages/blog-homepage/blog-homepage.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/components/pages/blog-homepage/blog-homepage.twig b/assets/components/pages/blog-homepage/blog-homepage.twig index dc19f28dd..d756c4127 100644 --- a/assets/components/pages/blog-homepage/blog-homepage.twig +++ b/assets/components/pages/blog-homepage/blog-homepage.twig @@ -17,7 +17,7 @@
- {% for 1 in 1..12 %} + {% for 1 in 1..9 %} {% include '@content-types/news/news-basic-teaser.twig' %} {% endfor %}
From 3f9c3680b4c12f2a6f65b1c70c3a1a8643829edc Mon Sep 17 00:00:00 2001 From: Aline Date: Mon, 9 Dec 2019 12:00:24 +0100 Subject: [PATCH 06/10] Remove featured post --- assets/components/pages/blog-homepage/blog-homepage.twig | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/components/pages/blog-homepage/blog-homepage.twig b/assets/components/pages/blog-homepage/blog-homepage.twig index d756c4127..b25d6a0b2 100644 --- a/assets/components/pages/blog-homepage/blog-homepage.twig +++ b/assets/components/pages/blog-homepage/blog-homepage.twig @@ -6,10 +6,6 @@ {% block content %} -
- {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with { thinner_teaser: true } %} -
-
From e72eaa858f87cd06ab776cecd094a9076ea34268 Mon Sep 17 00:00:00 2001 From: Aline Date: Mon, 9 Dec 2019 13:04:25 +0100 Subject: [PATCH 07/10] Add blog title --- assets/components/pages/blog-homepage/blog-homepage.twig | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/components/pages/blog-homepage/blog-homepage.twig b/assets/components/pages/blog-homepage/blog-homepage.twig index b25d6a0b2..b5c79cdd6 100644 --- a/assets/components/pages/blog-homepage/blog-homepage.twig +++ b/assets/components/pages/blog-homepage/blog-homepage.twig @@ -6,7 +6,11 @@ {% block content %} -
+
+

Titre du blog

+
+ +
{% include '@molecules/filters/filters-blog.twig' %} From 790c7c9104d92e8ee69212a9dbdd4132f7ce57bf Mon Sep 17 00:00:00 2001 From: Aline Date: Mon, 9 Dec 2019 13:16:37 +0100 Subject: [PATCH 08/10] Card: add margin above teaser paragraph --- assets/components/molecules/card/card.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/components/molecules/card/card.scss b/assets/components/molecules/card/card.scss index cbc75e9b3..c86437dd0 100644 --- a/assets/components/molecules/card/card.scss +++ b/assets/components/molecules/card/card.scss @@ -45,6 +45,10 @@ a.card-gray:hover .card-body { background: $white; } + .card-footer { padding-top: 0; } + + .card-info + p { + margin-top: .5em; + } p:last-of-type { margin-bottom: 0; From 30bb1cf44c96ee2c42d84c5cbfab5e66be0e7bba Mon Sep 17 00:00:00 2001 From: Aline Date: Mon, 9 Dec 2019 15:39:07 +0100 Subject: [PATCH 09/10] Add template for single blog post --- assets/components/base.scss | 4 ++ .../pages/blog-single/blog-single.scss | 5 ++ .../pages/blog-single/blog-single.twig | 61 +++++++++++++++++++ .../pages/blog-single/blog-single.yml | 2 + assets/config/typography.scss | 2 + 5 files changed, 74 insertions(+) create mode 100644 assets/components/pages/blog-single/blog-single.scss create mode 100644 assets/components/pages/blog-single/blog-single.twig create mode 100644 assets/components/pages/blog-single/blog-single.yml diff --git a/assets/components/base.scss b/assets/components/base.scss index 5d8ffe1a1..f5039333a 100644 --- a/assets/components/base.scss +++ b/assets/components/base.scss @@ -121,3 +121,7 @@ @import 'content-types/program/program'; @import 'content-types/bachelor-project/bachelor-project'; @import 'content-types/project/project'; + +// +// pages: +@import 'pages/blog-single/blog-single'; diff --git a/assets/components/pages/blog-single/blog-single.scss b/assets/components/pages/blog-single/blog-single.scss new file mode 100644 index 000000000..6e52bf548 --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.scss @@ -0,0 +1,5 @@ +@charset 'utf-8'; + +.post-content { + max-width: 82ch; +} diff --git a/assets/components/pages/blog-single/blog-single.twig b/assets/components/pages/blog-single/blog-single.twig new file mode 100644 index 000000000..c9fd55095 --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.twig @@ -0,0 +1,61 @@ +{% extends "@templates/base/base.twig" %} + +{% block header %} + {% include '@organisms/header/header-light.twig' with { site_title: 'example blog name' } %} +{% endblock %} + +{% block content %} + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+

Publié le 9 décembre 2019

+

Catégories:

+

+ Catégorie 1 + Catégorie 2 +

+
+
+
+ +
+ +
+

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.

+ +
+

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.

+
+ — Prénom Nom, chef d’unité +
+
+ +

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.

+

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.

+
+ +
+ + + +
+{% endblock %} diff --git a/assets/components/pages/blog-single/blog-single.yml b/assets/components/pages/blog-single/blog-single.yml new file mode 100644 index 000000000..f222ec5e7 --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.yml @@ -0,0 +1,2 @@ +title: Blog single +name: blog-single diff --git a/assets/config/typography.scss b/assets/config/typography.scss index 91c9dbeca..6b13d0db1 100644 --- a/assets/config/typography.scss +++ b/assets/config/typography.scss @@ -80,6 +80,8 @@ s { color: $gray-600; } blockquote, .blockquote { font-size: 1.5rem; + margin-bottom: 2.5rem; + margin-top: 2.5rem; } blockquote { From c5e37f8f1fa8fdf1afb0aab91e484d90b253dee5 Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 10 Dec 2019 14:32:17 +0100 Subject: [PATCH 10/10] Improve content width and spacing --- assets/components/pages/blog-single/blog-single.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/components/pages/blog-single/blog-single.twig b/assets/components/pages/blog-single/blog-single.twig index c9fd55095..60ebb924a 100644 --- a/assets/components/pages/blog-single/blog-single.twig +++ b/assets/components/pages/blog-single/blog-single.twig @@ -6,7 +6,7 @@ {% block content %} -
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Publié le 9 décembre 2019

@@ -19,7 +19,7 @@
-
+

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.