Problem/Motivation

Tables created in CK Editor within a Basic Content component don't render correctly on mobile.

Proposed resolution

Component `02-molecules/basic-content` relies on the JavaScript in `01-atoms/table` to prepare tables within basic content.

Either split the JS implementation, so table code is a base utility that can be applied in any component, or implement a dependency for basic-content on table, so that any time basic-content is used, it will include table libraries.

CommentFileSizeAuthor
#10 mobile table.png96.51 KBdanielgry
#10 desktop table.png91.27 KBdanielgry

Comments

alan.cole created an issue. See original summary.

alan.cole’s picture

alan.cole commented

PR: https://github.com/civictheme/uikit/pull/639

  1. Options to solve this were either split the JS implementation so table JS is a base utility that can be applied in any component, or implement a dependency on table for basic-content so that any time basic-content is used it will include table libraries.
  2. Implementing the JS split (given the current structure of civictheme) would likely require adding a [data-table] attribute to any div that is, or may contain a table. This attribute could be added to both atom/table and molecule/basic-content and anywhere else a table may be used (this could also include paragraph components as they too use basic-content styling).
  3. The benefit on tables in base is the dependencies within components are simplified, but the drawback is that more styles and JS exist within the base library whether they are used or not.
  4. This implementation has a drawback of needing to use the drupal theme machine name core/components.civictheme--table within the SDC. Up until now the drupal theme name is not assumed to be civictheme and could change without affecting the UI Kit, however as SDC is a drupal concept and dependencies rely on providing the theme name, this is likely to get murkier the more we include drupalisms in UI Kit.
alan.cole’s picture

alan.cole commented
Status: Active » Needs review
fionamorrison23’s picture

fionamorrison23 commented
Version: 1.11.0 » 1.x-dev
fionamorrison23’s picture

fionamorrison23 commented
Assigned: alan.cole » richardgaunt
richardgaunt’s picture

richardgaunt commented

PR reviewed and merged in UI Kit

richardgaunt credited danielgry.

richardgaunt’s picture

richardgaunt commented
Assigned: richardgaunt » danielgry
fionamorrison23’s picture

fionamorrison23 commented
Issue tags: +civictheme-release-1.12
danielgry’s picture

danielgry commented
StatusFileSize
new desktop table.png91.27 KB
new mobile table.png96.51 KB

Verified and tested on latest dev version

Testing Results:
1. Confirmed that tables render correctly for desktop devices as well as mobile devices without any issues
2. Verified the behaviour matches the expected appearance shown in the UI Kit Storybook for all viewports (XXL-XS)

Screenshots:
Desktop view
image

Mobile view
image

danielgry’s picture

danielgry commented
Assigned: danielgry » richardgaunt
Status: Needs review » Reviewed & tested by the community
fionamorrison23’s picture

fionamorrison23 commented
Version: 1.x-dev » 1.12.0
Assigned: richardgaunt » Unassigned
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.