Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-23 06:09:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4 from J-onasJones/mobile-view

Browse source 
WIP Mobile View
This commit is contained in:
Jonas_Jones 2023-10-02 19:48:16 +02:00 • committed by GitHub
commit 5b6eb52140
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 164 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="darkreader-lock">
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />

26
src/lib/components/Footer.svelte
View file

@ -4,10 +4,8 @@
<!-- Footer.svelte --> <!-- Footer.svelte -->
<footer> <footer>
<div class="footer-flex">
<a href="/">Home</a> <a href="/">Home</a>
<div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p>
</div>
<nav> <nav>
<ul> <ul>
<li> <li>
@ -21,19 +19,26 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
<div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p>
</div>
</footer> </footer>
<style> <style>
footer { footer {
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
margin-bottom: 0; margin-bottom: 2rem;
margin-top: 0; margin-top: 0;
background: var(--container-background-color); background: var(--container-background-color);
border-radius: 0.5rem;
}
.footer-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
border-radius: 0.5rem;
} }
ul { ul {
@ -49,9 +54,14 @@
} }
.footer { .footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px; font-size: 20px;
text-align: center;
}
@media (max-width: 550px) {
footer {
margin: 0;
border-radius: 0;
}
} }
</style> </style>

25
src/lib/components/Header.svelte
View file

@ -9,7 +9,14 @@
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="https://jonasjones.dev/"><img style="padding-top: 7px;" src="/homepage.png" height="30px" alt="Homepage"></a> <a href="https://jonasjones.dev/"
><img
style="padding-top: 7px;"
src="/homepage.png"
height="30px"
alt="Homepage"
/></a
>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -19,7 +26,7 @@
header { header {
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
margin-top: 0; margin-top: 2rem;
margin-bottom: 0; margin-bottom: 0;
background: rgb(0, 255, 0); background: rgb(0, 255, 0);
display: flex; display: flex;
@ -61,4 +68,18 @@
float: left; float: left;
clear: both; clear: both;
} }
@media screen and (max-width: 550px) {
header h1 {
font-size: 20px;
float:none;
padding-left: 40px;
}
header {
margin: 0;
border-radius: 0;
text-align: left;
}
}
</style> </style>

74
src/lib/components/Navbar.svelte
View file

@ -1,80 +1,14 @@
<script> <script>
// @ts-nocheck import NavbarList from "./NavbarList.svelte";
let data = import.meta.glob("/src/routes/**/+page.md");
let paths = data;
/**
* @param {Record<string, () => Promise<unknown>>} paths
*/
function buildHierarchy(paths) {
const nestedList = {};
let fixedpaths = [];
/**
* @type {string[]}
*/
let fixedpaths2 = [];
fixedpaths = Object.keys(paths);
fixedpaths.forEach((path) => {
const fixedpath = path
.replace("/+page.md", "")
.replace("/src/routes", "");
fixedpaths2.push(fixedpath);
});
fixedpaths2.forEach((folder) => {
const parts = folder.split("/").filter(Boolean);
let currentNode = nestedList;
parts.forEach((part) => {
if (!currentNode[part]) {
currentNode[part] = {};
}
currentNode = currentNode[part];
});
});
return nestedList;
}
const nestedFolders = buildHierarchy(paths);
function createHtmlList(obj, parentPath = "", depth = 0) {
let html = "";
for (const key in obj) {
const currentPath = parentPath ? `${parentPath}/${key}` : key;
if (
typeof obj[key] === "object" &&
Object.keys(obj[key]).length > 0
) {
// If the value is an object and not empty, create a nested div
html += `
<li><h${depth + 3}><a href="/${currentPath}">${key}</a></h${
depth + 3
}></li>
<ul>
${createHtmlList(obj[key], currentPath, depth + 1)}
</ul>
`;
} else {
// If the value is not an object or empty, create a clickable list item
html += `<li><a href="/${currentPath}">${key}</a></li>`;
}
}
return html;
}
//const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
let renderedList = createHtmlList(nestedFolders);
</script> </script>
<div class="container navbar"> <div class="container navbar">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2>Pages</h2> <h2>Pages</h2>
{@html renderedList} <div class="navbar-links">
<NavbarList />
</div>
</div> </div>
</div> </div>
</div> </div>

73
src/lib/components/NavbarList.svelte Normal file
View file

@ -0,0 +1,73 @@
<script>
// @ts-nocheck
let data = import.meta.glob("/src/routes/**/+page.md");
let paths = data;
/**
* @param {Record<string, () => Promise<unknown>>} paths
*/
function buildHierarchy(paths) {
const nestedList = {};
let fixedpaths = [];
/**
* @type {string[]}
*/
let fixedpaths2 = [];
fixedpaths = Object.keys(paths);
fixedpaths.forEach((path) => {
const fixedpath = path
.replace("/+page.md", "")
.replace("/src/routes", "");
fixedpaths2.push(fixedpath);
});
fixedpaths2.forEach((folder) => {
const parts = folder.split("/").filter(Boolean);
let currentNode = nestedList;
parts.forEach((part) => {
if (!currentNode[part]) {
currentNode[part] = {};
}
currentNode = currentNode[part];
});
});
return nestedList;
}
const nestedFolders = buildHierarchy(paths);
function createHtmlList(obj, parentPath = "", depth = 0) {
let html = "";
for (const key in obj) {
const currentPath = parentPath ? `${parentPath}/${key}` : key;
if (
typeof obj[key] === "object" &&
Object.keys(obj[key]).length > 0
) {
// If the value is an object and not empty, create a nested div
html += `
<li><h${depth + 3} style='margin:0'><a href="/${currentPath}">${key}</a></h${
depth + 3
}></li>
<ul>
${createHtmlList(obj[key], currentPath, depth + 1)}
</ul>
`;
} else {
// If the value is not an object or empty, create a clickable list item
html += `<li><a href="/${currentPath}">${key}</a></li>`;
}
}
return html;
}
//const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
let renderedList = createHtmlList(nestedFolders);
</script>
{@html renderedList}

34
src/lib/styles/style.css
View file

@ -73,7 +73,7 @@ main {
.navbar { .navbar {
float: left; float: left;
padding: 2rem; padding: 2rem;
min-width: 300px; min-width: 200px;
margin-right: 2rem; margin-right: 2rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -125,3 +125,35 @@ details {
details a { details a {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.content {
margin-left: 0;
overflow: scroll;
white-space: initial;
}
@media screen and (max-width: 900px) {
.container {
flex-direction: column;
}
.content {
margin-left: 32px;
margin-top: 0;
}
}
@media screen and (max-width: 550px) {
.column {
margin: 0;
margin-bottom: 1rem;
border-radius: 0;
}
main {
margin: 0;
padding: 15px;
margin-bottom: 1rem;
border-radius: 0;
}
}

12
src/routes/+layout.svelte
View file

@ -4,24 +4,14 @@
import Navbar from "$lib/components/Navbar.svelte"; import Navbar from "$lib/components/Navbar.svelte";
</script> </script>
<div style="height:2rem" />
<Header /> <Header />
<div class="container"> <div class="container">
<div class="column"><Navbar /></div> <div class="column"><Navbar /></div>
<div class="column content flex_grow" style="margin-left: 0;"> <div class="column content flex_grow">
<main> <main>
<slot /> <slot />
<!-- Please god forgive me -->
<h1
style="color: var(--container-background-color);margin:0;padding:0"
class="unselectable"
>
YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT
SEE THIS
</h1>
</main> </main>
</div> </div>
</div> </div>
<Footer /> <Footer />
<div style="height:2rem" />