Sovrapposizioni posizionate erroneamente durante l'incapsulamento di Discourse

Ciao :waving_hand:

Quando provo a racchiudere l’intero Discourse per abilitare lati di colori diversi, riscontro un problema di posizionamento con gli overlay, come ad esempio la scheda utente.

La scheda utente dovrebbe aprirsi proprio accanto all’utente cliccato. In realtà, però, è spostata orizzontalmente esattamente della larghezza dei miei lati. La domanda è: come viene realizzato il posizionamento di questi overlay e come potrei evitare tali errori di allineamento mantenendo comunque le barre laterali?

Grazie mille :clinking_beer_mugs:

Sì, mi sono imbattuto in questo problema mentre aggiungevo un banner extra-large durante lo sviluppo di un plugin importante per un cliente. Nel mio caso, l’offset era completamente assurdo (era fuori dallo schermo!)

Potrebbe esserci una soluzione più semplice, ma risulta che questo richieda un po’ di lavoro e comporti l’override di una funzione, ad esempio per la scheda utente:

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

Questo proviene da un mixin, disponibile qui: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

Ho utilizzato jQuery per determinare se applicare o meno la modifica in base alla visibilità del banner: su alcune pagine avevo il grande ‘banner’, su altre no. Potresti adottare una strategia simile.

A dirla tutta, il tuo esempio non sembra così grave: valuterei di lasciarlo così com’è?

Il problema è che, fondamentalmente, tutti gli overlay sono posizionati in modo errato. Non voglio davvero sovrascrivere tutti i metodi di posizionamento di tutti gli overlay che potrebbero esistere.

Nell’immagine di esempio sembra accettabile poiché la finestra del browser non era a schermo intero. I lati sono solitamente più ampi e quindi lo spostamento è più evidente. Alcuni overlay sono quasi fuori dallo schermo.

Sì, è fastidioso. Forse è meglio limitare le personalizzazioni all’elenco degli argomenti e cercare di non toccare troppo la visualizzazione degli argomenti, evitando di avere troppe ‘varianti’ per semplificare la vita.

Non ho personalizzato nessuna vista in particolare. Voglio inserire l’intero forum in un contenitore per colorare diversamente i lati.

Come stai procedendo? Stai aggiungendo un nuovo contenitore attorno al div #main?

Potrebbe essere più semplice se invece aggiungi un colore di sfondo a #main-outlet e poi imposti il colore di sfondo per i lati direttamente su body.

Sì, dopo ho pensato anche io! Quindi:

body {
   background-color: red;
}

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

C’è ancora il problema del banner massiccio, ma non è così grave.