drifty/driftywinds.github.io
1
0
Fork 0
mirror of https://github.com/driftywinds/driftywinds.github.io.git synced 2025-12-19 11:03:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update UI

Browse Source
This commit is contained in:
Foxster
2023-12-15 19:52:23 -08:00
parent e0116394d4
commit c6630a2c0b
16 changed files with 268 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/modules/main.js
View File

@@ -37,12 +37,12 @@ export function main(callback, fallbackURL = "../../") {
const tintColor = json.tintColor?.replaceAll("#", ""); const tintColor = json.tintColor?.replaceAll("#", "");
if (tintColor) setTintColor(tintColor); if (tintColor) setTintColor(tintColor);
insertAltStoreBanner(json.name); // insertAltStoreBanner(json.name);
setApps(json.apps); setApps(json.apps);
// main(json); // main(json);
callback(json); callback(json);
waitForAllImagesToLoad(); // waitForAllImagesToLoad();
}) })
.catch(error => { .catch(error => {
alert(error); alert(error);

95
common/style.css
View File

@@ -107,13 +107,8 @@ body.loading {
opacity: 0.35; opacity: 0.35;
} }
/* h1#title {
padding-left: 1rem;
} */
body { body {
width: 100%; width: 100%;
padding-bottom: 20px;
} }
@media screen and (min-device-width: 767px) { @media screen and (min-device-width: 767px) {
@@ -135,17 +130,12 @@ body {
right: 0; right: 0;
} }
#title {
margin-bottom: 0.25em;
}
#main>p:first-of-type { #main>p:first-of-type {
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
font-size: 0.9em; font-size: 0.8em;
opacity: 0.5; opacity: 0.5;
padding-left: 1rem; padding-left: 1rem;
margin-top: 1rem;
} }
/* Navigation bar */ /* Navigation bar */
@@ -159,13 +149,17 @@ body {
background-color: var(--color-transparent); background-color: var(--color-transparent);
-webkit-backdrop-filter: saturate(100%) blur(30px); -webkit-backdrop-filter: saturate(100%) blur(30px);
backdrop-filter: saturate(100%) blur(20px); backdrop-filter: saturate(100%) blur(20px);
max-width: 414px; max-width: 382px;
min-width: 0; min-width: 0;
margin: 0 auto; margin: 0 auto;
padding: 0.25em 0.75em; padding: 0.25em 16px 0.25em 16px;
z-index: 2; z-index: 2;
} }
#nav-bar.hide-border {
border-bottom: none;
}
#nav-bar #title { #nav-bar #title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -174,6 +168,7 @@ body {
min-height: 2.5em; min-height: 2.5em;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
transition: opacity 0.25s ease-in-out;
} }
#nav-bar #title>p { #nav-bar #title>p {
@@ -204,11 +199,19 @@ body {
margin-left: 6px; margin-left: 6px;
} }
.nav-bar-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
/* Main */ /* Main */
#main { #main {
/* padding: 1em; */ /* padding: 1em; */
padding-top: 3.55rem; padding-top: 3rem;
padding-bottom: 3rem;
} }
.item { .item {
@@ -235,6 +238,7 @@ body {
grid-auto-flow: column; grid-auto-flow: column;
overflow-x: scroll; overflow-x: scroll;
padding: 1rem; padding: 1rem;
padding-bottom: 0;
} }
#news-items.one { #news-items.one {
@@ -273,6 +277,10 @@ body {
display: block; display: block;
} }
.section {
margin-top: 1rem;
}
/* App header */ /* App header */
#apps.section .item { #apps.section .item {
@@ -430,6 +438,65 @@ a>button {
color: var(--accent-color); 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 */ /* Badges */
.badge { .badge {

10
index.css
View File

@@ -6,11 +6,11 @@
MIT License. MIT License.
*/ */
#main { #nav-bar.hide-border {
padding-top: 2rem; border-bottom: none;
} }
#main #title { #main h1 {
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
padding: 0 1rem; padding: 0 1rem;
} }
@@ -28,6 +28,10 @@
outline: none; outline: none;
} */ } */
.section a {
color: white;
}
.suggestion { .suggestion {
padding: 1rem 1rem 1rem 0; padding: 1rem 1rem 1rem 0;
margin-left: 1rem; margin-left: 1rem;

19
index.html
View File

@@ -17,6 +17,19 @@
<title>AltSource Viewer</title> <title>AltSource Viewer</title>
</head> </head>
<body> <body>
<div id="top">
<div id="nav-bar" class="hide-border">
<a href="https://github.com/therealFoxster/altsource-viewer" class="hidden">
Source Code
</a>
<div id="title" class="hidden">
<p>AltSource Viewer</p>
</div>
<a href="https://github.com/therealFoxster/altsource-viewer">
Source Code
</a>
</div>
</div>
<div id="main"> <div id="main">
<h1 id="title">AltSource Viewer</h1> <h1 id="title">AltSource Viewer</h1>
<div class="textfield"> <div class="textfield">
@@ -25,14 +38,14 @@
</div> </div>
<div id="suggestions" class="section"> <div id="suggestions" class="section">
<div class="header"> <div class="header">
<h2>Discover</h2> <h2>Featured</h2>
</div> </div>
<a href="https://github.com/therealFoxster/altsource-viewer" target="_blank"> <!-- <a href="https://github.com/therealFoxster/altsource-viewer" target="_blank">
<div class="suggestion" id="source-code"> <div class="suggestion" id="source-code">
<i class="bi bi-code-slash"></i> <i class="bi bi-code-slash"></i>
Source Code Source Code
</div> </div>
</a> </a> -->
</div> </div>
</div> </div>
<script src="index.js" type="module"></script> <script src="index.js" type="module"></script>

60
index.js
View File

@@ -7,7 +7,7 @@
// //
import { urlSearchParams, sourceURL } from "./common/modules/constants.js"; 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 // 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 // const { default: sources } = await import("./common/assets/sources.json", {assert: { type: "json" } }); // Broken on Safari 17.2
import { sources } from "./common/modules/constants.js"; import { sources } from "./common/modules/constants.js";
@@ -22,7 +22,8 @@ import { sources } from "./common/modules/constants.js";
const sourceURL = textField.value; const sourceURL = textField.value;
if (!isValidHTTPURL(sourceURL)) if (!isValidHTTPURL(sourceURL))
alert("Invalid HTTP URL."); alert("Invalid HTTP URL.");
else open(`./view/?source=${sourceURL}`); // else open(`./view/?source=${sourceURL}`);
else insertSource(sourceURL, "afterbegin", true);
}; };
// If source provided // If source provided
@@ -55,16 +56,55 @@ import { sources } from "./common/modules/constants.js";
goButton.addEventListener("click", viewSource); goButton.addEventListener("click", viewSource);
async function insertSource(url) { async function insertSource(url, position = "beforeend", flag = false) {
fetch(url).then(data => data.json()).then(source => { fetch(url).then(data => data.json()).then(source => {
document.getElementById("source-code").insertAdjacentHTML("beforebegin",` let lastUpdated = new Date("1970-01-01");
<a href="./view/?source=${url}"> let appCount = 0;
<div class="suggestion"> let altSourceIcon = "./common/assets/img/generic_app.jpeg";
<i class="bi bi-search"></i> let altSourceTintColor = "var(--app-tint-color);";
${source.name} 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 ,`
<a href="./view/?source=${url}">
<div class="source" style="background-color: #${(source.tintColor ?? altSourceTintColor).replaceAll("#", "")}; ${flag ? "margin-bottom: 0.75rem;" : ""}">
<img src="${source.iconURL ?? altSourceIcon ?? "./common/assets/img/generic_app.jpeg"}" alt="source-icon">
<div class="right">
<div class="text">
<p class="title">${source.name}</p>
<p class="subtitle">Last updated: ${lastUpdated.toISOString().split("T")[0]}</p>
</div> </div>
</a>` <div class="app-count">
); ${appCount}
</div>
</div>
</div>
</a>
`);
}); });
} }
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");
}
}
})(); })();

