Doing responsivness improvements

radicle-dev · Jun 14, 2024 · 9f0e2c3 · 9f0e2c3
1 parent 7c4f396
commit 9f0e2c3
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 158 deletions.
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
@@ -7,7 +7,6 @@
     Node,
     Tree,
   } from "@http-client";
-  import type { Route } from "@app/lib/router";
 
   import { COMMITS_PER_PAGE } from "./router";
   import { HttpdClient } from "@http-client";
@@ -26,7 +25,6 @@
   export let baseUrl: BaseUrl;
   export let node: Node;
   export let commit: string;
-  export let branches: string[];
   export let commitHeaders: CommitHeader[];
   export let peer: string | undefined;
   export let peers: Remote[];
@@ -63,28 +61,6 @@
     }
     loading = false;
   }
-
-  $: peersWithRoute = peers.map(remote => ({
-    remote,
-    selected: remote.id === peer,
-    route: {
-      resource: "project.history",
-      node: baseUrl,
-      project: project.id,
-      peer: remote.id,
-    } as Route,
-  }));
-
-  $: branchesWithRoute = branches.map(name => ({
-    name,
-    route: {
-      resource: "project.history",
-      node: baseUrl,
-      project: project.id,
-      peer,
-      revision: name,
-    } as Route,
-  }));
 </script>
 
 <style>
@@ -111,15 +87,15 @@
 <Layout {node} {baseUrl} {project} activeTab="source">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
-  <div style:margin="1rem 0 1rem 1rem" slot="subheader">
+  <div style:margin="1rem 1rem 1rem 1rem" slot="subheader">
     <Header
-      node={baseUrl}
       {commit}
+      {peers}
+      {peer}
       {project}
-      peers={peersWithRoute}
-      branches={branchesWithRoute}
       {revision}
       {tree}
+      node={baseUrl}
       filesLinkActive={false}
       historyLinkActive={true} />
   </div>

diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
@@ -107,7 +107,7 @@
 <Layout {node} {baseUrl} {project} activeTab="source" stylePaddingBottom="0">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
-  <div style:margin="1rem 0 1rem 1rem" slot="subheader">
+  <div style:margin="1rem 1rem 1rem 1rem" slot="subheader">
     <Header
       filesLinkActive={true}
       historyLinkActive={false}

diff --git a/src/views/projects/Source/BranchSelector.svelte b/src/views/projects/Source/BranchSelector.svelte
diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
@@ -39,6 +39,8 @@
     display: flex;
     align-items: center;
     justify-content: left;
+    row-gap: 0.5rem;
+    gap: 1rem;
     flex-wrap: wrap;
     margin-bottom: 2rem;
   }
@@ -89,8 +91,11 @@
     {node}
     {project}
     {selectedBranch} />
-  <div class="global-spacer" />
-  <CommitButton projectId={project.id} commit={lastCommit} baseUrl={node} />
+  <CommitButton
+    projectId={project.id}
+    commit={lastCommit}
+    baseUrl={node}
+    styleRoundBorders />
 </div>
 
 <div class="header">

diff --git a/src/views/projects/Source/SourceSelector.svelte b/src/views/projects/Source/SourceSelector.svelte
@@ -13,6 +13,7 @@
   import PeerItem from "./SourceSelector/PeerItem.svelte";
   import Popover, { closeFocused } from "@app/components/Popover.svelte";
   import TextInput from "@app/components/TextInput.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
 
   export let peers: Remote[];
   export let peer: string | undefined;
@@ -54,8 +55,9 @@
   }
 </style>
 
-<div style="display: flex; gap: 1px;">
+<div style="display: flex; gap: 1px; min-width: 0; flex-wrap: nowrap;">
   <Popover
+    popoverContainerMinWidth="0"
     popoverPadding="0"
     popoverPositionTop="2.5rem"
     popoverBorderRadius="var(--border-radius-small)">
@@ -64,27 +66,37 @@
       let:expanded
       let:toggle
       styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
+      styleWidth="100%"
       on:click={toggle}
       title="Change peer"
       disabled={!peers}>
       {#if selectedPeer}
-        <NodeId
-          nodeId={selectedPeer.id}
-          alias={selectedPeer.alias}
-          stylePopoverPositionLeft="-0.75rem" />
-        {#if selectedPeer.delegate}
-          <Badge size="tiny" variant="delegate">
-            <IconSmall name="badge" />
-            Delegate
-          </Badge>
-        {/if}
+        <div class="global-hide-on-medium-desktop-up" style="height: 1rem;">
+          <Avatar nodeId={selectedPeer.id} />
+        </div>
+        <div
+          class="global-hide-on-small-desktop-down"
+          style="display: flex; gap: 0.5rem; align-items: center;">
+          <NodeId
+            nodeId={selectedPeer.id}
+            alias={selectedPeer.alias}
+            stylePopoverPositionLeft="-0.75rem" />
+          {#if selectedPeer.delegate}
+            <Badge size="tiny" variant="delegate">
+              <IconSmall name="badge" />
+              Delegate
+            </Badge>
+          {/if}
+        </div>
       {/if}
       {#if selectedPeer && selectedBranch}
         <span>/</span>
       {/if}
       {#if selectedBranch}
         <IconSmall name="branch" />
-        {selectedBranch}
+        <span class="txt-overflow">
+          {selectedBranch}
+        </span>
         {#if onCanonical}
           <Badge title="Canonical branch" variant="foreground-emphasized">
             Canonical
@@ -165,7 +177,7 @@
                 </div>
                 <div
                   class="txt-monospace"
-                  style="color: var(--color-foreground-dim);">
+                  style="color: var(--color-foreground-dim); padding-left: 0.5rem;">
                   {formatCommit(parsedResult.head)}
                 </div>
               </DropdownListItem>
@@ -203,7 +215,7 @@
               </div>
               <div
                 class="txt-monospace"
-                style="color: var(--color-foreground-dim);">
+                style="color: var(--color-foreground-dim); padding-left: 0.5rem;">
                 {formatCommit(project.head)}
               </div>
             </DropdownListItem>
@@ -219,20 +231,19 @@
       </div>
     </div>
   </Popover>
+  {#if selectedPeer}
+    <Link
+      route={{
+        resource: "project.source",
+        project: project.id,
+        node,
+        path: "/",
+      }}>
+      <Button
+        variant="not-selected"
+        styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
+        <IconSmall name="cross" />
+      </Button>
+    </Link>
+  {/if}
 </div>
-<div class="global-spacer"></div>
-{#if selectedPeer}
-  <Link
-    route={{
-      resource: "project.source",
-      project: project.id,
-      node,
-      path: "/",
-    }}>
-    <Button
-      variant="not-selected"
-      styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
-      <IconSmall name="cross" />
-    </Button>
-  </Link>
-{/if}
diff --git a/src/views/projects/components/CommitButton.svelte b/src/views/projects/components/CommitButton.svelte
@@ -43,7 +43,7 @@
       <div class="identifier global-commit">
         {commitShortId}
       </div>
-      <span class="global-hide-on-small-desktop-down">
+      <span>
         {commit.summary}
       </span>
     </div>