Dart backend update and upgrade, visual overhaul, additionally some Ñyqy updates that were meant for master branch #1

Merged
phundrak merged 38 commits from develop into master 2020-05-05 11:44:27 +00:00
2 changed files with 40 additions and 44 deletions
Showing only changes of commit 56d6c5d1d0 - Show all commits

View File

@ -40,7 +40,7 @@ Future<Element> makeLanguages() async {
..insertAdjacentElement('beforeEnd', languages); ..insertAdjacentElement('beforeEnd', languages);
} }
Element makeTocDropDown() { Future<Element> makeTocDropDown() async {
return Element.li() return Element.li()
..attributes['id'] = 'toc-drop' ..attributes['id'] = 'toc-drop'
..classes.addAll(['nav-item', 'has-dropdown']) ..classes.addAll(['nav-item', 'has-dropdown'])
@ -49,7 +49,7 @@ Element makeTocDropDown() {
..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn'))); ..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn')));
} }
Element makeThemeChanger() { Future<Element> makeThemeChanger() async {
Element makeThemeItem(String t_btnId, Element t_icon, String t_text) { Element makeThemeItem(String t_btnId, Element t_icon, String t_text) {
return Element.li() return Element.li()
..classes.add('dropdown-item') ..classes.add('dropdown-item')
@ -78,43 +78,43 @@ Element makeThemeChanger() {
makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir')));
} }
Element makeShareLink(Element icon, String url) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.a()
..attributes['href'] = url
..attributes['target'] = '_blank'
..append(icon));
}
Future<Element> makeShare() async {
return Element.li()
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-share-alt'])))
..append(Element.ul()
..classes.add('dropdown')
..append(makeShareLink(
makeIcon(['fab', 'fa-twitter-square']),
'https://twitter.com/share?text=${getPageTitle()}'
'&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
..append(makeShareLink(
makeIcon(['fab', 'fa-linkedin']),
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
'&title=${getPageTitle()}'))
..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
}
// Add a navbar atop of the HTML body, containing two buttons: // Add a navbar atop of the HTML body, containing two buttons:
// - One back to home // - One back to home
// - A dropdown to each language detected in the sitemap // - A dropdown to each language detected in the sitemap
Future<Element> makeNavbar() async { Future<Element> makeNavbar() async {
Element makeShare() {
Element makeShareLink(Element icon, String url) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.a()
..attributes['href'] = url
..attributes['target'] = '_blank'
..append(icon));
}
return Element.li()
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-share-alt'])))
..append(Element.ul()
..classes.add('dropdown')
..append(makeShareLink(
makeIcon(['fab', 'fa-twitter-square']),
'https://twitter.com/share?text=${getPageTitle()}'
'&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
..append(makeShareLink(
makeIcon(['fab', 'fa-linkedin']),
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
'&title=${getPageTitle()}'))
..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
}
var navbar_content = Element.ul()..classes.add('navbar-nav'); var navbar_content = Element.ul()..classes.add('navbar-nav');
// Home // Home
@ -127,16 +127,16 @@ Future<Element> makeNavbar() async {
..append(makeIcon(['fas', 'fa-home'])))); ..append(makeIcon(['fas', 'fa-home']))));
// TOC icon // TOC icon
navbar_content.append(makeTocDropDown()); navbar_content.append(await makeTocDropDown());
// Add languages // Add languages
navbar_content.append(await makeLanguages()); navbar_content.append(await makeLanguages());
// Share icon // Share icon
navbar_content.append(makeShare()); navbar_content.append(await makeShare());
// Theme changer // Theme changer
navbar_content.append(makeThemeChanger()); navbar_content.append(await makeThemeChanger());
// Navbar content added to navbar // Navbar content added to navbar
final navbar = Element.nav() final navbar = Element.nav()
@ -183,11 +183,7 @@ Future<void> wrapTables() async {
Future<void> reorganizeHtml() async { Future<void> reorganizeHtml() async {
// Create navbar and then header // Create navbar and then header
await makeNavbar().then((navbar) { await makeNavbar().then((navbar) {
// querySelector('#toc-drop')
// .append(querySelector('#table-of-contents')..classes.add('dropdown'));
querySelector('body').insertAdjacentElement('afterBegin', navbar); querySelector('body').insertAdjacentElement('afterBegin', navbar);
// querySelector('nav').insertAdjacentElement(
// 'afterEnd', Element.div()..attributes['id'] = 'container');
querySelector('nav').insertAdjacentElement('afterEnd', makeHeader()); querySelector('nav').insertAdjacentElement('afterEnd', makeHeader());
querySelector('#toc-drop') querySelector('#toc-drop')
.append(querySelector('#table-of-contents')..classes.add('dropdown')); .append(querySelector('#table-of-contents')..classes.add('dropdown'));

View File

@ -274,14 +274,14 @@ header {
&:focus-within { &:focus-within {
.dropdown { .dropdown {
opacity: 1; opacity: 1;
top: $navbar-height / 1.5; top: $navbar-height / 1.3;
z-index: 5; z-index: 5;
pointer-events: auto; pointer-events: auto;
} }
#table-of-contents { #table-of-contents {
opacity: 1; opacity: 1;
top: $navbar-height / 1.5; top: $navbar-height / 1.3;
z-index: 5; z-index: 5;
height: 500%; height: 500%;
pointer-events: auto; pointer-events: auto;