mirror of
https://github.com/rvtr/wiki.git
synced 2025-10-31 06:31:13 -04:00
Improve tabs
- They now work as tabs without JS - Use an include for cleaner markdown - A little bit nicer code overall, annoying that the split is needed, but otherwise pretty nice now
This commit is contained in:
Pk11
parent
a5d403bb80
commit
6eb8220d6e
7
_includes/tabs.html
Normal file
7
_includes/tabs.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="tab-container">
|
||||
{% for tab in page.tabs[include.index] %}
|
||||
<input id="tab-{{ tab[0] }}" class="d-none" name="tabs" type="radio" {% if forloop.first %}checked{% endif %}>
|
||||
<label for="tab-{{ tab[0] }}" class="tab-link btn btn-outline-secondary" onclick="setTab('{{ tab[0] }}')">{{ tab[1] }}</label>
|
||||
<div class="tab">{{ include.tabs[forloop.index0] | markdownify }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -432,6 +432,39 @@ a.footnote::after {
|
||||
right: unset;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-container > .tab {
|
||||
display: none;
|
||||
order: 99;
|
||||
padding-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:checked+label+.tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-container > label {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
input:checked+label.btn-outline-secondary {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus {
|
||||
color: #fff;
|
||||
background-color: #5c636a;
|
||||
border-color: #565e64;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) {
|
||||
// Version of .position-absolute that only triggers for sm+
|
||||
.position-absolute-sm {
|
||||
|
||||
@ -1,64 +1,32 @@
|
||||
function openTab(event, target) {
|
||||
for(let element of target.parentNode.parentNode.children) {
|
||||
if (element.id.includes("tab")) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
}
|
||||
const platforms = {
|
||||
"Win32": "tab-windows",
|
||||
"MacIntel": "tab-macos"
|
||||
};
|
||||
|
||||
for(let element of target.parentNode.children) {
|
||||
element.classList.remove("btn-secondary");
|
||||
element.classList.add("btn-outline-secondary");
|
||||
}
|
||||
|
||||
document.getElementById(`tab-${target.dataset.tabName}`).style.display = "block";
|
||||
target.classList.remove("btn-outline-secondary");
|
||||
target.classList.add("btn-secondary");
|
||||
|
||||
if(event) {
|
||||
let url = new URL(window.location);
|
||||
url.searchParams.set("tab", target.dataset.tabName);
|
||||
history.pushState({}, "", url);
|
||||
}
|
||||
function setTab(tab) {
|
||||
let url = new URL(window.location);
|
||||
url.searchParams.set("tab", tab);
|
||||
history.pushState({}, "", url);
|
||||
}
|
||||
|
||||
// Remove links from tab buttons
|
||||
for(a of document.getElementsByClassName("tab-link")) {
|
||||
a.href = "javascript:void(0);";
|
||||
}
|
||||
|
||||
// Open the tabs for the current OS or the default
|
||||
// Open the tabs for the current OS or the one in the URL
|
||||
for(let tabGroup of document.getElementsByClassName("tab-container")) {
|
||||
let tab = new URL(window.location).searchParams.get("tab");
|
||||
if(tab) {
|
||||
openTab(null, Array.from(tabGroup.children[0].children).filter(r => r.dataset.tabName ==tab)[0]);
|
||||
break;
|
||||
}
|
||||
let tab = null;
|
||||
|
||||
for(let tab of tabGroup.children[0].children) {
|
||||
if(tabGroup.classList.contains("tab-os")) {
|
||||
if(navigator.platform.includes("Win")) {
|
||||
if(tab.classList.contains("tab-windows")) {
|
||||
openTab(null, tab);
|
||||
break;
|
||||
} else if(tab.classList.contains("other")) {
|
||||
openTab(null, tab);
|
||||
}
|
||||
} else if(navigator.platform.includes("Mac")) {
|
||||
if(tab.classList.contains("tab-macos")) {
|
||||
openTab(null, tab);
|
||||
break;
|
||||
} else if(tab.classList.contains("other")) {
|
||||
openTab(null, tab);
|
||||
}
|
||||
} else {
|
||||
if(tab.classList.contains("tab-other")) {
|
||||
openTab(null, tab);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if(tab.classList.contains("tab-default")) {
|
||||
openTab(null, tab);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Try get tab from URL
|
||||
let urlTab = new URL(window.location).searchParams.get("tab");
|
||||
if(urlTab)
|
||||
tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0];
|
||||
|
||||
// Try get tab for OS
|
||||
if(!tab)
|
||||
tab = Array.from(tabGroup.children).filter(r => r.id == platforms[navigator.platform])[0];
|
||||
|
||||
// Fall back to "other" tab
|
||||
if(!tab)
|
||||
tab = Array.from(tabGroup.children).filter(r => r.id == "tab-other")[0];
|
||||
|
||||
// If a tab was found, open it
|
||||
if(tab)
|
||||
tab.click();
|
||||
}
|
||||
|
||||
@ -5,6 +5,9 @@ section: ds-index
|
||||
category: guides
|
||||
title: DS Game Forwarders (3DS)
|
||||
description: How to create CIA forwarders to have your DS games on your 3DS's home menu
|
||||
tabs:
|
||||
- tab-sd-card: SD card
|
||||
tab-flashcard: Flashcard
|
||||
---
|
||||
|
||||
If you have any issues, check the FAQs on the [GBAtemp thread](https://gbatemp.net/threads/nds-forwarder-cias-for-your-home-menu.426174/).
|
||||
@ -85,6 +88,7 @@ After you extract the pack, you can edit `sd:/_nds/nds-bootstrap.ini` and change
|
||||
- `BOOST_CPU`: If set to 1, TWL clock speed is used, so lags begone
|
||||
- `SOUND_FREQ`: If set to 1, sound will play at 48 kHz, instead of 32 kHz
|
||||
{% endcapture%}
|
||||
{% assign tab-sd-card = tab-sd-card | split: "<!-->" %}
|
||||
|
||||
{% capture tab-flashcard %}
|
||||
1. Download one of these packs:
|
||||
@ -103,21 +107,10 @@ After you extract the pack for your card, you can edit `sd:/_nds/ntr_forwarder.i
|
||||
- `DISABLEANIMATION`: If set to `1` or <kbd class="face">B</kbd> is held, the DS / DSi boot screen is skipped
|
||||
- `HEALTHSAFETYMSG`: If set to `1`, the boot screen's health and safety message will appear on the bottom screen, otherwise the bottom screen stays white with no health and safety message
|
||||
{% endcapture %}
|
||||
{% assign tab-flashcard = tab-flashcard | split: "<!-->" %}
|
||||
|
||||
<div class="tab-container">
|
||||
<div class="pb-3">
|
||||
<a class="tab-link btn btn-outline-secondary tab-default" href="#tab-sd-card" onclick="openTab(event, event.currentTarget)" data-tab-name="sd-card">SD card</a>
|
||||
<a class="tab-link btn btn-outline-secondary" href="#tab-flashcard" onclick="openTab(event, event.currentTarget)" data-tab-name="flashcard">Flashcard</a>
|
||||
</div>
|
||||
<div id="tab-sd-card">
|
||||
<noscript><h4>SD card</h4></noscript>
|
||||
{{ tab-sd-card | markdownify }}
|
||||
</div>
|
||||
<div id="tab-flashcard">
|
||||
<noscript><h4>Flashcard</h4></noscript>
|
||||
{{ tab-flashcard | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
{% assign tabs = tab-sd-card | concat: tab-flashcard %}
|
||||
{% include tabs.html index=0 tabs=tabs %}
|
||||
|
||||
### Part 2: Getting the AP fix files from TWiLight Menu++
|
||||
If you already have TWiLight Menu++, skip to the next section.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
lang: en-US
|
||||
layout: redirect
|
||||
destination: installing-3ds?tab=manual#tab-manual
|
||||
destination: installing-3ds?tab=manual
|
||||
title: Installing (3DS, Manual)
|
||||
---
|
||||
|
||||
|
||||
@ -5,6 +5,10 @@ section: twilightmenu
|
||||
category: installing
|
||||
title: Installing (3DS)
|
||||
description: How to install TWiLight Menu++ on the Nintendo 3DS
|
||||
tabs:
|
||||
- working-camera: Working camera
|
||||
non-working-camera: Non-working camera
|
||||
manual: Manual
|
||||
---
|
||||
|
||||
You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide](https://3ds.hacks.guide) to install it
|
||||
@ -21,6 +25,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
|
||||
1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
|
||||
- This will take a while
|
||||
{% endcapture %}
|
||||
{% assign tab-working-camera = tab-working-camera | split: "<!-->" %}
|
||||
|
||||
{% capture tab-non-working-camera %}
|
||||
1. Download the `Universal-Updater.cia` file from the [Universal-Updater release page](https://github.com/Universal-Team/Universal-Updater/releases)
|
||||
@ -35,6 +40,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
|
||||
1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
|
||||
- This will take a while
|
||||
{% endcapture %}
|
||||
{% assign tab-non-working-camera = tab-non-working-camera | split: "<!-->" %}
|
||||
|
||||
{% capture tab-manual %}
|
||||
1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
|
||||
@ -45,24 +51,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
|
||||
1. Copy the two `.cia` files to your SD card root
|
||||
1. On your 3DS, install the two CIAs with FBI
|
||||
{% endcapture %}
|
||||
{% assign tab-manual = tab-manual | split: "<!-->" %}
|
||||
|
||||
### Installing
|
||||
<div class="tab-container">
|
||||
<div class="pb-3">
|
||||
<a class="tab-link btn btn-outline-secondary tab-default" href="#tab-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="working-camera">Working camera</a>
|
||||
<a class="tab-link btn btn-outline-secondary" href="#tab-non-working-camera" onclick="openTab(event, event.currentTarget)" data-tab-name="non-working-camera">Non-working camera</a>
|
||||
<a class="tab-link btn btn-outline-secondary" href="#tab-manual" onclick="openTab(event, event.currentTarget)" data-tab-name="manual">Manual</a>
|
||||
</div>
|
||||
<div id="tab-working-camera">
|
||||
<noscript><h4>Working camera</h4></noscript>
|
||||
{{ tab-working-camera | markdownify }}
|
||||
</div>
|
||||
<div id="tab-non-working-camera">
|
||||
<noscript><h4>Non-working camera</h4></noscript>
|
||||
{{ tab-non-working-camera | markdownify }}
|
||||
</div>
|
||||
<div id="tab-manual">
|
||||
<noscript><h4>Manual</h4></noscript>
|
||||
{{ tab-manual | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign tabs = tab-working-camera | concat: tab-non-working-camera | concat: tab-manual %}
|
||||
{% include tabs.html index=0 tabs=tabs %}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
lang: en-US
|
||||
layout: redirect
|
||||
destination: updating-3ds?tab=manual#tab-manual
|
||||
destination: updating-3ds?tab=manual
|
||||
title: Updating (3DS, Manual)
|
||||
---
|
||||
|
||||
@ -5,6 +5,9 @@ section: twilightmenu
|
||||
category: updating
|
||||
title: Updating (3DS)
|
||||
description: How to update TWiLight Menu++ on the Nintendo 3DS
|
||||
tabs:
|
||||
- universal-updater: Universal-Updater
|
||||
manual: Manual
|
||||
---
|
||||
|
||||
If updating from a version older than v16.4.0, please move your `.sav` files for DS games to a new folder called `saves`, with the `saves` folder being in the same place as the DS roms.
|
||||
@ -17,6 +20,7 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
|
||||
1. Press <kbd class="face">A</kbd> or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
|
||||
- This will take a while
|
||||
{% endcapture %}
|
||||
{% assign tab-universal-updater = tab-universal-updater | split: "<!-->" %}
|
||||
|
||||
{% capture tab-manual %}
|
||||
1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
|
||||
@ -26,22 +30,12 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
|
||||
1. Copy the two `.cia` files to your SD card root
|
||||
1. On your 3DS, install the two CIAs with FBI
|
||||
{% endcapture %}
|
||||
{% assign tab-manual = tab-manual | split: "<!-->" %}
|
||||
|
||||
### Updating
|
||||
<div class="tab-container">
|
||||
<div class="pb-3">
|
||||
<a class="tab-link btn btn-outline-secondary tab-default" href="#tab-universal-updater" onclick="openTab(event, event.currentTarget)" data-tab-name="universal-updater">Universal-Updater</a>
|
||||
<a class="tab-link btn btn-outline-secondary" href="#tab-manual" onclick="openTab(event, event.currentTarget)" data-tab-name="manual">Manual</a>
|
||||
</div>
|
||||
<div id="tab-universal-updater">
|
||||
<noscript><h4>Universal-Updater</h4></noscript>
|
||||
{{ tab-universal-updater | markdownify }}
|
||||
</div>
|
||||
<div id="tab-manual">
|
||||
<noscript><h4>Manual</h4></noscript>
|
||||
{{ tab-manual | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign tabs = tab-universal-updater | concat: tab-manual %}
|
||||
{% include tabs.html index=0 tabs=tabs %}
|
||||
|
||||
### More steps for the flashcard side
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user