PHPBoost 5.0 - Administration

En charge de la partie graphique de l'administration de Phpboost 5.0, le but était avant tout de rendre responsive le backend du cms (adaptable à tout support numérique : pc, tablettes, mobiles)

Le design général


Le nouveau design passe en 100% de la page, l'entête, contenant le titre et le menu principal, passe à gauche en desktop (écran de bureau) et revient au dessus du contenu en mobile, le tout permettant de faire de la place au contenu.
En desktop, les deux parties (entête/contenu) sont indépendantes : si le contenu de la page dépasse en hauteur, le défilement se fait en conservant l'entête en position fixe pour une meilleure accessibilité.

Les menus


Le menu principal horizontal passe en vertical, récupère l'onglet du menu étendu et se sépare en deux parties:
L'ancien premier onglet se retrouve sous l'entête, sous forme d'icônes (menu index), permettant une plus grande accessibilité aux liens principaux : retour au site, page d'accueil de l'administration, déconnexion et lien vers le menu étendu.

Le reste du menu devient responsive grâce au plugin jQuery CssMenuMaker que l'on retrouvera sur tous les menus du cms en frontend. L'entête étant fixe, elle devient déroulante lorsque le déploiement du menu fait dépasser celui-ci en hauteur.
Le dépliage se fait maintenant au clic, en desktop comme en mobile, en utilisant les icônes + à droite des item du menu.

En mobile, le menu principal est réduit à un icône hamburger placé à gauche, et le menu index passe à droite.

L'ancien menu vertical de gauche, spécifique à chaque page, passe en horizontal en haut à droite de la page, et passe sous l'entête en mobile devenant un menu déroulant dépliable au clic.

On notera la disparition des images sur les liens des différents menu, allégeant le cms d'une cinquantaine de fichiers, ainsi que l'apparition d'un menu "support" (encadré orange) dont les liens renvoient vers les différentes aides proposées sur phpboost.com. Ce menu disparait en mobile.

Les tableaux


Les tableaux ont également été adaptés grâce au plugin jQuery Basic Table qui ramène à une seule colonne tous les tableaux en mobile, quelque soit le nombre de colonnes déclarées.

Les nouveautés




En bref