search

aemsites / stericycle-shared

Edge Delivery Service Site for Stericycle sites
https://www.shredit.com, https://www.stericycle.com
Apache License 2.0
0 stars 1 forks source link

Tabs Block Issues #441

Open colinvlasak opened 2 weeks ago

colinvlasak commented 2 weeks ago

There are a few issues with the tabs block

Tabs (vertical) - https://main--shredit--stericycle.aem.page/tools/sidekick/library.html?plugin=blocks&path=/tools/sidekick/blocks/tabs&index=1

  1. Circle and text overlapping. Need more space between circles and text.

image

Should look like:

image

  1. Bullet issue is happening on tabs. Is there a way to fix sitewide? Seems to happen with all components and needs to be fixed idnividualy?

Example: https://main--shredit--stericycle.aem.page/en-us/test

image

On mobile bulleted text doesn't render at all

image

Tabs (Video) - https://main--shredit--stericycle.aem.page/tools/sidekick/library.html?plugin=blocks&path=/tools/sidekick/blocks/tabs&index=2

  1. Same issue with circle overlapping text

  2. Block not rendering proper width. It's more narrow then rest of site. Should match width of standard site margins.

  3. There's a vertical scroll bar beside the video which should not be there

image

Tabs (topics) - https://main--shredit--stericycle.aem.page/tools/sidekick/library.html?plugin=blocks&path=/tools/sidekick/blocks/tabs&index=3

  1. image should link to same page as the text. See current live site for example - https://www.shredit.com/en-us/who-we-serve
  2. Rendering when you copy over the component to a doc is a mess and doesn't really allow for proper authoring

image

  1. Mobile rendering is poor. Should not have scroll bar. Should also stack 2 x 2 taking up full width of container image
MarquiseRosier commented 3 days ago

@colinvlasak the way that the block renders is we can tie a row of *cards to a tab title if the items are all in the same row. Doing it any other way would add developer complexity to the block; and the block is already pretty complex. My suggestion is to maybe not have content like this with multiple images and links in a tab like this aha it's already a bit unruly but if it's a must have we can talk about how we can rebuild this block.

colinvlasak commented 3 days ago

@MarquiseRosier which issue are you referring to in the comment above?

bstopp commented 3 days ago

Colin - i went out to the test page and I didn't see many of these issues outlined here. Is there any way to break them out into individual bugs? I'm not sure that they're all actually related to the Tabs block

colinvlasak commented 2 days ago

@bstopp it looks like @MarquiseRosier fixed most of the issues.

The ones that are still present are:

Tabs (topics) - https://main--shredit--stericycle.aem.page/tools/sidekick/library.html?plugin=blocks&path=/tools/sidekick/blocks/tabs&index=3

image

image

bstopp commented 2 days ago

Gotcha - let me see if can address these.

bstopp commented 21 hours ago

Colin - I've opened PR to try to address both the UX and the Authoring considerations. Please take a look at the links referenced there. I've added you as a reviewer, so you should have seen a notification for it.

I've also added both of those Block Variations to the Library - they won't work on the default branch, but you should be able to use this:

https://feat-fetched-tabs--shredit--stericycle.aem.page/tools/sidekick/library.html?plugin=blocks