@everymatrix/casino-page 0.0.229 → 0.0.233

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "0.0.229",
+  "version": "0.0.233",
   "main": "dist/casino-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "efee0743817693e5186a61a1477e081208d48fec"
+  "gitHead": "d7554673f55c9c428a1cf82bdecf5f2da81e373d"
 }

package/src/CasinoPage.svelte

@@ -832,7 +832,7 @@
 
     {#if alternativesearch === 'false'}
       <!-- main search layout -->
-      <div bind:this={searchWrapper} class="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? "CategoriesHeaderSearchActive" : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
+      <div bind:this={searchWrapper} class="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || searchFocus || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? "CategoriesHeaderSearchActive" : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
       style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}">
         <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
           <label for="search" class="SrOnly">Search casino games</label>
@@ -856,7 +856,7 @@
             {/if}
           </div>
         </div>
-        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searched && !lobbyViewAux}
+        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searched && !searchFocus && !lobbyViewAux}
           <div class="FiltersButtonsContainer">
             {#if numberOfFilters}
               <div class="ClearFilterButtonWrapper" on:click="{() => clearVendorFilter()}">
@@ -889,7 +889,7 @@
       </div>
     {:else}
       <!-- start alternative search layout-->
-      <div bind:this={searchWrapper} class="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? "CategoriesHeaderSearchActive" : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
+      <div bind:this={searchWrapper} class="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || searchFocus || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? "CategoriesHeaderSearchActive" : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
       style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}">
         <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
           <label for="search" class="SrOnly">Search casino games</label>
@@ -914,7 +914,7 @@
             {/if}
           </div>
         </div>
-        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searched && !lobbyViewAux}
+        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searchFocus && !searched && !lobbyViewAux}
           <div class="FiltersButtonsContainer ">
             {#if numberOfFilters}
               <div class="ClearFilterButtonWrapper {numberOfFilters ? 'FiltersActive' : ''} " on:click="{() => clearVendorFilter()}">
@@ -964,6 +964,7 @@
           categoryid="Search"
           favorites={favorites}
           categoryindex="0"
+          class="CategoryContainer"
           {clientstyling}
           {clientstylingurl}
         />
@@ -1072,7 +1073,6 @@
 
   .CategoriesLobby {
     margin: 0 auto;
-    padding: 0 10px;
   }
 
   .PanicSectionMobile {
@@ -1127,6 +1127,10 @@
 
   .CategoryContainer {
     display: block;
+
+    @media screen and (max-width: 1300px) {
+      padding: 0 2.4%
+    }
   }
 
   .SearchLoading {
@@ -1159,8 +1163,7 @@
         align-items: center;
         top: 0;
         bottom: 0;
-        left: 0;
-        padding-left: ttp(.5);
+        left: 1.2%;
         pointer-events: none;
 
         svg {
@@ -1294,7 +1297,7 @@
       .SearchWrapper {
         color: var(--emfe-w-color-white, #FFFFFF);
         .SearchIcon {
-          left: ttp(1.5625);
+          left: 2.4%;
         }
         .SearchInput {
           padding: ttp(0.75);
@@ -1349,17 +1352,19 @@
       margin-top: 30px;
       .SearchContainer {
         background-color: var(--emfe-w-color-contrast, #07072A);
+
+        padding: 0 2.4%;
         .SearchWrapper {
           justify-content: center;
           .SearchInput {
-            width: 90%;
+            width: 100%;
             border: 1px solid var(--emfe-w-color-gray-300, #58586B);
             border-radius: 6.4px;
             background-color: transparent;
             color: var(--emfe-w-color-white, #FFFFFF);
-            padding: 12px 50px;
+            padding: 12px 3.6%;
             &:active, &:focus {
-              width: 90%;
+              width: 100%;
             }
           }
         }
@@ -1370,6 +1375,11 @@
         right: 0;
         font-size: 13px;
         gap: 6px;
+
+        @media screen and (max-width: 1300px) {
+        right: 2.4%;
+      }
+
         .FilterIconContainer {
           display: none;
         }
@@ -1395,7 +1405,7 @@
       display: inline-flex;
     }
     .ClearSearchButton, .ClearSearchButtonMobile {
-      right: 30px;
+      right: 2.4%;
       top: 9px;
     }
   }