Enveloppement et défilement du titre de la barre latérale

UX
1

Je n’aime pas particulièrement ça. Barre latérale de navigation en mode déroulant :

IMG_3301
IMG_3301633×399 77.7 KB

De plus, en mode déroulant, il ne faut pas grand-chose pour que le menu ait une barre de défilement, même s’il reste de l’espace sur l’écran du bureau pour qu’il s’agrandisse et ne l’ait pas. Est-ce que cela peut être corrigé ?

menu
menu391×679 42.7 KB

Mes utilisateurs veulent la barre latérale déroulante par opposition à celle développée car elle ressemble beaucoup à l’ancien menu hamburger hérité et elle est sur le côté droit.

Et pourquoi Tout inclut-il le nouveau et le non lu ? Ceux-ci devraient être séparés ?

J’ai également besoin de retirer ce lien FAQ et je n’ai pas encore tout à fait compris le CSS pour cela.

1 « J'aime »
2

Il existe peut-être des solutions plus élégantes ou plus précises, et je pense que la barre latérale sera plus personnalisable à l’avenir, mais une solution CSS potentiellement peu fiable serait :

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

Elle cible la position actuelle du parent du lien FAQ (dernier élément -1). Avoir d’autres éléments entre le lien FAQ et la fin de la liste rendra le sélecteur CSS incapable de cibler le bon élément.

Mais si vous êtes sûr que cette partie de la liste ne changera pas, vous pouvez y aller.

1 « J'aime »
3

Merci @Canapin - je suis assez bon en CSS et j’en utilise pas mal sur mon forum et ça me va. Je n’avais pas tout à fait compris comment cibler ces éléments et j’espérais le faire sans le code de l’élément enfant pour la raison que vous avez soulignée. J’ai utilisé beaucoup de CSS pour modifier le contenu de l’ancien menu hérité également, mais il était plus facile d’y accéder avec CSS. Je veux en fait manipuler toute cette section sous « community » et y mettre les choses dans un ordre différent, donc je soupçonne que je devrai aussi utiliser du JavaScript. Je veux VRAIMENT que cette partie soit personnalisable pour les administrateurs. Merci encore pour le conseil ! :slight_smile:

Aussi, je ne comprends toujours pas vraiment ce qu’est « everything ». J’aimerais renommer cela pour être plus spécifique. :thinking:

5

Oui, le conteneur de liens n’a pas de classes uniques, il est donc difficile de les cibler dans l’état actuel.

Cela pourrait vous intéresser : sidebarMod: Add/Remove Sidebar Links and Sections

Vous pouvez rechercher js.sidebar.sections.community.links.everything.content dans Personnaliser → Texte :slight_smile:

1 « J'aime »
6

ok ce code CSS a fonctionné. je craignais que cela n’affecte la vue du personnel de cette partie du menu. merci ! :innocent:

malheureusement, je n’arrive pas à faire fonctionner le remplacement de texte :expressionless:

edit : même après avoir rechargé le navigateur de nombreuses fois, j’ai dû changer de thème pour que le remplacement de texte fonctionne. la mise en cache de Chrome est un problème. :woman_facepalming:

1 « J'aime »
7

J’ai aussi modifié le texte correspondant au survol de la souris :

IMG_3332
IMG_3332873×143 58.2 KB

1 « J'aime »
8

donc cela fonctionne pour masquer la FAQ, mais j’ai depuis découvert que cela a également pour effet indésirable de masquer un élément dans chaque section du menu :sweat_smile: mais bien sûr que oui :woman_facepalming: :upside_down_face:

je devrais vraiment m’y mettre et rédiger une FAQ ou la déléguer à un utilisateur.

9

Ah, oui.

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

Devrait être mieux.

1 « J'aime »
10

Bonjour,

Vous pouvez également les cibler avec l’attribut data-link-name.
par ex.

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
1 « J'aime »
11

oui, j’essayais d’utiliser cette méthode la première fois et j’avais mal la syntaxe data-link. j’ai oublié la partie “-name” et j’ai pensé que ce n’était pas faisable. stupide de ma part car c’est similaire à la façon dont je l’ai fait avec l’ancien menu hérité. DOH :woman_facepalming: merci.

juste à titre d’information, la méthode child n’est utilisable que pour la vue de bureau.

1 « J'aime »
12

Le problème est que tous les liens sont à l’intérieur d’éléments de liste qui ont tous exactement les mêmes classes.
Si vous masquez le lien, l’élément de liste reste et prend de la place malgré le fait qu’il soit « vide ».
À moins que je ne rate quelque chose ?

2 « J'aime »
13

Ce sera formidable lorsque la section Communauté sera pleinement opérationnelle dans Core. J’ai facilement changé le titre « Communauté », mais j’aimerais changer l’ordre des éléments. Par exemple, en vue mobile, le lien Mes publications est au-dessus de Admin et Review, et par conséquent Review se trouve dans la section … Plus. Mon personnel n’aime pas cela et je suis d’accord que les contrôles de modération devraient avoir la priorité sur Mes publications. Je devrais probablement créer un sujet de demande de fonctionnalité UX, mais je sais que l’équipe travaille déjà à rendre cela personnalisable pour nous à l’avenir.

Je suppose que je peux toujours masquer le lien vers mes publications, puis le déplacer dans la section des liens globaux. Je ne sais pas, je suis sûr que j’essaie d’en faire trop avec ce menu.

2 « J'aime »
14

Ouais, je vois. Pour ce genre de problèmes, ce serait bien d’utiliser le pseudo :has, mais il est un peu limité.

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2 « J'aime »