From 48bf359d2eb7828e9b0cd1b377f356059bf85efd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Tue, 28 May 2024 16:33:13 +0200 Subject: [PATCH] Restore feature to see chill assets style preview in dev environment This commit introduces a new dev.assets.html.twig file and updates the chill.yaml file to add new paths for the SASS Assets tests. --- .../Resources/views/Dev/dev.assets.html.twig | 306 ++++++++++++++++++ .../views/Dev/dev.assets.test1.html.twig | 84 +++++ .../views/Dev/dev.assets.test2.html.twig | 78 +++++ 3 files changed, 468 insertions(+) create mode 100644 src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig create mode 100644 src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test1.html.twig create mode 100644 src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test2.html.twig diff --git a/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig new file mode 100644 index 000000000..6a7c4edf0 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig @@ -0,0 +1,306 @@ +{% extends '@ChillMain/layout.html.twig' %} + +{% block title %} + SASS Assets Catalogue +{% endblock %} + +{% block css %} + +{% endblock %} + +{% block content %} +
+

{{ block('title') }}

+ +Voir aussi: +Test 1 | +Test 2 + +

Flex-table et flex-bloc

+

Base d'un placement flex alternatif à l'usage des tables. + Flex-table et flex-bloc utilisent la même structure html (seul la root class change). + Le placement est responsive. + La bordure utilise box-shadow pour simuler border-collapse (table). +

+

Une classe separator peut être appliquée sur item-row

+ + +<div class="flex-table"> + <div class="item-bloc"> + <div class="item-row"> + <div class="item-col"></div> + <div class="item-col"></div> + </div> + <div class="item-row separator"> + <div class="item-col"></div> + <div class="item-col"></div> + </div> + </div> + <div class="item-bloc"> + <div class="item-row"> + <div class="item-col"></div> + <div class="item-col"></div> + </div> + <div class="item-row"> + <div class="item-col"></div> + <div class="item-col"></div> + </div> + </div> +</div> + + +

Flex-table

+

On fixe manuellement la largeur de la première colonne : +

div.flex-table div.item-bloc div.item-row div.item-col:first-child { flex-basis: 20%; }
+

+
+
+
+
Title row1
+
+
    +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
+
+
+
+
Title row2
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
Title row3
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
+
+
Title row1
+
+
    +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
+
+
+
+
Title row2
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
+ +

Flex-bloc

+

On fixe manuellement la largeur des blocs : +

div.flex-bloc div.item-bloc { flex-basis: 50%; }
+

+
+
+
+
Title row1
+
+
    +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
+
+
+
+
Title row2
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
Title row3
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
+
+
Title row1
+
+
    +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
  • Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
    • +
+
+
+
+
Title row2
+
Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.
+
+
+
+ +

Wrap-list

+

Une liste inline qui s'aligne, puis glisse sous son titre.

+
+
+
Usagers concernés
+
+

Gaston Bah

+

Alain Bah

+

Adèle Gaillot

+

Corentine Bah

+

Justin Bah

+

Michel Sardou

+

Carine Rousseau

+

Mohamed Martin

+
+
+
+
Problématiques sociales
+
+

Gaston Bah

+

Alain Bah

+

Adèle Gaillot

+
+
+
+ +<div class="wrap-list"> + <div class="wl-row"> + <div class="wl-col title">title</div> + <div class="wl-col list"> + <p class="wl-item">item</p> + <p class="wl-item">item</p> + ... + </div> + </div> + ... +</div> + + +

Wrap-header

+

Réglage d'une zone de titre sur 2 lignes.

+
+
+
+ Title + badge +
+
+ badge +
+
+
+
from startdate to enddate
+
text
+
+
+ +<div class="wrap-header"> + <div class="wh-row"> + <div class="wh-col">line1 left</div> + <div class="wh-col">line1 right</div> + </div> + <div class="wh-row"> + <div class="wh-col">line2 left</div> + <div class="wh-col">line2 right</div> + </div> +</div> + + +

Float-button top

+

Une zone de bouton flotte à droite d'un contenu. On peut voir en faisant varier la largeur que celui-ci vient s'adapter harmonieusement autour des boutons.

+
+
+
+
    +
    • +
    • +
    • +
+
+ Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ +<div class="float-button top"> + <div class="box"> + <div class="action"> + floating button + </div> + content ... + </div> +</div> + + +

Float-button bottom

+

Avec la même structure, on accroche la zone de bouton en bas, toujours à droite. Voir source.

+
+
+
+
    +
    • +
    • +
    • +
+
+ Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ +<div class="float-button bottom"> + <div class="box"> + <div class="action"> + floating button + </div> + content ... + </div> +</div> + + + +

