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">
<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

@ -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"

@ -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>

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

@ -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"

@ -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)' },
},
},

Loading…
Cancel
Save