Skip to content
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

Patternlab/dp 2080 reset breakpoints #597

Merged
merged 3 commits into from
Jun 5, 2019
Merged

Patternlab/dp 2080 reset breakpoints #597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f1aedc
DP-2080: update breakpoints to use rem
clair0917 May 30, 2019
416eedd
DP-2080: add backstop updates
clair0917 May 30, 2019
bf163d8
DP-2080: add changelog
clair0917 May 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions assets/scss/00-base/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,22 @@ $bp-l-ex: 1050px;
$bp-xl: 1200px;


// use of rem values for better responsive layouts
// and better accessibility at zoom levels

// Global breakpoint media variables.
$bp-x-small-min: "min-width: " + ($bp-xs + 1);
$bp-x-small-max: "max-width:" + $bp-xs;
$bp-small-min: "min-width: " + ($bp-s + 1);
$bp-small-max: "max-width:" + $bp-s;
$bp-medium-min: "min-width: " + ($bp-m + 1);
$bp-medium-max: "max-width:" + $bp-m;
$bp-large-min: "min-width: " + ($bp-l + 1);
$bp-large-max: "max-width:" + $bp-l;
$bp-large-extended: "max-width:" + $bp-l-ex;
$bp-large-extended-min: "min-width: " + ($bp-l-ex + 1);
$bp-x-large-min: "min-width: " + ($bp-xl + 1);
$bp-x-large-max: "max-width:" + $bp-xl;
$bp-x-small-min: "min-width: 30.06rem"; // 481px
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there any reason to use specific values (ex. $bp-x-small-min: "min-width: 30.06rem";) instead of the variables like original (ex. $bp-x-small-min: "min-width: " + ($bp-xs + 1);) by updating the variables below from pixel to rem?

$bp-xs: 480px;
$bp-s: 620px;
$bp-m: 780px;
$bp-l: 910px;
$bp-l-ex: 1050px;
$bp-xl: 1200px;

Copy link
Contributor Author

@clair0917 clair0917 Jun 5, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

The issue being addressed by the ticket involved overlapping sections when the screen was zoomed in. The example video shows the issue on a howto page with a sticky sidebar menu.
Zoom levels don't change the screens pixel width, so zooming in can lead to overlapping of positioned elements.
By changing the values from pixels to rem, when you zoom in the media queries kick in on zoom as well as screen size.
So, using the howto page as an example again, when you zoom into the page, the mobile styles kick back in, rather than the elements overlapping.

I left the original variables in place because they are also used in styling some specific elements scattered around the site that require a px value to do some kind of math or something.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok. That makes sense. Thank you for the answer.

$bp-x-small-max: "max-width: 30rem"; // 480px
$bp-small-min: "min-width: 38.81rem"; // 621px
$bp-small-max: "max-width: 38.75rem"; // 620px
$bp-medium-min: "min-width: 48.81rem"; // 781px
$bp-medium-max: "max-width: 48.75rem"; // 780px
$bp-large-min: "min-width: 56.94rem"; // 911px
$bp-large-max: "max-width: 56.88rem"; // 910px
$bp-large-extended: "max-width: 65.69rem"; // 1051px
$bp-large-extended-min: "min-width: $bp-l-ex"; // 1050px
$bp-x-large-min: "min-width: 75.06rem"; // 1201px
$bp-x-large-max: "max-width: 75rem"; // 1200px

$bp-page-width-min: "min-width:" + ($max-width + 1);
$bp-page-width-max: "max-width:" + $max-width;
Expand Down
4 changes: 4 additions & 0 deletions changelogs/DP-2080.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
___EXAMPLE___
Minor
Changed
- (Patternlab) [Breakpoints] DP-2080: Investigate Action Nav Details Div overlapping body content when OS settings are zoomed
Binary file modified ...s/reference/regression_page_location-listing-static-map_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/reference/regression_page_organization-default-contact_0_document_0_phone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../reference/regression_page_organization-default-contact_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.