diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 2c3f7f6..8bbb45c 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -116,7 +116,7 @@ color: white; border-radius: var(--pg-border-radius-sm); text-decoration: none; - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); font-size: var(--pg-font-size-sm); transition: opacity 0.2s ease; white-space: nowrap; diff --git a/src/lib/components/fallback/EmailView.svelte b/src/lib/components/fallback/EmailView.svelte index d21ad1e..3b7a699 100644 --- a/src/lib/components/fallback/EmailView.svelte +++ b/src/lib/components/fallback/EmailView.svelte @@ -1,5 +1,6 @@ {#if parsed} @@ -69,11 +108,7 @@
- +
{#if parsed.attachments && parsed.attachments.length > 0} diff --git a/src/lib/components/fallback/ListView.svelte b/src/lib/components/fallback/ListView.svelte index 7f8ad24..60fb01a 100644 --- a/src/lib/components/fallback/ListView.svelte +++ b/src/lib/components/fallback/ListView.svelte @@ -75,17 +75,23 @@ gap: 0.15rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--pg-input-normal); - border-left: 3px solid transparent; text-align: left; - transition: background 0.15s ease; + transition: + background 0.15s ease, + color 0.15s ease; &:hover { background: var(--pg-soft-background); } &.selected { - background: var(--pg-general-background); - border-left-color: var(--pg-primary); + background: var(--pg-primary); + color: white; + + .email-sender, + .email-date { + color: rgba(255, 255, 255, 0.85); + } } &:focus-visible { diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json index f2d296c..2df57fd 100644 --- a/src/lib/locales/en.json +++ b/src/lib/locales/en.json @@ -98,6 +98,8 @@ "privacy": "Your emails are stored only in your browser. Clear them anytime in settings." }, "drop": "Drop the \"postguard.encrypted\" attachment here", + "upload": "Upload \"postguard.encrypted\"", + "back": "Back to inbox", "search": "Search decrypted mails...", "decrypt": { "helper": "Decrypt this mail by showing who you are with Yivi", diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json index 4bc3bce..173f5be 100644 --- a/src/lib/locales/nl.json +++ b/src/lib/locales/nl.json @@ -98,6 +98,8 @@ "privacy": "Je e-mails worden alleen in je browser opgeslagen. Verwijder ze op elk moment via instellingen." }, "drop": "Selecteer \"postguard.encrypted\" attachment hier", + "upload": "Upload \"postguard.encrypted\"", + "back": "Terug naar inbox", "search": "Zoek in ontsleutelde mails...", "decrypt": { "helper": "Ontsleutel deze email door te laten zien wie je bent met Yivi", diff --git a/src/routes/(app)/decrypt/+page.svelte b/src/routes/(app)/decrypt/+page.svelte index 5383b80..e6fe4ec 100644 --- a/src/routes/(app)/decrypt/+page.svelte +++ b/src/routes/(app)/decrypt/+page.svelte @@ -47,6 +47,15 @@ currRight = RIGHTMODES.Decrypt } + function backToList() { + // On mobile the list and reader are stacked single-screen flows; + // resetting both selection and hashMode collapses currRight back to + // Nothing via the effect above, which hides the reader panel. + currSelected.set(-1) + hashMode = false + currRight = RIGHTMODES.Nothing + } + function fromUrlSafeBase64(urlSafe) { let base64 = urlSafe.replace(/-/g, '+').replace(/_/g, '/') const pad = base64.length % 4 @@ -129,7 +138,10 @@ {$_('fallback.extensionPrompt')} {$_('fallback.extensionLink')} -
+
{#if !hashMode} {/if} @@ -180,6 +197,12 @@
+ {#if currRight !== RIGHTMODES.Nothing} + + {/if} {#if currRight === RIGHTMODES.MailView} {:else if currRight === RIGHTMODES.Nothing} @@ -242,7 +265,7 @@ a { color: var(--pg-primary); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); text-decoration: none; &:hover { @@ -294,6 +317,14 @@ } } + .upload-text-mobile { + display: none; + } + + .mobile-back { + display: none; + } + .search-bar { display: flex; align-items: center; @@ -377,7 +408,7 @@ h2 { font-size: var(--pg-font-size-lg); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); margin: 0 0 0.75rem; } @@ -411,22 +442,96 @@ @media only screen and (max-width: 768px) { .fallback-page { - height: auto; - min-height: calc(100vh - 52px); + height: calc(100vh - 52px); + min-height: 0; + padding: 0; + } + + .extension-banner { + display: none; + } + + .upload-area { + flex: 0 0 auto; + flex-direction: row; + padding: 0.75rem 1rem; + margin: 0.75rem 1rem; + border-style: solid; + border-color: var(--pg-primary); + background: var(--pg-primary); + color: white; + order: 3; + + &:hover { + color: white; + opacity: 0.9; + } + } + + .upload-text-desktop { + display: none; + } + + .upload-text-mobile { + display: inline; + } + + .search-bar { + order: 1; + padding-top: 0.75rem; + flex: 0 0 auto; + } + + .email-list-area { + order: 2; + flex: 1 1 0; + min-height: 0; } .fallback-container { flex-direction: column; - height: auto; + height: 100%; + gap: 0; + flex: 1; + min-height: 0; } .left-panel { - flex: none; - max-height: 40vh; + flex: 1 1 0; + min-height: 0; + max-height: none; + border: none; + border-radius: 0; } .right-panel { - min-height: 50vh; + min-height: 0; + border: none; + border-radius: 0; + flex: 1 1 0; + } + + // Single-screen flow: list view OR reader view, never both. + .fallback-container.mobile-reading .left-panel { + display: none; + } + + .fallback-container:not(.mobile-reading) .right-panel { + display: none; + } + + .mobile-back { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.4rem; + padding: 0.75rem 1rem; + font-size: var(--pg-font-size-sm); + font-weight: var(--pg-font-weight-medium); + color: var(--pg-primary); + border-bottom: 1px solid var(--pg-input-normal); + flex-shrink: 0; } } diff --git a/src/routes/(marketing)/+layout.svelte b/src/routes/(marketing)/+layout.svelte index d2ee0e5..0d74cf7 100644 --- a/src/routes/(marketing)/+layout.svelte +++ b/src/routes/(marketing)/+layout.svelte @@ -120,7 +120,7 @@ padding: 0.5rem 1rem; background: var(--pg-primary); color: var(--pg-on-primary); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); text-decoration: none; z-index: 1000; transform: translateY(-200%); @@ -156,7 +156,7 @@ .footer-col { h4 { font-size: var(--pg-font-size-sm); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); color: var(--pg-text); margin: 0 0 0.75rem; } @@ -193,7 +193,7 @@ a { color: var(--pg-text-secondary); text-decoration: none; - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); &:hover { color: var(--pg-primary); diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte index c15f615..d248639 100644 --- a/src/routes/(marketing)/+page.svelte +++ b/src/routes/(marketing)/+page.svelte @@ -246,7 +246,7 @@ border: 2px solid var(--pg-primary); border-radius: var(--pg-border-radius-sm); text-decoration: none; - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); font-size: var(--pg-font-size-base); transition: opacity 0.2s ease; @@ -262,7 +262,7 @@ color: var(--pg-primary); border-radius: var(--pg-border-radius-sm); text-decoration: none; - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); font-size: var(--pg-font-size-base); transition: background 0.2s ease; @@ -365,7 +365,7 @@ .limit-suffix { font-size: var(--pg-font-size-base); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); color: var(--pg-text); margin-bottom: 1rem; } @@ -421,7 +421,7 @@ h3 { margin: 0 0 0.75rem; font-size: var(--pg-font-size-base); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); } p { @@ -470,7 +470,7 @@ h3 { margin: 0 0 0.75rem; font-size: var(--pg-font-size-base); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); } p { @@ -483,7 +483,7 @@ .coming-soon-heading { font-size: var(--pg-font-size-base); - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); color: var(--pg-primary); margin-bottom: 1.5rem; } @@ -495,7 +495,7 @@ color: var(--pg-general-background); border-radius: var(--pg-border-radius-sm); text-decoration: none; - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); font-size: var(--pg-font-size-base); transition: opacity 0.2s ease; diff --git a/src/routes/(marketing)/addons/+page.svelte b/src/routes/(marketing)/addons/+page.svelte index 6a1ef41..e44f7c1 100644 --- a/src/routes/(marketing)/addons/+page.svelte +++ b/src/routes/(marketing)/addons/+page.svelte @@ -181,12 +181,13 @@ } .callout { - border-left: 4px solid #c9941b; background: #fff7e0; + border: 1px solid #e8d28f; padding: 0.75rem 1rem; margin: 0.75rem 0 1rem; border-radius: 4px; font-size: 0.95em; line-height: 1.4; + color: #5a3f00; } diff --git a/src/routes/(marketing)/blog/[slug]/+page.svelte b/src/routes/(marketing)/blog/[slug]/+page.svelte index f8ed0ec..169f3cf 100644 --- a/src/routes/(marketing)/blog/[slug]/+page.svelte +++ b/src/routes/(marketing)/blog/[slug]/+page.svelte @@ -153,7 +153,7 @@ } .author-name { - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); font-size: var(--pg-font-size-sm); a { @@ -198,7 +198,7 @@ } .blog-post :global(strong) { - font-weight: var(--pg-font-weight-semibold); + font-weight: var(--pg-font-weight-medium); } .blog-post :global(ol),