sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove button styling for other downloads links

Browse Source
This commit is contained in:
hensm
2019-03-15 12:18:38 +00:00
parent 5fab091394
commit d42509ee98
3 changed files with 125 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
docs/index.css
View File

@@ -41,7 +41,7 @@ body {
body { body {
display: flex; display: flex;
margin: initial;` margin: initial;
} }
.container { .container {
@@ -136,41 +136,78 @@ body {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.app-list { .app-list {
align-items: flex-start;
display: flex;
}
.app-list > *:not(:first-child) {
margin-left: 1rem;
}
.app-list__platform {
display: flex; display: flex;
flex-direction: column; 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; 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; 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); color: var(--blue-40);
font-size: 0.8em; font-size: 0.8em;
font-variant: small-caps; font-variant: small-caps;
margin-left: 0.5rem; margin-left: 0.5em;
vertical-align: super; vertical-align: super;
} }
.app-list__rpm {
grid-column-start: 3;
}
.preview { .preview {
grid-area: preview; grid-area: preview;

14
docs/index.html
View File

@@ -38,20 +38,20 @@
<details class="download__app-other"> <details class="download__app-other">
<summary>Other bridge downloads</summary> <summary>Other bridge downloads</summary>
<div class="app-list"> <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 Windows
</a> </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 macOS
</a> </a>
<div class="app-list__platform app-list__platform--linux"> <div class="app-list__platform">
<a class="app-list__app app-list__deb btn btn--puffy" disabled title="No available download found"> <a class="app-list__app app-list__deb" disabled title="No available download found">
Linux Linux
<span class="app-list__app-label">deb</span> <span class="app-list__app-label">DEB</span>
</a> </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 Linux
<span class="app-list__app-label">rpm</span> <span class="app-list__app-label">RPM</span>
</a> </a>
</div> </div>
</div> </div>

78
docs/index.js
View File

@@ -8,6 +8,7 @@ const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary
const downloadExtBtn = document.querySelector(".download__ext"); const downloadExtBtn = document.querySelector(".download__ext");
// App download buttons // App download buttons
const appList = document.querySelector(".app-list");
const appListWinBtn = document.querySelector(".app-list__win"); const appListWinBtn = document.querySelector(".app-list__win");
const appListMacBtn = document.querySelector(".app-list__mac"); const appListMacBtn = document.querySelector(".app-list__mac");
const appListDebBtn = document.querySelector(".app-list__deb"); const appListDebBtn = document.querySelector(".app-list__deb");
@@ -38,9 +39,22 @@ switch (navigator.platform) {
downloadAppBtn.remove(); downloadAppBtn.remove();
downloadAppOther.open = true; downloadAppOther.open = true;
downloadAppOtherSummary.hidden = 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"; const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases/latest";
@@ -51,34 +65,38 @@ fetch(ENDPOINT_URL)
function onResponse (res) { function onResponse (res) {
for (const asset of res.assets) { for (const asset of res.assets) {
const { browser_download_url } = asset; const formattedSize = formatSize(asset.size);
switch (asset.name.match(/.*\.(.*)$/).pop()) { switch (asset.name.match(/.*\.(.*)$/).pop()) {
case "xpi": case "xpi":
downloadExtBtn.href = browser_download_url; downloadExtBtn.href = asset.browser_download_url;
downloadExtBtn.removeAttribute("disabled"); downloadExtBtn.removeAttribute("disabled");
downloadExtBtn.removeAttribute("title"); downloadExtBtn.removeAttribute("title");
break; break;
case "exe": case "exe":
appListWinBtn.href = browser_download_url; populateAppListApp(
appListWinBtn.removeAttribute("disabled"); appListWinBtn, asset.browser_download_url
appListWinBtn.removeAttribute("title"); , asset.name, formattedSize);
break; break;
case "pkg": case "pkg":
appListMacBtn.href = browser_download_url; populateAppListApp(
appListMacBtn.removeAttribute("disabled"); appListMacBtn, asset.browser_download_url
appListMacBtn.removeAttribute("title"); , asset.name, formattedSize);
break; break;
case "deb": case "deb":
appListDebBtn.href = browser_download_url; populateAppListApp(
appListDebBtn.removeAttribute("disabled"); appListDebBtn, asset.browser_download_url
appListDebBtn.removeAttribute("title"); , asset.name, formattedSize);
break; break;
case "rpm": case "rpm":
appListRpmBtn.href = browser_download_url; populateAppListApp(
appListRpmBtn.removeAttribute("disabled"); appListRpmBtn, asset.browser_download_url
appListRpmBtn.removeAttribute("title"); , asset.name, formattedSize);
break; break;
} }
} }
@@ -87,9 +105,11 @@ function onResponse (res) {
switch (platform) { switch (platform) {
case "win": case "win":
downloadAppBtn.href = appListWinBtn.href; downloadAppBtn.href = appListWinBtn.href;
downloadAppBtn.title = appListWinBtn.title;
break; break;
case "mac": case "mac":
downloadAppBtn.href = appListMacBtn.href; downloadAppBtn.href = appListMacBtn.href;
downloadAppBtn.title = appListMacBtn.title;
break; break;
default: { default: {
@@ -98,10 +118,38 @@ function onResponse (res) {
} }
downloadAppBtn.removeAttribute("disabled"); downloadAppBtn.removeAttribute("disabled");
downloadAppBtn.removeAttribute("title");
} }
} }
function onError (err) { function onError (err) {
console.error("Failed to fetch download links"); 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`;
}
}