restyling the package cards

pkgxdev · Jul 18, 2023 · c1235ea · c1235ea
1 parent dfddb3e
commit c1235ea
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 194 deletions.
diff --git a/svelte/src/components/package-banner/package-banner.svelte b/svelte/src/components/package-banner/package-banner.svelte
@@ -95,7 +95,7 @@
       {/if}
       <InstallResultOverlay {pkg} />
     </figure>
-    <article class="w-2/3 p-4 pt-8">
+    <article class="w-2/3 p-6">
       <div class="align-center flex items-center gap-2">
         <h3 data-testid="package-banner-header" class="text-primary text-3xl">
           {getPackageName(pkg)}
@@ -117,7 +117,7 @@
         <span>{pkg.maintainer}</span>
       {/if}
       <p class="mt-4 text-sm">{pkg.description}</p>
-      <menu class="mt-4 flex h-10 gap-4 text-xs">
+      <menu class="mt-4 flex h-fit flex-wrap gap-4 text-xs">
         <div class="w-fit min-w-[160px]">
           <PackageVersionSelector
             buttonSize="large"

diff --git a/svelte/src/components/package-page/package-page.svelte b/svelte/src/components/package-page/package-page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Markdown from "$components/markdown/markdown.svelte";
+  import PackageBanner from "$components/package-banner/package-banner.svelte";
+  import PackageMetas from "$components/package-metas/package-metas.svelte";
+  import useDefaultBrowser from "$libs/utils/use-default-browser";
+  import type { GUIPackage } from "$libs/types";
+
+  export let pkg: GUIPackage;
+
+  $: readme = pkg?.readme || ({ data: "", type: "md" } as { data: string; type: "md" | "rst" });
+</script>
+
+<div class="w-3/4 pr-4">
+  <PackageBanner on:openterminal {pkg} />
+  <hr class="border-top border-gray" />
+  <Markdown source={readme} hook={useDefaultBrowser} />
+</div>
+<div class="w-1/4">
+  {#if pkg}
+    <PackageMetas {pkg} />
+  {/if}
+</div>
diff --git a/svelte/src/components/tabs/tab.svelte b/svelte/src/components/tabs/tab.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { t } from "$libs/translations";
+
+  export let isActive: boolean;
+  export let onClick: () => void;
+  export let label: string;
+  export let hidden = false;
+</script>
+
+<button class="tabborder w-20 border-x" class:activetab={isActive} class:hidden on:click={onClick}
+  >{$t(label)}</button
+>
+
+<style>
+  .tabborder {
+    border-image: linear-gradient(to bottom, rgba(148, 148, 148, 0%), rgba(148, 148, 148, 100%)) 1;
+  }
+
+  .activetab {
+    color: #00ffd0;
+    background: linear-gradient(180deg, rgba(77, 77, 77, 0.7) 0%, rgba(77, 77, 77, 0.35) 100%);
+    border-image: linear-gradient(to bottom, rgba(0, 255, 208, 0%), rgba(0, 255, 208, 100%)) 1;
+  }
+</style>
diff --git a/svelte/src/components/tabs/tabs.svelte b/svelte/src/components/tabs/tabs.svelte
diff --git a/svelte/src/components/terminal/terminal.svelte b/svelte/src/components/terminal/terminal.svelte
@@ -42,12 +42,25 @@
       fitAddon.fit();
     });
 
+    // Detect when the containing div is resized and resize the terminal
     const resizeObserver = new ResizeObserver((entries) => {
       fitAddon.fit();
     });
     resizeObserver.observe(terminalDiv);
 
-    return () => resizeObserver.unobserve(terminalDiv);
+    // Detect when the terminal div becomes visible on the screen and resize the terminal
+    var visibilityObserver = new IntersectionObserver((entries, observer) => {
+      // resize the terminal, but only after a delay allowing it to fully render or else the fitAddon will get the wrong size
+      setTimeout(() => {
+        fitAddon.fit();
+      }, 10);
+    });
+    visibilityObserver.observe(terminalDiv);
+
+    return () => {
+      resizeObserver.unobserve(terminalDiv);
+      visibilityObserver.unobserve(terminalDiv);
+    };
   });
 
   onDestroy(() => {
@@ -57,9 +70,9 @@
   });
 </script>
 
