andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated website navigation

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-28 19:35:25 +03:00
parent 596e2ca849
commit 34fba9cf7c
18 changed files with 226 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/adapter.html
View File

File diff suppressed because one or more lines are too long

6
docs/browser.html
View File

File diff suppressed because one or more lines are too long

6
docs/date.html
View File

File diff suppressed because one or more lines are too long

6
docs/function.html
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

File diff suppressed because one or more lines are too long

8
docs/math.html
View File

File diff suppressed because one or more lines are too long

6
docs/node.html
View File

File diff suppressed because one or more lines are too long

6
docs/object.html
View File

File diff suppressed because one or more lines are too long

95
docs/scss/style.scss
View File

@ -706,12 +706,12 @@ header {
nav {
position: fixed;
top: 3.5rem;
top: 6.5rem;
left: -320px;
width: 320px;
transition: left 0.3s ease;
z-index: 1100;
height: calc(100vh - 3.5rem);
height: calc(100vh - 6.5rem);
box-sizing: border-box;
display: block;
background: var(#{$nav-back-color-var});
@ -748,13 +748,51 @@ nav {
}
}
h4 {
margin: var(#{$universal-margin-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
padding-left: 0;
margin: 0;
padding: calc(2.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var})) calc(1 * var(#{$universal-padding-var})) calc(1 * var(#{$universal-padding-var}));
color: var(#{$nav-fore-color-var});
}
a {
font-size: 1.5rem;
&.collapse {
display: block;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
//background-position: 0rem 1.25rem;
background-position: right 0.5rem top 1.5rem;
background-repeat: no-repeat;
+ ul {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
&.toggled{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
+ ul {
position: relative;
transform: scaleY(1);
}
}
}
+ h4 {
border-top: $__1px solid var(#{$nav-link-border-color-var});
}
> a {
display: block;
line-height: 1;
&:hover, &:focus {
text-decoration: none;
}
}
}
ul {
margin-left: -0.75rem;
background: var(#{$nav-back-color-var});
+ h4 {
border-top: $__1px solid var(#{$nav-link-border-color-var});
}
}
li {
margin: calc(0.5 * var(#{$universal-margin-var}));
margin-left: var(#{$universal-margin-var});
margin-bottom: 0;
@ -764,9 +802,11 @@ nav {
text-decoration: none;
background: var(#{$nav-link-hover-color-var});
}
+ a {
+ li {
margin-top: 0;
}
}
a {
&:link, &:visited {
color: var(#{$nav-link-fore-color-var});
}
@ -774,21 +814,56 @@ nav {
}
[type="search"] {
z-index: 1000;
position: fixed;
top: 3.5rem;
height: 3rem;
left: -320px;
width: 320px;
color: var(#{$search-fore-color-var});
background: var(#{$search-back-color-var});
outline: none;
box-sizing: border-box;
border: none;
border-bottom: $__1px solid var(#{$search-border-color-var});
width: 100%;
margin-bottom: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
transition: all 0.3s ease;
@media screen and (max-width: 320px) {
width: 100%;
}
@media screen and (min-width: #{$grid-medium-breakpoint}) {
width: 33vw;
left: -33vw;
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
width: 25vw;
left: -25vw;
}
&.col-nav {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
left: 0;
// Also apply the main content style to the footer
@media screen and (min-width: #{$grid-medium-breakpoint}) {
+ main.col-centered, + main.col-centered + footer.col-full-width {
grid-column: 5/13;
}
}
@media screen and (min-width: #{$grid-large-breakpoint}) {
+ main.col-centered {
grid-column: 4/12;
padding-left: 8vw;
}
+ main.col-centered + footer.col-full-width {
grid-column: 4/13;
}
}
}
&:hover, &:focus {
border-bottom: $__1px solid var(#{$search-hover-border-color-var});
}
&:focus {
box-shadow: 0 $__1px 0 0 var(#{$search-hover-border-color-var});
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2), inset 0 0-$__1px 0 0 var(#{$search-hover-border-color-var});
}
}

6
docs/string.html
View File

File diff suppressed because one or more lines are too long

2
docs/style.css
View File

File diff suppressed because one or more lines are too long

6
docs/type.html
View File

File diff suppressed because one or more lines are too long

6
docs/utility.html
View File

File diff suppressed because one or more lines are too long

16
scripts/web.js
View File

@ -169,12 +169,12 @@ try {
// Loop over tags and snippets to create the table of contents
for (let tag of taggedData) {
output +=
'<h4>' +
'<h4 class="collapse">' +
md
.render(`${util.capitalize(tag, true)}\n`)
.replace(/<p>/g, '')
.replace(/<\/p>/g, '') +
'</h4>';
'</h4><ul>';
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
output += md
.render(
@ -183,11 +183,15 @@ try {
}#${taggedSnippet[0].toLowerCase()})\n`
)
.replace(/<p>/g, '')
.replace(/<\/p>/g, '')
.replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`);
output += '\n';
.replace(/<\/p>/g, '</li>')
.replace(/<a/g, `<li><a tags="${taggedSnippet[1].join(',')}"`);
output += '</ul>\n';
}
output += '</nav><main class="col-centered"><span id="top"><br/><br/></span>';
output += `<h4><a href="./archive">Archive</a></h4>
<h4><a href="./glossary">Glossary</a></h4>
<h4><a href="./contributing">Contributing</a></h4>
<h4><a href="./about">About</a></h4>
</nav><main class="col-centered"><span id="top"><br/><br/></span>`;
// Loop over tags and snippets to create the list of snippets
for (let tag of taggedData) {
let localOutput = output

4
static-parts/archived-page-start.html
View File

@ -63,10 +63,12 @@
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {

43
static-parts/beginner-page-start.html
View File

@ -14,11 +14,25 @@
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
let matchingTags = [];
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
})
}
function scrollToTop() {
const c = document.querySelector('html').scrollTop;
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('html').scrollTo(0, c - c / 4);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
@ -37,13 +51,27 @@
};
function loader() {
registerClickListener();
if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('clipboard-copy')) {
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
@ -62,15 +90,6 @@
}, 300);
}, 1700);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.classList.contains('sublink-1')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
document.getElementById('doc-drawer-checkbox').checked = false;
}
}, false);
}
</script>

4
static-parts/glossary-page-start.html
View File

@ -63,10 +63,12 @@
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {

6
static-parts/page-start.html
View File

@ -63,10 +63,12 @@
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {
@ -101,5 +103,5 @@
</a></h1>
</header>
<div class="container card-container">
<nav>
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>