Panel styling changes for TCEI UX review

[yileifeng]

Related Item(s)

https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/41
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/42
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/43
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/44
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/45
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/46
https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/47

Changes

• [FIX] remove padding from image containers and add margin between panels (41)
• [FIX] make text panels 95% opacity (42)
• [FIX] align panels margin at top of slide container (43)
• [FIX] removed stacked padding between slides (44)
• [FIX] add border radius to image panels (45)
• [FIX] normalize border radius on panels to be neutral 8px (46)
• [FIX] change line height to 1.65em (47)

Testing

Ensure all the changes above are applied properly and no new issues surfaced.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/TCEI-panel-styling/#/en/00000000-0000-0000-0000-000000000000

[RyanCoulsonCA]

Looking a lot cleaner! Just a couple of things I noticed:

1. It looks like there isn't a space between the stickied (right) panel and the content anymore. It's mostly noticeable on slides with a background image:

Before:

After these changes:

2. When there's a slide with a background image directly after a slide that doesn't have one, we don't have any space between the beginning of the slide and the rounded text box.

A few of ideas for this one, not sure which one is best though.

1. We can keep the top and bottom padding on slides with background images. I understand why we wouldn't the want the padding for slides that don't have a background, but extra padding on slides with background images would leave more room for the background to be viewed before transitioning to another while scrolling. The StoryMaps product seems to keep a decent amount of padding around slides with background images.
2. If we have a slide with a background image directly after a slide with no background image, we could just add top padding to the one with the background image. This way, every time we go from "no image" to "image", there's a bit of top padding. Not exactly sure how we'd do this one though. Might require some CSS trickery.
3. We can remove that white background on slides that don't have background images. I added it in to try and make the "background image" to "nothing" transition a little bit less jarring.

I was sort of struggling to write these suggestions out, so definitely let me know if any of this isn't clear and I'll try to clarify

Reviewable status: 0 of 10 files reviewed, 3 unresolved discussions (waiting on @yileifeng)

---

src/components/panels/dynamic-panel.vue line 233 at r1 (raw file):

}
.has-background {
    background-color: rgba(255, 255, 255, 0.6);

Should adjust the background opacity here as well

---

src/components/panels/text-panel.vue line 52 at r1 (raw file):

    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    opacity: 95%;

I believe this is actually making the background more transparent than it was before since the 0.6 value in the background-color property above is what is setting the opacity of the background already. I think if we just change 0.6 to .90 or .95 it should be good.

---

src/components/panels/helpers/fullscreen.vue line 3 at r1 (raw file):

<template>
    <div ref="el">
        <div class="relative bg-white fullscreen-wrapper rounded-lg">

I think we might have to add rounding on the actual img itself as well. It doesn't seem like the rounded edge is actually appearing right now because the image overlaps it (added a black border to this div and increased border radius just to demo):

One quick thing to note is I don't think it's as simple as adding rounded-lg here, because if there's a caption then the rounding will be doubled:

It'll probably need some conditional styling depending on whether there's a caption or not.

[yileifeng]

For the first issue, I added a top margin back to mobile resolutions between panels. For the second issue, I added some conditional padding in the case where there is a empty background slide followed by a slide with a background. Let me know if this solution works

Reviewable status: 0 of 11 files reviewed, 3 unresolved discussions (waiting on @RyanCoulsonCA)

---

src/components/panels/dynamic-panel.vue line 233 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Should adjust the background opacity here as well

Donethanks

---

src/components/panels/text-panel.vue line 52 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

I believe this is actually making the background more transparent than it was before since the 0.6 value in the background-color property above is what is setting the opacity of the background already. I think if we just change 0.6 to .90 or .95 it should be good.

Thanks for this, changed

---

src/components/panels/helpers/fullscreen.vue line 3 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

I think we might have to add rounding on the actual img itself as well. It doesn't seem like the rounded edge is actually appearing right now because the image overlaps it (added a black border to this div and increased border radius just to demo):

One quick thing to note is I don't think it's as simple as adding rounded-lg here, because if there's a caption then the rounding will be doubled:

It'll probably need some conditional styling depending on whether there's a caption or not.

Added top border-radius to img element that contains a caption and a full border-radius otherwise to img element

[RyanCoulsonCA]

👏

Reviewed 7 of 10 files at r1, 3 of 4 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yileifeng)

[spencerwahl]

Reviewed 7 of 10 files at r1, 3 of 4 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yileifeng)