2
view/all-apps/all-apps.css
View File

@@ -7,7 +7,7 @@
*/ */
#main { #main {
padding-top: 7rem; padding-top: 5rem;
} }
#apps .app-container { #apps .app-container {

6
view/all-apps/index.html
View File

@@ -15,11 +15,7 @@
<link rel="stylesheet" href="../../common/style.css"> <link rel="stylesheet" href="../../common/style.css">
<link rel="stylesheet" href="all-apps.css"> <link rel="stylesheet" href="all-apps.css">
</head> </head>
<body class="loading"> <body>
<div id="loading">
<img src="../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<!-- Add to AltStore banner & navigation bar --> <!-- Add to AltStore banner & navigation bar -->
<div id="top"></div> <div id="top"></div>
<div id="main"> <div id="main">

9
view/app/app.css
View File

@@ -13,12 +13,10 @@ a {
/* Main */ /* Main */
#main { #main {
padding: unset;
overflow: hidden; overflow: hidden;
} }
#main .item { #main .item {
margin-top: 30%;
margin-bottom: 0; margin-bottom: 0;
padding: 1em; padding: 1em;
} }
@@ -91,8 +89,7 @@ a {
/* What's new */ /* What's new */
#whats-new, #whats-new,
#permissions, #permissions {
#source {
padding: 1em; padding: 1em;
} }
@@ -207,6 +204,10 @@ a {
padding-top: 0; padding-top: 0;
} }
#source .header {
margin: 1rem;
}
#source .row { #source .row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

