add clickable post thumbnails to docs homepage
This commit is contained in:
ferricles
parent
0a6a6aea8b
commit
11842d4fce
6 changed files with 126 additions and 6 deletions
27
css/docs_home.css
Normal file
27
css/docs_home.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
article {
|
||||
background-color: #212529;
|
||||
margin: 0 0 30px;
|
||||
padding: 10px 10px 10px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article a {
|
||||
/* display: inline-block;
|
||||
width:100%;
|
||||
height: 100%; */
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
53
docs/damage_calc/index.html
Normal file
53
docs/damage_calc/index.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<title>WynnAtlas Help</title>
|
||||
<link rel="icon" href="/media/icons/new/searcher.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||
|
||||
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
<link href="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="/thirdparty/autoComplete.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
|
||||
<link rel="stylesheet" href="/css/docs_home.css">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
<script type="text/javascript" src="/thirdparty/katex.js"></script>
|
||||
|
||||
</head>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
<a href = "/builder/"><img src="/media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||
<a href = "/crafter/"><img src = "/media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||
<hr/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
<main>
|
||||
<div class="full-width text-center">
|
||||
<!-- <img src="./help_photo.png"/> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p>Hopefully this gets replced by a guide to Wynn 2.1 damage calculation</p>
|
||||
</div>
|
||||
</main>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,9 +19,13 @@
|
|||
|
||||
|
||||
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
|
||||
<link rel="stylesheet" href="/css/docs_home.css">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
<script text = "text/javascript" src = "/js/docs.js"></script>
|
||||
<script text = "text/javascript">document.addEventListener("DOMContentLoaded", (event) => {populate_post_previews();})</script>
|
||||
</head>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
|
|
@ -30,7 +34,7 @@
|
|||
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a href = "."><img src = "/media/icons/new/book.png" alt = "Docs" title = "Docs"><b>Docs</b></a>
|
||||
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||
<hr/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
|
|
@ -43,6 +47,10 @@
|
|||
<h2>Welcome to the WynnBuilder Docs</h2>
|
||||
<p>Documentation Homepage - sections coming soon!</p>
|
||||
</div>
|
||||
|
||||
<div class ="section" id = "post-list">
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script type="text/javascript" src="../../js/icons.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
</head>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||
<hr/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
|
|
@ -39,7 +40,6 @@
|
|||
<div class="full-width text-center">
|
||||
<img src="./help_photo.png"/>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>What the heck is “Advanced Item Search”?</h2>
|
||||
<p>The WynnBuilder team has been hard at work giving you the latest and greatest tools for optimizing your most complex Wynncraft builds. Now, we're introducing <strong class="rb-text">WynnAtlas</strong>, the new, bigger, better, smarter, powerful-er item guide! Featuring an extremely flexible expression language for filtering and sorting items, WynnAtlas' advanced item search system gives build engineers the power to select items with a high degree of granularity. Picking components for your brand-new Divzer WFA build has never been easier!</p>
|
||||
|
|
@ -221,6 +221,6 @@
|
|||
docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2]));
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="../../js/icons.js"></script>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
32
js/docs.js
Normal file
32
js/docs.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/** Vanilla JS does not allow dynamically fetching files in a local directory. We have to hard code the list to loop over.
|
||||
* Each entry is the name of a subfolder in /docs/.
|
||||
*/
|
||||
const docs_post_titles = [
|
||||
"items_adv_help",
|
||||
"damage_calc"
|
||||
]
|
||||
|
||||
/** Populates the HTML element with the id 'post-list'
|
||||
*
|
||||
*/
|
||||
function populate_post_previews() {
|
||||
post_list_parent = document.getElementById('post-list');
|
||||
|
||||
docs_post_titles.forEach((post_title) => {
|
||||
post = document.createElement('article');
|
||||
|
||||
title = document.createElement('h2');
|
||||
title.innerHTML = post_title;
|
||||
post.appendChild(title);
|
||||
|
||||
summary = document.createElement('p');
|
||||
summary.innerHTML = 'temporary content'
|
||||
post.appendChild(summary);
|
||||
|
||||
link = document.createElement("a");
|
||||
link.setAttribute('href', `/docs/${post_title}/`);
|
||||
post.appendChild(link);
|
||||
|
||||
post_list_parent.appendChild(post);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue