Implement two column layout

radicle-dev · Dec 29, 2023 · 5373c4e · 5373c4e
1 parent 56eefb8
commit 5373c4e
Show file tree

Hide file tree

Showing 61 changed files with 1,633 additions and 1,073 deletions.
diff --git a/index.html b/index.html
@@ -69,7 +69,6 @@
     <link rel="stylesheet" type="text/css" href="/katex.min.css" />
     <link rel="stylesheet" type="text/css" href="/colors.css" />
     <link rel="stylesheet" type="text/css" href="/elevations.css" />
-    <link rel="stylesheet" type="text/css" href="/layout.css" />
     <link rel="stylesheet" type="text/css" href="/prettylights.css" />
     <link rel="stylesheet" type="text/css" href="/index.css" />
     <link rel="icon" href="/radicle.svg" type="image/svg+xml" />

diff --git a/public/colors.css b/public/colors.css
@@ -37,7 +37,7 @@
   --color-fill-danger: #be7495;
   --color-fill-yellow: #ffe609;
   --color-fill-yellow-iconic: #ffff55;
-  --color-fill-gray: #9494b8;
+  --color-fill-gray: #9b9bb1;
   --color-fill-diff-red: #efdce4;
   --color-fill-diff-red-light: #f7eef2;
   --color-fill-success: #4fa877;
@@ -48,6 +48,8 @@
   --color-fill-merged: #ffeeff;
   --color-fill-selected: #ebebff;
   --color-fill-warning: #ffffe5;
+  --color-fill-counter: #dbdbff;
+  --color-fill-counter-emphasized: #dbdbff;
 }
 
 :root[data-theme="dark"] {
@@ -86,10 +88,10 @@
   --color-fill-separator: #24252d;
   --color-fill-primary: #ff55ff;
   --color-fill-primary-hover: #ff80ff;
-  --color-fill-danger: #4d1929;
+  --color-fill-danger: #aa5078;
   --color-fill-yellow: #ffe609;
   --color-fill-yellow-iconic: #ffff55;
-  --color-fill-gray: #9494b8;
+  --color-fill-gray: #9b9bb1;
   --color-fill-diff-red: #4d1929;
   --color-fill-diff-red-light: #2d060d;
   --color-fill-success: #4fa877;
@@ -100,4 +102,6 @@
   --color-fill-merged: #1a001a;
   --color-fill-selected: #16173d;
   --color-fill-warning: #191500;
+  --color-fill-counter: #393a46;
+  --color-fill-counter-emphasized: #232563;
 }
diff --git a/public/index.css b/public/index.css
@@ -39,12 +39,6 @@ body {
   scrollbar-color: var(--color-fill-separator) transparent;
 }
 
