Les superpositions sont mal placées lors de l'encapsulation de Discourse

Dev
1

Bonjour :waving_hand:

Lorsque j’essaie d’encadrer l’ensemble du Discourse pour activer des côtés de couleurs différentes, je rencontre un problème de décalage avec les superpositions comme la carte utilisateur, par exemple.

17
171113×780 58.9 KB

La carte utilisateur est censée s’ouvrir juste à côté de l’utilisateur cliqué. En réalité, elle est décalée horizontalement exactement de la largeur de mes côtés. Ma question est donc : comment le positionnement de ces superpositions est-il géré et comment puis-je éviter ces décalages tout en conservant les barres latérales ?

Merci beaucoup :clinking_beer_mugs:

2

Oui, j’ai rencontré ce problème en ajoutant une bannière extra-large tout en développant un gros plugin pour un client. Dans mon cas, le décalage était complètement ridicule (il était hors de l’écran !)

Il existe peut-être une solution plus simple, mais il s’avère que c’est un peu complexe et nécessite de remplacer une fonction, par exemple pour la carte utilisateur :

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

Cela provient d’un mixin, situé ici : discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

J’ai utilisé jQuery pour déterminer s’il fallait appliquer la modification en fonction de la visibilité de la bannière : sur certaines pages, j’avais la grande « bannière », sur d’autres non. Vous pourriez utiliser une stratégie similaire.

Honnêtement, votre exemple ne semble pas si mauvais – je considérerais le laisser tel quel ?

3

Le problème est que, fondamentalement, tous les superposés sont mal placés. Je ne veux pas vraiment remplacer toutes les méthodes de positionnement de tous les superposés qui pourraient exister.

Cela semble acceptable sur l’image d’exemple, car la fenêtre du navigateur n’était pas en plein écran. Les côtés sont généralement plus grands et donc le mauvais placement est pire. Certains superposés sont presque hors de l’écran.

4

Oui, c’est énervant. Peut-être limiter les personnalisations à la liste des sujets et essayer de laisser la vue des sujets aussi intacte que possible, sans trop de « variantes » pour vous simplifier la vie.

5

Je n’ai personnalisé aucune vue en particulier. Je souhaite placer l’ensemble du forum dans un conteneur afin de colorer les côtés différemment.

6

Comment procédez-vous pour cela ? Ajoutez-vous un nouveau conteneur autour de la div #main ?

Il serait peut-être plus simple d’ajouter une couleur d’arrière-plan à #main-outlet, puis d’appliquer votre couleur d’arrière-plan pour les côtés sur le body.

7

Oui, j’y ai pensé plus tard ! Donc :

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

Il reste tout de même le problème de la bannière épaisse, mais ce n’est pas si grave.