35
view/app/app.js
View File

@@ -31,12 +31,12 @@ const bundleId = urlSearchParams.get('id');
const title = document.getElementById("title"); const title = document.getElementById("title");
const button = document.querySelector("#nav-bar .install"); 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; hidden = false;
title.classList.add("hidden"); title.classList.add("hidden");
button.classList.add("hidden"); button.classList.add("hidden");
button.disaled = true; button.disaled = true;
} else if (!hidden && appName.getBoundingClientRect().y < 72) { } else if (!hidden && appName.getBoundingClientRect().y < 30) {
hidden = true; hidden = true;
title.classList.remove("hidden"); title.classList.remove("hidden");
button.classList.remove("hidden"); button.classList.remove("hidden");
@@ -219,10 +219,33 @@ main((json) => {
// //
// Source info // Source info
const source = document.getElementById("source"); const source = document.getElementById("source");
const sourceContainer = source.querySelector(".container"); const sourceA = source.querySelector("a");
const sourceTitle = source.querySelector(".row-title"); const sourceContainer = source.querySelector(".source");
const sourceSubtitle = source.querySelector(".row-subtitle"); 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; sourceTitle.innerText = json.name;
sourceContainer.href = `../?source=${sourceURL}`; sourceContainer.href = `../?source=${sourceURL}`;
sourceSubtitle.innerText = json.description ?? "Tap to get started"; sourceSubtitle.innerText = `Last updated: ${lastUpdated.toISOString().split("T")[0]}`;
sourceAppCount.innerText = appCount;
}); });

59
view/app/index.html
View File

@@ -15,30 +15,26 @@
<link rel="stylesheet" href="../../common/style.css"> <link rel="stylesheet" href="../../common/style.css">
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
</head> </head>
<body class="loading"> <body>
<div id="loading"> <div id="top">
<img src="../../common/assets/img/loading.gif" alt="loading"> <!-- Navigation bar -->
<p>Loading</p> <div id="nav-bar">
<div id="back-container">
<button id="back" type="button">
<i class="bi bi-chevron-left"></i>
Back
</button>
</div>
<div id="title" class="hidden">
<img id="app-icon" src="../../common/assets/img/generic_app.jpeg" alt="generic-app-icon">
<p>AltSource</p>
</div>
<a href="https://example.com" class="install hidden">
<button class="uibutton">Free</button>
</a>
</div>
</div> </div>
<div id="main"> <div id="main">
<div id="top">
<!-- Navigation bar -->
<div id="nav-bar">
<div id="back-container">
<button id="back" type="button">
<i class="bi bi-chevron-left"></i>
Back
</button>
</div>
<div id="title" class="hidden">
<img id="app-icon" src="../../common/assets/img/generic_app.jpeg" alt="generic-app-icon">
<p>AltSource</p>
</div>
<a href="https://example.com" class="install hidden">
<button class="uibutton">Free</button>
</a>
</div>
</div>
<!-- Content --> <!-- Content -->
<div class="item"> <div class="item">
<div class="app-header"> <div class="app-header">
@@ -111,13 +107,20 @@
<div class="header"> <div class="header">
<h2>Discover More On</h2> <h2>Discover More On</h2>
</div> </div>
<a class="container" target="_self"> <a href="../../view/">
<div class="row"> <div class="source">
<p class="row-title"></p> <img src="../../common/assets/img/generic_app.jpeg" alt="source-icon">
<p class="row-subtitle"></p> <div class="right">
<div class="text">
<p class="title">Source</p>
<p class="subtitle">Last updated: unknown</p>
</div>
<div class="app-count">
0
</div>
</div> </div>
<i class="bi bi-arrow-up-right-square"></i> </div>
</a> </a>
</div> </div>
</div> </div>
<script src="app.js" type="module"></script> <script src="app.js" type="module"></script>

