Différences

Ci-dessous, les différences entre deux révisions de la page.

--- formations:symfony_adminbsb [28/12/2020 19:48] – mle-goue
+++ 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://gurayyarar.github.io/AdminBSBMaterialDesign/|Exemples et widgets du thème]]
+  * [[https://www.npmjs.com/package/adminbsb-materialdesign|Package NPM]]
+===== Installation et configuration de Webpack =====
+==== Installation des packages ====
+Reprise de [[formations:symfony_init#installation_de_webpack|cette partie du tuto d'installation de Symfony]] :
+  composer require symfony/webpack-encore-bundle
+  npm install
+==== Configuration de la compilation SCSS ====
+Dans le fichier webpack.config.js, décommenter la ligne :
+  .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'intérieur tous les styles inclus dans le fichier JS.
+Créer un fichier assets/js/vendor.js et y ajouter :
+<code javascript>
+/** VENDOR CSS **/
+require('bootstrap/dist/css/bootstrap.css');
+require('adminbsb-materialdesign/scss/style.scss');
+require('bootstrap-select/dist/css/bootstrap-select.css');
+require('adminbsb-materialdesign/scss/themes/_all-themes.scss');
+require('animate.css');
+/** VENDOR JS **/
+require('node-waves');
+require('bootstrap');
+require('bootstrap-notify');
+require('bootstrap-select');
+require('adminbsb-materialdesign');
+</code>
+Ensuite il faut que Webpack sache prendre en compte ce fichier, il faut donc l'ajouter au **webpack.config.js**, à coté des autres lignes addEntry. La fonction createSharedEntry indiquera donc que ce fichier doit être inclut à toutes les pages.
+<code javascript>
+    .createSharedEntry('vendor', './assets/js/vendor.js')
+</code>
+<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('vendor', './assets/js/vendor.js')
+</code>
+</WRAP>
+Il faut également commenter la ligne suivante comme ceci :
+<code javascript>
+    //.splitEntryChunks()
+</code>
+et décommenter la ligne
+<code javascript>
+    .autoProvidejQuery()
+</code>
+==== Création du fichier base.html.twig ====
+Un base.html.twig d'exemple est disponible [[https://github.com/GInfo-ECM/project-generator/blob/master/data/adminbsb/base.html.twig|ici]].
+<code twig>    <body {% block additionnal_body_block %}{% endblock %} class="theme-indigo {% block additionnal_body_class %}{% endblock %}"></code>
+Cette ligne permet de fixer le thème via la classe ''theme-indigo''. Les différentes couleurs sont disponibles ici : https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/ui/colors.html
+Une fois que vous avez fait tout ça, vous allez remarquer que votre footer est un peu n'importe où. Pas de panique, il faut juste un peu de css à mettre dans le app.css :
+<code css>
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    margin-bottom: 0; /* Margin bottom by footer height */
+}
+.footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px; /* Set the fixed height of the footer here */
+    line-height: 40px; /* Vertically center the text there */
+}
+@media (max-width: 768px) {
+    .footer {
+        height: 20px;
+        line-height: 20px;
+    }
+}
+.footer-content{
+    border-top: 1px solid #eee;
+    background-color: #fff;
+    font-size: 8pt;
+    text-align: center;
+}
+</code>
+==== 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://github.com/GInfo-ECM/project-generator/blob/master/data/adminbsb/bootstrap_3_layout.html.twig
+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 'form/bootstrap_3_layout.html.twig' %}</code>
+Où ici ''form'' désigne la variable faisant référence au formulaire.
+==== 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 ''.container-fluid''
+<code twig>
+{% for label, messages in app.flashes %}
+    {% for message in messages %}
+        <div class="alert alert-{{ label }}">
+            {{ message }}
+        </div>
+    {% endfor %}
+{% endfor %}
+</code>
+Les alertes ressembleront à celles-ci : https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/ui/alerts.html
+=== Notification sous forme de bulle qui apparaissent et disparaissent ===
+<note>Normalement le code est déjà dans le base.html.twig
+</note>
+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="app-notifs">
+    {% for type, messages in app.flashes %}
+        {% for message in messages %}
+            <div class="notif" data-type="{{ type }}">
+                {{ message }}
+            </div>
+        {% endfor %}
+    {% endfor %}
+</div>
+</code>
+Il faut ensuite rajouter dans le app.css un petit code qui cache les notifs en bas de page :
+<code css>
+#app-notifs{
+    display: none;
+}
+</code>
+Et pour finir dans le app.js un code qui va permettre de charger les notifications.
+<code javascript>
+$('#app-notifs div').each(function(){
+    var type = $(this).data('type');
+    var icon = '';
+    if(type == 'success') icon = 'fas fa-check-circle';
+    if(type == 'danger') icon = 'fas fa-exclamation-circle';
+    if(type == 'info') icon = 'fas fa-info-circle';
+    if(type == 'warning') icon = 'fas fa-exclamation-triangle';
+    $.notify({
+        icon: icon,
+        message: $(this).html()
+    },{
+        type: $(this).data('type'),
+        delay: 20000
+    })
+});
+</code>
+==== Enlever la barre de gauche ====
+Vous pouvez avoir besoin d'enlever le menu de gauche pour diverses raisons (sur la page de login, d'inscription ou tout simplement parce que vous n'aimez pas).
+=== Pour l'enlever sur toutes les pages ===
+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'inspecteur d'élément, vous remarquerez que c'est le bloc content qui a une margin-left de 100px. Vous avez juste à mettre dans le app.css :
+<code css>
+.content {
+    margin-left: 10px; /*Histoire qu'il y ait un peu d'espace mais vous pouvez régler comme vous voulez*/
+}
+</code>
+=== Pour l'enlever sur certaines pages ===
+Il se peut que vous ayez besoin d'enlever le menu sur quelques pages seulement (page de login, d'inscription ...).
+Pour cela, il faudra ajouter des classes à votre body à l'aide du block additionnal_body_class. Sur [[https://gurayyarar.github.io/AdminBSBMaterialDesign/index.html|AdminBSB]], vous avez des Example pages.
+Par exemple, pour la page de login, il faudra mettre après le
+<code twig>
+{% extends 'base.html.twig' %}
+</code>
+<code twig>
+{% block additionnal_body_class %} login-page ls-closed {% endblock %}
+</code>
+Bon, maintenant vous avez un fond bleu pas très beau mais ça se change avec un peu de css ;-)