From 976a7861aaba516b7e4f886d4b2300fcd8f2ebbd Mon Sep 17 00:00:00 2001 From: Ash Monty Date: Sun, 7 Aug 2022 22:58:38 +0200 Subject: [PATCH] style: mobile layout, tips, minor changes --- docs/en-US/install/wiiu.md | 16 +++ public/assets/css/documentation.css | 137 +++++++++++++++++++++++-- public/assets/js/docssidebarhandler.js | 5 + src/routes/docs.js | 2 +- views/docs/docs.handlebars | 9 +- views/docs/install.handlebars | 9 +- views/docs/search.handlebars | 9 +- views/partials/docs-sidebar.handlebars | 8 ++ 8 files changed, 182 insertions(+), 13 deletions(-) create mode 100644 docs/en-US/install/wiiu.md create mode 100644 public/assets/js/docssidebarhandler.js diff --git a/docs/en-US/install/wiiu.md b/docs/en-US/install/wiiu.md new file mode 100644 index 0000000..3cadcc5 --- /dev/null +++ b/docs/en-US/install/wiiu.md @@ -0,0 +1,16 @@ +# Wii U + +This guide assumes your Wii U can already run Homebrew. If not, you can [follow this guide](https://wiiu.hacks.guide/) and come back here when you're done. + +
+guide lol +
+ +
+guide lol +
+ +
+guide lol +
+ diff --git a/public/assets/css/documentation.css b/public/assets/css/documentation.css index 6d1f85d..b8410f0 100644 --- a/public/assets/css/documentation.css +++ b/public/assets/css/documentation.css @@ -12,6 +12,16 @@ a.logo-link { text-decoration: none; } +button#openSidebar { + display: none; +} + +.docs-wrapper .content:not(.search) a { + text-decoration: none; + font-weight: bold; + color: var(--accent-shade-1); +} + .docs-wrapper header { box-sizing: border-box; margin: 20px; @@ -35,7 +45,7 @@ a.logo-link { display: flex; flex-flow: column; align-items: center; - width: clamp(270px, 30vw, 500px); + width: clamp(270px, 25vw, 500px); overflow-y: scroll; overflow-x: hidden; min-height: 100%; @@ -128,6 +138,35 @@ a.logo-link { margin-left: auto; } +.docs-wrapper .content-inner div.tip { + position: relative; + width: 100%; + padding: 36px; + background: var(--bg-shade-2); + border-radius: 8px; + overflow: hidden; + border: var(--accent-shade-2); + margin: 24px 0; + box-sizing: border-box; +} + +.docs-wrapper .content-inner div.tip::after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 12px; + background: var(--accent-shade-2); + opacity: 1; +} +.docs-wrapper .content-inner div.tip.red::after { + background: var(--red-shade-1); +} +.docs-wrapper .content-inner div.tip.green::after { + background: var(--green-shade-1); +} + .docs-wrapper .content .missing-in-locale-notice { background: var(--bg-shade-2); padding: 24px; @@ -188,11 +227,11 @@ a.logo-link { margin-top: 36px; } -.platform-grid a { +.docs-wrapper .platform-grid a { text-decoration: none; background: var(--bg-shade-3); border-radius: 12px; - color: var(--text-shade-4); + color: var(--text-shade-4) !important; display: grid; grid-template-rows: auto fit-content(100%); align-items: center; @@ -214,14 +253,94 @@ a.logo-link { font-size: 1.2rem; } -/* -@media screen and (max-width: 1080px) { - .docs-wrapper .sidebar .section { - margin-left: 60px; - width: 184px; +@media screen and (max-width: 1296px) { + .docs-wrapper .content { + padding: 48px; + } +} + +@media screen and (max-width: 1080px) { + .docs-wrapper .header-wrapper { + position: absolute; + top: 0; + left: 0; + display: flex; + width: 100vw; + } + + button#openSidebar { + display: block; + padding: 0; + margin: 0; + margin-left: 20px; + background: none; + } + + .docs-wrapper header { + margin-left: 20px; + width: 100%; + } + + .docs-wrapper { + margin-top: 80px; + height: calc(100% - 80px); + } + + a.logo-link { + display: none; + } + .docs-wrapper header a.logo-link { + display: block; + height: 40px; + margin: 0; + margin-right: 34px; + } + + .docs-wrapper .sidebar { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + width: 0; + transition: width 250ms; + } + + .docs-wrapper .sidebar.open { + width: min(300px, 100vw); + } + + .docs-wrapper .content { + width: 100vw; + box-sizing: border-box; + border-top-left-radius: 0; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + } + .docs-wrapper .content-inner { + max-width: none; + } +} + +@media screen and (max-width: 820px) { + .docs-wrapper .content .quick-links-grid, + .platform-grid { + grid-template-columns: 1fr; + } +} + +@media screen and (max-width: 492px) { + .docs-wrapper .content { + padding: 36px; + } + + header .logo-link svg text { + display: none; + } + header .logo-link svg { + width: 39.876px; + } + .docs-wrapper header a.logo-link { + margin-right: 0; } } -*/ /* Scrollbar styling 'cause it's fancy */ .docs-wrapper .sidebar::-webkit-scrollbar, diff --git a/public/assets/js/docssidebarhandler.js b/public/assets/js/docssidebarhandler.js new file mode 100644 index 0000000..c8eca65 --- /dev/null +++ b/public/assets/js/docssidebarhandler.js @@ -0,0 +1,5 @@ +const openSidebarBtn = document.querySelector('#openSidebar'); +openSidebarBtn.addEventListener('click', function() { + const sidebar = document.querySelector('.sidebar'); + sidebar.classList.toggle('open'); +}); diff --git a/src/routes/docs.js b/src/routes/docs.js index 770700b..d02b0c6 100644 --- a/src/routes/docs.js +++ b/src/routes/docs.js @@ -92,8 +92,8 @@ router.get('/:subpath/:page', async (request, response, next) => { const locale = response.locals.localeString; const pageName = request.params.page; - renderData.currentPage = pageName; const subpath = request.params.subpath; + renderData.currentPage = `${subpath}/${pageName}`; const { content, MDLocale } = getRawDocs(locale, subpath, pageName); if (content) { diff --git a/views/docs/docs.handlebars b/views/docs/docs.handlebars index c18d337..fd05392 100644 --- a/views/docs/docs.handlebars +++ b/views/docs/docs.handlebars @@ -27,7 +27,12 @@ - {{> header}} +
+ + {{> header}} +
{{> docs-sidebar}} @@ -63,6 +68,8 @@ + + diff --git a/views/docs/install.handlebars b/views/docs/install.handlebars index f19aa67..d36a766 100644 --- a/views/docs/install.handlebars +++ b/views/docs/install.handlebars @@ -27,7 +27,12 @@ - {{> header}} +
+ + {{> header}} +
{{> docs-sidebar}} @@ -59,6 +64,8 @@ + + diff --git a/views/docs/search.handlebars b/views/docs/search.handlebars index 7476fcd..339a4a2 100644 --- a/views/docs/search.handlebars +++ b/views/docs/search.handlebars @@ -27,7 +27,12 @@ - {{> header}} +
+ + {{> header}} +
{{> docs-sidebar}} @@ -48,6 +53,8 @@ + + diff --git a/views/partials/docs-sidebar.handlebars b/views/partials/docs-sidebar.handlebars index 82b45ea..c0f31b2 100644 --- a/views/partials/docs-sidebar.handlebars +++ b/views/partials/docs-sidebar.handlebars @@ -6,6 +6,14 @@ Search +
+
Install
+ Wii U + 3DS + Cemu + Citra +
+
Error codes - Juxt
JXT-598-0000