6
view/app/version-history/index.html
View File

@@ -15,11 +15,7 @@
<link rel="stylesheet" href="../../../common/style.css"> <link rel="stylesheet" href="../../../common/style.css">
<link rel="stylesheet" href="version-history.css"> <link rel="stylesheet" href="version-history.css">
</head> </head>
<body class="loading"> <body>
<div id="loading">
<img src="../../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<!-- Add to AltStore banner & navigation bar --> <!-- Add to AltStore banner & navigation bar -->
<div id="top"></div> <div id="top"></div>
<div id="main"> <div id="main">

2
view/app/version-history/version-history.css
View File

@@ -7,7 +7,7 @@
*/ */
#main { #main {
padding-top: 8rem; padding-top: 4rem;
} }
a { a {

24
view/index.html
View File

@@ -14,18 +14,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../common/style.css"> <link rel="stylesheet" href="../common/style.css">
</head> </head>
<body class="loading"> <body>
<div id="loading">
<img src="../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<!-- Add to AltStore banner --> <!-- Add to AltStore banner -->
<div id="top"></div> <div id="top">
<div id="nav-bar" class="hide-border">
<a href="../" class="hidden">Edit</a>
<div id="title" class="hidden">
<p>AltSource Viewer</p>
</div>
<div class="nav-bar-buttons">
<a id="edit" href="../" href="https://github.com/therealFoxster/altsource-viewer">
Edit
</a>
</div>
</div>
</div>
<div id="main"> <div id="main">
<p>AltSource Viewer</p> <p>AltSource Viewer</p>
<div class="header"> <div class="header">
<h1 id="title">altsource-v2</h1> <h1 id="title">altsource-v2</h1>
<a id="edit" href="../" style="font-size: 0.75em; font-weight: 750;">EDIT</a> <a id="add" style="font-size: 1em">
<i class="bi bi-plus-circle-fill" style="font-size: 1.35rem;"></i>
</a>
</div> </div>
<div id="news" class="section"> <div id="news" class="section">
<div class="header"> <div class="header">

6
view/news/index.html
View File

@@ -15,11 +15,7 @@
<link rel="stylesheet" href="../../common/style.css"> <link rel="stylesheet" href="../../common/style.css">
<link rel="stylesheet" href="news.css"> <link rel="stylesheet" href="news.css">
</head> </head>
<body class="loading"> <body>
<div id="loading">
<img src="../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<!-- Add to AltStore banner & navigation bar --> <!-- Add to AltStore banner & navigation bar -->
<div id="top"></div> <div id="top"></div>
<div id="main"> <div id="main">

4
view/news/news.css
View File

@@ -7,7 +7,7 @@
*/ */
#main { #main {
padding-top: 8rem; padding-top: 5.5rem;
} }
#news { #news {
@@ -15,7 +15,7 @@
} }
.news-item-wrapper { .news-item-wrapper {
margin-bottom: 3em; margin-bottom: 2.5em;
} }
.news-item-wrapper:last-of-type { .news-item-wrapper:last-of-type {

24
view/view.js
View File

@@ -18,6 +18,11 @@ main(json => {
open(`../?source=${sourceURL}`); 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 // Set "View All News" link
document.querySelector("#news a").href = `./news/?source=${sourceURL}`; document.querySelector("#news a").href = `./news/?source=${sourceURL}`;
// Set "View All Apps" link // Set "View All Apps" link
@@ -26,7 +31,8 @@ main(json => {
// Set tab title // Set tab title
document.title = json.name; document.title = json.name;
// Set page title // 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 // News
@@ -72,4 +78,20 @@ main(json => {
</div> </div>
`); `);
else document.getElementById("about").remove(); 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");
}
}
}, "../"); }, "../");