Buttons

+ + +

Variants of 
record_actions

+ + 

small

+ + + + 

inline

+ +
+ This is inline and small + +
    +
    • +
+
+ +<a class="btn btn-submit">Text</a> +Toutes les classes btn-* de bootstrap sont fonctionnelles +
+{% endblock %} diff --git a/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test1.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test1.html.twig new file mode 100644 index 000000000..8b16da207 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test1.html.twig @@ -0,0 +1,84 @@ +{% extends '@ChillMain/layout.html.twig' %} + +{% block title %} + SASS Assets Tests - page 1 +{% endblock %} + +{% block css %} + +{% endblock %} + +{% block content %} +
+

CSS Tests - page 1 : float-button

+ +

1) avec des li

+
+
+
+
    +
    • +
    • +
    • +
+
+
    +
  • Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus.
    • +
  • +
    +
    +

    97, chemin Franck Julien,

    +

    1000 Bruxelles

    +

    Belgique

    +
    +
    +
    + + Couloir: 3 + +
    +
    +
    +
    • +
  • +33 8 27 17 12 19
    • +
  • gusikowski.yesenia@hotmail.com
    • +
+
+
+

2) avec des p

+ +
+
+
+
    +
    • +
    • +
    • +
+
+

Voir trick.

+

Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus. Proin lacinia, sapien in pharetra ultricies, justo urna fermentum lectus, non tempor ipsum leo a ante. Aenean porta, ipsum in fringilla hendrerit, nisi justo vestibulum ex, non lacinia risus felis vitae diam. Curabitur sem eros, consectetur a auctor vel, facilisis sit amet sem.

+

Aenean finibus a nisl a scelerisque. Donec bibendum facilisis odio id euismod. Pellentesque luctus justo ligula, eget dictum ligula ultrices quis. Pellentesque at nunc est. Aenean luctus, tortor in lacinia porta, ex nisl dignissim magna, non vehicula elit risus at elit. Suspendisse in velit non augue egestas laoreet. Etiam blandit lacus at semper aliquam. Integer leo nunc, condimentum sagittis accumsan sit amet, consectetur vel massa. Aenean convallis nibh vel augue ullamcorper tempus. Integer eu laoreet sapien.

+
+
+ +

3) avec des div

+
+
+
+
    +
    • +
    • +
    • +
+
+
Voir trick.
+
Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus. Proin lacinia, sapien in pharetra ultricies, justo urna fermentum lectus, non tempor ipsum leo a ante. Aenean porta, ipsum in fringilla hendrerit, nisi justo vestibulum ex, non lacinia risus felis vitae diam. + Curabitur sem eros, consectetur a auctor vel, facilisis sit amet sem.
+
Aenean finibus a nisl a scelerisque. Donec bibendum facilisis odio id euismod. Pellentesque luctus justo ligula, eget dictum ligula ultrices quis. Pellentesque at nunc est. Aenean luctus, tortor in lacinia porta, ex nisl dignissim magna, non vehicula elit risus at elit. Suspendisse in velit non augue egestas laoreet. Etiam blandit lacus at semper aliquam. Integer leo nunc, condimentum sagittis accumsan sit amet, consectetur vel massa. Aenean convallis nibh vel augue ullamcorper tempus. Integer eu laoreet sapien.
+
+
+ +
+{% endblock %} diff --git a/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test2.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test2.html.twig new file mode 100644 index 000000000..712ba3eef --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.test2.html.twig @@ -0,0 +1,78 @@ +{% extends '@ChillMain/layout.html.twig' %} + +{% block title %} + SASS Assets Tests - page 2 +{% endblock %} + +{% block css %} +{% endblock %} + +{% block content %} +
+

CSS Tests - page 2: grid layout

+ +

1) mgrid 1-2: avec grid-column et grid-row

+ +
+
+ Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+
    +
    • +
    • +
    • +
+
+
+ +

2) lgrid 3-4: avec grid-template-areas

+ +
+
+ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). + [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide. + Voir sur MDN: Définir des zones sur une grille + +
+
+
    +
    • +
    • +
    • +
+
+
+ +

3) cgrid 5-6-7-8: avec masonry

+

Expérimental: dans FF about:config, il faut mettre layout.css.grid-template-masonry-value.enabled = true

+ +
+
+ 1 Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ 2 Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ 3 Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ 4 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl. +
+
+ 5 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. +
+
+ 6 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim. +
+
+ 7 Proin hendrerit arcu velit, eu ultrices dui interdum eget. +
+
+ 8 Eu ultrices dui interdum eget. +
+
+ +
+{% endblock %}