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("#", "");
if (tintColor) setTintColor(tintColor);
insertAltStoreBanner(json.name);
// insertAltStoreBanner(json.name);
setApps(json.apps);
// main(json);
callback(json);
waitForAllImagesToLoad();
// waitForAllImagesToLoad();
})
.catch(error => {
alert(error);

95
common/style.css
View File

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

10
index.css
View File

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

19
index.html
View File

@@ -17,6 +17,19 @@
<title>AltSource Viewer</title>
</head>
<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">
<h1 id="title">AltSource Viewer</h1>
<div class="textfield">
@@ -25,14 +38,14 @@
</div>
<div id="suggestions" class="section">
<div class="header">
<h2>Discover</h2>
<h2>Featured</h2>
</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">
<i class="bi bi-code-slash"></i>
Source Code
</div>
</a>
</a> -->
</div>
</div>
<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 { 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",`
<a href="./view/?source=${url}">
<div class="suggestion">
<i class="bi bi-search"></i>
${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 ,`
<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>
</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 {
padding-top: 7rem;
padding-top: 5rem;
}
#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="all-apps.css">
</head>
<body class="loading">
<div id="loading">
<img src="../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<body>
<!-- Add to AltStore banner & navigation bar -->
<div id="top"></div>
<div id="main">

9
view/app/app.css
View File

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

35
view/app/app.js
View File

@@ -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;
});

59
view/app/index.html
View File

@@ -15,30 +15,26 @@
<link rel="stylesheet" href="../../common/style.css">
<link rel="stylesheet" href="app.css">
</head>
<body class="loading">
<div id="loading">
<img src="../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
<body>
<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>
<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 -->
<div class="item">
<div class="app-header">
@@ -111,13 +107,20 @@
<div class="header">
<h2>Discover More On</h2>
</div>
<a class="container" target="_self">
<div class="row">
<p class="row-title"></p>
<p class="row-subtitle"></p>
<a href="../../view/">
<div class="source">
<img src="../../common/assets/img/generic_app.jpeg" alt="source-icon">
<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>
<i class="bi bi-arrow-up-right-square"></i>
</a>
</div>
</a>
</div>
</div>
<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="version-history.css">
</head>
<body class="loading">
<div id="loading">
<img src="../../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<body>
<!-- Add to AltStore banner & navigation bar -->
<div id="top"></div>
<div id="main">

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

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

24
view/index.html
View File

@@ -14,18 +14,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../common/style.css">
</head>
<body class="loading">
<div id="loading">
<img src="../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<body>
<!-- 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">
<p>AltSource Viewer</p>
<div class="header">
<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 id="news" class="section">
<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="news.css">
</head>
<body class="loading">
<div id="loading">
<img src="../../common/assets/img/loading.gif" alt="loading">
<p>Loading</p>
</div>
<body>
<!-- Add to AltStore banner & navigation bar -->
<div id="top"></div>
<div id="main">

4
view/news/news.css
View File

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

24
view/view.js
View File

@@ -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 => {
</div>
`);
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");
}
}
}, "../");