From 493d33a80a3bdd54e2f45752b021ceb0f027b3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 13 Mar 2024 13:44:17 +0100
Subject: [PATCH] Make node view mobile friendlier

This also fixes an overflow problem with the popover.
---
 src/views/home/Index.svelte               |   2 +-
 src/views/nodes/ScopePolicyPopover.svelte |  61 +++++++++++
 src/views/nodes/View.svelte               | 120 +++++++++-------------
 3 files changed, 109 insertions(+), 74 deletions(-)
 create mode 100644 src/views/nodes/ScopePolicyPopover.svelte

diff --git a/src/views/home/Index.svelte b/src/views/home/Index.svelte
index ded7f36f0..fe9e8f689 100644
--- a/src/views/home/Index.svelte
+++ b/src/views/home/Index.svelte
@@ -117,7 +117,7 @@
   @media (max-width: 720px) {
     .wrapper {
       width: 100%;
-      padding: 1rem 1.5rem 1.5rem 1.5rem;
+      padding: 1rem;
     }
 
     .seed-dropdown {
diff --git a/src/views/nodes/ScopePolicyPopover.svelte b/src/views/nodes/ScopePolicyPopover.svelte
new file mode 100644
index 000000000..3e2d8164c
--- /dev/null
+++ b/src/views/nodes/ScopePolicyPopover.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Policy, Scope } from "@httpd-client";
+
+  import capitalize from "lodash/capitalize";
+
+  import HoverPopover from "@app/components/HoverPopover.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
+
+  export let policy: Policy;
+  export let scope: Scope;
+  export let stylePopoverPositionRight: string | undefined = undefined;
+  export let stylePopoverPositionLeft: string | undefined = undefined;
+</script>
+
+<style>
+  .container {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .separator {
+    width: 1px;
+    background-color: var(--color-fill-separator);
+    display: flex;
+    height: 1rem;
+  }
+  .popover {
+    width: 18rem;
+    color: var(--color-foreground-contrast);
+  }
+</style>
+
+<div class="container">
+  <span>
+    Seeding Policy: <span class="txt-semibold">
+      {capitalize(policy)}
+    </span>
+  </span>
+  <span class="separator" />
+  <span>
+    Scope:
+    <span class="txt-semibold">{capitalize(scope)}</span>
+  </span>
+  <span style:color="var(--color-fill-gray)">
+    <HoverPopover
+      {stylePopoverPositionRight}
+      {stylePopoverPositionLeft}
+      stylePopoverPositionBottom="1.5rem">
+      <div slot="toggle">
+        <span style:color="var(--color-fill-gray)">
+          <IconSmall name="info" />
+        </span>
+      </div>
+
+      <div slot="popover" class="popover">
+        <ScopePolicyExplainer {scope} {policy} />
+      </div>
+    </HoverPopover>
+  </span>
+</div>
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
index 9ea1c736c..90c82cc8c 100644
--- a/src/views/nodes/View.svelte
+++ b/src/views/nodes/View.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import type { BaseUrl, NodeStats, Policy, Scope } from "@httpd-client";
 
-  import capitalize from "lodash/capitalize";
-
   import * as router from "@app/lib/router";
   import { api, httpdStore } from "@app/lib/httpd";
   import { baseUrlToString, isLocal, truncateId } from "@app/lib/utils";
@@ -12,11 +10,9 @@
 
   import AppLayout from "@app/App/AppLayout.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
-  import HoverPopover from "@app/components/HoverPopover.svelte";
-  import IconSmall from "@app/components/IconSmall.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
-  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
   import Loading from "@app/components/Loading.svelte";
+  import ScopePolicyPopover from "./ScopePolicyPopover.svelte";
 
   export let baseUrl: BaseUrl;
   export let nid: string;
@@ -56,32 +52,17 @@
     flex-direction: column;
   }
 
-  .separator {
-    width: 1px;
-    background-color: var(--color-fill-separator);
-    display: flex;
-    height: 1rem;
-  }
   .subtitle {
     font-size: var(--font-size-small);
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-bottom: 1rem;
     width: 100%;
-    white-space: nowrap;
-    flex-wrap: wrap;
   }
   .pinned {
     display: flex;
     align-items: center;
   }
-  .right {
-    margin-left: auto;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
   .info {
     display: flex;
     justify-content: space-between;
@@ -97,20 +78,17 @@
     grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
     gap: 1rem;
   }
-  .popover {
-    width: 18rem;
-    color: var(--color-foreground-contrast);
-  }
   @media (max-width: 720px) {
-    .layout {
+    .wrapper {
       width: 100%;
-      display: flex;
-      justify-content: center;
-      padding: 0;
+      padding: 1rem;
     }
     .info {
       flex-direction: column;
     }
+    .layout {
+      padding: 0;
+    }
   }
 </style>
 
@@ -130,7 +108,14 @@
             {:else}
               <!-- else this is probably a local node -->
               <!-- So we show only the nid -->
-              <CopyableId id={nid} style="oid" />
+              <CopyableId id={nid} style="oid">
+                <div class="global-hide-on-desktop">
+                  {truncateId(nid)}
+                </div>
+                <div class="global-hide-on-mobile">
+                  {nid}
+                </div>
+              </CopyableId>
             {/each}
           </div>
           <div class="version">
@@ -144,54 +129,43 @@
           {stats.repos.total} repositories hosted
         </div>
 
+        <div class="global-hide-on-mobile" style:margin-left="auto">
+          {#if policy && scope}
+            <ScopePolicyPopover
+              {scope}
+              {policy}
+              stylePopoverPositionRight="-1rem" />
+          {/if}
+        </div>
+      </div>
+      <div class="subtitle global-hide-on-desktop">
         {#if policy && scope}
-          <div class="right">
-            <span>
-              Seeding Policy: <span class="txt-semibold">
-                {capitalize(policy)}
-              </span>
-            </span>
-            <span class="separator" />
-            <span>
-              Scope:
-              <span class="txt-semibold">{capitalize(scope)}</span>
-            </span>
-            <span style:color="var(--color-fill-gray)">
-              <HoverPopover
-                stylePopoverPositionRight="-1rem"
-                stylePopoverPositionBottom="1.5rem">
-                <div slot="toggle">
-                  <span style:color="var(--color-fill-gray)">
-                    <IconSmall name="info" />
-                  </span>
-                </div>
-
-                <div slot="popover" class="popover">
-                  <ScopePolicyExplainer {scope} {policy} />
-                </div>
-              </HoverPopover>
-            </span>
-          </div>
+          <ScopePolicyPopover
+            {scope}
+            {policy}
+            stylePopoverPositionLeft="-14rem" />
         {/if}
       </div>
 
-      {#await fetchProjectInfos(baseUrl, isLocal(baseUrl.hostname) ? "all" : "pinned")}
-        <Loading small center />
-      {:then projectInfos}
-        <div class="project-grid">
-          {#each projectInfos as projectInfo}
-            <ProjectCard
-              {projectInfo}
-              isSeeding={false}
-              isDelegate={isDelegate(
-                session?.publicKey,
-                projectInfo.project.delegates,
-              ) ?? false} />
-          {/each}
-        </div>
-      {:catch error}
-        {router.push(handleError(error, baseUrlToString(api.baseUrl)))}
-      {/await}
+      <div style:margin-top="1rem">
+        {#await fetchProjectInfos(baseUrl, isLocal(baseUrl.hostname) ? "all" : "pinned")}
+          <Loading small center />
+        {:then projectInfos}
+          <div class="project-grid">
+            {#each projectInfos as projectInfo}
+              <ProjectCard
+                {projectInfo}
+                isSeeding={false}
+                isDelegate={isDelegate(
+                  session?.publicKey,
+                  projectInfo.project.delegates,
+                ) ?? false} />
+            {/each}
+          </div>
+        {:catch error}
+          {router.push(handleError(error, baseUrlToString(api.baseUrl)))}
+        {/await}
+      </div>
     </div>
   </div>
 </AppLayout>