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.
Installation et configuration de Webpack
Installation des packages
Reprise de 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 :
/** 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');
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.
.createSharedEntry('vendor', './assets/js/vendor.js')
Il semblerait que cette commande ne fonctionne plus avec les nouvelles versions. On dirait que ça marche en utilisant
.addEntry('vendor', './assets/js/vendor.js')
Il faut également commenter la ligne suivante comme ceci :
//.splitEntryChunks()
et décommenter la ligne
.autoProvidejQuery()
Création du fichier base.html.twig
Un base.html.twig d'exemple est disponible ici.
<body {% block additionnal_body_block %}{% endblock %} class="theme-indigo {% block additionnal_body_class %}{% endblock %}">
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 :
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; }
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
{% form_theme form 'form/bootstrap_3_layout.html.twig' %}
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
{% for label, messages in app.flashes %} {% for message in messages %} <div class="alert alert-{{ label }}"> {{ message }} </div> {% endfor %} {% endfor %}
Les alertes ressembleront à celles-ci : https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/ui/alerts.html
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) :
<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>
Il faut ensuite rajouter dans le app.css un petit code qui cache les notifs en bas de page :
#app-notifs{ display: none; }
Et pour finir dans le app.js un code qui va permettre de charger les notifications.
$('#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 }) });
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 :
.content { margin-left: 10px; /*Histoire qu'il y ait un peu d'espace mais vous pouvez régler comme vous voulez*/ }
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 AdminBSB, vous avez des Example pages.
Par exemple, pour la page de login, il faudra mettre après le
{% extends 'base.html.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 