Amélorer le look du back-office (admin)

bazooka07 · mai 2020

Si vous trouvez l'aspect du back-office de PluXml un peu désuet, je vous propose de créer une feuill e de style supplémentaire pour un interface plus agréable :

thead,
tbody tr:not(.new) td:first-of-type:not([colspan]),
table[data-rows-num] tr[draggable] td:first-of-type,
form .sidebar {
    background-color: #e0e0e0;
    color: #000;
}
.menu.expanded li {
    margin-left: 0.75rem;
}
.section .action-bar,
.aside {
    background-color: #113867;
    color: #e0e0e0;
}
.section .action-bar {
    border-left: 1px;
}
.section .action-bar a {
    color: inherit;
}
#responsive-menu li.active {
    background-color: #3fbabb;
}

.aside .unstyled-list.profil,
.aside .menu-config {
    background-color: transparent;
}

.ddcat {
    width: auto;
}
/* .aside et .action-bar avec position: fixed :
 * Impossible d'utiliser display: grid ou flex !
 * */

@media screen and (min-width: 43rem) {
    body .section {
        padding: 0.5rem 1.5rem 0 0.5rem;
    }

    .in-action-bar { margin-top: 7.5rem; }

    body { --aside-width: 17rem; }

    body .main .aside { width: var(--aside-width); }
    body .main .section { margin-left: var(--aside-width); width: calc(100% - var(--aside-width)); }
    body .main .section .action-bar { left: var(--aside-width); }

    .scrollable-table {
        padding-bottom: 1rem;
    }

    #pagination {
        margin: 0.5rem 0 0;
    }
}

@media screen and (min-width: 43rem) and (max-width: 65rem) {
    #article,
    #statique,
    #categorie,
    #parametres_plugin { --aside-width: 0; }
    #article .main .aside,
    #statique .main .aside,
    #categorie .main .aside,
    #parametres_plugin .main .aside { display: none; }
    #article .main.grid,
    #statique .main.grid,
    #categorie .main.grid,
    #parametres_plugin .main.grid,
    #article .action-bar,
    #statique .action-bar,
    #categorie .action-bar,
    #parametres_plugin .action-bar { margin: 0; }

    #form_article > .grid > .col {
        padding-right: 0.5rem;
    }
}

@media screen and (min-width: 49rem) {
    #form_article > .grid {
        display: grid;
        grid-template-columns: 1fr 25rem;
        margin-right: 0.15rem;
    }

    #form_article > .grid > div {
        width: auto;
    }
}

@media screen and (min-width: 65rem) {
    body .section {
        padding-left: 1.5rem;
    }
    #form_article > .grid {
        grid-template-columns: 1fr 32rem;
    }
    #form_article > .grid > .col {
        padding-right: 1.5rem;
    }
}

Enregistrer cette feuille CSS dans un fichier admin.css dans le dossier data de votre site.
Aller ensuite dans paramètres avancées de PluXml
Dans le champ "Emplacement et nom du fichier css personnel" saisir "data/admin.css"

Et voilà :

couleurs plus agréables
moins d'espaces perdus dans les "sidebars" si on agrandit la fenêtre

L'archive zip de la feuille est téléchargeable ici : https://gist.github.com/bazooka07/f38d3e305aaaa228ee4638851f732197
Ce cela ressemble à cela :

cpalo · mai 2020

Bonsoir,

Pour info et quelques idées de look, Stéphane nous avait préparé 2 packs de 4 thèmes https://pluxopolis.net/themes.html
Par contre j'aime bien ton utilisation de css grid-layout car pour les deux petits plugins que j'avais fait, j'utilise css grid pour la config du plugin.
@media screen and (min-width: 43rem) and (max-width: 65rem) {
@media screen and (min-width: 49rem) {
c'est vraiment 49 rem que tu voulais écrire?

bazooka07 · mai 2020

PluCSS, KnaCSS et Bootstrap sont basés sur un système qui divise la largeur de l'écran en 12 colonnes.
Résultat : Quand on agrandit le navigateur, on se retrouve avec des marges de plus en plus larges.
Typiquement quand on édite un article, à quoi sert cette grande marge sur le panneau de droite. Je préfère récupérer cet espace vide pour éditer plus confortablement le corps de l'article.

D'où l'intérêt d'un display: grid; grid-template-columns: 1fr 25rem;. On donne une largeur fixe de 25rem au panneau de droite, et le corps de l'article récupère tout le reste.
J'ai moins l'impression de me faire voler des pixels sur mon écran.

Je vais sur http://mydevice.io pour connaitre la largeur d'affichage. Dans Firefox l'émulation pour un ipad donne une largeur de 48rem. Pour éviter d'appliquer la règle CSS à l'Ipad, je mets un min-width de 49rem.

Pour les couleurs, c'est une question de goût. Un bleu froid me semble une couleur reposante. Mais je n'ai pas la prétention d'être graphique.

Dan · mai 2020

Très agréable et utile de récupérer cet espace effectivement ! CSS adoptée, merci.
Et ce bleu est très bien aussi.

Amélorer le look du back-office (admin)

Réponses