formations:symfony_adminbsb

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.

Reprise de cette partie du tuto d'installation de Symfony :

composer require symfony/webpack-encore-bundle
npm install

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 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.

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 faut également commenter la ligne suivante comme ceci :

    //.splitEntryChunks()

et décommenter la ligne

    .autoProvidejQuery()

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

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.

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

Normalement le code est déjà dans le base.html.twig

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
    })
});

ça vient

  • formations/symfony_adminbsb.txt
  • Dernière modification: 16/02/2020 16:01
  • par rgrondin