@everymatrix/casino-games-category-section 1.14.7 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "1.14.7",
+  "version": "1.15.0",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0c4908ae0358ad455046427736d3bbb675e6fb6"
+  "gitHead": "15ce8765c213b2c036dd5fbc5007d6ea5a666dc1"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -777,6 +777,7 @@
                         {gamepagemodalurl}
                         {integratedgameframedesktop}
                         {integratedgameframemobile}
+                        {casinogamesgridslider}
                       ></casino-game-thumbnail>
                     {/if}
                   {/each}
@@ -905,8 +906,15 @@
 
 
 <style lang="scss">
+  $grid-gap: 16px;
+  $grid-cell-size: 192px;
+  $grid-cell-size-small: 110px;
+  $grid-cell-size-medium: 122px;
 
-
+  $grid-gap-scroll: 16px;
+  $grid-cell-size-scroll: 182px;
+  $grid-cell-size-medium-scroll: 105px;
+  $grid-cell-size-small-scroll: 100px;
 
   *, *::before, *::after {
     margin: 0;
@@ -914,13 +922,10 @@
     box-sizing: border-box;
   }
 
-  $grid-gap: 16px;
-  $grid-cell-size: 192px;
-  $grid-cell-size-scroll: 182px;
-  $grid-cell-size-small: 110px;
-  $grid-cell-size-medium: 122px;
+  .CasinoGamesCategorySectionContainer {
+    container-type: inline-size;
+  }
 
-  
   .CustomScroll:-webkit-scrollbar-track
     {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -1043,7 +1048,7 @@
     .game-tile-2x1 {
       grid-row: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container  (max-width: 375px) {
         grid-row: span 1;
       }
     }
@@ -1052,7 +1057,7 @@
       grid-row: span 2;
       grid-column: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container  (max-width: 375px) {
         grid-row: span 1;
         grid-column: span 1;
       }
@@ -1061,7 +1066,7 @@
     .game-tile-1x2 {
       grid-column: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container  (max-width: 375px) {
         grid-column: span 1;
       }
     }
@@ -1074,7 +1079,7 @@
   .CasinoGamesGridSlider {
     display: grid;
     gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-scroll, 46%), 2fr));
+    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-scroll 46%), 2fr));
     grid-template-rows: repeat(auto-fill, $grid-cell-size-scroll);
     grid-auto-rows: $grid-cell-size-scroll;
     grid-auto-columns: $grid-cell-size-scroll;
@@ -1086,7 +1091,7 @@
     .game-tile-2x1 {
       grid-row: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container (max-width: 375px) {
         grid-row: span 1;
       }
     }
@@ -1095,7 +1100,7 @@
       grid-row: span 2;
       grid-column: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container (max-width: 375px) {
         grid-row: span 2;
         grid-column: span 2;
       }
@@ -1104,7 +1109,7 @@
     .game-tile-1x2 {
       grid-column: span 2;
 
-      @media screen and (max-width: 375px) {
+      @container (max-width: 375px) {
         grid-column: span 1;
       }
     }
@@ -1120,37 +1125,8 @@
     gap: 20px;
   }
 
-  @media screen and (max-width: 385px) {
-  .CasinoGamesGrid {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
-    grid-auto-rows: $grid-cell-size-small;
-    grid-auto-columns: $grid-cell-size-small;
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap;
-      }
-    }
-  }
-
-  @media screen and (max-width: 480px) {
-    .CasinoGamesGrid {
-      display: grid;
-      gap: $grid-gap;
-      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
-      grid-auto-rows: $grid-cell-size-medium;
-      grid-auto-columns: $grid-cell-size-medium;
-
-      &.GamesListIncreasedGap {
-        gap: $grid-gap;
-      }
-    }
-  }
 
-  @media only screen and (max-width: 768px) {
+  @container (max-width: 768px) {
     .CasinoGamesHeader {
       align-items: unset;
       flex-direction: row;
@@ -1166,7 +1142,7 @@
     }
   }
 
-  @media screen and (min-width: 1100px) {
+  @container  (min-width: 1100px) {
     .CasinoGamesGrid {
       grid-template-rows: repeat(auto-fill, 142px);
       grid-auto-rows: 142px;
@@ -1204,4 +1180,101 @@
       transform: rotate(360deg);
     }
   }
+
+  @container (max-width: 385px) {
+
+  .CasinoGamesGrid {
+    display: grid;
+    gap: $grid-gap;
+    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
+    grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
+    grid-auto-rows: $grid-cell-size-small;
+    grid-auto-columns: $grid-cell-size-small;
+
+    &.GamesListIncreasedGap {
+      gap: $grid-gap;
+      }
+  }
+
+  .CasinoGamesGridSlider {
+    display: grid;
+    gap: $grid-gap-scroll !important;
+    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small-scroll 46%), 2fr));
+    grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
+    grid-auto-rows: $grid-cell-size-small-scroll;
+    grid-auto-columns: $grid-cell-size-small-scroll;
+    grid-auto-flow: column;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 5px;
+
+    & .GameInnerContainer .GameInfoWrapper .GameInfoName {
+        font-size: 10px !important;
+      }
+    & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
+        font-size: 10px !important;
+    }  
+  }
+}
+
+@container (max-width: 410px) {
+
+    .CasinoGamesGridSlider {
+      display: grid;
+      gap: $grid-gap-scroll;
+      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small-scroll, 46%), 2fr));
+      grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
+      grid-auto-rows: $grid-cell-size-small-scroll;
+      grid-auto-columns: $grid-cell-size-small-scroll;
+      grid-auto-flow: column;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-bottom: 5px;
+
+      & .GameInnerContainer .GameInfoWrapper .GameInfoName {
+        font-size: 10px !important;
+      }
+
+      & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
+        font-size: 10px !important;
+      }  
+    }
+  }
+
+@container (max-width: 480px) {
+
+  .CasinoGamesGrid {
+      display: grid;
+      gap: $grid-gap;
+      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
+      grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
+      grid-auto-rows: $grid-cell-size-medium;
+      grid-auto-columns: $grid-cell-size-medium;
+
+      &.GamesListIncreasedGap {
+        gap: $grid-gap;
+      }
+    }
+
+  .CasinoGamesGridSlider {
+    display: grid;
+    gap: $grid-gap-scroll !important;
+    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium-scroll, 46%), 2fr));
+    grid-template-rows: repeat(auto-fill, $grid-cell-size-medium-scroll);
+    grid-auto-rows: $grid-cell-size-medium-scroll;
+    grid-auto-columns: $grid-cell-size-medium-scroll;
+    grid-auto-flow: column;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 5px;
+
+    & .GameInnerContainer .GameInfoWrapper .GameInfoName {
+        font-size: 10px !important;
+      }
+    & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
+        font-size: 10px !important;
+      }  
+  }
+}
+
 </style>