Skip to content

Commit

Permalink
Update ratio breakpoints to cover larger sizes landscape and portrait
Browse files Browse the repository at this point in the history
Bastou committed Oct 15, 2024
1 parent 76ed1a3 commit acbc423
Showing 3 changed files with 50 additions and 13 deletions.
2 changes: 2 additions & 0 deletions apps/front/src/styles/_breakpoints.scss
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@
$breakpoint-mobile: 320px;
$breakpoint-mobile-horizontal: 500px;
$breakpoint-tablet: 768px;
$breakpoint-tablet-height: 950px;
$breakpoint-laptop: 1024px;
$breakpoint-bigLaptop-min: 1366px;
$breakpoint-bigLaptop: 1440px;
$breakpoint-desktop: 1680px;
59 changes: 46 additions & 13 deletions apps/front/src/styles/_ratio.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use "./_viewport" as viewport;
@use "./_breakpoints" as breakpoints;
@use "./_functions" as fn;
@use "./_utils" as utils;

/// Set property calculated with VH & VW ratio
/// @param {css property} $property
@@ -22,6 +23,20 @@
}
}

@mixin mobileVH(
$property,
$n1,
$ratioVH: viewport.$viewport-reference-height,
$ratioVW: viewport.$viewport-reference-width
) {
#{$property}: #{fn.ratioVH($n1, $ratioVH)};
@if $ratioVW > 0 {
@media (max-aspect-ratio: #{ #{$ratioVW} / #{$ratioVH+1} }) {
#{$property}: #{fn.ratioVW($n1, $ratioVW)};
}
}
}

/// Set property calculated with VW ratio
/// @param {css property} $property
/// @param {Number} $n1
@@ -87,29 +102,39 @@
//Mobile
@include propertyVW($property, $value1);

//Horizontal Desktop & Tablet
@include desktop($breakpoint) {
@include propertyVH($property, $value2, $ratioVW: 0);
// Landscape mobile
@include mobile-landscape {
@include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
}

//Portrait Desktop & Tablet
@include desktop-portrait {
@include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
// Portrait Tablet
@include tablet-portrait {
@include propertyVH(
$property,
$value2,
$ratioVW: viewport.$viewport-reference-tablet-width,
$ratioVH: viewport.$viewport-reference-tablet-height
);
}

// Landscape Tablet
@include tablet-landscape {
@include propertyVH(
$property,
$value2,
$ratioVW: viewport.$viewport-reference-desktop-width,
$ratioVH: viewport.$viewport-reference-desktop-height
$ratioVW: viewport.$viewport-reference-tablet-width,
$ratioVH: viewport.$viewport-reference-tablet-height
);
}

// Landscape mobile
@include mobile-landscape {
@include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
//Portrait Desktop & Tablet
@include desktop-portrait {
@include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
}

//Horizontal Desktop & Tablet
@include desktop($breakpoint) {
@include propertyVH($property, $value2, $ratioVW: 0);
}

@if $cap {
@@ -146,7 +171,7 @@
/// Desktop & Tablet portrait media query
/// @param {string} [$breakpoint=breakpoints.$breakpoint-tablet] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-tablet).
@mixin desktop-portrait($breakpoint: breakpoints.$breakpoint-tablet) {
@media (min-width: $breakpoint) and (orientation: portrait) {
@media (min-width: $breakpoint) and (min-height: breakpoints.$breakpoint-bigLaptop) and (orientation: portrait) {
@content;
}
}
@@ -162,7 +187,15 @@
/// Tablet landscape media query.
/// @param {string} [$breakpoint=breakpoints.$breakpoint-laptop] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
@mixin tablet-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
@media (max-width: #{$breakpoint + 1}) and (orientation: landscape) {
@media (max-width: #{breakpoints.$breakpoint-bigLaptop-min + 1}) and (min-width: #{$breakpoint}) and (orientation: landscape) {
@content;
}
}

/// Tablet portrait media query.
/// @param {string} [$breakpoint=breakpoints.$breakpoints-tablet-height] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
@mixin tablet-portrait($breakpoint: breakpoints.$breakpoint-tablet-height) {
@media (min-height: #{$breakpoint}) and (orientation: portrait) {
@content;
}
}
2 changes: 2 additions & 0 deletions apps/front/src/styles/breakpoints-inline.scss
Original file line number Diff line number Diff line change
@@ -4,7 +4,9 @@
--breakpoint-mobile: #{$breakpoint-mobile};
--breakpoint-mobile-horizontal: #{$breakpoint-mobile-horizontal};
--breakpoint-tablet: #{$breakpoint-tablet};
--breakpoint-tablet-height: #{$breakpoint-tablet-height};
--breakpoint-laptop: #{$breakpoint-laptop};
--breakpoint-bigLaptop-min: #{$breakpoint-bigLaptop-min};
--breakpoint-bigLaptop: #{$breakpoint-bigLaptop};
--breakpoint-desktop: #{$breakpoint-desktop};
}

0 comments on commit acbc423

Please sign in to comment.