From c6630a2c0be5b39b2c6057631fbc16764edc09d4 Mon Sep 17 00:00:00 2001 From: Foxster Date: Fri, 15 Dec 2023 19:52:23 -0800 Subject: [PATCH] Update UI --- common/modules/main.js | 4 +- common/style.css | 95 +++++++++++++++++--- index.css | 10 ++- index.html | 19 +++- index.js | 60 ++++++++++--- view/all-apps/all-apps.css | 2 +- view/all-apps/index.html | 6 +- view/app/app.css | 9 +- view/app/app.js | 35 ++++++-- view/app/index.html | 59 ++++++------ view/app/version-history/index.html | 6 +- view/app/version-history/version-history.css | 2 +- view/index.html | 24 +++-- view/news/index.html | 6 +- view/news/news.css | 4 +- view/view.js | 24 ++++- 16 files changed, 268 insertions(+), 97 deletions(-) diff --git a/common/modules/main.js b/common/modules/main.js index c7877a6..bee1c1a 100644 --- a/common/modules/main.js +++ b/common/modules/main.js @@ -37,12 +37,12 @@ export function main(callback, fallbackURL = "../../") { const tintColor = json.tintColor?.replaceAll("#", ""); if (tintColor) setTintColor(tintColor); - insertAltStoreBanner(json.name); + // insertAltStoreBanner(json.name); setApps(json.apps); // main(json); callback(json); - waitForAllImagesToLoad(); + // waitForAllImagesToLoad(); }) .catch(error => { alert(error); diff --git a/common/style.css b/common/style.css index 510c45e..0214396 100644 --- a/common/style.css +++ b/common/style.css @@ -107,13 +107,8 @@ body.loading { opacity: 0.35; } -/* h1#title { - padding-left: 1rem; -} */ - body { width: 100%; - padding-bottom: 20px; } @media screen and (min-device-width: 767px) { @@ -135,17 +130,12 @@ body { right: 0; } -#title { - margin-bottom: 0.25em; -} - #main>p:first-of-type { text-transform: uppercase; font-weight: 500; - font-size: 0.9em; + font-size: 0.8em; opacity: 0.5; padding-left: 1rem; - margin-top: 1rem; } /* Navigation bar */ @@ -159,13 +149,17 @@ body { background-color: var(--color-transparent); -webkit-backdrop-filter: saturate(100%) blur(30px); backdrop-filter: saturate(100%) blur(20px); - max-width: 414px; + max-width: 382px; min-width: 0; margin: 0 auto; - padding: 0.25em 0.75em; + padding: 0.25em 16px 0.25em 16px; z-index: 2; } +#nav-bar.hide-border { + border-bottom: none; +} + #nav-bar #title { display: flex; flex-direction: row; @@ -174,6 +168,7 @@ body { min-height: 2.5em; margin: 0; overflow: hidden; + transition: opacity 0.25s ease-in-out; } #nav-bar #title>p { @@ -204,11 +199,19 @@ body { margin-left: 6px; } +.nav-bar-buttons { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + /* Main */ #main { /* padding: 1em; */ - padding-top: 3.55rem; + padding-top: 3rem; + padding-bottom: 3rem; } .item { @@ -235,6 +238,7 @@ body { grid-auto-flow: column; overflow-x: scroll; padding: 1rem; + padding-bottom: 0; } #news-items.one { @@ -273,6 +277,10 @@ body { display: block; } +.section { + margin-top: 1rem; +} + /* App header */ #apps.section .item { @@ -430,6 +438,65 @@ a>button { color: var(--accent-color); } +.source { + display: flex; + margin: 0 1rem 0 1rem; + margin-top: 0.75rem; + padding: 1rem; + border-radius: 1.5rem; + gap: 0.8rem; + background-color: var(--app-tint-color); +} + +.source>img { + max-width: 42px; + border-radius: 256px; +} + +.source>.right { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + color: white; +} + +.source>.right>.text { + display: flex; + flex-direction: column; + justify-content: center; +} + +.source>.right>.text>.title { + font-weight: 600; + font-size: 1rem !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.source>.right>.text>.subtitle { + opacity: 0.5; + font-size: 0.85em; + white-space: break-spaces; +} + +.source>.right>.app-count { + display: block; + width: 1.5rem; + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + padding: 2px; + background-color: rgba(255, 255, 255, 0.25); + border-radius: 64px; + font-size: 0.85rem; + font-weight: 600; +} + + /* Badges */ .badge { diff --git a/index.css b/index.css index 9b137d8..4795ee7 100644 --- a/index.css +++ b/index.css @@ -6,11 +6,11 @@ MIT License. */ -#main { - padding-top: 2rem; +#nav-bar.hide-border { + border-bottom: none; } -#main #title { +#main h1 { margin-bottom: 0.35rem; padding: 0 1rem; } @@ -28,6 +28,10 @@ outline: none; } */ +.section a { + color: white; +} + .suggestion { padding: 1rem 1rem 1rem 0; margin-left: 1rem; diff --git a/index.html b/index.html index 8a1df1a..f1b68df 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,19 @@ AltSource Viewer +
+ +

AltSource Viewer

@@ -25,14 +38,14 @@
-

Discover

+

Featured

- +
diff --git a/index.js b/index.js index 0056a4d..3963a50 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ // import { urlSearchParams, sourceURL } from "./common/modules/constants.js"; -import { isValidHTTPURL, open } from "./common/modules/utilities.js"; +import { isValidHTTPURL, open, formatVersionDate } from "./common/modules/utilities.js"; // import sources from "./common/assets/sources.json" assert { type: "json" }; // Doesn't work in Safari // const { default: sources } = await import("./common/assets/sources.json", {assert: { type: "json" } }); // Broken on Safari 17.2 import { sources } from "./common/modules/constants.js"; @@ -22,7 +22,8 @@ import { sources } from "./common/modules/constants.js"; const sourceURL = textField.value; if (!isValidHTTPURL(sourceURL)) alert("Invalid HTTP URL."); - else open(`./view/?source=${sourceURL}`); + // else open(`./view/?source=${sourceURL}`); + else insertSource(sourceURL, "afterbegin", true); }; // If source provided @@ -55,16 +56,55 @@ import { sources } from "./common/modules/constants.js"; goButton.addEventListener("click", viewSource); - async function insertSource(url) { + async function insertSource(url, position = "beforeend", flag = false) { fetch(url).then(data => data.json()).then(source => { - document.getElementById("source-code").insertAdjacentHTML("beforebegin",` - -
- - ${source.name} + let lastUpdated = new Date("1970-01-01"); + let appCount = 0; + let altSourceIcon = "./common/assets/img/generic_app.jpeg"; + let altSourceTintColor = "var(--app-tint-color);"; + for (const app of source.apps) { + if (app.beta || app.patreon?.hidden) return; + let appVersionDate = new Date(app.versions ? app.versions[0].date : app.versionDate); + if (appVersionDate > lastUpdated) { + lastUpdated = appVersionDate; + altSourceIcon = app.iconURL; + altSourceTintColor = app.tintColor; + } + appCount++; + } + + document.getElementById("suggestions").insertAdjacentHTML(position ,` + +
+ source-icon +
+
+

${source.name}

+

Last updated: ${lastUpdated.toISOString().split("T")[0]}

- ` - ); +
+ ${appCount} +
+
+
+ + `); }); } + + window.onscroll = e => { + const title = document.querySelector("h1"); + const navBar = document.getElementById("nav-bar"); + const navBarTitle = navBar.querySelector("#title"); + + console.log(title.getBoundingClientRect().y); + + if (title.getBoundingClientRect().y < 20) { + navBar.classList.remove("hide-border"); + navBarTitle.classList.remove("hidden"); + } else { + navBar.classList.add("hide-border"); + navBarTitle.classList.add("hidden"); + } + } })(); \ No newline at end of file diff --git a/view/all-apps/all-apps.css b/view/all-apps/all-apps.css index 86c1c70..f883fff 100644 --- a/view/all-apps/all-apps.css +++ b/view/all-apps/all-apps.css @@ -7,7 +7,7 @@ */ #main { - padding-top: 7rem; + padding-top: 5rem; } #apps .app-container { diff --git a/view/all-apps/index.html b/view/all-apps/index.html index 7e4509d..c5ff393 100644 --- a/view/all-apps/index.html +++ b/view/all-apps/index.html @@ -15,11 +15,7 @@ - -
- loading -

Loading

-
+
diff --git a/view/app/app.css b/view/app/app.css index b1e8f55..32087e4 100644 --- a/view/app/app.css +++ b/view/app/app.css @@ -13,12 +13,10 @@ a { /* Main */ #main { - padding: unset; overflow: hidden; } #main .item { - margin-top: 30%; margin-bottom: 0; padding: 1em; } @@ -91,8 +89,7 @@ a { /* What's new */ #whats-new, -#permissions, -#source { +#permissions { padding: 1em; } @@ -207,6 +204,10 @@ a { padding-top: 0; } +#source .header { + margin: 1rem; +} + #source .row { display: flex; flex-direction: column; diff --git a/view/app/app.js b/view/app/app.js index 6e0d83e..2b0a525 100644 --- a/view/app/app.js +++ b/view/app/app.js @@ -31,12 +31,12 @@ const bundleId = urlSearchParams.get('id'); const title = document.getElementById("title"); const button = document.querySelector("#nav-bar .install"); - if (hidden && appName.getBoundingClientRect().y >= 72) { // App name not visible + if (hidden && appName.getBoundingClientRect().y >= 30) { // App name not visible hidden = false; title.classList.add("hidden"); button.classList.add("hidden"); button.disaled = true; - } else if (!hidden && appName.getBoundingClientRect().y < 72) { + } else if (!hidden && appName.getBoundingClientRect().y < 30) { hidden = true; title.classList.remove("hidden"); button.classList.remove("hidden"); @@ -219,10 +219,33 @@ main((json) => { // // Source info const source = document.getElementById("source"); - const sourceContainer = source.querySelector(".container"); - const sourceTitle = source.querySelector(".row-title"); - const sourceSubtitle = source.querySelector(".row-subtitle"); + const sourceA = source.querySelector("a"); + const sourceContainer = source.querySelector(".source"); + const sourceIcon = source.querySelector("img"); + const sourceTitle = source.querySelector(".title"); + const sourceSubtitle = source.querySelector(".subtitle"); + const sourceAppCount = source.querySelector(".app-count"); + + let lastUpdated = new Date("1970-01-01"); + let appCount = 0; + let altSourceIcon = "../../common/assets/img/generic_app.jpeg"; + let altSourceTintColor = "var(--app-tint-color);"; + for (const app of json.apps) { + if (app.beta || app.patreon?.hidden) return; + let appVersionDate = new Date(app.versions ? app.versions[0].date : app.versionDate); + if (appVersionDate > lastUpdated) { + lastUpdated = appVersionDate; + altSourceIcon = app.iconURL; + altSourceTintColor = app.tintColor; + } + appCount++; + } + + sourceA.href = `../../view/?source=${sourceURL}`; + sourceContainer.style.backgroundColor = `#${(json.tintColor ?? altSourceTintColor).replaceAll("#", "")}`; + sourceIcon.src = json.iconURL ?? altSourceIcon; sourceTitle.innerText = json.name; sourceContainer.href = `../?source=${sourceURL}`; - sourceSubtitle.innerText = json.description ?? "Tap to get started"; + sourceSubtitle.innerText = `Last updated: ${lastUpdated.toISOString().split("T")[0]}`; + sourceAppCount.innerText = appCount; }); diff --git a/view/app/index.html b/view/app/index.html index 3830b85..60b7b95 100644 --- a/view/app/index.html +++ b/view/app/index.html @@ -15,30 +15,26 @@ - -
- loading -

Loading

+ +
+ +
-
- - -
@@ -111,13 +107,20 @@

Discover More On

- -
-

-

+ +
+ source-icon +
+
+

Source

+

Last updated: unknown

+
+
+ 0 +
- - +
+
diff --git a/view/app/version-history/index.html b/view/app/version-history/index.html index 4de158a..a03ae0f 100644 --- a/view/app/version-history/index.html +++ b/view/app/version-history/index.html @@ -15,11 +15,7 @@ - -
- loading -

Loading

-
+
diff --git a/view/app/version-history/version-history.css b/view/app/version-history/version-history.css index 7062e88..03da1d2 100644 --- a/view/app/version-history/version-history.css +++ b/view/app/version-history/version-history.css @@ -7,7 +7,7 @@ */ #main { - padding-top: 8rem; + padding-top: 4rem; } a { diff --git a/view/index.html b/view/index.html index 7ae630e..b289ade 100644 --- a/view/index.html +++ b/view/index.html @@ -14,18 +14,28 @@ - -
- loading -

Loading

-
+ -
+
+ +

AltSource Viewer

altsource-v2

- EDIT + + +
diff --git a/view/news/index.html b/view/news/index.html index 9d358c7..6738b5c 100644 --- a/view/news/index.html +++ b/view/news/index.html @@ -15,11 +15,7 @@ - -
- loading -

Loading

-
+
diff --git a/view/news/news.css b/view/news/news.css index b59aa77..a6c63c3 100644 --- a/view/news/news.css +++ b/view/news/news.css @@ -7,7 +7,7 @@ */ #main { - padding-top: 8rem; + padding-top: 5.5rem; } #news { @@ -15,7 +15,7 @@ } .news-item-wrapper { - margin-bottom: 3em; + margin-bottom: 2.5em; } .news-item-wrapper:last-of-type { diff --git a/view/view.js b/view/view.js index be8402b..419c2f5 100644 --- a/view/view.js +++ b/view/view.js @@ -18,6 +18,11 @@ main(json => { open(`../?source=${sourceURL}`); }); + document.getElementById("add").addEventListener("click", e => { + if (confirm(`Add "${json.name}" to Altstore?`)) + open(`altstore://source?url=${sourceURL}`); + }); + // Set "View All News" link document.querySelector("#news a").href = `./news/?source=${sourceURL}`; // Set "View All Apps" link @@ -26,7 +31,8 @@ main(json => { // Set tab title document.title = json.name; // Set page title - document.getElementById("title").innerText = json.name; + document.querySelector("h1").innerText = json.name; + document.querySelector("#nav-bar #title>p").innerText = json.name; // // News @@ -72,4 +78,20 @@ main(json => {
`); else document.getElementById("about").remove(); + + window.onscroll = e => { + const title = document.querySelector("h1"); + const navBar = document.getElementById("nav-bar"); + const navBarTitle = navBar.querySelector("#title"); + + console.log(title.getBoundingClientRect().y); + + if (title.getBoundingClientRect().y < 20) { + navBar.classList.remove("hide-border"); + navBarTitle.classList.remove("hidden"); + } else { + navBar.classList.add("hide-border"); + navBarTitle.classList.add("hidden"); + } + } }, "../"); \ No newline at end of file