Skip to content

[UI] Workaround layering model #14280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
escopecz merged 15 commits into from
Nov 26, 2024
Merged

[UI] Workaround layering model #14280

escopecz merged 15 commits into from
Nov 26, 2024

Conversation

@andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented Nov 21, 2024

Q A
Bug fix? (use the a.b branch) 🟢
New feature/enhancement? (use the a.x branch) 🔴
Deprecations? 🔴
BC breaks? (use the c.x branch) 🔴
Automated tests included? 🔴
Related user documentation PR URL mautic/user-documentation#...
Related developer documentation PR URL mautic/developer-documentation-new#...
Issue(s) addressed Fixes #...

Description

This PR changes the CSS structure related to the layering model and wipes automatic styles that weren't working properly. Also includes a temporary workaround: tab content bg was reset to transparent as fix for the issue mentioned in Slack by @laurielim.

Before After
image image

📋 Steps to test this PR:

  1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
  2. Open Forms
  3. Create new
  4. See that fields are visible on the screen without background

@andersonjeccel andersonjeccel self-assigned this Nov 21, 2024
@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) bug Issues or PR's relating to bugs user-interface Anything related to appearance, layout, and interactivity ready-to-test PR's that are ready to test code-review-needed PR's that require a code review before merging labels Nov 21, 2024
@andersonjeccel andersonjeccel added this to the 5.2 milestone Nov 21, 2024
laurielim
laurielim approved these changes Nov 22, 2024
View reviewed changes
Copy link
Member

@laurielim laurielim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works as intended and the fields are now visible.

I found one odd things although I don't think it's a blocker. When using autocomplete to fill a field, somehow the background color of the input changes (see "Form attributes" in the image below) but this does not happen if you type something in.
image

@andersonjeccel
Copy link
Contributor Author

andersonjeccel commented Nov 22, 2024

@laurielim we really need to update bootstrap :/

shinde-rahul
shinde-rahul suggested changes Nov 25, 2024
View reviewed changes
Copy link
Contributor

@shinde-rahul shinde-rahul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some CS-related small change requests. Otherwise, the changes look good.

app/bundles/CoreBundle/Assets/css/app.css
}
lesshat-selector {
-lh-property: 0; }
-lh-property: 0; }
Copy link
Contributor

@shinde-rahul shinde-rahul Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
-lh-property: 0; }
-lh-property: 0; }

The appending space is the only change. So, suggesting a revert.

Copy link
Contributor Author

@andersonjeccel andersonjeccel Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused about those changes, as the command grunt compile-less is the responsible for generating the final CSS file (so it's never manually touched)

app/bundles/CoreBundle/Assets/css/app.css
@-moz-keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}
@-o-keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}
@keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}
@keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}
Copy link
Contributor

@shinde-rahul shinde-rahul Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}
@keyframes after-anim{ 0% { width: 0%; left: 0%; } 10% { width: 30%; left: 100%; } 19.99% { width: 30%; left: 100%; } 20% { width: 0%; left: 0%; } 30% { width: 80%; left: 100%; } 30.01% { width: 0%; left: 0%; } 40% { width: 5%; left: 30%; } 50% { width: 50%; left: 100%; } 50.01% { width: 0%; left: 0%; } 60% { width: 60%; left: 20%; } 70% { width: 5%; left: 100%; } 70.01% { width: 0%; left: 0%; } 80% { width: 50%; left: 30%; } 90% { width: 10%; left: 80%; } 100% { width: 20%; left: 100%; }}

Same here.

app/bundles/CoreBundle/Assets/css/app.css
}
lesshat-selector {
-lh-property: 0; }
-lh-property: 0; }
Copy link
Contributor

@shinde-rahul shinde-rahul Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
-lh-property: 0; }
-lh-property: 0; }

app/bundles/CoreBundle/Assets/css/app.css
@-moz-keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}
@-o-keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}
@keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}
@keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}
Copy link
Contributor

@shinde-rahul shinde-rahul Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}
@keyframes before-anim{ 0% { width: 0%; left: 0%; } 0% { width: 60%; } 19.99% { width: 40%; left: 100%; } 20% { width: 0%; left: 0%; } 25% { width: 10%; left: 10%; } 30% { width: 40%; left: 30%; } 40% { width: 60%; left: 100%; } 40.01% { width: 0%; left: 0%; } 50% { width: 10%; left: 40%; } 60% { width: 30%; left: 100%; } 60.01% { width: 0%; left: 0%; } 70% { width: 10%; left: 40%; } 80% { width: 5%; left: 100%; } 80.01% { width: 0%; left: 0%; } 90% { width: 70%; left: 10%; } 100% { width: 10%; left: 100%; }}

escopecz
escopecz reviewed Nov 25, 2024
View reviewed changes
@andersonjeccel
removing selectors
77ebf66 
.nav-tabs-wrapper:has(.nav-tabs-contained) + .tab-content,
.nav-tabs-wrapper:has(.nav-tabs-contained) + form > .tab-content,
.nav-tabs-contained + .tab-content,
.nav-tabs-contained + form > .tab-content {
  // background-color: var(--layer);
}
kuzmany
kuzmany approved these changes Nov 25, 2024
View reviewed changes
Copy link
Member

@kuzmany kuzmany left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to me 👍

matbcvo
matbcvo approved these changes Nov 25, 2024
View reviewed changes
Copy link
Contributor

@matbcvo matbcvo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes reviewed & PR tested - looks good to me.

@escopecz escopecz merged commit 5d12dbe into mautic:5.x Nov 26, 2024
15 checks passed
@andersonjeccel andersonjeccel deleted the workaround-layering-model branch November 26, 2024 10:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@escopecz escopecz escopecz left review comments

@kuzmany kuzmany kuzmany approved these changes

@matbcvo matbcvo matbcvo approved these changes

@LordRembo LordRembo Awaiting requested review from LordRembo LordRembo was automatically assigned from mautic/ux-ui-tiger-team

@Esthertests Esthertests Awaiting requested review from Esthertests Esthertests was automatically assigned from mautic/ux-ui-tiger-team

@shinde-rahul shinde-rahul Awaiting requested review from shinde-rahul

+1 more reviewer

@laurielim laurielim laurielim approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@andersonjeccel andersonjeccel

Labels

bug Issues or PR's relating to bugs code-review-needed PR's that require a code review before merging ready-to-test PR's that are ready to test T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity

Projects

Open Source Fridays
Archived in project

Milestone

5.2

Development

Successfully merging this pull request may close these issues.

6 participants

@andersonjeccel @kuzmany @matbcvo @shinde-rahul @escopecz @laurielim