mirror of
https://github.com/yuzu-emu/yuzu-emu.github.io.git
synced 2025-06-29 06:20:35 +00:00
Tweak design to hide irrelevant section automatically.
This commit is contained in:
Marie Kiryanova
parent
d9c4fc3756
commit
27c72b3437
|
|
@ -98,6 +98,10 @@ a:hover {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
.show-with-js {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Make text nicer to read in articles
|
||||
.section.content.pt-sm > p {
|
||||
text-align: justify;
|
||||
|
|
@ -142,14 +146,15 @@ pre > code {
|
|||
}
|
||||
|
||||
#download-buttons > a {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@media screen and (min-width: 780px) {
|
||||
#download-header {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#download-buttons > a {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@ layout: "downloads"
|
|||
FullWidth: true
|
||||
---
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">
|
||||
<h2>Windows</h2>
|
||||
|
||||
<div class="tab-content" id="tab-windows">
|
||||
<h2 class="hide-with-js mt-5">Windows Instructions</h2>
|
||||
<article class="message has-text-weight-semibold">
|
||||
<div class="message-body">
|
||||
<p style="color:cyan;margin-bottom: 0px;">yuzu requires the latest versions of Microsoft Visual C++.
|
||||
|
|
@ -27,9 +25,8 @@ Intel and AMD users are strongly recommended to switch to Vulkan by going to `Em
|
|||
|
||||
|
||||
|
||||
<div class="column">
|
||||
<h2>Linux</h2>
|
||||
|
||||
<div class="tab-content" id="tab-linux">
|
||||
<h2 class="hide-with-js mt-5">Linux Instructions</h2>
|
||||
<article class="message has-text-weight-semibold">
|
||||
<div class="message-body">
|
||||
<p style="color:cyan;margin-bottom: 0px;">We have yuzu as an AppImage and Flatpak now! This relaxes dependency requirements for yuzu, as well as enabling it to run on a lot of older distributions.</p>
|
||||
|
|
@ -46,4 +43,3 @@ chmod a+x yuzu-*.AppImage
|
|||
|
||||
Or with the GUI, right click the AppImage, click Properties, then Permissions, then click "Allow this file to run as a program". After that, double-click the AppImage to run it.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="mb-6" id="download-header">
|
||||
<div class="is-flex-grow-1">
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
</div>
|
||||
<div class="mb-3" id="download-header">
|
||||
<h1 class="title is-flex-grow-1 mb-0">{{ .Title }}</h1>
|
||||
<div id="download-buttons">
|
||||
<a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.9/yuzu_install.exe" class="button dl-button is-medium is-success" id="dl-button-windows">
|
||||
<span class="icon mr-1"><i class="fab fa-windows"></i></span> Download for Windows x64
|
||||
|
|
@ -17,7 +15,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="unsupported-platform-view">
|
||||
<article class="message is-danger" id="platform-unsupported">
|
||||
<div class="message-body has-text-white my-5">
|
||||
Currently, yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
|
||||
choose one of the options below.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="show-with-js">
|
||||
<div class="tabs " id="platform-switcher">
|
||||
<ul>
|
||||
<li data-target="tab-windows">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fab fa-windows"></i></span>
|
||||
<span>Windows</span>
|
||||
</a>
|
||||
</li>
|
||||
<li data-target="tab-linux">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fab fa-linux"></i></span>
|
||||
<span>Linux</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2>Instructions</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content" id="platform-instructions">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,7 +55,9 @@
|
|||
|
||||
<section class="section pt-0">
|
||||
<div class="container">
|
||||
<div id="no-js-view">
|
||||
<div class="hide-with-js content">
|
||||
<h2>Builds</h2>
|
||||
|
||||
<article class="message is-warn">
|
||||
<div class="message-body has-text-white mb-6">
|
||||
Hi! We see that you have JavaScript disabled. You can still use the
|
||||
|
|
@ -37,18 +69,9 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
<div id="unsupported-platform-view">
|
||||
<article class="message is-danger" id="platform-unsupported">
|
||||
<div class="message-body has-text-white mb-6">
|
||||
Yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
|
||||
choose one of the options below.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="columns" id="manual-package-view">
|
||||
<div class="show-with-js" id="package-view">
|
||||
<!-- Mainline -->
|
||||
<div class="column content">
|
||||
<div class="content">
|
||||
<h2>Builds
|
||||
<span class="tag is-info">
|
||||
Last release was
|
||||
|
|
@ -82,39 +105,78 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<script type="text/javascript">
|
||||
// Show JS relevant elements
|
||||
document.getElementById("no-js-view").style.display = "none";
|
||||
document.getElementById("manual-package-view").style.display = "block";
|
||||
const setTabActive = (targetId) => {
|
||||
document.querySelectorAll(".content .tab-content")
|
||||
.forEach(element => element.style.display = "none");
|
||||
|
||||
function fetchReleases() {
|
||||
getRelease('mainline');
|
||||
document.querySelectorAll(`#${targetId}`)
|
||||
.forEach(element => element.style.display = "block");
|
||||
|
||||
document.querySelectorAll(".tabs li")
|
||||
.forEach(element => element.classList.remove('is-active'));
|
||||
|
||||
document.querySelectorAll(`[data-target="${targetId}"]`)
|
||||
.forEach(element => element.classList.add('is-active'));
|
||||
}
|
||||
|
||||
fetchReleases();
|
||||
const getOSGuess = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase();
|
||||
|
||||
if (userAgent.includes("windows")) {
|
||||
return "Windows";
|
||||
} else if (
|
||||
userAgent.includes("mac") &&
|
||||
!userAgent.includes("mobile") &&
|
||||
!userAgent.includes("phone")
|
||||
) {
|
||||
return "Mac";
|
||||
} else if (
|
||||
userAgent.includes("linux") &&
|
||||
userAgent.includes("android")
|
||||
) {
|
||||
return "Linux";
|
||||
}
|
||||
|
||||
return "Other";
|
||||
}
|
||||
|
||||
const setupListeners = () => {
|
||||
document.querySelectorAll(".tabs li")
|
||||
.forEach(element =>
|
||||
element.addEventListener('click', (event) => {
|
||||
setTabActive(element.dataset.target);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
getRelease('mainline');
|
||||
|
||||
// Show JS relevant elements
|
||||
document.querySelectorAll(".hide-with-js")
|
||||
.forEach(element => element.style.display = "none");
|
||||
|
||||
document.querySelectorAll(".show-with-js")
|
||||
.forEach(element => element.style.display = "block");
|
||||
|
||||
document.querySelectorAll(".content .tab-content")
|
||||
.forEach(element => element.style.display = "none");
|
||||
|
||||
// Attempt autodetection of their operating system
|
||||
var userAgent = navigator.userAgent.toLowerCase();
|
||||
var os = "Other";
|
||||
|
||||
if (userAgent.indexOf("windows") !== -1) {
|
||||
os = "Windows";
|
||||
} else if (userAgent.indexOf("mac") !== -1 && userAgent.indexOf("mobile") === -1 && userAgent.indexOf("phone") === -1) {
|
||||
os = "Mac";
|
||||
} else if (userAgent.indexOf("linux") !== -1 && userAgent.indexOf("android") === -1) {
|
||||
os = "Linux";
|
||||
}
|
||||
|
||||
switch (os) {
|
||||
switch (getOSGuess()) {
|
||||
case "Windows":
|
||||
document.getElementById("dl-button-linux").style.display = "none";
|
||||
setTabActive('tab-windows');
|
||||
break;
|
||||
case "Linux":
|
||||
document.getElementById("dl-button-windows").style.display = "none";
|
||||
setTabActive('tab-linux');
|
||||
break;
|
||||
default:
|
||||
document.getElementById("unsupported-platform-view").style.display = "block";
|
||||
setTabActive('tab-windows');
|
||||
break
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', setupListeners);
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue