Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
formations:symfony_adminbsb [20/01/2020 17:38] – [Inclusion dans le fichier JS] rgrondin | formations:symfony_adminbsb [26/12/2021 21:48] (Version actuelle) – [Inclusion dans le fichier JS] nbert | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Installer AdminBSB sur un projet Symfony (avec webpack) ====== | ||
+ | AdminBSB Material design est le thème utilisé sur MyCentraleAssos et Forrest. Il peut être réutilisé sur les applications du GInfo. | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | ===== Installation et configuration de Webpack ===== | ||
+ | ==== Installation des packages ==== | ||
+ | Reprise de [[formations: | ||
+ | composer require symfony/ | ||
+ | npm install | ||
+ | | ||
+ | ==== Configuration de la compilation SCSS ==== | ||
+ | |||
+ | Dans le fichier webpack.config.js, | ||
+ | .enableSassLoader() | ||
+ | |||
+ | Puis installer de quoi compiler le SCSS : | ||
+ | npm install sass-loader@^7.0.1 node-sass --save-dev | ||
+ | | ||
+ | |||
+ | ===== Installation de AdminBSB ===== | ||
+ | Installation de AdminBSB en lui-même : | ||
+ | npm install bootstrap@3 jquery animate.css bootstrap-notify bootstrap-select node-waves popper.js adminbsb-materialdesign | ||
+ | |||
+ | Les différents packages sont des dépendances de AdminBSB. | ||
+ | | ||
+ | ==== Inclusion dans le fichier JS ==== | ||
+ | Le fichier SCSS va être inclus dans le fichier JS, ce qui fait qu'au moment de la compilation du front-end un fichier CSS va être crée au nom du fichier JS, avec à l' | ||
+ | |||
+ | Créer un fichier assets/ | ||
+ | <code javascript> | ||
+ | /** VENDOR CSS **/ | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | |||
+ | /** VENDOR JS **/ | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | require(' | ||
+ | </ | ||
+ | |||
+ | Ensuite il faut que Webpack sache prendre en compte ce fichier, il faut donc l' | ||
+ | <code javascript> | ||
+ | .createSharedEntry(' | ||
+ | </ | ||
+ | |||
+ | <WRAP center round important 60%> | ||
+ | Il semblerait que cette commande ne fonctionne plus avec les nouvelles versions. On dirait que ça marche en utilisant <code javascript> | ||
+ | .addEntry(' | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | Il faut également commenter la ligne suivante comme ceci : | ||
+ | <code javascript> | ||
+ | // | ||
+ | </ | ||
+ | |||
+ | et décommenter la ligne | ||
+ | <code javascript> | ||
+ | .autoProvidejQuery() | ||
+ | </ | ||
+ | ==== Création du fichier base.html.twig ==== | ||
+ | Un base.html.twig d' | ||
+ | |||
+ | <code twig> | ||
+ | Cette ligne permet de fixer le thème via la classe '' | ||
+ | |||
+ | Une fois que vous avez fait tout ça, vous allez remarquer que votre footer est un peu n' | ||
+ | |||
+ | <code css> | ||
+ | html { | ||
+ | position: relative; | ||
+ | min-height: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 40px; /* Set the fixed height of the footer here */ | ||
+ | line-height: | ||
+ | } | ||
+ | |||
+ | @media (max-width: 768px) { | ||
+ | .footer { | ||
+ | height: 20px; | ||
+ | line-height: | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | .footer-content{ | ||
+ | border-top: 1px solid #eee; | ||
+ | background-color: | ||
+ | font-size: 8pt; | ||
+ | text-align: center; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== Formulaire avec le thème AdminBSB ==== | ||
+ | Le fichier de thème des formulaires modifié par le GInfo pour fit au thème AdminBSB est disponible ici : https:// | ||
+ | |||
+ | Il faut le mettre à la racine du dossier templates, puis à chaque utilisation d'un formulaire utiliser le code suivant dans le template | ||
+ | <code twig>{% form_theme form ' | ||
+ | |||
+ | Où ici '' | ||
+ | |||
+ | ==== Mise en place des notifications ==== | ||
+ | === Notifications simples (Sans JS) === | ||
+ | Il faut rajouter dans le base.html.twig le code suivant, dans le bloc avec la classe '' | ||
+ | |||
+ | <code twig> | ||
+ | {% for label, messages in app.flashes %} | ||
+ | {% for message in messages %} | ||
+ | <div class=" | ||
+ | {{ message }} | ||
+ | </ | ||
+ | {% endfor %} | ||
+ | {% endfor %} | ||
+ | </ | ||
+ | |||
+ | Les alertes ressembleront à celles-ci : https:// | ||
+ | |||
+ | === Notification sous forme de bulle qui apparaissent et disparaissent === | ||
+ | < | ||
+ | </ | ||
+ | Il faut rajouter dans le base.html.twig le code suivant, vers la fin (avant la fermeture du body par exemple) : | ||
+ | <code twig> | ||
+ | <div id=" | ||
+ | {% for type, messages in app.flashes %} | ||
+ | {% for message in messages %} | ||
+ | <div class=" | ||
+ | {{ message }} | ||
+ | </ | ||
+ | {% endfor %} | ||
+ | {% endfor %} | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Il faut ensuite rajouter dans le app.css un petit code qui cache les notifs en bas de page : | ||
+ | <code css> | ||
+ | # | ||
+ | display: none; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Et pour finir dans le app.js un code qui va permettre de charger les notifications. | ||
+ | <code javascript> | ||
+ | $('# | ||
+ | var type = $(this).data(' | ||
+ | |||
+ | var icon = ''; | ||
+ | if(type == ' | ||
+ | if(type == ' | ||
+ | if(type == ' | ||
+ | if(type == ' | ||
+ | |||
+ | $.notify({ | ||
+ | icon: icon, | ||
+ | message: $(this).html() | ||
+ | },{ | ||
+ | type: $(this).data(' | ||
+ | delay: 20000 | ||
+ | }) | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== Enlever la barre de gauche ==== | ||
+ | |||
+ | Vous pouvez avoir besoin d' | ||
+ | |||
+ | === Pour l' | ||
+ | |||
+ | C'est pas très compliqué. Vous enlevez le menu du base.html.twig. Mais vous vous rendez compte qu'il y a maintenant un grand espace à gauche. Si vous regardez avec l' | ||
+ | |||
+ | <code css> | ||
+ | .content { | ||
+ | margin-left: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === Pour l' | ||
+ | |||
+ | Il se peut que vous ayez besoin d' | ||
+ | Pour cela, il faudra ajouter des classes à votre body à l'aide du block additionnal_body_class. Sur [[https:// | ||
+ | |||
+ | |||
+ | Par exemple, pour la page de login, il faudra mettre après le | ||
+ | <code twig> | ||
+ | {% extends ' | ||
+ | </ | ||
+ | |||
+ | <code twig> | ||
+ | {% block additionnal_body_class %} login-page ls-closed {% endblock %} | ||
+ | </ | ||
+ | |||
+ | Bon, maintenant vous avez un fond bleu pas très beau mais ça se change avec un peu de css ;-) |