Aspetto diverso per details-block

Sviluppatore
1

Ho provato a ottenere un aspetto simile a quello utilizzato da un’azienda mediatica finlandese.

Lo screenshot dice abbastanza, immagino:

IMG_3465
IMG_34651306×887 166 KB

Ho solo competenze di base nella manipolazione del CSS e non sono sicuro se ciò possa essere fatto (facilmente) con il CSS. Ma il mio primo tentativo è andato… beh, non molto bene.

Questo ho usato (i commenti sono per me, ovviamente)

/*- Stile personalizzato per l'elemento details - */
/* Sostituisci lo sfondo e l'aspetto del pulsante */
summary {
  background-color: #f5f5f5; /* Colore di sfondo */
  border: 1px solid #d8d8d8; /* Bordo */
  padding: 10px; /* Spaziatura interna */
  border-radius: 5px; /* Angoli arrotondati */
  cursor: pointer; /* Stile del cursore */
  display: flex; /* Utilizzo di Flexbox */
  justify-content: space-between; /* Allineamento */
  align-items: center; /* Allineamento al centro */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Rimuovi il marcatore di elenco predefinito */
}
summary::after {
  content: '⮟'; /* Aggiungi freccia */
  font-size: 20px; /* Dimensione freccia */
}

/*- Stile personalizzato per il contenuto dell'elemento details - */
details[open] summary::after {
  content: '⮝'; /* Cambia freccia verso l'alto all'apertura */
}
details {
  margin-bottom: 10px; /* Spazio tra i blocchi */
}
details > div {
  padding: 10px; /* Spaziatura interna al contenuto */
}

Alcuni li ho fatti da solo e altri sono suggerimenti di GPT.

Idee?

2

Ciao @Jagster :wave:

Ho creato un componente del tema per questo… :tada:

3

Sei fantastico :+1: E ora scaverò per capire cosa diavolo hai fatto.

Grazie!

6

Innanzitutto, ho fatto una cosa tipo “hello world” usando Visual Basic circa 20 anni fa. E ho modificato alcuni plugin di WordPress con il metodo tentativi/errori, e una volta sono riuscito a cambiare tutte le proprietà nel mio VPS, partendo dalla root.

Quella grande soluzione non segue più [details .. open]. Collegato a questo Details block doesn’t obey open credo.

Il problema deriva da questa parte:


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

Perché? Perché è simile a questo da Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>