mobile styling for appstore

2024-12-27 18:42:17 +03:00 · 2024-05-10 16:01:49 -04:00 · 2024-05-10 16:01:49 -04:00 · 5fe05b45ac
commit 5fe05b45ac
parent 02c74caf51
9 changed files with 92 additions and 95 deletions
--- a/kinode/packages/app_store/pkg/ui/assets/index-USC8YCBq.css
+++ b/kinode/packages/app_store/pkg/ui/assets/index-USC8YCBq.css
--- a/kinode/packages/app_store/pkg/ui/assets/index-_gafBK2F.js
+++ b/kinode/packages/app_store/pkg/ui/assets/index-_gafBK2F.js
--- a/kinode/packages/app_store/pkg/ui/assets/index-a6MeH9L9.css
+++ b/kinode/packages/app_store/pkg/ui/assets/index-a6MeH9L9.css
--- a/kinode/packages/app_store/pkg/ui/index.html
+++ b/kinode/packages/app_store/pkg/ui/index.html
@ -14,8 +14,8 @@
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
-  <script type="module" crossorigin src="/main:app_store:sys/assets/index-EW63vnI-.js"></script>
-  <link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-USC8YCBq.css">
+  <script type="module" crossorigin src="/main:app_store:sys/assets/index-_gafBK2F.js"></script>
+  <link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-a6MeH9L9.css">
 </head>

 <body>
