Details in topic styling changes - Feedback

[chapoi (Charlie)]

@CvX

(and it’s not the same chevron icon? )

You’re not wrong, but the fault lies at the different way these components are setup, one using the d-icon and the other not lending itself to that atm. Would love to see that changed so feel free to help out if you know how.

@CvX

The button/summary element takes much more space (previously it was a semi-inline element)

With the new styling it will need more space, but I agree the current padding is too much.

@CvX

Also adding to 2.
Regarding the direction that the icon is pointing toward: given that it acts as a toggle, wouldn’t it make sense to reverse it so it denotes current state rather than action/future state (this applies also to the “Replies” button)

This has been an ongoing debate amongst designers since the inception of the toggle. There is no right or wrong answer.

---

This was one of the ideas from the design session I personally liked a lot. It solves (some of) sam’s and cvx’s remarks. I’ll give this a go in the next iteration.

[mcwumbly (Dave McClure)]

@chapoi

This was one of the ideas from the design session I personally liked a lot. It solves (some of) sam’s and cvx’s remarks. I’ll give this a go in the next iteration.

my thoughts on this so far...

Looking pretty good to me!

[j127]

I think the chevron would be better on the left. I think most people won’t see it on the right. It looks like regular text (kind of like a code block) unless the mouse passes over it. I almost missed it.

[CvX (Jarek Radosz)]

(14. ) The recent addition of a click handler means clicking a link, using the copy code button, trying to expand an image, or even attempting to select any text will result in collapsing the details block…

[gerhard (Gerhard Schlager)]

@j127

I think the chevron would be better on the left. I think most people won’t see it on the right.

I fully agree with this. I (nearly) missed reading multiple detail blocks in the past couple of days. I think it’s because they look similar to code blocks on first glance.

this is not code

empty

this is code

[chapoi (Charlie)]

@CvX

The recent addition of a click handler means clicking a link, using the copy code button, trying to expand an image, or even attempting to select any text will result in collapsing the details block…

Strange, clicking a link does work for me. I closes the details but the link also opens. Haven’t tried the other scenarios. And I agree it can do with some more refined JS work

About the position of the chevron, @jordan-vidrine wdyt?
Shall I do another iteration? Maybe how I had it in mind orginally, with the regular triangle instead of chevron and only a bg on opened?

[jordan-vidrine]

@chapoi

Maybe how I had it in mind orginally, with the regular triangle instead of chevron and only a bg on opened?

I think chevron still should be used, but positioning on the left seems like a good idea.

[jordan-vidrine]

@CvX

The recent addition of a click handler means clicking a link, using the copy code button, trying to expand an image, or even attempting to select any text will result in collapsing the details block…

Are you referring to something else? We did not add a click handler here.

[CvX (Jarek Radosz)]

There was a handler. Charlie removed it today in 2c941c4.

[jordan-vidrine]

Ha! Wow, I wondered what was doing this. Right between the eyes and I didnt see it

[chapoi (Charlie)]

Yeah I really liked the idea of being able to hover anywhere > highlight > click to close, instead of only being able to click on the summary part, but I had overlooked the propagation of other clicks

[Moin]

It is also very easy to miss details in quotes, because the background highlight is almost invisible and the chevron is far away from the text

@sam

An example of the details tag using BBCode:

abc

testing 123 123
123

An example of the details tag using HTML:

···

Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content...

[awesomerobot (Kris)]

Some nitpicky thoughts about the latest iteration…

Should the arrow be aligned by the baseline rather than centering? this feels better to me than centering on multi-line examples… but this may be subjective:

center

baseline

should padding match quotes? the top feels a little tight at the moment

if we pad the entire container, we should maybe try to remove any padding from the last element… this could be too tricky because we have many content types… but perhaps something like:

details > :last-child {
  padding-bottom: 0;
}

I agree that we should go a shade darker when this is within a quote, so the background isn’t lost

Summary

This text will be hidden

I think we could probably have some sort of variable that can help with this… if details had the background set by something like

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

then a quote can override it… maybe we could even have a generic “needs to be darker” in a quote variable? can’t recall if we have other situations like this…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}

[chapoi (Charlie)]

@awesomerobot

baseline

100% this - if not the cause currently, thats just an error

[jordan-vidrine]

@awesomerobot

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}

I like using something like rgba(var(--primary-rgb),0.25) for this purpose as it just makes whatever it’s current background of the element it is included in a bit darker.

[sam (Sam Saffron)]

Overall I am feeling like the latest iteration is very very close to being ready to ship

One minor quibble that I am not sure is resolvable:

Not a blocker by any means, but the grey panel makes you think you are looking at one entity.

[chapoi (Charlie)]

Oh yes, I’m sure we can resolve it with maybe a border or something to make it more clear. Will have a look today

[angus (Angus McLeod)]

Overall, I like it. That said, this suggestion caught my eye.

@awesomerobot

Maybe a different style completely?

Trying to choose a text element’s background sometimes feels like the search for the perfect shade of light grey.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

But it looks like you’re close, and, overall, I like it.

[chapoi (Charlie)]

I’m adding the same darkening of the BG for the code block as for the block quote

That should solve the problem @sam

[CvX (Jarek Radosz)]

Two more things (15. & 16. if you will )

• The actual clickable area of the summary element is smaller than the element that changes the cursor and highlights on hover
• Because of that on-hover background color and the following change when you expand an element – there’s a brief background color flash when expanding an element

edit:

17. A discrepancy between a rendered post and the composer:
    
    
    
    vs