scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/consolidate-media-queries (pull request #1769)

Browse Source 
fix: consolidate media queries to be consistent with ranges

Approved-by: Erik Tiekstra
Approved-by: Matilda Landström
This commit is contained in:
Christian Andolf
2025-04-09 14:38:05 +00:00
parent e6aa177e6f ee72f58c33
commit 8f4834a6ef
13 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css
View File

@@ -9,7 +9,7 @@
align-content: start; align-content: start;
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.grid { .grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }

2
apps/scandic-web/components/Footer/Details/details.module.css
View File

@@ -56,7 +56,7 @@
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.details { .details {
padding: var(--Spacing-x6) 0 var(--Spacing-x4); padding: var(--Spacing-x6) 0 var(--Spacing-x4);
} }

2
apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
View File

@@ -33,7 +33,7 @@
text-decoration: none; text-decoration: none;
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.secondaryNavigation { .secondaryNavigation {
margin-top: var(--Spacing-x4); margin-top: var(--Spacing-x4);
gap: 120px; gap: 120px;

2
apps/scandic-web/components/Footer/Navigation/navigation.module.css
View File

@@ -11,7 +11,7 @@
max-width: var(--max-width-page); max-width: var(--max-width-page);
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.section { .section {
padding: var(--Spacing-x9) 0; padding: var(--Spacing-x9) 0;
} }

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
View File

@@ -71,7 +71,7 @@
} }
} }
@media screen and (min-width: 768px) and (max-width: 1367px) { @media screen and (min-width: 768px) and (max-width: 1366px) {
.container { .container {
display: flex; display: flex;
} }

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -31,7 +31,7 @@ const invalidBookingCodeMsg = "Invalid booking code"
export default function BookingCode() { export default function BookingCode() {
const intl = useIntl() const intl = useIntl()
const checkIsTablet = useMediaQuery( const checkIsTablet = useMediaQuery(
"(min-width: 768px) and (max-width: 1367px)" "(min-width: 768px) and (max-width: 1366px)"
) )
const checkIsDesktop = useMediaQuery("(min-width: 1367px)") const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
const [isTablet, setIsTablet] = useState(false) const [isTablet, setIsTablet] = useState(false)

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -31,7 +31,7 @@
} }
} }
@media screen and (max-width: 1367px) { @media screen and (max-width: 1366px) {
.inputContainer { .inputContainer {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);

2
apps/scandic-web/components/HotelReservation/HotelCardDialogListing/index.tsx
View File

@@ -29,7 +29,7 @@ export default function HotelCardDialogListing({
const activeCardRef = useRef<HTMLDivElement | null>(null) const activeCardRef = useRef<HTMLDivElement | null>(null)
const observerRef = useRef<IntersectionObserver | null>(null) const observerRef = useRef<IntersectionObserver | null>(null)
const dialogRef = useRef<HTMLDivElement>(null) const dialogRef = useRef<HTMLDivElement>(null)
const isMobile = useMediaQuery("(max-width: 768px)") const isMobile = useMediaQuery("(max-width: 767px)")
const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } = const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
useHotelsMapStore() useHotelsMapStore()

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
View File

@@ -33,7 +33,7 @@ div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Spacing-x1); padding-bottom: var(--Spacing-x1);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 767px) {
.selectedRoomPanel { .selectedRoomPanel {
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
grid-template-areas: "image" "content"; grid-template-areas: "image" "content";

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
View File

@@ -48,7 +48,7 @@
display: none; display: none;
} }
@media (max-width: 768px) { @media (max-width: 767px) {
.roomContainer { .roomContainer {
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
} }

2
apps/scandic-web/components/Lightbox/Lightbox.module.css
View File

@@ -199,7 +199,7 @@
.image { .image {
object-fit: cover; object-fit: cover;
} }
@media (min-width: 768px) and (max-width: 1367px) { @media (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer { .fullViewContainer {
padding: var(--Spacing-x5); padding: var(--Spacing-x5);
} }

2
apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
View File

@@ -142,7 +142,7 @@
border-color: transparent var(--UI-Text-Active) transparent transparent; border-color: transparent var(--UI-Text-Active) transparent transparent;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 767px) {
.tooltipContainer[data-active="true"] .tooltip { .tooltipContainer[data-active="true"] .tooltip {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;

2
apps/scandic-web/hooks/booking/useScrollToActiveSection.ts
View File

@@ -8,7 +8,7 @@ export default function useScrollToActiveSection(
steps: StepEnum[], steps: StepEnum[],
isActive: boolean isActive: boolean
) { ) {
const isMobile = useMediaQuery("(max-width: 768px)") const isMobile = useMediaQuery("(max-width: 767px)")
const handleScroll = useCallback(() => { const handleScroll = useCallback(() => {
if (!isMobile) { if (!isMobile) {