From c50ca94b112407a1c02c45b672652b81ada82bc7 Mon Sep 17 00:00:00 2001 From: Sabrina Ludovic de Lys Date: Thu, 19 Aug 2021 09:18:18 +0200 Subject: [PATCH 01/16] beginning quiz integration --- assets/scss/components/checkbox.scss | 15 +++++++++++++++ assets/scss/components/quiz.scss | 4 ++++ assets/scss/style.scss | 3 +++ templates/blog/article.html.twig | 11 +++++++++++ 4 files changed, 33 insertions(+) create mode 100644 assets/scss/components/checkbox.scss create mode 100644 assets/scss/components/quiz.scss diff --git a/assets/scss/components/checkbox.scss b/assets/scss/components/checkbox.scss new file mode 100644 index 00000000000..3fdc84e6132 --- /dev/null +++ b/assets/scss/components/checkbox.scss @@ -0,0 +1,15 @@ +.checkbox { + +} + +.checkbox__input { + display: none; +} + +.checkbox__label { + &::before { + content: ''; + } + + &::after { } +} \ No newline at end of file diff --git a/assets/scss/components/quiz.scss b/assets/scss/components/quiz.scss new file mode 100644 index 00000000000..94f90cc05ef --- /dev/null +++ b/assets/scss/components/quiz.scss @@ -0,0 +1,4 @@ +.quiz { + background-color: $code-background; + padding: 1em 2em; +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 94551a7a0ff..83a4efab172 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -93,6 +93,9 @@ html.no-js [data-aos] { @import "components/_titles"; @import "components/_values"; @import "components/_social-post"; +@import "components/quiz"; +@import "components/checkbox"; + // generic @import "generic/_a"; diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index 93ceaaafd1a..cbf4076c9f8 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -219,6 +219,17 @@ {% endif %} {% endif %} + +
+

Testez vos connaissancesđŸ€“

+

1. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

+
+ + +
+ + +
{% endblock content %} {% block javascripts %} From 5d04b4e3ffd48514113724ca8df129d59d994adf Mon Sep 17 00:00:00 2001 From: amelie Date: Thu, 19 Aug 2021 10:12:08 +0200 Subject: [PATCH 02/16] Checkbox style --- assets/scss/base/_variables.scss | 3 +++ assets/scss/components/checkbox.scss | 35 ++++++++++++++++++++++------ templates/blog/article.html.twig | 7 ++++-- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/assets/scss/base/_variables.scss b/assets/scss/base/_variables.scss index cae47480fcf..b9bd8a9f513 100644 --- a/assets/scss/base/_variables.scss +++ b/assets/scss/base/_variables.scss @@ -7,7 +7,10 @@ $color-dark: #0d3a5a; $color-light: #2ecccb; $color-text: #390725; $color-info: #1e7695; + +$color-danger: #ef4055; $color-warning: #dbb371; +$color-success: #00cc99; // Breakpoints $screen-lg: 1280px; // desktop diff --git a/assets/scss/components/checkbox.scss b/assets/scss/components/checkbox.scss index 3fdc84e6132..7993067410b 100644 --- a/assets/scss/components/checkbox.scss +++ b/assets/scss/components/checkbox.scss @@ -1,15 +1,36 @@ .checkbox { - + padding-left: 35px; } .checkbox__input { - display: none; + display: none; } .checkbox__label { - &::before { - content: ''; - } + position: relative; + font-size: 1em; + line-height: 1.3; - &::after { } -} \ No newline at end of file + &::before { + content: ''; + width: 20px; + height: 20px; + background-color: #fff; + position: absolute; + top: 2px; + left: -35px; + cursor: pointer; + } +} + +.checkbox__input:checked + .checkbox__label { + &::after { + font-family: 'icomoon'; + content: '\e918'; + position: absolute; + left: -32px; + font-size: 16px; + top: 2px; + color: $color-dark; + } +} diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index cbf4076c9f8..ab5ccb3070b 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -225,9 +225,12 @@

1. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

- + +
+
+ +
- {% endblock content %} From c763953addb252e2716a29376578ce948cf5aa3f Mon Sep 17 00:00:00 2001 From: Sabrina Ludovic de Lys Date: Thu, 19 Aug 2021 15:32:55 +0200 Subject: [PATCH 03/16] quiz with code blocks and images --- assets/scss/_normalize.scss | 4 - assets/scss/components/checkbox.scss | 18 + assets/scss/components/quiz.scss | 18 +- assets/scss/generic/_code.scss | 2 +- templates/blog/article.html.twig | 495 +++++++++++++++------------ 5 files changed, 312 insertions(+), 225 deletions(-) diff --git a/assets/scss/_normalize.scss b/assets/scss/_normalize.scss index 18c426c158e..53b9cb640b4 100644 --- a/assets/scss/_normalize.scss +++ b/assets/scss/_normalize.scss @@ -68,10 +68,6 @@ hr { height: 0; } -pre { - overflow: auto; -} - code, kbd, pre, diff --git a/assets/scss/components/checkbox.scss b/assets/scss/components/checkbox.scss index 7993067410b..4d324c3cd52 100644 --- a/assets/scss/components/checkbox.scss +++ b/assets/scss/components/checkbox.scss @@ -1,4 +1,5 @@ .checkbox { + margin-top: 0.5em; padding-left: 35px; } @@ -34,3 +35,20 @@ color: $color-dark; } } + .checkbox code { + background-color: transparent; + color: $color-light; + font-family: Courier, monospace; + white-space: unset; + } + + .checkbox pre { + background-color: transparent !important; + padding: 5px; + } + + .checkbox div { + padding: .5em; + display: flex; + background-color: $color-dark ; +} \ No newline at end of file diff --git a/assets/scss/components/quiz.scss b/assets/scss/components/quiz.scss index 94f90cc05ef..cf420dd6edb 100644 --- a/assets/scss/components/quiz.scss +++ b/assets/scss/components/quiz.scss @@ -1,4 +1,20 @@ -.quiz { +.quiz { + display: flex; + flex-direction: column; background-color: $code-background; padding: 1em 2em; } + +.quiz .btn { + margin-top: 2em; + align-self: flex-end; +} + +.quiz h3 { + font-size: 1.2em; + +} + +.quiz__details { + justify-content: space-around; +} \ No newline at end of file diff --git a/assets/scss/generic/_code.scss b/assets/scss/generic/_code.scss index 37a394da7f5..85337eca6c8 100644 --- a/assets/scss/generic/_code.scss +++ b/assets/scss/generic/_code.scss @@ -13,7 +13,7 @@ pre { word-break: normal; word-wrap: normal; line-height: 1.5; - overflow: auto; + overflow-x: auto; tab-size: 4; hyphens: none; background: $code-background; diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index ab5ccb3070b..f9d8e35d0b5 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -10,250 +10,307 @@ {% block twitter_image absolute_url(asset(article.thumbnail|glide_image_preset('twitter_card'))) %} {% block content %} -
    -
  1. - - Blog - - -
    2. -
  2. - - {{ article.title }} - - -
    3. -
+
    +
  1. + + Blog + + +
    2. +
  2. + + {{ article.title }} + + +
    3. +
-
-
+
+
-
- {% set authors = article.authors|length > 5 ? [] : article.authors %} - {% block author_header %} -
-
- {% for author in authors %} - - - - {% else %} - - {% endfor %} -
- - Écrit par - {% for author in authors %} - - {{ author.name }} - - {% else %} - La team Ă©lao - {% endfor %} - -
- {% endblock %} -
- Publication {{ article.date|format_date('long') }} - {# Do only display the last modified date if not null and different day than the publication date #} - {% if article.lastModified and article.lastModified > article.date|date_modify('+1 day 00:00') %} - Modification {{ article.lastModified|format_date('long') }} - {% endif %} +
+ {% set authors = article.authors|length > 5 ? [] : article.authors %} + {% block author_header %} +
+
+ {% for author in authors %} + + + + {% else %} + + {% endfor %}
-
- -
-

{{ article.title }}

-

{{ article.description }}

- + +
+ {% endblock %} +
+ Publication {{ article.date|format_date('long') }} + {# Do only display the last modified date if not null and different day than the publication date #} + {% if article.lastModified and article.lastModified > article.date|date_modify('+1 day 00:00') %} + Modification {{ article.lastModified|format_date('long') }} + {% endif %}
- {% if article.tableOfContent is not empty %} -
    - {% for headline in article.tableOfContent %} -
  1. - {{ headline.content }} - - {% if headline.children is not empty %} -
      - {% for child in headline.children %} -
    1. - {{ child.content }} -
      2. - {% endfor %} -
    - {% endif %} -
    2. +
    +

    {{ article.title }}

    +

    {{ article.description }}

    +
- {% endif %} + +
+
-
-
+{% if article.tableOfContent is not empty %} +
    + {% for headline in article.tableOfContent %} +
  1. + {{ headline.content }} - {% if article.outdated %} -
    - -
    - {% if article.outdated is same as true %} -

    - Attention, cet article date un peu, il est peut-ĂȘtre obsolĂšte, gardez cela en tĂȘte lors de votre lecture ! -

    - {% else %} - {{ article.outdated|nl2br|markdownify|raw }} - {% endif %} -
    -
    - {% endif %} + {% if headline.children is not empty %} +
      + {% for child in headline.children %} +
    1. + {{ child.content }} +
      2. + {% endfor %} +
    + {% endif %} +
    2. + {% endfor %} +
+{% endif %} - {% if not article.published %} -
- -
-

- Cet article n'est pas encore publié. Cet aperçu est disponible uniquement dans cet environnement mais n'apparaßtra en production qu'à partir du {{ article.date|format_date('long') }} -

-
-
- {% endif %} +
+
- {{ article.content|raw }} - {% block credits %} - {% if article.credits %} -
- Crédits: photo de couverture par - {% if article.credits.url %} - - {{ article.credits.name }} - - {% else %} - {{ article.credits.name }} - {% endif %} -
+ {% if article.outdated %} +
+ +
+ {% if article.outdated is same as true %} +

+ Attention, cet article date un peu, il est peut-ĂȘtre obsolĂšte, gardez cela en tĂȘte lors de votre + lecture ! +

+ {% else %} + {{ article.outdated|nl2br|markdownify|raw }} {% endif %} - {% endblock %} -
- -
+
+
+ {% endif %} -
- {% block author_footer %} - {% for author in article.authors %} -
-
- - - -
- - {{ loop.first ? 'Écrit par' : 'Co-Ă©crit par' }} - - {{ author.name }} - - + {% if not article.published %} +
+ +
+

+ Cet article n'est pas encore publié. Cet aperçu est disponible uniquement dans cet environnement + mais n'apparaßtra en production qu'à partir du {{ article.date|format_date('long') }} +

+
+
+ {% endif %} - -
- {% endfor %} + {{ article.content|raw }} + {% block credits %} + {% if article.credits %} +
+ Crédits: photo de couverture par + {% if article.credits.url %} + + {{ article.credits.name }} + + {% else %} + {{ article.credits.name }} + {% endif %} +
+ {% endif %} {% endblock %} -
+ + +
- {% if article.tweetId is not empty or article.githubEditLink is not empty %} -
- {% if article.tweetId is not empty %} -
-

Commenter

-

- Des commentaires ? - - Poursuivons la discussion sur twitter ! - -

-
-
- {% endif %} +
+ {% block author_footer %} + {% for author in article.authors %} +
+
+ + + +
+ + {{ loop.first ? 'Écrit par' : 'Co-Ă©crit par' }} + + {{ author.name }} + + - {% if article.githubEditLink is not empty %} -
-

- Une typo ? - - Modifier cet article sur Github - -

-
+ +
+ {% endfor %} + {% endblock %} +
+ +{% if article.tweetId is not empty or article.githubEditLink is not empty %} +
+ {% if article.tweetId is not empty %} +
+

Commenter

+

+ Des commentaires ? + + Poursuivons la discussion sur twitter ! + +

+
+
{% endif %} -
-

Testez vos connaissancesđŸ€“

-

1. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

-
- - -
-
- - + {% if article.githubEditLink is not empty %} +
+

+ Une typo ? + + Modifier cet article sur Github + +

+
+ {% endif %} +
+{% endif %} + +
+

Testez vos connaissancesđŸ€“

+ image de fill murray +

1. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

2. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

+ +
+ + +
+
+ + +
+

3. Lorem, ipsum dolor sit amet consectetur adipisicing elit?

+
+ + +
+ position: relative; +
+
+
+ + +
+ position: absolute; +
+
+
+ +
+ +
{% endblock content %} {% block javascripts %} - {{ parent() }} +{{ parent() }} - {% if article.tweetId is not empty %} - - - {% endif %} -{% endblock %} +{% if article.tweetId is not empty %} + + +{% endif %} +{% endblock %} \ No newline at end of file From 72220ffae4c79437e785162165b826662f141339 Mon Sep 17 00:00:00 2001 From: Sabrina Ludovic de Lys Date: Thu, 19 Aug 2021 15:39:57 +0200 Subject: [PATCH 04/16] fixed bug on checkbox code block --- templates/blog/article.html.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index f9d8e35d0b5..ed45c060181 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -275,8 +275,8 @@
- -