mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-08 08:39:59 +00:00
Remove button styling for other downloads links
This commit is contained in:
hensm
@@ -41,7 +41,7 @@ body {
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
margin: initial;`
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -136,41 +136,78 @@ body {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.app-list {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-list > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.app-list__platform {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-list__platform {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.app-list__app {
|
||||
|
||||
.app-list__app:not(.btn) {
|
||||
color: var(--blue-50);
|
||||
position: relative;
|
||||
padding-right: 50px;
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
.app-list__app:not(.btn):hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.app-list__app:not(.btn):active {
|
||||
color: var(--blue-60);
|
||||
}
|
||||
|
||||
.app-list__app:not(.btn)[data-app-size]::after {
|
||||
content: "(" attr(data-app-size) ")";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: initial;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
|
||||
.app-list--buttons {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-list--buttons > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.app-list--buttons .app-list__platform {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-list--buttons .app-list__app {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-list__platform > .app-list__app + .app-list__app {
|
||||
.app-list--buttons > .app-list__platform > .app-list__app + .app-list__app {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.app-list__app-label {
|
||||
.app-list--buttons .app-list__app-link {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.app-list--buttons .app-list__app-label {
|
||||
color: var(--blue-40);
|
||||
font-size: 0.8em;
|
||||
font-variant: small-caps;
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.app-list__rpm {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
|
||||
.preview {
|
||||
grid-area: preview;
|
||||
|
||||
@@ -38,20 +38,20 @@
|
||||
<details class="download__app-other">
|
||||
<summary>Other bridge downloads</summary>
|
||||
<div class="app-list">
|
||||
<a class="app-list__app app-list__win btn btn--puffy" disabled title="No available download found">
|
||||
<a class="app-list__app app-list__win" disabled title="No available download found">
|
||||
Windows
|
||||
</a>
|
||||
<a class="app-list__app app-list__mac btn btn--puffy" disabled title="No available download found">
|
||||
<a class="app-list__app app-list__mac" disabled title="No available download found">
|
||||
macOS
|
||||
</a>
|
||||
<div class="app-list__platform app-list__platform--linux">
|
||||
<a class="app-list__app app-list__deb btn btn--puffy" disabled title="No available download found">
|
||||
<div class="app-list__platform">
|
||||
<a class="app-list__app app-list__deb" disabled title="No available download found">
|
||||
Linux
|
||||
<span class="app-list__app-label">deb</span>
|
||||
<span class="app-list__app-label">DEB</span>
|
||||
</a>
|
||||
<a class="app-list__app app-list__rpm btn btn--puffy" disabled title="No available download found">
|
||||
<a class="app-list__app app-list__rpm" disabled title="No available download found">
|
||||
Linux
|
||||
<span class="app-list__app-label">rpm</span>
|
||||
<span class="app-list__app-label">RPM</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,7 @@ const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary
|
||||
const downloadExtBtn = document.querySelector(".download__ext");
|
||||
|
||||
// App download buttons
|
||||
const appList = document.querySelector(".app-list");
|
||||
const appListWinBtn = document.querySelector(".app-list__win");
|
||||
const appListMacBtn = document.querySelector(".app-list__mac");
|
||||
const appListDebBtn = document.querySelector(".app-list__deb");
|
||||
@@ -38,9 +39,22 @@ switch (navigator.platform) {
|
||||
downloadAppBtn.remove();
|
||||
downloadAppOther.open = true;
|
||||
downloadAppOtherSummary.hidden = true;
|
||||
|
||||
appList.classList.add("app-list--buttons");
|
||||
appListWinBtn.classList.add("btn", "btn--puffy");
|
||||
appListMacBtn.classList.add("btn", "btn--puffy");
|
||||
appListDebBtn.classList.add("btn", "btn--puffy");
|
||||
appListRpmBtn.classList.add("btn", "btn--puffy");
|
||||
}
|
||||
|
||||
|
||||
function populateAppListApp (element, fileUrl, fileName, fileSize) {
|
||||
element.href = fileUrl;
|
||||
element.title = `${fileName} (${fileSize})`;
|
||||
element.dataset.appSize = fileSize;
|
||||
element.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
|
||||
const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases/latest";
|
||||
|
||||
@@ -51,34 +65,38 @@ fetch(ENDPOINT_URL)
|
||||
|
||||
function onResponse (res) {
|
||||
for (const asset of res.assets) {
|
||||
const { browser_download_url } = asset;
|
||||
const formattedSize = formatSize(asset.size);
|
||||
|
||||
switch (asset.name.match(/.*\.(.*)$/).pop()) {
|
||||
case "xpi":
|
||||
downloadExtBtn.href = browser_download_url;
|
||||
downloadExtBtn.href = asset.browser_download_url;
|
||||
downloadExtBtn.removeAttribute("disabled");
|
||||
downloadExtBtn.removeAttribute("title");
|
||||
break;
|
||||
|
||||
|
||||
case "exe":
|
||||
appListWinBtn.href = browser_download_url;
|
||||
appListWinBtn.removeAttribute("disabled");
|
||||
appListWinBtn.removeAttribute("title");
|
||||
populateAppListApp(
|
||||
appListWinBtn, asset.browser_download_url
|
||||
, asset.name, formattedSize);
|
||||
break;
|
||||
|
||||
case "pkg":
|
||||
appListMacBtn.href = browser_download_url;
|
||||
appListMacBtn.removeAttribute("disabled");
|
||||
appListMacBtn.removeAttribute("title");
|
||||
populateAppListApp(
|
||||
appListMacBtn, asset.browser_download_url
|
||||
, asset.name, formattedSize);
|
||||
break;
|
||||
|
||||
case "deb":
|
||||
appListDebBtn.href = browser_download_url;
|
||||
appListDebBtn.removeAttribute("disabled");
|
||||
appListDebBtn.removeAttribute("title");
|
||||
populateAppListApp(
|
||||
appListDebBtn, asset.browser_download_url
|
||||
, asset.name, formattedSize);
|
||||
break;
|
||||
|
||||
case "rpm":
|
||||
appListRpmBtn.href = browser_download_url;
|
||||
appListRpmBtn.removeAttribute("disabled");
|
||||
appListRpmBtn.removeAttribute("title");
|
||||
populateAppListApp(
|
||||
appListRpmBtn, asset.browser_download_url
|
||||
, asset.name, formattedSize);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -87,9 +105,11 @@ function onResponse (res) {
|
||||
switch (platform) {
|
||||
case "win":
|
||||
downloadAppBtn.href = appListWinBtn.href;
|
||||
downloadAppBtn.title = appListWinBtn.title;
|
||||
break;
|
||||
case "mac":
|
||||
downloadAppBtn.href = appListMacBtn.href;
|
||||
downloadAppBtn.title = appListMacBtn.title;
|
||||
break;
|
||||
|
||||
default: {
|
||||
@@ -98,10 +118,38 @@ function onResponse (res) {
|
||||
}
|
||||
|
||||
downloadAppBtn.removeAttribute("disabled");
|
||||
downloadAppBtn.removeAttribute("title");
|
||||
}
|
||||
}
|
||||
|
||||
function onError (err) {
|
||||
console.error("Failed to fetch download links");
|
||||
}
|
||||
|
||||
|
||||
function formatSize (bytes, precision = 1) {
|
||||
// Sizes in bytes
|
||||
const kilobyte = 1024;
|
||||
const megabyte = kilobyte * 1024;
|
||||
const gigabyte = megabyte * 1024;
|
||||
const terabyte = gigabyte * 1024;
|
||||
const petabyte = terabyte * 1024;
|
||||
|
||||
if (bytes >= 0 && bytes < kilobyte) {
|
||||
return `${bytes} B`;
|
||||
|
||||
} else if (bytes >= kilobyte && bytes < megabyte) {
|
||||
return `${(bytes / kilobyte).toFixed(precision)} KB`;
|
||||
|
||||
} else if (bytes >= megabyte && bytes < gigabyte) {
|
||||
return `${(bytes / megabyte).toFixed(precision)} MB`;
|
||||
|
||||
} else if (bytes >= gigabyte && bytes < terabyte) {
|
||||
return `${(bytes / gigabyte).toFixed(precision)} GB`;
|
||||
|
||||
} else if (bytes >= terabyte && bytes < petabyte) {
|
||||
return `${(bytes / terabyte).toFixed(precision)} TB`;
|
||||
|
||||
} else if (bytes >= petabyte) {
|
||||
return `${(bytes / petabyte).toFixed(precision)} PB`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user