[UI/UX] Show store links on navbar on all pages and adjust it to smal…

…l window sizes (#859) * [UI/UX] Show store links on navbar on all pages * fix: lint * Update flatpak-build.yml to remove installation of unnecessary packages * Revert "Update flatpak-build.yml to remove installation of unnecessary packages" This reverts commit 8dc6aae. * tech: define minimum resolutions and window size * ui: adjust elements on small window sizes * fix: hide autocomplete if list is empty * ui: wrap filters on smaller screens * fix: lint * fix: tests * Empty commit --------- Co-authored-by: Flavio F Lima <[email protected]>
HyperPlay-Gaming · Apr 23, 2024 · 118c381 · 118c381
1 parent 88afe0e
commit 118c381
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 52 deletions.
diff --git a/src/backend/__tests__/main_window.test.ts b/src/backend/__tests__/main_window.test.ts
@@ -102,8 +102,8 @@ describe('main_window', () => {
         const window = await createMainWindow()
         const options = window['options']
 
-        expect(options.height).toBe(614.4000000000001) // 80% of the workAreaSize.height
-        expect(options.width).toBe(1200) // 80% of the workAreaSize.width
+        expect(options.height).toBe(800)
+        expect(options.width).toBe(1280)
         expect(options.x).toBe(0)
         expect(options.y).toBe(0)
       })

diff --git a/src/backend/main_window.ts b/src/backend/main_window.ts
@@ -5,6 +5,16 @@ import { controlWindow } from './hyperplay-overlay/model'
 
 let mainWindow: BrowserWindow | null = null
 
+// Steam Deck resolution is 1280x800
+const minSupportedResolution = {
+  width: 1280,
+  height: 800
+}
+
+// 50% of the screen for the minimum supported resolution seems like a reasonable size
+const minSupportedHeight = Math.round(minSupportedResolution.height / 1.5)
+const minSupportedWidth = Math.round(minSupportedResolution.width / 1.5)
+
 export const getMainWindow = () => {
   return mainWindow
 }
@@ -33,8 +43,8 @@ let hiddenPhraseCurrentIndex = 0
 // creates the mainWindow based on the configuration
 export const createMainWindow = () => {
   let windowProps: Electron.Rectangle = {
-    height: 690,
-    width: 1200,
+    height: minSupportedResolution.height,
+    width: minSupportedResolution.width,
     x: 0,
     y: 0
   }
@@ -68,8 +78,8 @@ export const createMainWindow = () => {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     ...windowProps,
-    minHeight: 345,
-    minWidth: 600,
+    minHeight: minSupportedHeight,
+    minWidth: minSupportedWidth,
     show: false,
 
     webPreferences: {

diff --git a/src/frontend/components/UI/SearchBar/index.css b/src/frontend/components/UI/SearchBar/index.css
@@ -76,3 +76,10 @@ div.SearchBar:has(input:not(:placeholder-shown)) > button {
   outline: none;
   transition: color 250ms;
 }
+
+@media screen and (max-width: 1280px) {
+  div.SearchBar:has(*:focus),
+  div.SearchBar:has(input:not(:placeholder-shown)) {
+    width: 243px;
+  }
+}
diff --git a/src/frontend/components/UI/TopNavBar/index.module.scss b/src/frontend/components/UI/TopNavBar/index.module.scss
@@ -66,3 +66,10 @@
   justify-content: center;
   min-width: calc(1.3 * var(--text-xs));
 }
+
+@media screen and (min-width: 800px) {
+  .alphaBadge,
+  .hpTextLogo {
+    display: none;
+  }
+}
diff --git a/src/frontend/components/UI/TopNavBar/index.tsx b/src/frontend/components/UI/TopNavBar/index.tsx
@@ -27,15 +27,6 @@ const TopNavBar = observer(() => {
   const { showMetaMaskBrowserSidebarLinks } = useContext(ContextProvider)
   const [badgeText, setBadgeText] = useState('0')
   const { pathname } = useLocation()
-  const pagesToShowStoreNavOptions = [
-    '/hyperplaystore',
-    '/gogstore',
-    '/epicstore',
-    '/amazonstore',
-    '/store-page'
-  ]
-
-  const showStoreNavOptions = pagesToShowStoreNavOptions.includes(pathname)
 
   /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
   function setBadgeString(err: any, text: string) {
@@ -71,54 +62,55 @@ const TopNavBar = observer(() => {
           width="27px"
           className={styles.hpLogo}
         />
-        <Images.HyperPlayTextLogo fill="var(--color-neutral-100)" />
+        <Images.HyperPlayTextLogo
+          fill="var(--color-neutral-100)"
+          className={styles.hpTextLogo}
+        />
         <div className={styles.alphaBadge}>
           <div className={`caption ${styles.alphaCaption}`}>
             {t(`hyperplay.publicAlpha`, `Public Alpha`)}
           </div>
         </div>
-        {showStoreNavOptions && (
-          <>
-            <NavLink to="/hyperplaystore">
-              <Button
-                type="link"
-                size="small"
-                style={getStoreTextStyle(HYPERPLAY_STORE_URL)}
-              >
-                HyperPlay
-              </Button>
-            </NavLink>
-            <NavLink to="/epicstore">
+        <>
+          <NavLink to="/hyperplaystore">
+            <Button
+              type="link"
+              size="small"
+              style={getStoreTextStyle(HYPERPLAY_STORE_URL)}
+            >
+              HyperPlay
+            </Button>
+          </NavLink>
+          <NavLink to="/epicstore">
+            <Button
+              type="link"
+              size="small"
+              style={getStoreTextStyle(EPIC_STORE_URL)}
+            >
+              {t('Epic Games', 'Epic Games')}
+            </Button>
+          </NavLink>
+          <NavLink to="/gogstore">
+            <Button
+              type="link"
+              size="small"
+              style={getStoreTextStyle(GOG_STORE_URL)}
+            >
+              {t('GOG', 'GOG')}
+            </Button>
+          </NavLink>
+          {ENABLE_AMAZON_STORE ? (
+            <NavLink to="/amazonstore">
               <Button
                 type="link"
                 size="small"
-                style={getStoreTextStyle(EPIC_STORE_URL)}
+                style={getStoreTextStyle(AMAZON_STORE)}
               >
-                {t('Epic Games', 'Epic Games')}
+                {t('Amazon', 'Amazon')}
               </Button>
             </NavLink>
-            <NavLink to="/gogstore">
-              <Button
-                type="link"
-                size="small"
-                style={getStoreTextStyle(GOG_STORE_URL)}
-              >
-                {t('GOG', 'GOG')}
-              </Button>
-            </NavLink>
-            {ENABLE_AMAZON_STORE ? (
-              <NavLink to="/amazonstore">
-                <Button
-                  type="link"
-                  size="small"
-                  style={getStoreTextStyle(AMAZON_STORE)}
-                >
-                  {t('Amazon', 'Amazon')}
-                </Button>
-              </NavLink>
-            ) : null}
-          </>
-        )}
+          ) : null}
+        </>
       </div>
       <div>
         {pathname === '/library' ? <SearchBar /> : null}

diff --git a/src/frontend/screens/Library/components/LibraryTopBar/index.module.scss b/src/frontend/screens/Library/components/LibraryTopBar/index.module.scss
@@ -2,6 +2,7 @@
   display: flex;
   align-items: stretch;
   margin-bottom: var(--space-xl);
+  flex-wrap: wrap;
 
   > * {
     margin: var(--space-xs) 0px;