sur smarphone, c’est possible !

Un back-office SPIP responsive

  Plugin Thème / prototype d’interface d’administration responsive pour le cms spip.

  Sommaire  

Ce plugin propose une base de "réflexion" sur la mise en place d’une interface utilisable sur périphériques mobiles pour SPIP.

Le plugin n’apporte principalement que des surcharges css, basées sur les media-queries, actuellement le ciblage se fait sur les écrans < 1025px et <780px.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

reprise de la page de présentation GitHub, pour assurer une meilleure diffusion dans la communautéspip admin responsive v1 0 6 {Zip}

-  Le layout :
originalement en px utilise les %
les modes .etroitet .large deviennent identiques
les blocs #navigation et extra passe en 100% de large (voir la todo).
-  Le bando (menu principal)
passe en position fixed, les icônes en liste verticales et est aligné sur la gauche de l’écran : ceci permettant un accès constant, même sur des pages a contenu long
Les sous menu apparaissent au touch a droite de l’icône
- Amélioration des éléments cliquables / touchables :
L’interface d’origine propose des liens/éléments d’interface de taille trop petite pour une utilisation correcte en mode touch. Les icônes des outils rapides, les listes-objets sont donc revus progressivement notamment sur le padding les entourants (cf : https://material.google.com/layout/metrics-keylines.html#metrics-keylines-touch-target-size)

 Surcharges

  • prive/javascript/gadget.js : pour la désactivation du clic qui perturbe en mode touch. Surcharge du squelettes/inclure/head <!--<meta name="viewport" content="width=device-width" />--> pour evite un problème sur le min-width:100% apliqué a la balise body sur les mobiles surcharge de inclure/bare-nav et de son fichier fonction (rien de modifié mais provoque une erreur si on ne le duplique pas)

Si vous êtes intéressé, utilisez, voulez contribuer, réfléchir à ce projet : n’hésitez pas a proposer une pull-request ou déposer une issue su GitHub [1].

Exemple de spip dev responsive (par Mist GraphX)

 TODO

- Dans le portfolio des objets le boutons (orienter, rotation, …) apparaissent au survol ou un clic sur le div via un onclick.
- récupérer les icones au format svg pour les menus principaux du bando.
- Améliorer la gestion du changement de statut dans les liste-objets
- Boussole/ Navigation rapide
- Désactiver le clic sur la navigation rapide, comme il a été fait sur les menus du bando
- Opter pour un select ou dropdown en mode mobile
- Revoir les .bloc dans les #navigation, #extra, ils passent en 100% actuellement ce qui n’est pas très esthétique. si on est en mode .etroit dans les préférence de l’utilisateur le bloc extra est intégré a #navigation le mode .etroit .large n’a pas de sens en mobile ou tablet mais on peut envisager le garder pour le mode desktop revoir le ciblage des css avec .large #navigation et .etroit #Navigation ou suprimer depuis body.html surchargé
- Revoir les paginations en bas des liste/tableaux surtout en mode mobile
sur les .box.simple.sous-rub le js est en dur dans le squelette avec onClick, ce qui oblige à une surcharge.

PNG - 53.3 ko
Spip admin AVANT
Après application du plugin, le contenu de cet article ci-dessus est présenté en une seule colonne indiquée ci-après...

Remarquez l’allongement résultant ! [2]
Mais les menus sont souvent plus accessibles
(quoique je rédigeai déjà sous smartphone -avec des lunettes ! ;-)

PNG - 29.6 ko
Spip admin APRES

Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Passé par mail, j’ai eu plusieurs échanges avec Arnaud, avec une grande réactivité : merci à lui pour cet outil.

[2On pourra remarquer que -l’interface privée de SPN se distinguant par un grand nombre de plugins et de blocs extra affichés avant le contenu principal- il est parfois nécessaire de scroller plusieurs fois avant d’accéder à l’édition directe ; mais cela semble inhérent à la structure actuelle de construction des pages de l’espace privé.


Liens visibles seulement pour les inscrits.

Article publié le 7 février, et actualisé en février 2017 .

Répondre à cet article