Merge pull request #176 from HerrZatacke/develop

Version 1.41.2
HerrZatacke · Jul 27, 2024 · f7471f2 · f7471f2
2 parents 02730c2 + 53f9eb7
commit f7471f2
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gb-printer-web",
-  "version": "1.41.1",
+  "version": "1.41.2",
   "description": "gb-printer-web",
   "scripts": {
     "start": "webpack serve --config ./scripts/webpack.dev.js",

diff --git a/src/javascript/app/components/GalleryImage/index.scss b/src/javascript/app/components/GalleryImage/index.scss
@@ -99,8 +99,8 @@
   &__meta-pre {
     display: none;
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: -55%;
+    right: 0;
     @include theme-background-color($color-grey-30, $color-grey-50);
     @include theme-color($color-text-bright, $color-black);
     border-radius: $default-border-radius;

diff --git a/src/javascript/app/components/Layout/index.scss b/src/javascript/app/components/Layout/index.scss
@@ -1,7 +1,7 @@
 .layout {
   width: $layout-width-6-cols; // Size is based on padding/gap/imagesize of gallery grid with 6 images scaled 1x
   margin: 0 auto;
-  padding: 120px 20px 20px 20px;
+  padding: 120px var(--layout-padding-side) 20px;
   position: relative;
   z-index: $z-index-content;
   min-height: 100vh;
@@ -10,10 +10,12 @@
   --2x-columns: 3;
   --max-columns: 1;
 
-  --1x-gap: 10px;
+  --1x-gap: 8px;
   --2x-gap: 20px;
   --max-gap: 20px;
 
+  --layout-padding-side: 20px;
+
   @media (max-width: $breakpoint-5-cols) {
     width: $layout-width-5-cols;
     --1x-columns: 5;
@@ -30,11 +32,13 @@
     width: $layout-width-3-cols;
     --1x-columns: 3;
     --2x-columns: 1;
+    --layout-padding-side: 10px;
   }
 
   @media (max-width: $breakpoint-2-cols) {
     width: $layout-width-2-cols;
     --1x-columns: 2;
+    --layout-padding-side: 5px;
   }
 
   @media (max-width: $breakpoint-1-cols) {

diff --git a/src/javascript/app/components/Navigation/index.scss b/src/javascript/app/components/Navigation/index.scss
@@ -9,7 +9,7 @@
   &__burger-button {
     display: none;
 
-    @media (max-width: $breakpoint-mobile) {
+    @media (max-width: $breakpoint-navigation) {
       display: block;
       width: 60px;
       height: 60px;
@@ -34,13 +34,13 @@
     width: 100%;
     display: flex;
 
-    @media (max-width: $breakpoint-mobile) {
+    @media (max-width: $breakpoint-navigation) {
       flex-direction: column;
       display: none;
     }
   }
 
-  @media (max-width: $breakpoint-mobile) {
+  @media (max-width: $breakpoint-navigation) {
     &--mobile-open &__list {
       display: block;
     }
@@ -90,7 +90,7 @@
     top: 10px;
     @include theme-background-color(rgba($color-white, 0.15), rgba($color-white, 0.15));
 
-    @media (max-width: $breakpoint-mobile) {
+    @media (max-width: $breakpoint-navigation) {
       height: 1px;
       width: 100vw;
       right: unset;

diff --git a/src/javascript/hooks/useScreenDimensions.ts b/src/javascript/hooks/useScreenDimensions.ts
@@ -36,7 +36,7 @@ const getLayoutWidth = (windowWidth: number): number => {
 const getScreenDimensions = (): ScreenDimensions => ({
   width: window.innerWidth,
   height: window.innerHeight,
-  ddpx: window.devicePixelRatio,
+  ddpx: window.devicePixelRatio < 3 ? window.devicePixelRatio : window.devicePixelRatio / 2,
   layoutWidth: getLayoutWidth(window.innerWidth),
 });
 

diff --git a/src/scss/auto-imports/_basic/variables.scss b/src/scss/auto-imports/_basic/variables.scss
@@ -7,9 +7,9 @@ $z-index-hover-image: 1;
 $z-index-live-image: 1;
 $z-index-navigation: 2;
 $z-index-overlay-buttons: 2;
-$z-index-gallery-image-buttons: 2;
+$z-index-meta-pre: 2;
+$z-index-gallery-image-buttons: 3;
 $z-index-overlay: 3;
-$z-index-meta-pre: 4;
 $z-index-overlay-box: 4;
 $z-index-gallery-header-sticky: 5;
 
@@ -19,18 +19,19 @@ $default-border-radius-small: 2px;
 $checkmark-tick-inactive-opacity: 0.25;
 
 $breakpoint-mobile: 600px;
+$breakpoint-navigation: 768px;
 $breakpoint-tags-in-list: 768px;
 
 // Sizes for 1x layout and grid columns
-$layout-width-6-cols: 1195px;
-$layout-width-5-cols: 1000px;
-$layout-width-4-cols: 805px;
-$layout-width-3-cols: 610px;
-$layout-width-2-cols: 412px; // Yup - size of my phone.
 $layout-width-1-cols: 100%;
+$layout-width-2-cols: 383px;
+$layout-width-3-cols: 570px;
+$layout-width-4-cols: 805px;
+$layout-width-5-cols: 999px;
+$layout-width-6-cols: 1195px;
 
-$breakpoint-5-cols: $layout-width-6-cols + 25px;
-$breakpoint-4-cols: $layout-width-5-cols + 25px;
-$breakpoint-3-cols: $layout-width-4-cols + 25px;
-$breakpoint-2-cols: $layout-width-3-cols + 25px;
-$breakpoint-1-cols: $layout-width-2-cols; // assuming no scrollbar on small (mobile) devices
+$breakpoint-1-cols: $layout-width-2-cols;
+$breakpoint-2-cols: $layout-width-3-cols;
+$breakpoint-3-cols: $layout-width-4-cols;
+$breakpoint-4-cols: $layout-width-5-cols;
+$breakpoint-5-cols: $layout-width-6-cols;
diff --git a/src/scss/generics/app.scss b/src/scss/generics/app.scss
@@ -1,3 +1,17 @@
+html {
+  @supports (scrollbar-width: auto) {
+    --scrollbar-color: #{$color-grey-30};
+
+    &.theme-bright {
+      --scrollbar-color: #{$color-grey-70};
+    }
+
+    scrollbar-gutter: stable;
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+
 body {
   @include font;