Remove medium breakpoint #4105
Merged
Remove medium breakpoint #4105
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Demo starting at https://vanilla-framework-4105.demos.haus |
|
@bartaz Lovely work, looks good to me. |
sowasred2012
approved these changes
Oct 28, 2021
| @@ -34,7 +34,7 @@ Directly inside the drawer you can place one or more navigation components. They | |||
|
|
|||
| On a small screen, the `l-navigation-bar` appears horizontally at the top of the screen. It toggles the side navigation drawer, which is an off-canvas overlay on the left side of the screen. The drawer can be fully collapsed by adding the `is-collapsed` class to the `l-navigation` element. This behaviour can also be invoked using a button or a link in `l-navigation-bar`. | |||
|
|
|||
| On medium or large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-medium` the side navigation is always visible on the left side of the screen. | |||
| On medium or large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-large` the side navigation is always visible on the left side of the screen. | |||
There was a problem hiding this comment.
Only comment I have is on this - it feels like mentioning "medium" screen sizes might cause confusion now that we're not explicitly defining those anymore.
Suggested change
| On medium or large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-large` the side navigation is always visible on the left side of the screen. | |
| On large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-large` the side navigation is always visible on the left side of the screen. |
There was a problem hiding this comment.
@sowasred2012 We kind of still have a concept of 'medium' screen size. It's a range between small and large breakpoints. At least now we can clearly define it. Before it was always unclear - is medium screen smaller than medium breakpoint or is it larger?...
Anyway, we should update the breakpoints documentation page to what are the breakpoints and what we consider small/medium/large screen.
| @@ -34,7 +34,7 @@ Directly inside the drawer you can place one or more navigation components. They | |||
|
|
|||
| On a small screen, the `l-navigation-bar` appears horizontally at the top of the screen. It toggles the side navigation drawer, which is an off-canvas overlay on the left side of the screen. The drawer can be fully collapsed by adding the `is-collapsed` class to the `l-navigation` element. This behaviour can also be invoked using a button or a link in `l-navigation-bar`. | |||
|
|
|||
| On medium or large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-medium` the side navigation is always visible on the left side of the screen. | |||
| On medium or large screen sizes `l-navigation-bar` is not meant to be used and is therefore hidden. Beyond `$breakpoint-large` the side navigation is always visible on the left side of the screen. | |||
|
|
|||
| On medium screens, the side navigation drawer is by default collapsed to a width of `3rem`. It expands on hover. It can be pinned by adding the `is-pinned` class to the `l-navigation` element. | |||
There was a problem hiding this comment.
Again, the concept of medium screens - not sure what would be better (if you agree this needs to change).
sowasred2012
added
Review: Code +1
Review: QA +1
and removed
Review: QA needed
Review: Code needed
labels
bartaz
added a commit
that referenced
this pull request
Nov 3, 2021
* Remove $breakpoint-medium from the code * Update the examples and docs after removing medium breakpoint
bartaz
added a commit
that referenced
this pull request
Nov 3, 2021
* Remove $breakpoint-medium from the code * Update the examples and docs after removing medium breakpoint
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Done
Removed
$breakpoint-mediumfrom Vanilla and replace it with--largeor--smallbreakpoints where relevant.Updated documentation and examples of affected components.
Added
Fixes #4083
QA
Review examples of relevant patterns, make sure they work as expected on different screen sizes:
https://vanilla-framework-4105.demos.haus/docs/examples/layouts/application/default
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/forms/form-inline
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/forms/form-stacked
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/lists/lists-split
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/lists/lists-stepped-detailed
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/matrix
https://vanilla-framework-4105.demos.haus/docs/examples/patterns/tables/table-mobile-card
https://vanilla-framework-4105.demos.haus/docs/examples/templates/responsive
Review updated docs to see if they make sense and don't mention medium breakpoint:
https://vanilla-framework-4105.demos.haus/docs/layouts/application
https://vanilla-framework-4105.demos.haus/docs/patterns/grid
https://vanilla-framework-4105.demos.haus/docs/patterns/lists
https://vanilla-framework-4105.demos.haus/docs/settings/breakpoint-settings
https://vanilla-framework-4105.demos.haus/docs/upgrade-guide-v3