diff --git a/docs/index.css b/docs/index.css index c98bfcc..66ebcf8 100755 --- a/docs/index.css +++ b/docs/index.css @@ -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; diff --git a/docs/index.html b/docs/index.html index 42e9a05..b7c873e 100755 --- a/docs/index.html +++ b/docs/index.html @@ -38,20 +38,20 @@
Other bridge downloads
- + Windows - + macOS -
- +
+ Linux - deb + DEB - + Linux - rpm + RPM
diff --git a/docs/index.js b/docs/index.js index e7b736b..2f05f0e 100644 --- a/docs/index.js +++ b/docs/index.js @@ -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`; + } +}