Vocabulary styles being overriden by custom styling

[dhruvkb]

Due to issues with specificity, styling provided by CC Vocabulary is being overriden by styling from other third-party libraries and custom written CSS, leading to a different UI than what is expected. This is causing components to look broken or erratically styled.

To Reproduce
Steps to reproduce the behavior:

1. Check out the branch from PR Complete the incomplete integration of Vocabulary with Chooser #30
2. Run the development server

Expected behavior
The components should render like the examples in the Vocabulary styleguide.

Screenshots

^ Broken Footer and Locale

^ Expected Footer and Locale

Desktop (please complete the following information):

• OS: Linux (Fedora 30)
• Browser: Firefox
• Version: 68

[deboragaleano]

Hi @akmadian, I'm an Outreachy applicant. I will try to work on this. Thank you!

[dhruvkb]

I’m happy to help anywhere Vocabulary usage is involved!

[akmadian]

Go ahead! @deboragaleano

[onyijne]

Hi @akmadian can I work on this too?

[akmadian]

Sorry, @onyijne, this issue is already being worked on by someone else. Keep checking back on the repository cause I'll be adding more issues soonish. Any issue with the in progress tag is already being worked on by someone else.

[onyijne]

Okay @akmadian I understand how it works now, thanks.

[deboragaleano]

So sorry but I won't be able to work on this issue in the end. I believe @onyijne can take it now :) Thank you!

[onyijne]

It's okay @deboragaleano, @akmadian can I go ahead?

[akmadian]

Yep, go ahead @onyijne :)

[onyijne]

@dhruvkb please how can I access the @creativecommons/vocabulary dir. can't seem to locate it.

This is what I have now, can't find the Footer component to enable me edit the first two parts.

[onyijne]

Okay my IDE kinda hid the dir, but how do I push changes I'll make in the vocabulary package since it's in node_modules dir?

[akmadian]

Either make a pull request to the cc-vocabulary repo with your changes (make sure they don't break anything else in vocabulary), or make changes to the CSS in components that need attention in the cc-chooser source (this option is far better in my opinion). For the footer, your CSS mods should be in the App.vue parent component.

[onyijne]

@akmadian I might have to make a pull request to the cc-vocabulary repo as the footer requires more than CSS, the wording and logo needs modification. However, if you do not recommend making a pull request to cc-vocabulary repo, and would permit me to I can use DOM manipulation to effect the changes.

[akmadian]

I was saying that (maybe I could have been more clear), chances are that there's some CSS within the chooser that's causing issues with vocab components, and that it's better to find the problematic CSS and fix it instead of modifying vocabulary in node_modules.

Although, it sounds like you may have found a deeper issue with vocabulary. So, if you've got a fix for that issue, and it happens to also fix this one, then that sounds better to me. If you did find a deeper issue, I would definitely submit a PR to vocab, then do what's needed to fix the issue in the chooser if it still needs some work.

[onyijne]

I

Due to issues with specificity, styling provided by CC Vocabulary is being overriden by styling from other third-party libraries and custom written CSS, leading to a different UI than what is expected. This is causing components to look broken or erratically styled.

To Reproduce
Steps to reproduce the behavior:

1. Check out the branch from PR Complete the incomplete integration of Vocabulary with Chooser #30
2. Run the development server

Expected behavior
The components should render like the examples in the Vocabulary styleguide.

Screenshots

^ Broken Footer and Locale

^ Expected Footer and Locale

Desktop (please complete the following information):

• OS: Linux (Fedora 30)
• Browser: Firefox
• Version: 68

Looking at the contents on the images for broken and that of expected, they are different. This is what I was actually referring to, and intended to harmonize.

This is what I have done so far

[akmadian]

Ah, I see where the confusion is. The content of the footer is not supposed to exactly match the expected footer. The links above the locale selector are meant to be customizable, along with other parts of the footer component. The only real CSS bug I saw in the footer was the weird padding/ alignment of elements in the local selector.
I’ll give some feedback on content in the PR thread.

_{Sent with GitHawk}

[onyijne]

Okay, for the weird padding of the local selector, I think I have fixed that. So I'll just remove WIP if that's all that's needed for now, while I wait for the feedback you'll get from the PR thread.

…

On Wed, 9 Oct 2019, 19:10 Ari Madian, ***@***.***> wrote: Ah, I see where the confusion is. The content of the footer is not supposed to exactly match the expected footer. The links above the locale selector are meant to be customizable, along with other parts of the footer component. The only real CSS bug I saw in the footer was the weird padding/ alignment of elements in the local selector. I’ll give some feedback on content in the PR thread. Sent with GitHawk <http://githawk.com> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#31>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUCSYAHEKDEJ7XPRAZYFSDQNYNCPANCNFSM4ITDWV3Q> .