better responsiveness and design of wallet is ready screen

pull/26/head
Laurin Weger 6 months ago
parent 9a299d316b
commit 9a4d0d8c49
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
  1. 28
      ng-app/src/lib/FullLayout.svelte
  2. 4
      ng-app/src/lib/Home.svelte
  3. 25
      ng-app/src/lib/Login.svelte
  4. 1
      ng-app/src/routes/User.svelte
  5. 36
      ng-app/src/routes/WalletCreate.svelte
  6. 8
      ng-app/tailwind.config.cjs

@ -91,15 +91,15 @@
<div class="full-layout"> <div class="full-layout">
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed"> <Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
<SidebarWrapper <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"> <SidebarItem label="NextGraph" href="#/user" class="mt-1">
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
{#if $online} {#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} {: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} {/if}
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -107,7 +107,7 @@
label="Home" label="Home"
href="#/" href="#/"
on:click={scrollToTop} on:click={scrollToTop}
class="py-1 tall:p-2" class="py-1 tall-xs:p-2"
> >
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Home <Home
@ -116,7 +116,7 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<Bolt <Bolt
tabindex="-1" tabindex="-1"
@ -124,7 +124,7 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<MagnifyingGlass <MagnifyingGlass
tabindex="-1" tabindex="-1"
@ -132,7 +132,7 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<PlusCircle <PlusCircle
tabindex="-1" tabindex="-1"
@ -140,7 +140,7 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<Users <Users
tabindex="-1" tabindex="-1"
@ -148,7 +148,7 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<User <User
tabindex="-1" tabindex="-1"
@ -156,7 +156,11 @@
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </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"> <svelte:fragment slot="icon">
<PaperAirplane <PaperAirplane
tabindex="-1" tabindex="-1"
@ -172,7 +176,7 @@
<SidebarItem <SidebarItem
label="Notifications" label="Notifications"
href="#/notifications" href="#/notifications"
class="mt-1 py-1 tall:p-2" class="mt-1 py-1 tall-xs:p-2"
> >
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Bell <Bell

@ -44,9 +44,9 @@
> >
<a href="#/user" class="flex items-center" on:click> <a href="#/user" class="flex items-center" on:click>
{#if $online} {#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} {: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} {/if}
<span <span
class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap" class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"

@ -312,14 +312,11 @@
</script> </script>
<div <div
class="flex flex-col justify-center h-screen p-4" class="flex flex-col justify-center md:max-w-2xl p-4 sm:px-8"
class:min-w-[310px]={mobile} class:h-screen={step !== "load"}
class:min-w-[500px]={!mobile}
class:max-w-[370px]={mobile}
class:max-w-[600px]={!mobile}
> >
{#if 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> <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> <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"> <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
@ -446,7 +443,13 @@
</div> </div>
<!-- The following steps have navigation buttons and fixed layout --> <!-- The following steps have navigation buttons and fixed layout -->
{:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"} {: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"> <div class="mt-auto flex flex-col justify-center">
<!-- Unlock Screens --> <!-- Unlock Screens -->
@ -591,18 +594,18 @@
<div class="flex justify-between mt-auto"> <div class="flex justify-between mt-auto">
<button <button
on:click={cancel} 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 ><XCircle
tabindex="-1" 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 />Cancel</button
> >
<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} on:click={go_back}
><Backspace ><Backspace
tabindex="-1" 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 />Go Back</button
> >
</div> </div>

@ -10,6 +10,7 @@
--> -->
<!-- <!--
@component
"User Panel" page. "User Panel" page.
Provides wallet download, logout, offline/online switch, and other user actions. Provides wallet download, logout, offline/online switch, and other user actions.
--> -->

@ -1676,17 +1676,15 @@
> >
{#each pazzle_emojis as emoji, index} {#each pazzle_emojis as emoji, index}
<div <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:border-b={index !== pazzle_emojis.length - 1}
class:justify-center={!small_screen} class:justify-center={!small_screen}
> >
<div class="w-[10em] font-bold text-left"> <div class="mr-4 content-center pt-1">
<span>{index + 1}</span>: <span>{emoji.cat}</span> {index + 1}
</div> </div>
<div <div
class="flex justify-center items-center" class="flex justify-center w-[2em] tall-sm:w-[2.5em] tall-md:w-[4em]"
class:w-[3em]={!small_screen}
class:w-[1.8em]={small_screen}
title={emoji.code} title={emoji.code}
> >
<svelte:component <svelte:component
@ -1694,8 +1692,13 @@
class="text-5xl" class="text-5xl"
/> />
</div> </div>
<div class="ml-2 w-[6em] font-bold text-left"> <div class="flex flex-col ml-4">
{emoji.code} <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>
</div> </div>
{/each} {/each}
@ -1717,16 +1720,18 @@
The pazzle is easier to remember. The mnemonic is useful in some special The pazzle is easier to remember. The mnemonic is useful in some special
cases. We recommend that you use the pazzle. cases. We recommend that you use the pazzle.
<em class="font-bold">Copy both on a piece of paper.</em> You <span class="font-bold text-xl"
should try to memorize the pazzle. Once you did, you won't need >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. the paper anymore.
<br /><br /> <br /><br />
Now click on "Continue to Login" and select your new wallet. Now click on "Continue to Login" and select your new wallet.
<br /> <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 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 /> from this {#if tauri_platform}device{:else}browser tab{/if},<br />
while connected to the internet, so your personal site can be created while connected to the internet, so your personal site can be created
on your broker.<br /><br /> on your broker.<br /><br />
@ -1760,8 +1765,11 @@
bind:open={confirm_modal_open} bind:open={confirm_modal_open}
title="Did you write down your login credentials?" title="Did you write down your login credentials?"
> >
The pazzle and the mnemonic will not be shown to you again. <span class="text-lg text-neutral-950">
Please make sure, you have written it down. 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> <div>
<button <button
class="m-2" class="m-2"

@ -16,7 +16,15 @@ const config = {
'xxs': '400px', 'xxs': '400px',
'xs': '500px', 'xs': '500px',
...defaultTheme.screens, ...defaultTheme.screens,
'tall': { 'raw': '(min-height: 450px)' }, '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)' },
}, },
}, },

Loading…
Cancel
Save