-@media (max-width: 720px) {
-  body {
-    min-width: 0;
-  }
-}
-
 ::selection {
   background: var(--color-fill-yellow-iconic);
   color: var(--color-foreground-black);
@@ -89,3 +83,28 @@ pre {
   font-family: var(--font-family-monospace);
   font-weight: var(--font-weight-regular);
 }
+
+.global-counter {
+  border-radius: var(--border-radius-tiny);
+  background-color: var(--color-fill-ghost);
+  color: var(--color-foreground-dim);
+  padding: 0 0.25rem;
+  display: block;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+@media (max-width: 720px) {
+  body {
+    min-width: 0;
+  }
+  .global-hide-on-mobile {
+    display: none !important;
+  }
+}
+
+@media (min-width: 721px) {
+  .global-hide-on-desktop {
+    display: none !important;
+  }
+}
diff --git a/public/layout.css b/public/layout.css
diff --git a/src/App.svelte b/src/App.svelte
@@ -5,9 +5,7 @@
   import * as httpd from "@app/lib/httpd";
   import { unreachable } from "@app/lib/utils";
 
-  import Footer from "./App/Footer.svelte";
   import FullscreenModalPortal from "./App/FullscreenModalPortal.svelte";
-  import Header from "./App/Header.svelte";
   import Hotkeys from "./App/Hotkeys.svelte";
   import LoadingBar from "./App/LoadingBar.svelte";
 
@@ -42,10 +40,12 @@
 </script>
 
 <style>
-  .app {
+  .loading {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     height: 100%;
+    align-items: center;
   }
 </style>
 
@@ -56,40 +56,36 @@
 <FullscreenModalPortal />
 <Hotkeys />
 
-<div class="app">
-  <Header />
-  {#if $activeRouteStore.resource === "booting"}
+{#if $activeRouteStore.resource === "booting"}
+  <div class="loading">
     <Loading />
-  {:else if $activeRouteStore.resource === "home"}
-    <Home {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "nodes"}
-    <Nodes {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "session"}
-    <Session activeRoute={$activeRouteStore} />
-  {:else if $activeRouteStore.resource === "project.source"}
-    <Source {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.history"}
-    <History {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.commit"}
-    <Commit {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.issues"}
-    <Issues {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.newIssue"}
-    <NewIssue {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.issue"}
-    <Issue {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.patches"}
-    <Patches {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "project.patch"}
-    <Patch {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "loadError"}
-    <LoadError {...$activeRouteStore.params} />
-  {:else if $activeRouteStore.resource === "notFound"}
-    <NotFound {...$activeRouteStore.params} />
-  {:else}
-    {unreachable($activeRouteStore)}
-  {/if}
-  <div style:margin-top="auto">
-    <Footer />
   </div>
-</div>
+{:else if $activeRouteStore.resource === "home"}
+  <Home {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "nodes"}
+  <Nodes {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "session"}
+  <Session activeRoute={$activeRouteStore} />
+{:else if $activeRouteStore.resource === "project.source"}
+  <Source {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.history"}
+  <History {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.commit"}
+  <Commit {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.issues"}
+  <Issues {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.newIssue"}
+  <NewIssue {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.issue"}
+  <Issue {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.patches"}
+  <Patches {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "project.patch"}
+  <Patch {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "loadError"}
+  <LoadError {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "notFound"}
+  <NotFound {...$activeRouteStore.params} />
+{:else}
+  {unreachable($activeRouteStore)}
+{/if}
diff --git a/src/App/AppLayout.svelte b/src/App/AppLayout.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import Footer from "@app/App/Footer.svelte";
+  import Header from "@app/App/Header.svelte";
+  import MobileFooter from "@app/App/MobileFooter.svelte";
+</script>
+
+<style>
+  .app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+</style>
+
+<div class="app">
+  <Header />
+  <slot />
+  <div style:margin-top="auto">
+    <div class="global-hide-on-mobile">
+      <Footer />
+    </div>
+    <div class="global-hide-on-desktop">
+      <MobileFooter />
+    </div>
+  </div>
+</div>
diff --git a/src/App/Footer.svelte b/src/App/Footer.svelte
@@ -45,7 +45,7 @@
 
 <div class="footer">
   <div class="left">
-    <span class="layout-desktop">Supported by</span>
+    Supported by
     <a
       class="logo"
       target="_blank"
@@ -55,15 +55,15 @@
     </a>
   </div>
 
-  <div class="center layout-desktop">
+  <div class="center">
     Press <KeyHint>?</KeyHint>
     for keyboard shortcuts
   </div>
   <div class="right">
     <Popover popoverPositionBottom="2rem" popoverPositionRight="0">
       <IconButton slot="toggle" let:toggle on:click={toggle}>
-        <IconSmall name="brush" />
-        Theme
+        <IconSmall name="settings" />
+        Settings
       </IconButton>
 
       <div slot="popover" style:width="19rem">

diff --git a/src/App/Header.svelte b/src/App/Header.svelte
@@ -25,19 +25,19 @@
     justify-content: space-between;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 0.5rem;
+    height: 3.5rem;
   }
   .left,
   .right {
     display: flex;
     align-items: center;
-    height: var(--button-regular-height);
     gap: 1rem;
   }
 
   .logo {
     height: var(--button-regular-height);
-    margin-right: 0.5rem;
+    margin: 0 0.5rem;
   }
   .label {
     display: block;
@@ -59,29 +59,24 @@
     font-weight: var(--font-weight-bold);
     margin-bottom: 0.5rem;
   }
-  @media (max-width: 720px) {
-    header .right {
-      gap: 1rem;
-    }
-  }
 </style>
 
-<header>
+<header class="global-hide-on-mobile">
   <div class="left">
-    <Link route={{ resource: "home" }}>
+    <Link
+      style="display: flex; align-items: center;"
+      route={{ resource: "home" }}>
       <img
-        width="40"
-        height="40"
+        width="24"
+        height="24"
         class="logo"
         alt="Radicle logo"
         src="/radicle.svg" />
     </Link>
-    <div class="layout-desktop">
-      <Breadcrumbs />
-    </div>
+    <Breadcrumbs />
   </div>
 
-  <div class="right layout-desktop-flex">
+  <div class="right">
     {#if $httpdStore.state === "stopped"}
       <Popover popoverPositionTop="3rem" popoverPositionRight="0">
         <Button
@@ -90,7 +85,7 @@
           on:click={toggle}
           title={buttonTitle[$httpdStore.state]}
           size="large"
-          variant="secondary-toggle-off">
+          variant="naked-toggle-off">
           <IconSmall name="device" />
           Connect
         </Button>

diff --git a/src/App/Header/Authenticate.svelte b/src/App/Header/Authenticate.svelte
@@ -52,7 +52,7 @@
       let:toggle
       on:click={toggle}
       size="large"
-      variant="secondary-toggle-on">
+      variant="naked-toggle-on">
       <div class="peer-info">
         <div style:height="1.25rem" style:margin-right="0.5rem">
           <Avatar nodeId={$httpdStore.session.publicKey} />
@@ -84,7 +84,7 @@
       let:toggle
       on:click={toggle}
       size="large"
-      variant="secondary-toggle-off">
+      variant="naked-toggle-off">
       <IconSmall name="key" />
       Authenticate
     </Button>