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.
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
Inclusion of Bootstrap's base and grid system #7481
Conversation
@mattab I consider this PR OK to be merged! I have reviewed every single screenshot diff (maybe 40-50) and I have fixed anything significant. The rest is just minor pixel differences. |
maybe others have some feedback otherwise +1 to merge this useful part of bootstrap in Piwik! |
Needs a rebase and can be merged 👍 |
That avoids any change for people integrating the widget in their websites, and hopefully that should reduce a lot of the UI screenshot differences.
Inclusion of Bootstrap's base and grid system
All UI tests have been reviewed again and updated, UI tests should be green (there's just a screenshot failing because of #7627 which was merged a few minutes ago). |
…oard and Website manager #7481
This PR introduces Bootstrap's grid system (just that part of Bootstrap, not the whole library).
To learn more about the parts of Bootstrap that are now included, here are the CSS classes that can be used:
The direct goal is being able to create a page using standard/common HTML layout and CSS classes. Here is a minimal example:
The
container
andcontainer-fluid
classes are used wether the page should fill the whole width or not (which is not the same everywhere in Piwik).The grid system has also replaced our custom grid system for the dashboard, which is cool because it means less custom code. The only downside here is that with the 12 columns grid system we cannot offer the old ratio of 30%-40%-30% so it will now be 25%-50%-25% (same applies for similar ratios in another order).
The mid-term goal is also to try out integrating Bootstrap and maybe add more parts later on. Bootstrap offers us (and plugin developers) a standard HTML/CSS framework which simplifies a lot front end development. The less custom code we have, the easier it is to write front-end code it and maintain Piwik CSS/HTML. This PR can be considered a first step.
Regarding CSS changes, Bootstrap changes the default
box-sizing
to one that makes more sense. That has some side effects on some height/width, I've tried to fix them all (fixing is easy) and that's why you'll see changes in height/width in some places in the diff.Regarding tests, a lot of UI tests are failing because of pixel differences. I've tried to minimize it as much as I can, and try to continue to improve the situation just to facilitate reviewing changes. But except for UI tests those pixel differences shouldn't be a problem because they are not really visible when using the application.