ContentHubUI: Prefix all HTML classnames and IDs used in the HUB UIs

Description

Background

We see multiple collisions with generic HTML class names and IDs, inheriting the wrong styles. A good example is the error messages which inherits a background image from Drupal. Or the “success” message after registering with the HUB.

Acceptance Criteria

1. Prefix all HTML class and id attributes used in the HUB UIs to avoid collisions with generic names used by themes. Ideally use the 'h5p-hub-*' prefix.
2. The id attributes are ideally generated using an incremental counter to avoid collisions when running multiple instances of the UIs or UI components. Hardcoding an id attribute makes the component non-reusable in most cases.

Acceptance Criteria

None

Activity

Show:
hanna.solstad
September 18, 2020, 8:10 AM

is this issue both for the content hub and the registration/sharing UI? And should the content hub and the registration have the same prefix: ‘h5p-hub’?

Pål Jørgensen
September 18, 2020, 8:59 AM

Yes, it is for content-hub + registration/sharing. For naming, it really doesn’t matter, as long as it is a uniqe “namespace“. I would have chosen “h5p-hub“, though, since it is quite short

Pål Jørgensen
September 23, 2020, 12:30 PM

A bit demanding to review this one , but this is what I found (both for the h5p-hub-client):

src/scripts/utils/filters.js:

  • Missing prefixed classnames

  • We can remove the "non-bold"+"h5p-hub-non-bold" classNames completely

src/scripts/Components/TabPanel/Reuse/Detail/InfoList.js:

  • theres h5p-hub-hub<name>. It's enough with one hub :)

hanna.solstad
September 23, 2020, 1:03 PM

Hehe understandable. I addressed your issues but in filters bold is the default font-weight for text so I did the opposite and removed the bold classnames.

Assignee

hanna.solstad

Reporter

Frode Petterson

Labels

Funding

None

Code reviewer

Pål Jørgensen

Released

None

Time tracking

16h

Sprint

None

Priority

Medium
Configure