Construction

Trhead en cours d'écriture ( je l'ai publié car je n'ai pas trouvé comment avoir une prévisualisation des messages a la création d'un nouveau sujet)

299ko de Nem's (impossible d'éditer le premier sujet même quand on en est l'auteur ? ><)

Ce Sujet à pour but de rassembler les modifications que je vais apporter à 299ko pour mon utilisation personnelle.
Ce message fera office de page index des modifications.

Je n'ai pas encore décidé de comment allait être organisé ce thread.
Si vous trouvez de l'intérêt à l'une des modifications afin de ne pas être encombré de demandes , pour chacune j'essaierai de partager:

  • le nom des fichiers modifiés.
  • les lignes modifiées dans ces fichiers
  • le résultat

Pour les plus flémards , désolé , je ne pense pas créer de packs a télécharger. Il y en aura seulement si / quand je commencerai a créer des skin pour mon plaisir.

Modifications de l'administration:

  • menu administration responsive. (message 4)

Modifications générales:

Modification Administration Menu responsive.

Ce n'est qu'une question de gout mais n'étant presque jamais sur smartphone ou tablette quand je gère l'administration de mes forums/CMS, j'aime avoir le maximum d'info sous les yeux (liens de menu par exemple)

J'ai donc un peut modifié l'administration afin qu'au dessus de 960px:

  • Le menu burger disparaît
  • Tout les liens qu'il contient se trouvent dans la barre de menu horizontal

En dessous de 960px l'inverse se produit.

Les fichiers modifiés sont dans ./admin/ , les fichiers header.php et style.css

header.php: modifications ligne 35
suppression du <li>déconnexion</li> puis on copie/colle a la place le code entre les lignes 61 et 73 (comprises) ce qui donne

<div id="header_content">
<ul>
<li><h1><a href="javascript:" id="open_nav"></a></h1></li>
<li><a target="_blank" href="../">Voir le site</a></li>
<!--suppression du <li>deconnexion</li> puis on copie/colle a la place le code compris entre les lignes 61 et 73 (comprises) -->
<?php foreach ($pluginsManager->getPlugins() as $k => $v)
if ($v->getConfigVal('activate') && $v->getAdminFile() && $v->getIsDefaultAdminPlugin()) {
?>
<li><a href="index.php?p=<?php echo $v->getName(); ?>"><?php echo $v->getInfoVal('name'); ?></a></li>
<?php
}
foreach ($pluginsManager->getPlugins() as $k => $v)
if ($v->getConfigVal('activate') && $v->getAdminFile() && !$v->getIsDefaultAdminPlugin()) {
?>
<li><a href="index.php?p=<?php echo $v->getName(); ?>"><?php echo $v->getInfoVal('name'); ?></a></li>
<?php
}
?>
<li class="site"><a href="index.php?action=logout&token=<?php echo administrator::getToken(); ?>">Déconnexion</a></li>
</ul>
</div>

style.css:

ajout ligne 359 afin de faire disparaitre le burger quand l'écran est supérieur à 960px:
#header li:first-child {
display:none;
}

j'apporterai des modifications plus tard afin de retouche les tailles de police et rendre le tout plus esthétique.


