/** 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')
.addEntry('vendor', './assets/js/vendor.js')
//.splitEntryChunks()
et décommenter la ligne
.autoProvidejQuery()
==== 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]].
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 %}
{{ message }}
{% 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 ===
{% for type, messages in app.flashes %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endfor %}
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 [[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
{% 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 ;-)