Different look for details-block

Dev
1

I tried achieve similar look than one finnish media company uses.

Screenshot tells enough, I reckon:

IMG_3465
IMG_34651306×887 166 KB

I have only basic skill manipulate CSS, and I’m not sure if that can be done (easily) by CSS. But my first try went… well, not that good.

This I used (comment are for me, of course)

/*- Mukautettu tyyli details-elementille - */
/* Korvaa painikkeen taustakuva ja ulkoasu */
summary {
  background-color: #f5f5f5; /* Taustaväri */
  border: 1px solid #d8d8d8; /* Reunaviiva */
  padding: 10px; /* Sisennys */
  border-radius: 5px; /* Pyöristetyt kulmat */
  cursor: pointer; /* Kursorin tyyli */
  display: flex; /* Flexbox käyttö */
  justify-content: space-between; /* Tasaus */
  align-items: center; /* Kohdistus keskelle */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Poista oletus listamerkki */
}
summary::after {
  content: '⮟'; /* Lisää nuoli */
  font-size: 20px; /* Nuolen koko */
}

/*- Mukautettu tyyli details-elementin sisällölle - */
details[open] summary::after {
  content: '⮝'; /* Muuta nuoli ylös avatessa */
}
details {
  margin-bottom: 10px; /* Väliaika lohkoon */
}
details > div {
  padding: 10px; /* Sisennys sisältöön */
}

Some I made by myself and some are suggestions from GPT.

Ideas?

2 Likes
2

Hey @Jagster :wave:

I’ve made a theme component for this… :tada:

8 Likes
3

You are awesome :+1: And now I’ll dig what the heck you did.

Thanks!

3 Likes
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

6

First, I’ve done one hello world thingy using Visual Basic about 20 years ago. And I’ve tuned some WordPress plugins using the try/error method, and once I managed to change every ownership in my VPS, starting from the root.

That great solution doesn’t follow [details … open] any more. Connected to that Details block doesn’t obey open I reckon.

Is the issue coming from this part:


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

Why that? Because it is similar to this from Discourse :joy:

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