Bonjour.
À voir comment @Max veut intégrer ça, mais pour moi le menu doit être visible sur grand écran, comme tu l'as fait, mais sur la gauche, et pas en haut.
Vu les autres messages qui parlent d'accessibilité et de ce fameux menu, je pense que ton sujet tombe à pic 😀
Mais il y a d'autres choses à mettre en place, comme l'évoque @dj-access pour que tout le monde s'y retrouve.

    Ratoto

    en attendant je pense que @Max doit se concentrer sur le script lui meme si vous voulez rassembler vos demandes ici faites le je ferai de mon mieux pour vous proposer les solutions

      je suis en cours de modification, voici ou ça en est :

      ne prenez pas peur des couleurs , j'utilise ce système pour repérer mes boites ce sera arrangé après 😉 !

      Etant donné le nombres de modifications je pense que je fournirai directement la source en .zip pour ceux qui le souhaite 😉

        le voici un peut plus coloré. je n'ai pas poussé la personnalisation, seulement une meilleur intégration de la modification précédente. Attention la modification que j'ai faite n'est absolument pas responsive pour le moment !

        • Max replied to this.

          NemStudio18

          C'est à peu près ce que j'avais en tête également, surtout après avoir lu le message @dj-access concernant l'accessibilité.
          En version mobile, dans l'idéal, un petit menu burger doit apparaitre, et lors du clic dessus, le menu apparait de la gauche (un peu de JS à faire si tu connais).

          Si tu maîtrises Git, j'ai ouvert une branche v1.2, tu pourras, si jamais ça te botte, faire une pull request. Sinon on avisera 😉

          Pour les couleurs, on verra plus tard quand le thème de l'admin aura été redéfini, mais là j'ai peur de la mauvaise lisibilité (mauvais contraste) en l'état.

          J'imagine que le FileManager est en couleur parce que tu es en "hover" dessus. Je vais essayer de coder un truc pour colorer le plugin en cours d'utilisation, histoire de se repérer.

          Merci à tous en tous cas, une belle preuve de l'esprit de communauté, j'adore 😍

            Salut à tous,

            Depuis ce matin je suis sur l'administration de 299ko en avançant dans mon idée, j'ai omis de proposer certaines possibilités concernant la gestion de ce menu.

            Il y a plusieurs façons de voir la chose pour son fonctionnement. Dans un soucis d'adaptabilité et de consensus avec la communauté je vous laisse le choix de discuter de ces différents fonctionnements.

            J'en ai fais deux croquis, que vous trouverez-ci dessous, je n'en ai pas fais plus car ensuite ce ne serait que multiplier les différentes combinaisons possibles avec ces deux façons de faire.

            Une autre potentielle façon que je n'ai pas traité c'est la fermeture automatique du menu après un certain délais une fois que le curseurs de la souris est sortie du menu, ce qui permettrais suivant la façon d'ouvrir le menu de ne jamais cliquer pour le faire apparaitre/disparaitre.

            Il ne faut pas se formaliser a mes deux croquis, ont peut les intégrer l'un a l'autres, ou développer d'autres idées (sous-menu par exemple) , ici je ne parle pas de design (couleur forme) attention mais bien de fonctionnement !

            Merci a vous !


            (Edit, désolé pour la faute de frappe sur la solution numéro 2, il faut lire "la barre" et non "le barre" , on est pas à la pêche là 😃 )

            Edit 2:

            Voici un pack version alpha pour beta test. (attention il reste surement des bug) veuillez faire une copie des fichiers contenu dans le dossier "admin" avant de procéder au remplacement.
            Pour installer :

            • dézippez le contenu du .zip dans le répertoire "admin" de 299Ko
            • Ouvrez le panel admin dans votre navigateur préféré.
            • relevez les bug, suggérez des améliorations.

            d'avance merci

            /!\ attention, la modification n'est pas complète en soit, le menu qui apparait une fois le "burger" cliqué, sera le même que la version desktop, sauf que celui-ci passera par dessus le contenu.

            new-admin-menu.zip
            5kB

            Si j'ai bien compris, sur ordi avec plus de 960px, on a le choix entre un menu affiché de manière permanente et donc un contenu de l'admin réduit en largeur, ou un menu qui apparait par-dessus le contenu et peut être fermé en un clic. Je tends à préférer la seconde possibilité.
            En-dessous des 960px, je ne donne pas mon avis car je ne l'utilise pas.

            Merci pour ton travail en tous cas !

            Hello !

            J'ai pu tester, ça me semble pas mal. Après il faudrait virer la bande noire en mode mobile qui ne sert juste qu'à l'affichage du bouton du menu, on pourrait la mettre tout en haut avec le titre de la page dedans (ou pas).
            Le menu qui prend toute la hauteur de l'affichage, et on serait pas mal.

            D'autres retours ?

            Merci @NemStudio18 pour ton taf 😉

              Max

              Effectivement je ne savais pas comment laisser ce burger, a vrai dire il me fait de la peine tout seul noir sur blanc en haut de la page, d'ou la bande noir ( qui fait un "rappel" du menu mais par pur esthétisme)

              Je vais modifier cela de ce pas, si d'autres retour des utilisateurs , ce serait super sinon bha on validera.

                Hello je l'ai testé, même avis que max pour le petit cheeseburger 🍔. C'est pratique et facile d'accès à l'ancienne !

                ok j'ai pas encore retravaillé dessus j'étais sur d'autres modifications de l'admin !

                Je ferai un update demain en fin de matinée le temps de styliser un peut mieux le menu et tenter de commencer a ajouter ARIA à l'administration.

                je retourne bloquer sur Sass 😃

                Bonjour,
                J'ai testé, mais ça n'est pas ce qui est proposé dans la maquette ?
                Il y a le contenu du menu en haut horizontalement, plus la possibilité de l'ouvrir verticalement comme actuellement. je ne comprends pas l'intérêt de ce doublon, ça surcharge inutilement. Pourquoi le burger n'apparait-il pas que en-dessous des 960px, quand le menu horizontal disparait ?

                  claireomatic

                  Ca m'étonne, je viens de revérifier la source que j'ai mise en download, le menu peut importe la taille de l'écran se trouve a droite et non au dessus. Attention les fichiers sont a placer dans le répertoire "admin", ce n'est pas un thèmes.

                  je me suis néanmoins aperçu que je n'ai pas fournis le bon package, la barre latérale une fois sous les 960px ne garde pas la taille du menu, elle est réduite a la taille du burger normalement . de toute façon, je vous remettrais un pack en fin de matinée.

                    hum ça va me suivre cette histoire de nem 😃

                    bon voici un nouveau pack (je n'ai pas encore stylisé les liens du menu ce sera terminé ce soir)

                    En ce qui concerne les couleurs (hover, focus) des liens, que verriez vous comme palette de couleur? sinon on reste dans le thèmes gris/noir. Ajoute de séparateurs peut être?

                    bon download a vous !

                    new-admin-menuv2.zip
                    5kB

                    Edit: Maj du pack précédent v2.1
                    modifications:

                    • Placement et le style du burger
                    • Espacement de certains liens dans le menu desktop
                    new-admin-menuv21.zip
                    5kB

                    la question reste aussi, garde-t-on le même style de menu a l'ouverture du burger? ou faut il créer un "tiroir" qui s'ouvre en slide depuis la gauche? j'attends vos suggestions. à vos claviers 😉

                    Re @NemStudio18
                    pour moi c'est sur le bon chemin, au niveau des couleurs je pense qu'il est préférable de le laisser tel quel par défaut (ton gris/noir) et de laisser la possibilité à chacun de le modifier si l'envie lui prend car au final le visiteur ne verra pas cette partie.

                    Néanmoins une fois la version définitive en place j'écrirais un tuto rapide pour personnaliser le menu tel que ci-dessous. Au final c'est "juste" le header qui a été placé sur la gauche !

                      petitpouyo Au final c'est "juste" le header qui a été placé sur la gauche !

                      heu alors oui , dans les fait c'est ce qu'on vois , mais il y a toute la gestion de marges et paddings , le passage du 960 au dessus, il y a l'utilisation des first-child/ last-child et nth-child afin de séparer quelques élément de la liste et la rendre plus claire ^^

                      je veux dire par la , il n'y a pas qu'un float left a appliquer 😃

                          C'est fou ce truc, chez moi ça faisait pas comme dans la vidéo de petitpouyo ! Pourtant je l'ai bien mis dans l'admin, et d'ailleurs ça a changé mon admin. Bon je vais pas chercher plus à comprendre, je vais plutôt regarder la version 2.1, et on verra si cette fois on observe la même chose.

                            Je viens de prendre le temps de tester la 2.1.
                            Pour moi le fonctionnement est celui idéal, le reste ce n'est que du détail.

                            Il faudrait que le menu affiché en mobile aille jusqu'en bas, et qu'il soit défilable en ordonnées (overflow-y: auto).
                            Après, on verra selon le style.

                            Attention cependant : j'ai l'impression que tu ne travailles pas les CSS avec les id des containers, du coup tu génères des erreurs dans les autres éléments. Ça revient à ce qu'on disait sur le besoin des id :

                            li:nth-last-child(2), li:last-child
{ margin-top: 50px; }

                            @claireomatic C'est à cause de ton cache. Le PHP et le HTML sont régénérés à chaque fois, mais le navigateur garde en cache les CSS et JS. Il faut utiliser une extension qui permette de recharger la page sans cache, comme Reload Skip Cache Button

                              Ok Max, merci pour l'explication. Sinon, j'ai testé la version 2.1 sur mon ordi, et je la trouve bien.
                              J'ai remarqué un bug, mais qui comme déjà dit ne se rencontre pas dans la vraie vie donc qui importe peu : quand on ouvre le menu mobile puis qu'on élargit la fenêtre, le menu mobile reste présent, superposé à l'autre menu qui réapparait.
                              Sinon très bien !

                              sinon je propose @Max
                              J'ai sous la main cette version sur laquelle j'ai un peut travaillé les transitions. Elle ne fait jamais appel a javascript , est sémantiquement correcte, facilement modifiable.

                              ">> Voir ici << désolé j'ai pas encore installé le certificat sur cet hébergeur mais il n'y a rien de malveillant vous inquiétez pas !

                              bien sur c'est a adapter, ce n'est que pour tester que j'avais fais ça !

                              Max Attention cependant : j'ai l'impression que tu ne travailles pas les CSS avec les id des containers, du coup tu génères des erreurs dans les autres éléments. Ça revient à ce qu'on disait sur le besoin des id :

                              effectivement je n'ai pas sélectionné assez précisément mes li, j'aurait dû leur passer un #content_header , mais bon ce n'est pas une version final hein 😉 et puis j'utilise les class quand il y en à 😃 (private Joke )

                              • Max replied to this.

                                  NemStudio18

                                  Moi ça me va, c'est simple et propre. Je ne sais pas ce que les autres en pensent, des retours ?

                                  NemStudio18 effectivement je n'ai pas sélectionné assez précisément mes li, j'aurait dû leur passer un #content_header , mais bon ce n'est pas une version final hein 😉 et puis j'utilise les class quand il y en à 😃 (private Joke )

                                  Ouh je sais que je vais devoir veiller au grain avec ces foutus id 😂

                                      Voici l'intégration fonctionnelle du menu responsive full CSS.

                                      • Il y a un léger bug a régler , je pense qu'il serait mieux de pouvoir cliquer sur toute la barre.
                                      • j'ai modifié une bonne partie du header.php afin de commencer le remaniement du html , remplacement de certains div par de la balise générique type <nav>
                                      • @Max pour toi j'ai spécialement utilisé tes id pour la sélection de ma modification. 😃
                                      • je n'ai relevé aucun bug sur le reste de l'affichage généré a cause de cette implantation (sinon merci de me le rapporter ici), le seul reproche c'est lors de la transition au passage des 960px , le box_shadow fait vraiment bizarrerie à l'oeil je trouve.
                                      • Entièrement en CSS , pas d'appel javascript.

                                      Reste à faire: Du pur design avec de jolies couleurs !

                                      Enjoy ! ==> Attention je ne ferais plus de maj après cela , si vous l'utilisez c'est en l'état , la prochaine maj sera surement en fonction de @Max s'il valide et implante !

                                      adm-resp-menu-css.zip
                                      6kB

                                      Edit : et bha si j'ai un bug ! a vous de le trouver ! j'offre un avatar au premier qui trouve !

                                      @claireomatic vide le cache de ton navigateur après avoir mis les fichiers en place avant de faire f5 😉

                                      Je vais tâcher de l'implémenter dans la 1.2 avec les balises aria qui vont bien.
                                      Gros merci Nem 😘

                                      tk je vais continué , on en parle en zone dev ok ? 😉

                                      Attention , Bug d'accessibilité sur la version en téléchargement sur message plus haut, veuillez remplacer le CSS du pack par le suivant : A venir suite découverte d'un autre bug en mobile.

                                      je vais refaire un dernier pack car bête comme je suis j'ai créé un autre bug >< en version mobile, j'ai oublié de remettre un header a 100% width, j'en peux plus 3 jours les gamins H24, demain je ferai moins d'erreurs !