@everymatrix/casino-games-category-section 1.13.24 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "1.13.24",
+  "version": "1.14.0",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cde0044a9c4c9152ef07e47cb9284338748f0078"
+  "gitHead": "50859415bac3b0cca7863e545b1edd43a68938cb"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -37,6 +37,7 @@
   export let addfilterselector:string = 'false';
   export let addsortingselector:string = 'false';
   export let filterbylogo:string = '';
+  export let casinogamesgridslider:string = 'false'; 
 
   export let once = true;
   export let top = 0;
@@ -640,7 +641,7 @@
     {/if}
   {:else}
     {#if searched}
-      <div class="CasinoGamesContainer" part="CasinoGamesContainer">
+      <div class="CasinoGamesContainer">
         <div class="CasinoGamesHeader Searched {isMobile(userAgent) ? 'CasinoGamesHeaderMobile' : ''}">
           {#if recentSearched}
             <h3 class="StatusText">
@@ -709,7 +710,7 @@
                 {#if showLoadCategory}
                   <!-- svelte-ignore a11y-missing-attribute -->
                   <a class="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
-                    <span class="CategoryLoadMore" part="CategoryLoadMore">
+                    <span class="CategoryLoadMore">
                       {$_('viewAll')} ({categoryData.games.total})
                     </span>
                   </a>
@@ -744,8 +745,8 @@
             {#if isLoading && !isLazyLoading}
               <div class="lds-dual-ring" part="lds-dual-ring"></div>
             {:else}
-              {#if shownCategoryData.length !== 0}
-                <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" bind:this={container}>
+              {#if shownCategoryData.length !== 0 }
+                <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'}  {(lobbyView && casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider CustomScroll' : '' } GamesListIncreasedGap" bind:this={container}>
                   {#each shownCategoryData as gameprops, index}
                   {#if intersecting || nativeLoading}
                       <casino-game-thumbnail
@@ -789,7 +790,7 @@
             <div class="CasinoGamesContainer">
               {#if casinomygames !== 'true'}
                 <div class="CasinoGamesHeader">
-                  <h3 class="CategoryName">
+                  <h3 class="CategoryName" bind:this={categoryName}>
                     {$_('favorites')}
                       <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
                   </h3>
@@ -915,9 +916,32 @@
 
   $grid-gap: 16px;
   $grid-cell-size: 192px;
+  $grid-cell-size-scroll: 182px;
   $grid-cell-size-small: 110px;
   $grid-cell-size-medium: 122px;
 
+  
+  .CustomScroll:-webkit-scrollbar-track
+    {
+      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+      border-radius: 5px;
+      background-color: transparent;
+    }
+
+  .CustomScroll::-webkit-scrollbar
+    {
+      height: 5px;
+      background-color: transparent;
+    }
+
+  .CustomScroll::-webkit-scrollbar-thumb
+    {
+      border-radius: 5px;
+      height: 5px;
+      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+      background-color: rgba(255,255,255,.3);
+    }
+
   .CategoryName,
   .StatusText {
     color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
@@ -1047,6 +1071,49 @@
     }
   }
 
+  .CasinoGamesGridSlider {
+    display: grid;
+    gap: $grid-gap;
+    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;
+    grid-auto-flow: column;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 5px;
+
+    .game-tile-2x1 {
+      grid-row: span 2;
+
+      @media screen and (max-width: 375px) {
+        grid-row: span 1;
+      }
+    }
+
+    .game-tile-2x2 {
+      grid-row: span 2;
+      grid-column: span 2;
+
+      @media screen and (max-width: 375px) {
+        grid-row: span 2;
+        grid-column: span 2;
+      }
+    }
+
+    .game-tile-1x2 {
+      grid-column: span 2;
+
+      @media screen and (max-width: 375px) {
+        grid-column: span 1;
+      }
+    }
+
+    &.GamesListIncreasedGap {
+      gap: $grid-gap + 12;
+    }
+  }
+
   .CategoryFilterContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;

package/src/translations.js

@@ -103,10 +103,15 @@ export const TRANSLATIONS = {
   "hr": {
     "showMore": "Više",
     "viewAll": "Pokaži sve",
-    "searchedItems": "Pretraži rezultat",
-    "recentSearchedItems": "Zadnje pretrage",
-    "noRecentSearch": "Pretraživanje nije pokrenuto. Jednostavno potražite željenu igru.",
-    "noResults": "Žao nam je, nema rezultata. Molimo pokušajte ponovno."
+    "searchedItems": "Rezultat pretraživanja",
+    "recentSearchedItems": "Nedavno Pretraženo",
+    "noRecentSearch": "Još nema započetih pretraživanja. Jednostavno pretražite igru",
+    "noResults": "Oprostite, nema rezultata. Molimo pokušajte ponovo",
+    "favorites": "Favoriti",
+    "noFavoritesMobile": "Stisnite na ikonu zvjezdice u gornjem desnom kutu kako bi je dodali u favorite",
+    "noFavorites": "Stisnite na ikonu zvjezdice u gornjem desnom kutu kako bi je dodali u favorite",
+    "noFavoritesTitle": "Nemate favoriziranih igara",
+    "waiting": "Čekanje"
   },
   "hu": {
     "showMore": "Több",