Argomenti in evidenza

Grazie per l’aggiornamento! :heart:

Con alcuni trucchi CSS ho spostato l’avatar come sovrapposizione sulla miniatura in modalità scheda:

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

Come posso ridurre l’altezza del div (viola) dell’autore dell’argomento a 0 e rimuovere efficacemente lo spazio vuoto mostrando ancora l’avatar?

1 Mi Piace

Se stai scrivendo CSS personalizzato, piuttosto che aggiungere codice che sovrascrive uno dei layout preimpostati, ti consiglio invece di scegliere l’opzione di layout Nessuno nelle impostazioni del tema e dichiarare i tuoi stili da zero.

Ad esempio, potresti copiare il foglio di stile Cards predefinito e dichiarare il contenitore featured-topics__topic-details come una griglia. Quindi puoi posizionare i suoi elementi esattamente come preferisci, piuttosto che spostarli con dichiarazioni assolute.

2 Mi Piace

È un’ottima idea!

Per ora, siamo soddisfatti del modello e solo di alcune piccole modifiche CSS per testarlo inizialmente. Una volta che passeremo alla fase di ottimizzazione del CTR, probabilmente seguiremo il tuo consiglio. :slight_smile:

2 Mi Piace

Non sono sicuro se questo sia il comportamento previsto o se possa essere considerato un bug:

Quando vengono impostati tre argomenti nelle impostazioni, ma ne vengono visualizzati solo due, appare uno spazio vuoto dove dovrebbe esserci il terzo argomento. Sarebbe ideale se le schede venissero ridimensionate per riempire l’intera larghezza in tali casi.

Se qualcuno è interessato a utilizzare lo scorrimento orizzontale su dispositivi mobili, ecco del CSS che ho ideato (con l’aiuto dell’IA). Include anche alcuni aggiustamenti di scroll snap e dimensioni che ho trovato più adatti al nostro caso d’uso.

PS: Ho anche provato a creare delle pillole di navigazione senza aggiungere HTML, ma è stato decisamente un azzardo.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Padding laterale per la visibilità delle schede adiacenti */
    gap: 1rem; /* Spaziatura coerente tra le schede */
    overscroll-behavior-x: contain; /* Impedisce interferenze con l'overscroll */
    scroll-behavior: smooth; /* Scorrimento fluido */
    scrollbar-width: none; /* Nasconde la barra di scorrimento */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Nasconde la barra di scorrimento nei browser WebKit */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Schede più strette per la visibilità laterale */
    min-width: 280px; /* Larghezza minima per schermi piccoli */
    scroll-snap-align: center; /* Centra ogni scheda durante lo scorrimento */
    height: unset !important; /* Altezza coerente */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}

Ciao, grazie mille per questo componente, lo adoro!

Qualcuno può per caso aiutarmi a regolare le dimensioni del titolo dato che è troppo grande in questo momento?

Ho ricevuto un messaggio di errore che dice che questo componente deve essere aggiornato per essere compatibile con le prossime modifiche al core di Discourse. Qualcuno sa se è previsto un aggiornamento?

Ho aggiornato il componente all’inizio di quest’anno. Devi reinstallarlo per utilizzare la nuova versione, vedi: :index_pointing_up: Featured Topics - #38 by manuel

1 Mi Piace

Oh, grazie mille, ha funzionato!

L’unica cosa che non riesco a sistemare (credo di aver stuzzicato Chat GPT per un’ora…) è l’altezza delle schede: qualche consiglio su come posso ridurla/rimuoverla?

Ciao Manuel, c’è un modo per far sì che il tuo fantastico componente tema ignori le immagini (in modo che mostri solo un estratto)?

Ho parecchi argomenti in primo piano senza immagini (che voglio mettere in evidenza), ma fanno una pessima figura accanto a quelli che contengono immagini. Inoltre, sono più interessato al testo che alle immagini.

Il modello del componente renderizza una varietà di contenuti disponibili su un argomento. L’aspetto finale viene quindi regolato con regole di stile. Ad esempio, quando selezioni “schede” come layout, le anteprime degli argomenti vengono nascoste quando è presente un’immagine in primo piano e mostrate ogni volta che non c’è:

Se desideri sempre mostrare l’anteprima e non mostrare mai un’immagine, puoi selezionare “nessuno” per Layout e aggiungere il tuo foglio di stile. Oppure sovrascrivi le regole sul layout delle schede che mostrano l’immagine e nascondono l’anteprima.

1 Mi Piace