From 8685ec30273cd5f299660dcc3456d3eaf7cc99e1 Mon Sep 17 00:00:00 2001
From: Laurin Weger <Laurin-W@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:02:41 +0200
Subject: [PATCH] better responsiveness and design of wallet is ready screen
---
ng-app/src/lib/FullLayout.svelte | 28 ++++++++++++---------
ng-app/src/lib/Home.svelte | 4 +--
ng-app/src/lib/Login.svelte | 25 +++++++++++--------
ng-app/src/routes/User.svelte | 1 +
ng-app/src/routes/WalletCreate.svelte | 36 ++++++++++++++++-----------
ng-app/tailwind.config.cjs | 8 ++++++
6 files changed, 63 insertions(+), 39 deletions(-)
diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte
index 9bc4e00..6ccd37e 100644
--- a/ng-app/src/lib/FullLayout.svelte
+++ b/ng-app/src/lib/FullLayout.svelte
@@ -91,15 +91,15 @@
<div class="full-layout">
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
<SidebarWrapper
- divClass="bg-gray-60 overflow-y-auto tall:py-4 px-3 rounded dark:bg-gray-800"
+ divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800"
>
- <SidebarGroup ulClass="space-y-1 tall:space-y-2">
+ <SidebarGroup ulClass="space-y-1 tall-xs:space-y-2">
<SidebarItem label="NextGraph" href="#/user" class="mt-1">
<svelte:fragment slot="icon">
{#if $online}
- <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
+ <Logo class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
{:else}
- <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
+ <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
{/if}
</svelte:fragment>
</SidebarItem>
@@ -107,7 +107,7 @@
label="Home"
href="#/"
on:click={scrollToTop}
- class="py-1 tall:p-2"
+ class="py-1 tall-xs:p-2"
>
<svelte:fragment slot="icon">
<Home
@@ -116,7 +116,7 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Stream" href="#/stream" class="py-1 tall:p-2">
+ <SidebarItem label="Stream" href="#/stream" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<Bolt
tabindex="-1"
@@ -124,7 +124,7 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Search" href="#/search" class="py-1 tall:p-2">
+ <SidebarItem label="Search" href="#/search" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<MagnifyingGlass
tabindex="-1"
@@ -132,7 +132,7 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Create" href="#/create" class="py-1 tall:p-2">
+ <SidebarItem label="Create" href="#/create" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<PlusCircle
tabindex="-1"
@@ -140,7 +140,7 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Shared" href="#/shared" class="py-1 tall:p-2">
+ <SidebarItem label="Shared" href="#/shared" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<Users
tabindex="-1"
@@ -148,7 +148,7 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Site" href="#/site" class="py-1 tall:p-2">
+ <SidebarItem label="Site" href="#/site" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<User
tabindex="-1"
@@ -156,7 +156,11 @@
/>
</svelte:fragment>
</SidebarItem>
- <SidebarItem label="Messages" href="#/messages" class="py-1 tall:p-2">
+ <SidebarItem
+ label="Messages"
+ href="#/messages"
+ class="py-1 tall-xs:p-2"
+ >
<svelte:fragment slot="icon">
<PaperAirplane
tabindex="-1"
@@ -172,7 +176,7 @@
<SidebarItem
label="Notifications"
href="#/notifications"
- class="mt-1 py-1 tall:p-2"
+ class="mt-1 py-1 tall-xs:p-2"
>
<svelte:fragment slot="icon">
<Bell
diff --git a/ng-app/src/lib/Home.svelte b/ng-app/src/lib/Home.svelte
index 0c4c4c0..de364bd 100644
--- a/ng-app/src/lib/Home.svelte
+++ b/ng-app/src/lib/Home.svelte
@@ -44,9 +44,9 @@
>
<a href="#/user" class="flex items-center" on:click>
{#if $online}
- <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
+ <Logo class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
{:else}
- <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
+ <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
{/if}
<span
class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index 9f859cb..9e77f66 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -312,14 +312,11 @@
</script>
<div
- class="flex flex-col justify-center h-screen p-4"
- class:min-w-[310px]={mobile}
- class:min-w-[500px]={!mobile}
- class:max-w-[370px]={mobile}
- class:max-w-[600px]={!mobile}
+ class="flex flex-col justify-center md:max-w-2xl p-4 sm:px-8"
+ class:h-screen={step !== "load"}
>
{#if step == "load"}
- <div class="flex flex-col justify-center p-4">
+ <div class="flex flex-col justify-center p-4 pt-6">
<h2 class="pb-5 text-xl self-start">How to open your wallet:</h2>
<h3 class="pb-2 text-lg self-start">By your Pazzle</h3>
<ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
@@ -446,7 +443,13 @@
</div>
<!-- The following steps have navigation buttons and fixed layout -->
{:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
- <div class="flex flex-col justify-center h-screen p-4">
+ <div
+ class="flex flex-col justify-center h-screen p-4"
+ class:min-w-[310px]={mobile}
+ class:min-w-[500px]={!mobile}
+ class:max-w-[370px]={mobile}
+ class:max-w-[600px]={!mobile}
+ >
<div class="mt-auto flex flex-col justify-center">
<!-- Unlock Screens -->
@@ -591,18 +594,18 @@
<div class="flex justify-between mt-auto">
<button
on:click={cancel}
- class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+ class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
><XCircle
tabindex="-1"
- class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+ class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
<button
- class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+ class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={go_back}
><Backspace
tabindex="-1"
- class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+ class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Go Back</button
>
</div>
diff --git a/ng-app/src/routes/User.svelte b/ng-app/src/routes/User.svelte
index 7e3bb87..5eee826 100644
--- a/ng-app/src/routes/User.svelte
+++ b/ng-app/src/routes/User.svelte
@@ -10,6 +10,7 @@
-->
<!--
+ @component
"User Panel" page.
Provides wallet download, logout, offline/online switch, and other user actions.
-->
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 87ca62d..2373c9b 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -1676,17 +1676,15 @@
>
{#each pazzle_emojis as emoji, index}
<div
- class="flex items-center w-full py-1 px-2"
+ class="flex w-full p-1 tall-sm:p-2"
class:border-b={index !== pazzle_emojis.length - 1}
class:justify-center={!small_screen}
>
- <div class="w-[10em] font-bold text-left">
- <span>{index + 1}</span>: <span>{emoji.cat}</span>
+ <div class="mr-4 content-center pt-1">
+ {index + 1}
</div>
<div
- class="flex justify-center items-center"
- class:w-[3em]={!small_screen}
- class:w-[1.8em]={small_screen}
+ class="flex justify-center w-[2em] tall-sm:w-[2.5em] tall-md:w-[4em]"
title={emoji.code}
>
<svelte:component
@@ -1694,8 +1692,13 @@
class="text-5xl"
/>
</div>
- <div class="ml-2 w-[6em] font-bold text-left">
- {emoji.code}
+ <div class="flex flex-col ml-4">
+ <div class="w-[10em] text-left">
+ <span>{emoji.cat}</span>
+ </div>
+ <div class="font-bold text-lg h-full content-center">
+ <span>{emoji.code}</span>
+ </div>
</div>
</div>
{/each}
@@ -1717,16 +1720,18 @@
The pazzle is easier to remember. The mnemonic is useful in some special
cases. We recommend that you use the pazzle.
- <em class="font-bold">Copy both on a piece of paper.</em> You
- should try to memorize the pazzle. Once you did, you won't need
+ <span class="font-bold text-xl"
+ >Copy both on a piece of paper.</span
+ >
+ You should try to memorize the pazzle. Once you did, you won't need
the paper anymore.
<br /><br />
Now click on "Continue to Login" and select your new wallet.
<br />
- It is important that you <em class="font-bold">login</em> with
+ It is important that you <span class="font-bold">login</span> with
this wallet
- <em class="font-bold">at least once</em>
+ <span class="font-bold">at least once</span>
from this {#if tauri_platform}device{:else}browser tab{/if},<br />
while connected to the internet, so your personal site can be created
on your broker.<br /><br />
@@ -1760,8 +1765,11 @@
bind:open={confirm_modal_open}
title="Did you write down your login credentials?"
>
- The pazzle and the mnemonic will not be shown to you again.
- Please make sure, you have written it down.
+ <span class="text-lg text-neutral-950">
+ The pazzle and the mnemonic <span class="font-bold">
+ will not be shown to you again</span
+ >. Please make sure, you have written it down.
+ </span>
<div>
<button
class="m-2"
diff --git a/ng-app/tailwind.config.cjs b/ng-app/tailwind.config.cjs
index 4e8c1be..78ec4b0 100644
--- a/ng-app/tailwind.config.cjs
+++ b/ng-app/tailwind.config.cjs
@@ -16,7 +16,15 @@ const config = {
'xxs': '400px',
'xs': '500px',
...defaultTheme.screens,
+
'tall': { 'raw': '(min-height: 450px)' },
+ 'tall-xxs': { 'raw': '(min-height: 360px)' },
+ 'tall-xs': { 'raw': '(min-height: 480px)' },
+ 'tall-sm': { 'raw': '(min-height: 640px)' },
+ 'tall-md': { 'raw': '(min-height: 800px)' },
+ 'tall-l': { 'raw': '(min-height: 1000px)' },
+ 'tall-xl': { 'raw': '(min-height: 1200px)' },
+ 'tall-xxl': { 'raw': '(min-height: 1400px)' },
},
},