Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: add ios app webview dynamic type support #677

Merged
merged 4 commits into from
Jul 17, 2024
Merged

feat: add ios app webview dynamic type support #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
633b7a2
feat: add ios app webview dynamic type support
ACTCD Jul 15, 2024
eacf635
feat: add footer links and improve phrase
ACTCD Jul 16, 2024
fee7589
refactor: completely re-layout the entire page
ACTCD Jul 16, 2024
3e747b0
fix: correct the strings of the links
ACTCD Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 72 additions & 57 deletions src/app/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import icon from "./img/icon.png";
import logo from "./img/logo.svg?raw";

const baseUrl = "https://github.com/quoid/userscripts";

let version = "v0.0.0";
let build = "(0)";
let directory = "init";
Expand All @@ -27,122 +29,135 @@
</script>

<main>
<img class="icon" src={icon} alt="Userscripts App Icon" draggable="false" />
<div class="logo">
<div class="section icons">
<img class="icon" src={icon} alt="Userscripts App Icon" draggable="false" />
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html logo}
<span>
<div class="logo">{@html logo}</div>
<div class="version">
{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
<a
href="https://github.com/quoid/userscripts/releases/tag/{import.meta
.env.GIT_TAG}"
>
<a href="{baseUrl}/releases/tag/{import.meta.env.GIT_TAG}">
{import.meta.env.GIT_TAG}
</a>
(<a
href="https://github.com/quoid/userscripts/commit/{import.meta.env
.GIT_COMMIT}"
>
(<a href="{baseUrl}/commit/{import.meta.env.GIT_COMMIT}">
{import.meta.env.GIT_COMMIT.slice(0, 7)}
</a>)
{:else}
<span>{version}</span>
<span>{build}</span>
{/if}
</span>
</div>
</div>
<div class="section guide">
<p>
You can turn on the Userscripts iOS Safari extension in Settings or
Safari, then use the extension in Safari. Please refer to the "Usage"
section in the
<a
href="{baseUrl}/blob/{import.meta.env.GIT_TAG ??
'main'}/README.md#usage">README of this version</a
>.
</p>
</div>
<div class="section action">
<button id="changedir" on:click={changeDirectory}>
Change Userscripts Directory
</button>
<div class="current">CURRENT DIRECTORY:</div>
<button id="directory" class="link" on:click={openDirectory}>
{directory}
</button>
</div>
<p>
You can turn on the Userscripts iOS Safari extension in Settings.
<a
href="https://github.com/quoid/userscripts/blob/{import.meta.env
.GIT_TAG ?? 'main'}/README.md"
>
Read the docs.
</a>
</p>
<button id="change-directory" on:click={changeDirectory}>
Change Userscripts Directory
</button>
<div class="current">CURRENT DIRECTORY:</div>
<div id="directory">
<button class="link" on:click={openDirectory}>{directory}</button>
<div class="section footer">
<div class="links">
<a href="{baseUrl}/blob/{import.meta.env.GIT_TAG ?? 'main'}/README.md"
>Documentation</a
>
<a href="{baseUrl}/discussions">Discussions</a>
<a href="{baseUrl}/issues">Report an Issue</a>
<a href="{baseUrl}#privacy-policy">Privacy Policy</a>
</div>
</div>
</main>

<style>
main {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
padding: 0 1rem;
place-items: center;
place-content: center;
gap: min(2rem, 32px);
min-height: 100svh;
min-height: -webkit-fill-available;
padding: 16px;
text-align: center;
-webkit-touch-callout: none;
user-select: none;
}

a {
color: var(--color-blue);
.section {
display: flex;
place-items: center;
flex-direction: column;
gap: min(0.5rem, 16px);
}

.icon {
height: 8rem;
width: 8rem;
.section.icons,
.section.footer {
flex: 1;
place-content: flex-end;
}

.logo {
align-items: flex-end;
.section.footer .links {
display: flex;
margin: 1rem 0;
flex-flow: row wrap;
place-content: center;
gap: min(0.5rem, 16px);
}

.logo :global(svg) {
height: 1.5rem;
a {
color: var(--color-blue);
}

.logo > span {
text-align: left;
min-width: 3.5rem;
margin-left: 0.5rem;
.icon {
height: min(8rem, 256px);
width: min(8rem, 256px);
}

.logo span,
.logo :global(svg) {
display: flex;
height: min(1.5rem, 32px);
}

.links,
.version,
.current {
color: var(--text-color-disabled);
font: var(--text-small);
font-weight: bold;
letter-spacing: var(--letter-spacing-small);
}

button#change-directory {
button#changedir {
background-color: var(--color-blue);
border: none;
border-radius: var(--border-radius);
color: var(--color-bg-secondary);
font: var(--text-default);
font-weight: 500;
letter-spacing: var(--letter-spacing-default);
margin: 2rem 0 1rem;
padding: 0.5rem 1rem;
}

button#change-directory:active {
button#changedir:active {
background-color: #6296c7;
}

#directory {
button#directory {
color: var(--editor-default);
font-family: var(--editor-font);
font-size: 0.875rem;
font-weight: 400;
word-break: break-all;
min-height: 7rem;
max-height: 10rem;
}

#directory button {
color: inherit;
text-decoration: none;
}
</style>
30 changes: 30 additions & 0 deletions src/app/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,36 @@ body {
-webkit-font-smoothing: antialiased;
}

/* ios */
@supports (-webkit-touch-callout: none) {
html {
height: auto;
overflow: visible;
overscroll-behavior: none;
}

/**
* Dynamic Type
* https://support.apple.com/102453
* https://webkit.org/blog/3709/using-the-system-font-in-web-content/
* https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
* https://github.com/w3c/csswg-drafts/issues/3708
*/
@supports (font: -apple-system-body) {
html {
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font: -apple-system-body; /* default 17px */
}
}

/* Avoid page zoom */
input,
textarea,
select {
font-size: max(1rem, 16px);
}
}

@media screen and (height <= 400px) {
html {
font-size: 80%;
Expand Down
2 changes: 1 addition & 1 deletion xcode/App-Shared/ViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHan
logger?.debug("\(#function, privacy: .public) - DEBUG mode: isInspectable = true")
#endif
view = webView
self.webView.scrollView.isScrollEnabled = false
// self.webView.scrollView.isScrollEnabled = false
self.webView.isOpaque = false
let backgroundColor = UIColor.init(red: (47/255.0), green: (51/255.0), blue: (55/255.0), alpha: 1.0)
view.setValue(backgroundColor, forKey: "backgroundColor")
Expand Down
Loading