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

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");
}
}
}, "../");