diff --git a/app.html b/app.html index e2fcc76..32b55db 100644 --- a/app.html +++ b/app.html @@ -80,11 +80,12 @@
Version 2.0
-0 KB
+Apr 10, 2023
The quick brown fox jumps over the lazy dog.
diff --git a/css/app.css b/css/app.css
index 464c83c..fac7434 100644
--- a/css/app.css
+++ b/css/app.css
@@ -126,12 +126,8 @@ a {
padding: 0;
}
-#whats-new .header>p:first-of-type {
- opacity: 0.5;
-}
-
#whats-new .header>p {
- opacity: 0.35;
+ opacity: 0.5;
}
#whats-new #version-date {
diff --git a/css/style.css b/css/style.css
index b5e886f..12d1ba7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -220,7 +220,7 @@ body {
.header {
display: flex;
flex-direction: row;
- align-items: center;
+ align-items: baseline;
justify-content: space-between;
padding: 0 1rem;
}
diff --git a/css/version-history.css b/css/version-history.css
new file mode 100644
index 0000000..6399297
--- /dev/null
+++ b/css/version-history.css
@@ -0,0 +1,81 @@
+#main {
+ padding-top: 8rem;
+}
+
+a {
+ color: var(--app-tint-color);
+}
+
+#versions {
+ padding: 0 1rem;
+ display: flex;
+ flex-direction: column;
+ /* gap: 1em; */
+}
+
+.version {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 0.1px solid var(--color-separator);
+ padding: 1.25em 0;
+}
+
+.version:first-of-type {
+ padding-top: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ .version {
+ border-color: var(--color-separator-dark) !important;
+ }
+}
+
+.version-header, .version-options {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 0.5em;
+}
+
+.version-options {
+ color: var(--app-tint-color);
+}
+
+.version-number {
+ font-weight: 600;
+}
+
+.version-date {
+ opacity: 0.5;
+}
+
+.version-description {
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ position: relative;
+ word-wrap: break-word;
+ line-height: 1.5em;
+}
+
+#more button {
+ min-width: 0 !important;
+ margin-left: 2px !important;
+ padding: 0;
+ font-size: 15px;
+ font-weight: 500;
+ text-transform: none;
+ border-radius: 4px;
+ border: none;
+ background: unset;
+ color: var(--accent-color);
+ cursor: pointer;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding-left: 36px;
+ background: linear-gradient(to right, transparent, var(--color-bg) 35%);
+ line-height: 1.5em;
+}
diff --git a/js/app.js b/js/app.js
index d6b9ad7..f591123 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,7 +7,7 @@
//
import { urlSearchParams, sourceURL, legacyPermissions } from "./constants.js";
-import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString } from "./utilities.js";
+import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString, exit, formatVersionDate } from "./utilities.js";
import { main } from "./main.js";
import { privacy, entitlements } from "./constants.js";
import { AppPermissionItem } from "./components/AppPermissionItem.js";
@@ -129,19 +129,9 @@ main((json) => {
const versionNumberElement = document.getElementById("version");
const versionSizeElement = document.getElementById("version-size");
const versionDescriptionElement = document.getElementById("version-description");
- const versionDate = new Date(app.versionDate),
- month = versionDate.toUTCString().split(" ")[2],
- date = versionDate.getDate();
- const today = new Date();
- const msPerDay = 60 * 60 * 24 * 1000;
- const msDifference = today.valueOf() - versionDate.valueOf();
// Version date
- versionDateElement.textContent = versionDate.valueOf() ? `${month} ${date}, ${versionDate.getFullYear()}` : app.versionDate.split("T")[0];
- if (msDifference <= msPerDay && today.getDate() == versionDate.getDate())
- versionDateElement.textContent = "Today";
- else if (msDifference <= msPerDay * 2)
- versionDateElement.textContent = "Yesterday";
+ versionDateElement.textContent = formatVersionDate(app.versionDate);
// Version number
versionNumberElement.textContent = `Version ${app.version}`;
@@ -153,13 +143,16 @@ main((json) => {
i++;
appSize = parseFloat(appSize / 1024).toFixed(1);
}
- versionSizeElement.textContent = `${appSize} ${units[i]}`;
+ // versionSizeElement.textContent = `${appSize} ${units[i]}`;
// Version description
versionDescriptionElement.innerHTML = formatString(app.versionDescription);
if (versionDescriptionElement.scrollHeight > versionDescriptionElement.clientHeight)
versionDescriptionElement.insertAdjacentHTML("beforeend", more);
+ // Version history
+ document.getElementById("version-history").href = `version-history.html?source=${sourceURL}&id=${app.bundleIdentifier}`;
+
//
// Permissions
@@ -223,7 +216,3 @@ main((json) => {
sourceContainer.href = `index.html?source=${sourceURL}`;
sourceSubtitle.innerText = json.description ?? "Tap to get started";
});
-
-function exit() {
- window.location.replace(`index.html?source=${sourceURL}`);
-}
diff --git a/js/components/AppPermissionItem.js b/js/components/AppPermissionItem.js
index ce2ceba..5446268 100644
--- a/js/components/AppPermissionItem.js
+++ b/js/components/AppPermissionItem.js
@@ -6,10 +6,7 @@
//
export const AppPermissionItem = (name, icon, details) => `
-
-
- ${name}
+ ${name}
${number}
+${date}
+${description}
+
+ Loading
+