Touch up remote project states

sillsdev · Jan 9, 2025 · 5673ee5 · 5673ee5
1 parent fd836d5
commit 5673ee5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/frontend/viewer/src/HomeView.svelte b/frontend/viewer/src/HomeView.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts">
   import {
     mdiBookArrowDownOutline,
     mdiBookArrowLeftOutline,
@@ -154,7 +154,7 @@
     </Button>
   </div>
 </AppBar>
-<div class="contents md:flex md:flex-col md:w-3/4 lg:w-2/4 md:mx-auto md:py-4 md:min-h-full">
+<div class="mx-auto md:w-3/4 lg:w-2/4 md:py-4">
   <div class="flex-grow hidden md:block"></div>
   <div class="project-list">
     {#await projectsPromise}
@@ -196,18 +196,20 @@
           {@const server = status.server}
           {@const serverProjects = remoteProjects[server.authority]?.filter(p => p.crdt) ?? []}
           <div>
-            <div class="flex flex-row items-center mr-2 mb-2">
-              <p class="sub-title">{server.displayName} Server</p>
+            <div class="flex flex-row mb-2 items-end mr-2 md:mr-0">
+              <p class="sub-title !my-0">{server.displayName} Server</p>
               <div class="flex-grow"></div>
-              <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
+              {#if status.loggedIn}
+                <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
+              {/if}
             </div>
             <div>
               {#if !serverProjects.length}
-                <p class="pl-2 text-surface-content/50 text-center">
+                <p class="text-surface-content/50 text-center border border-surface-300 elevation-1 rounded p-4 max-sm:mx-2">
                   {#if status.loggedIn}
                     No projects
                   {:else}
-                    Login to see projects
+                    <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
                   {/if}
                 </p>
               {/if}

diff --git a/frontend/viewer/src/lib/auth/LoginButton.svelte b/frontend/viewer/src/lib/auth/LoginButton.svelte
@@ -66,15 +66,15 @@
                 color="primary"
                 on:click={() => login(server)}
                 icon={mdiLogin}>
-            Login
+            Login to see projects
         </Button>
     {:else}
         <Button {loading}
                 variant="fill-light"
                 color="primary"
                 href="/api/auth/login/{server.id}"
                 icon={mdiLogin}>
-            Login
+              Login to see projects
         </Button>
     {/if}
 {/if}