Skip to content

Commit 4085bf4

Browse files
McoreDMcoreD
committed
Redesign XerahS downloads as grouped list and fix asset detection
1 parent 3def090 commit 4085bf4

3 files changed

Lines changed: 82 additions & 59 deletions

File tree

‎css/main.scss‎

Lines changed: 59 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -300,38 +300,71 @@ body {
300300
width: 200px;
301301
}
302302

303-
.xerahs-download-platform {
304-
display: flex;
305-
flex-direction: column;
306-
align-items: center;
303+
#xerahs-download-panel {
304+
background-color: $background-alt;
305+
border-radius: 8px;
306+
padding: $container-padding;
307+
display: grid;
308+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
309+
gap: $container-padding;
310+
text-align: left;
311+
max-width: 900px;
312+
margin: 0 auto;
307313
}
308314

309-
.xerahs-download-title {
310-
display: inline-flex;
311-
align-items: center;
312-
justify-content: center;
313-
gap: 8px;
314-
min-height: 32px;
315-
line-height: 1.2;
316-
margin-bottom: $container-padding-half / 2;
315+
.xerahs-download-group {
316+
h5 {
317+
font-family: $font-header;
318+
font-size: 22px;
319+
margin: 0 0 $container-padding-half 0;
320+
display: flex;
321+
align-items: center;
322+
gap: 10px;
323+
color: $text-color;
317324

318-
i {
319-
width: 20px;
320-
line-height: 1;
321-
text-align: center;
325+
i {
326+
width: 24px;
327+
text-align: center;
328+
}
322329
}
323-
}
324330

325-
.xerahs-download-buttons {
326-
width: 100%;
327-
display: flex;
328-
flex-direction: column;
329-
align-items: stretch;
330-
gap: $container-padding-half / 2;
331-
min-height: 96px;
331+
.xerahs-download-list {
332+
list-style: none;
333+
padding: 0;
334+
margin: 0;
332335

333-
.btn {
334-
margin: 0px;
336+
li {
337+
margin-bottom: $container-padding-half / 2;
338+
339+
&:last-child {
340+
margin-bottom: 0;
341+
}
342+
343+
a {
344+
display: block;
345+
padding: 10px 15px;
346+
background-color: $background;
347+
color: $text-color;
348+
text-decoration: none;
349+
border-radius: 4px;
350+
transition: all 0.2s ease;
351+
font-size: 16px;
352+
353+
&:hover {
354+
background-color: lighten($background, 5%);
355+
transform: translateX(5px);
356+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
357+
}
358+
359+
&::before {
360+
content: "\f019";
361+
font-family: "Font Awesome 6 Free";
362+
font-weight: 900;
363+
margin-right: 10px;
364+
opacity: 0.7;
365+
}
366+
}
367+
}
335368
}
336369
}
337370

‎xerahs/index.html‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,26 @@
88
<h1>XerahS</h1>
99
<p>Screen capture, file sharing and productivity tool</p>
1010
<p class="lead">XerahS is <strong>ShareX reimagined</strong> with modern UI technologies, built from the ground up for cross-platform performance.</p>
11-
<div class="row mt-4">
12-
<div class="col-sm-4 text-center xerahs-download-platform">
13-
<h4 class="xerahs-download-title"><i class="fa-brands fa-windows"></i> Windows</h4>
14-
<div class="xerahs-download-buttons">
15-
<a class="btn btn-default btn-block xerahs-download-win-x64 mb-2" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
16-
x64
17-
</a>
18-
<a class="btn btn-default btn-block xerahs-download-win-arm64" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
19-
Arm64
20-
</a>
21-
</div>
11+
<div id="xerahs-download-panel" class="mt-4">
12+
<div class="xerahs-download-group">
13+
<h5><i class="fa-brands fa-windows"></i> Windows</h5>
14+
<ul class="xerahs-download-list">
15+
<li><a class="xerahs-download-win-x64" href="https://github.com/ShareX/XerahS/releases/latest">Windows x64 Installer</a></li>
16+
<li><a class="xerahs-download-win-arm64" href="https://github.com/ShareX/XerahS/releases/latest">Windows Arm64 Installer</a></li>
17+
</ul>
2218
</div>
23-
<div class="col-sm-4 text-center xerahs-download-platform">
24-
<h4 class="xerahs-download-title"><i class="fa-brands fa-apple"></i> macOS</h4>
25-
<div class="xerahs-download-buttons">
26-
<a class="btn btn-default btn-block xerahs-download-mac-x64 mb-2" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
27-
x64
28-
</a>
29-
<a class="btn btn-default btn-block xerahs-download-mac-arm64" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
30-
Arm64
31-
</a>
32-
</div>
19+
<div class="xerahs-download-group">
20+
<h5><i class="fa-brands fa-apple"></i> macOS</h5>
21+
<ul class="xerahs-download-list">
22+
<li><a class="xerahs-download-mac-x64" href="https://github.com/ShareX/XerahS/releases/latest">macOS x64 Package</a></li>
23+
<li><a class="xerahs-download-mac-arm64" href="https://github.com/ShareX/XerahS/releases/latest">macOS Arm64 Package</a></li>
24+
</ul>
3325
</div>
34-
<div class="col-sm-4 text-center xerahs-download-platform">
35-
<h4 class="xerahs-download-title"><i class="fa-brands fa-linux"></i> Linux</h4>
36-
<div class="xerahs-download-buttons">
37-
<a class="btn btn-default btn-block xerahs-download-linux" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
38-
x64
39-
</a>
40-
</div>
26+
<div class="xerahs-download-group">
27+
<h5><i class="fa-brands fa-linux"></i> Linux</h5>
28+
<ul class="xerahs-download-list">
29+
<li><a class="xerahs-download-linux-x64" href="https://github.com/ShareX/XerahS/releases/latest">Linux x64 Package</a></li>
30+
</ul>
4131
</div>
4232
</div>
4333
<div class="mt-4">

‎xerahs/js/xerahs.main.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ $(document).ready(function() {
88

99
function GetLatestXerahsReleaseInfo() {
1010
$.getJSON("https://api.github.com/repos/ShareX/XerahS/releases/latest").done(function(release) {
11-
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().includes("win-x64") && asset.name.endsWith(".exe"), $(".xerahs-download-win-x64"));
12-
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().includes("win-arm64") && asset.name.endsWith(".exe"), $(".xerahs-download-win-arm64"));
11+
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().startsWith("xerahs") && asset.name.toLowerCase().includes("win-x64") && asset.name.endsWith(".exe"), $(".xerahs-download-win-x64"));
12+
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().startsWith("xerahs") && asset.name.toLowerCase().includes("win-arm64") && asset.name.endsWith(".exe"), $(".xerahs-download-win-arm64"));
1313

14-
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().includes("osx-x64"), $(".xerahs-download-mac-x64"));
15-
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().includes("osx-arm64"), $(".xerahs-download-mac-arm64"));
14+
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().startsWith("xerahs") && asset.name.toLowerCase().includes("osx-x64"), $(".xerahs-download-mac-x64"));
15+
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().startsWith("xerahs") && asset.name.toLowerCase().includes("osx-arm64"), $(".xerahs-download-mac-arm64"));
1616

17-
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().includes("linux"), $(".xerahs-download-linux"));
17+
UpdateXerahsDownloadButton(release, asset => asset.name.toLowerCase().startsWith("xerahs") && asset.name.toLowerCase().includes("linux-x64"), $(".xerahs-download-linux-x64"));
1818
}).fail(function() {
1919
// Fallback is handled by the initial href in HTML
2020
console.log("Failed to fetch XerahS release info.");

0 commit comments

Comments
 (0)