diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart
index 9292185..acc663a 100644
--- a/web/dart/reorganize_html.dart
+++ b/web/dart/reorganize_html.dart
@@ -40,7 +40,7 @@ Future makeLanguages() async {
..insertAdjacentElement('beforeEnd', languages);
}
-Element makeTocDropDown() {
+Future makeTocDropDown() async {
return Element.li()
..attributes['id'] = 'toc-drop'
..classes.addAll(['nav-item', 'has-dropdown'])
@@ -49,7 +49,7 @@ Element makeTocDropDown() {
..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn')));
}
-Element makeThemeChanger() {
+Future makeThemeChanger() async {
Element makeThemeItem(String t_btnId, Element t_icon, String t_text) {
return Element.li()
..classes.add('dropdown-item')
@@ -78,43 +78,43 @@ Element makeThemeChanger() {
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 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:
// - One back to home
// - A dropdown to each language detected in the sitemap
Future 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');
// Home
@@ -127,16 +127,16 @@ Future makeNavbar() async {
..append(makeIcon(['fas', 'fa-home']))));
// TOC icon
- navbar_content.append(makeTocDropDown());
+ navbar_content.append(await makeTocDropDown());
// Add languages
navbar_content.append(await makeLanguages());
// Share icon
- navbar_content.append(makeShare());
+ navbar_content.append(await makeShare());
// Theme changer
- navbar_content.append(makeThemeChanger());
+ navbar_content.append(await makeThemeChanger());
// Navbar content added to navbar
final navbar = Element.nav()
@@ -183,11 +183,7 @@ Future wrapTables() async {
Future reorganizeHtml() async {
// Create navbar and then header
await makeNavbar().then((navbar) {
- // querySelector('#toc-drop')
- // .append(querySelector('#table-of-contents')..classes.add('dropdown'));
querySelector('body').insertAdjacentElement('afterBegin', navbar);
- // querySelector('nav').insertAdjacentElement(
- // 'afterEnd', Element.div()..attributes['id'] = 'container');
querySelector('nav').insertAdjacentElement('afterEnd', makeHeader());
querySelector('#toc-drop')
.append(querySelector('#table-of-contents')..classes.add('dropdown'));
diff --git a/web/style/style.scss b/web/style/style.scss
index 47d12a4..885bb49 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -274,14 +274,14 @@ header {
&:focus-within {
.dropdown {
opacity: 1;
- top: $navbar-height / 1.5;
+ top: $navbar-height / 1.3;
z-index: 5;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
- top: $navbar-height / 1.5;
+ top: $navbar-height / 1.3;
z-index: 5;
height: 500%;
pointer-events: auto;