-<!-- This div has a very specific size of 571 pixels, the terminal component has breakpoints for showing a line 
-    and the spacing can get weird so this is as close to the breakpoint as possible with no left over space 
-    if some future traveler wants a different size, make sure to take these breakpoints into account -->
-<div class="border-gray mt-4 h-[571px] rounded-[5px] border p-1">
-  <div bind:this={terminalDiv} id="terminal" class="h-full w-full" />
+<!-- FIXME: find a better way to make this div resize.  Main container is height:auto so h-full doesn't work well -->
+<div class="h-[80vh] w-full">
+  <div class="border-gray h-full w-full rounded-[5px] border bg-[#000000] p-1">
+    <div bind:this={terminalDiv} id="terminal" class="h-full w-full" />
+  </div>
 </div>
diff --git a/svelte/src/components/web-ui/web-ui.svelte b/svelte/src/components/web-ui/web-ui.svelte
@@ -4,17 +4,10 @@
 </script>
 
 {#if pty && pty.guiURL}
-  <div class="border-gray mt-4 rounded-[5px] border p-1">
-    <iframe
-      id="terminal"
-      title="{pty.project} web UI"
-      src={pty.guiURL}
-      style="height: 100vh; width: 100%"
-    />
+  <!-- FIXME: find a better way to make this div resize.  Main container is height:auto so h-full doesn't work well -->
+  <div class="h-[80vh] w-full">
+    <div class="border-gray mb-4 h-full w-full rounded-[5px] border p-1">
+      <iframe id="terminal" title="{pty.project} web UI" src={pty.guiURL} class="h-full w-full" />
+    </div>
   </div>
 {/if}
-
-<!--
-  ^^I cannot tell you why this styling is even needed
-  FIXME: you fix this thanks
--->
diff --git a/svelte/src/libs/stores.ts b/svelte/src/libs/stores.ts
@@ -13,7 +13,6 @@ import initAppUpdateStore from "./stores/update";
 import { trackSearch } from "./analytics";
 import initScrollStore from "./stores/scroll";
 import ptysStore from "./stores/ptys";
-import initTabStore from "./stores/tabs";
 
 export const featuredPackages = writable<Package[]>([]);
 export const ptys = ptysStore;
@@ -145,5 +144,3 @@ export const notificationStore = initNotificationStore();
 export const appUpdateStore = initAppUpdateStore();
 
 export const scrollStore = initScrollStore();
-
-export const tabStore = initTabStore();
diff --git a/svelte/src/libs/stores/tabs.ts b/svelte/src/libs/stores/tabs.ts
diff --git a/svelte/src/libs/translations/languages/de.json b/svelte/src/libs/translations/languages/de.json
@@ -55,8 +55,7 @@
       "view-on-github": "AUF GITHUB ANSEHEN"
     },
     "tabs": {
-      "details": "Details",
-      "versions": "Versionen",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },

diff --git a/svelte/src/libs/translations/languages/en.json b/svelte/src/libs/translations/languages/en.json
@@ -55,8 +55,7 @@
       "view-on-github": "VIEW ON GITHUB"
     },
     "tabs": {
-      "details": "details",
-      "versions": "versions",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },

diff --git a/svelte/src/libs/translations/languages/ru.json b/svelte/src/libs/translations/languages/ru.json
@@ -55,8 +55,7 @@
       "view-on-github": "ПОСМОТРЕТЬ НА GITHUB"
     },
     "tabs": {
-      "details": "подробности",
-      "versions": "версии",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },

diff --git a/svelte/src/libs/types.ts b/svelte/src/libs/types.ts
@@ -72,27 +72,6 @@ export type Bottle = {
   updated_at?: Date | string;
 };
 
-export type TabId = "details" | "versions" | "cli" | "gui";
-
-export type Tab = {
-  id: TabId;
-  label: string;
-  hidden?: boolean;
-  props?: {
-    [key: string]:
-      | string
-      | Date
-      | number
-      | Record<string, unknown>
-      | Array<string>
-      | Array<number>
-      | Array<Date>
-      | Array<Record<string, unknown>>
-      | Package;
-  };
-  component: ComponentType;
-};
-
 export type Snippet = {
   snippet_id: string;
   created_at: Date | string;