--- a/kinode/packages/app_store/ui/src/components/AppEntry.tsx
+++ b/kinode/packages/app_store/ui/src/components/AppEntry.tsx
@ -35,7 +35,8 @@ export default function AppEntry({ app, size = "medium", overrideImageSize, ...p
        isIcon={size !== 'large'}
        className={classNames({
          'absolute top-0 right-0': size !== 'large',
-          'bg-orange text-lg min-w-1/5': size === 'large'
+          'bg-orange text-lg min-w-1/5': size === 'large',
+          'ml-auto': size === 'large' && isMobile
        })} />
    </div>
  );
--- a/kinode/packages/app_store/ui/src/components/AppHeader.tsx
+++ b/kinode/packages/app_store/ui/src/components/AppHeader.tsx
@ -21,8 +21,9 @@ export default function AppHeader({

  const appName = <div
    className={classNames({
-      'text-3xl font-[OpenSans]': size === 'large',
-      'text-xl': size !== 'large'
+      'text-3xl font-[OpenSans]': !isMobile && size === 'large',
+      'text-xl': !isMobile && size !== 'large',
+      'text-lg': isMobile
    })}
  >
    {app.metadata?.name || appId(app)}
--- a/kinode/packages/app_store/ui/src/components/SearchHeader.tsx
+++ b/kinode/packages/app_store/ui/src/components/SearchHeader.tsx
@ -10,6 +10,8 @@ import {
 import { MY_APPS_PATH, PUBLISH_PATH } from "../constants/path";
 import classNames from "classnames";
 import { isMobileCheck } from "../utils/dimensions";
+import HomeButton from "./HomeButton";
+import { FaHome } from "react-icons/fa";

 interface SearchHeaderProps {
  value?: string;
@ -40,17 +42,28 @@ export default function SearchHeader({
      "gap-4": isMobile,
      "gap-8": !isMobile
    })}>
-      {location.pathname !== '/' && <button
-        className="flex flex-col c icon icon-orange"
-        onClick={() => {
-          if (onBack) {
-            onBack()
-          } else {
-            canGoBack ? navigate(-1) : navigate('/')
-          }
-        }}>
-        <FaArrowLeft />
-      </button>}
+      {location.pathname !== '/'
+        ? <button
+          className="flex flex-col c icon icon-orange"
+          onClick={() => {
+            if (onBack) {
+              onBack()
+            } else {
+              canGoBack ? navigate(-1) : navigate('/')
+            }
+          }}
+        >
+          <FaArrowLeft />
+        </button>
+        : isMobile
+          ? <button
+            className={classNames("icon icon-orange", {
+            })}
+            onClick={() => window.location.href = '/'}
+          >
+            <FaHome />
+          </button>
+          : <></>}
      {!hidePublish && <button
        className="flex flex-col c icon icon-orange"
        onClick={() => navigate(PUBLISH_PATH)}
@ -68,7 +81,10 @@ export default function SearchHeader({
            className="w-full self-stretch grow"
          />
          <button
-            className="icon border-0 absolute right-4 top-1/2 -translate-y-1/2"
+            className={classNames("icon border-0 absolute top-1/2 -translate-y-1/2", {
+              'right-2': isMobile,
+              'right-4': !isMobile
+            })}
            type="button"
            onClick={() => inputRef.current?.focus()}
          >
@ -83,7 +99,7 @@ export default function SearchHeader({
        })}
        onClick={() => (isMyAppsPage ? navigate(-1) : navigate(MY_APPS_PATH))}
      >
-        <span>My Apps</span>
+        {!isMobile && <span>My Apps</span>}
        <FaDownload />
      </button>
    </div>
--- a/kinode/packages/app_store/ui/src/pages/AppPage.tsx
+++ b/kinode/packages/app_store/ui/src/pages/AppPage.tsx
@ -56,9 +56,11 @@ export default function AppPage() {

  const appDetails: Array<{ top: ReactElement, middle: ReactElement, bottom: ReactElement }> = [
    {
-      top: <div>0 ratings</div>,
+      top: <div className={classNames({ 'text-sm': isMobile })}>0 ratings</div>,
      middle: <span className="text-2xl">5.0</span>,
-      bottom: <div className="flex-center gap-1">
+      bottom: <div className={classNames("flex-center gap-1", {
+        'text-sm': isMobile
+      })}>
        <FaStar />
        <FaStar />
        <FaStar />
@ -67,36 +69,36 @@ export default function AppPage() {
      </div>
    },
    {
-      top: <div>Developer</div>,
+      top: <div className={classNames({ 'text-sm': isMobile })}>Developer</div>,
      middle: <FaPeopleGroup size={36} />,
-      bottom: <div>
+      bottom: <div className={classNames({ 'text-sm': isMobile })}>
        {app?.publisher}
      </div>
    },
    {
-      top: <div>Version</div>,
+      top: <div className={classNames({ 'text-sm': isMobile })}>Version</div>,
      middle: <span className="text-2xl">{version}</span>,
-      bottom: <div>
+      bottom: <div className={classNames({ 'text-xs': isMobile })}>
        {hash.slice(0, 5)}...{hash.slice(-5)}
      </div>
    },
    {
-      top: <div>Mirrors</div>,
+      top: <div className={classNames({ 'text-sm': isMobile })}>Mirrors</div>,
      middle: <FaGlobe size={36} />,
-      bottom: <div>
+      bottom: <div className={classNames({ 'text-sm': isMobile })}>
        {app?.metadata?.properties?.mirrors?.length || 0}
      </div>
    }
  ]

  return (
-    <div className={classNames("flex flex-col w-full max-w-[900px]",
+    <div className={classNames("flex flex-col w-full h-screen",
      {
-        'gap-4': isMobile,
-        'gap-8': !isMobile,
+        'gap-4 p-2 max-w-screen': isMobile,
+        'gap-8 max-w-[900px]': !isMobile,
      })}
    >
-      <HomeButton />
+      {!isMobile && <HomeButton />}
      <SearchHeader
        value=""
        onChange={() => null}
@ -104,59 +106,34 @@ export default function AppPage() {
        hidePublish
      />
      <div className={classNames("flex-col-center card !rounded-3xl", {
-        'p-12 gap-4': isMobile,
+        'p-12 gap-4 grow overflow-y-auto': isMobile,
        'p-24 gap-8': !isMobile,
      })}>
        {app ? <>
-          <AppHeader app={app} size="large" />
+          <AppHeader app={app} size={isMobile ? "medium" : "large"} />
          <div className="w-5/6 h-0 border border-orange" />
          <div className={classNames("flex items-start text-xl", {
-            'gap-4': isMobile,
+            'gap-4 flex-wrap': isMobile,
            'gap-8': !isMobile,
          })}>
            {appDetails.map((detail, index) => <>
              <div
-                className="flex-col-center gap-2 justify-between opacity-50 self-stretch"
+                className={classNames("flex-col-center gap-2 justify-between self-stretch", {
+                  'rounded-lg bg-white/10 p-1 min-w-1/4 grow': isMobile,
+                  'opacity-50': !isMobile,
+                })}
                key={index}
              >
                {detail.top}
                {detail.middle}
                {detail.bottom}
              </div>
-              {index !== appDetails.length - 1 && <div className="h-3/4 w-0 border border-orange self-center" />}
+              {!isMobile && index !== appDetails.length - 1 && <div className="h-3/4 w-0 border border-orange self-center" />}
            </>)}
          </div>
-          {/* <div className="flex flex-col mt-2">
-            <div className="flex mt-1 items-start">
-              <div className="w-1/4">Publisher</div>
-              <div className="mb-1 w-3/4">{app.publisher}</div>
-            </div>
-            <div className="flex mt-1 items-start">
-              <div className="w-1/4">Version</div>
-              <div className="mb-1 w-3/4">{version}</div>
-            </div>
-            <div className="flex mt-1 items-start">
-              <div className="w-1/4">Mirrors</div>
-              <div className="w-3/4 flex flex-col">
-                {(app.metadata?.properties?.mirrors || []).map(
-                  (mirror, index) => (
-                    <div key={index + mirror} className="mb-1">
-                      {mirror}
-                    </div>
-                  )
-                )}
-              </div>
-            </div>
-            <div className="flex mt-1 items-start">
-              <div className="w-1/4">Hash</div>
-              <div className="w-3/4 break-all">
-                {hash}
-              </div>
-            </div>
-          </div> */}
          {Array.isArray(app.metadata?.properties?.screenshots)
            && app.metadata?.properties.screenshots.length > 0
-            && <div className="flex overflow-x-auto max-w-full">
+            && <div className="flex flex-wrap overflow-x-auto max-w-full">
              {app.metadata.properties.screenshots.map(
                (screenshot, index) => (
                  <img key={index + screenshot} src={screenshot} className="mr-2 max-h-20 max-w-full rounded border border-black" />
--- a/kinode/packages/app_store/ui/src/pages/StorePage.tsx
+++ b/kinode/packages/app_store/ui/src/pages/StorePage.tsx
@ -126,15 +126,15 @@ export default function StorePage() {
  const isMobile = isMobileCheck()

  return (
-    <div className={classNames("flex flex-col max-w-[900px] w-full", {
-      'gap-4': isMobile,
-      'gap-6': !isMobile
+    <div className={classNames("flex flex-col w-full max-h-screen", {
+      'gap-4 max-w-screen p-2': isMobile,
+      'gap-6 max-w-[900px]': !isMobile
    })}>
-      <HomeButton />
+      {!isMobile && <HomeButton />}
      <SearchHeader value={searchQuery} onChange={searchApps} />
      <div className={classNames("flex items-center self-stretch justify-between", {
-        'gap-4': isMobile,
-        'gap-8': !isMobile
+        'gap-4 flex-wrap': isMobile,
+        'gap-8 grow': !isMobile
      })}>
        <button
          className="flex flex-col c icon icon-orange"
@ -172,41 +172,43 @@ export default function StorePage() {
          <option>Recently updated</option>
        </select>
      </div>
-      {!searchQuery ? <>
+      {!searchQuery ? <div className={classNames("flex flex-col", {
+        'grow overflow-y-auto gap-4 items-center px-2': isMobile
+      })}>
        <h2>Top apps this week...</h2>
        <div className={classNames("flex gap-2", {
-          'flex-wrap': isMobile
+          'flex-col': isMobile
        })}>
          {displayedApps.slice(0, 4).map((app) => (
            <AppEntry
              key={appId(app) + (app.state?.our_version || "")}
-              size='medium'
+              size={'medium'}
              app={app}
              className={classNames("grow", {
                'w-1/4': !isMobile,
-                'w-1/2': isMobile
+                'w-full': isMobile
              })}
            />
          ))}
        </div>
        <h2>Must-have apps!</h2>
        <div className={classNames("flex gap-2", {
-          'flex-wrap': isMobile
+          'flex-col': isMobile
        })}>
          {displayedApps.slice(0, 6).map((app) => (
            <AppEntry
              key={appId(app) + (app.state?.our_version || "")}
-              size='small'
+              size={isMobile ? 'medium' : 'small'}
              app={app}
-              overrideImageSize="large"
+              overrideImageSize={isMobile ? 'medium' : 'large'}
              className={classNames("grow", {
                'w-1/6': !isMobile,
-                'w-1/2': isMobile
+                'w-full': isMobile
              })}
            />
          ))}
        </div>
-      </> : <div className={classNames("flex-col-center", {
+      </div> : <div className={classNames("flex-col-center grow", {
        'gap-2': isMobile,
        'gap-4': !isMobile,
      })}>