From 92163f887fec5eff59009b13a6f1161d2ce7a288 Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 11 Jan 2022 11:23:06 +1100 Subject: [PATCH] Upgrade to bootstrap v4.6.1, using CDN bootstrap for now (many things broken) --- .gitignore | 1 + navbar.jst | 131 ++++++++++++++++++++++++++++++----------------------- page.jst | 44 ++++++++---------- 3 files changed, 94 insertions(+), 82 deletions(-) diff --git a/.gitignore b/.gitignore index cbdda53..678b875 100644 --- a/.gitignore +++ b/.gitignore @@ -7,5 +7,6 @@ .*.svg /_zet/site.* /database.logjson +/database.logjson.* /node_modules /package-lock.json diff --git a/navbar.jst b/navbar.jst index 076b59d..69e15cc 100644 --- a/navbar.jst +++ b/navbar.jst @@ -74,14 +74,21 @@ return async (env, head, body, scripts) => { //} //p {} - form(action="/search/index.html") { - div.input-group { - input.form-control(name="query" type="text" placeholder="Search") {} - span.input-group-btn { - button.btn.btn-default(type="submit") { - _out.push(icon_search_mono) - } - } + //form(action="/search/index.html") { + // div.input-group { + // input.form-control(name="query" type="text" placeholder="Search") {} + // span.input-group-btn { + // button.btn.btn-default(type="submit") { + // _out.push(icon_search_mono) + // } + // } + // } + //} + form.form-inline.'my-2'.my-lg-0(action="/search/index.html") { + input.form-control.mr-sm-2(name="query" type="text" placeholder="Search" aria-label="Search") {} + ' ' + button.btn.btn-outline-success.'my-2'.my-sm-0(type="submit") { + 'Search' } } } @@ -103,57 +110,69 @@ return async (env, head, body, scripts) => { } } } - nav.navbar.navbar-default(style="margin-top: 0px; margin-bottom: 0px;") { - div(style="padding-left: calc(100vw - 100%);") { - div.container { //-fluid") { - // Brand and toggle get grouped for better mobile display - div.navbar-header { - button.navbar-toggle.collapsed(type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false") { - span.sr-only {'Toggle navigation'} - span.icon-bar {} - span.icon-bar {} - span.icon-bar {} - } - //a.navbar-brand(href="#") {'Brand'} - } - - // Collect the nav links, forms, and other content for toggling - div.collapse.navbar-collapse#bs-example-navbar-collapse-1 { - ul.nav.navbar-nav { - if (dir.length === 0) - li.active { - a(href="/index.html") { - 'Home' - span.sr-only {'(current)'} - } - } - else - li { - a(href="/index.html") { - 'Home' - } + nav.navbar.navbar-expand-lg.navbar-light.bg-light { + div.container { //div(style="padding-left: calc(100vw - 100%);") { + //a.navbar-brand(href="#") {'Navbar'} + //' ' + button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") { + span.navbar-toggler-icon {} + } + div.collapse.navbar-collapse#navbarSupportedContent { + ul.navbar-nav.mr-auto { + if (dir.length === 0) + li.nav-item.active { + a.nav-link(href="/index.html") { + 'Home' + span.sr-only {' (current)'} } - let entries = menu.entries - for (let i = 0; i < entries.length; ++i) - if (entries[i].navbar) - if (entries[i].dir === dir) - li.active { - a(href=`/${entries[i].dir}/index.html`) { - `${entries[i].name}` - span.sr-only {'(current)'} - } + } + else + li.nav-item { + a.nav-link(href="/index.html") {'Home'} + } + let entries = menu.entries + for (let i = 0; i < entries.length; ++i) + if (entries[i].navbar) + if (entries[i].dir === dir) + li.nav-item.active { + a.nav-link(href=`/${entries[i].dir}/index.html`) { + `${entries[i].name}` + span.sr-only {' (current)'} } - else - li { - a(href=`/${entries[i].dir}/index.html`) { - `${entries[i].name}` - } + } + else + li.nav-item { + a.nav-link(href=`/${entries[i].dir}/index.html`) { + `${entries[i].name}` } - } - ul.nav.navbar-nav.navbar-right { - li { - a#give-feedback(href="") {'Give feedback'} - } + } + //li.nav-item.dropdown { + // a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") { + // 'Dropdown' + // } + // div.dropdown-menu(aria-labelledby="navbarDropdown") { + // a.dropdown-item(href="#") { + // 'Action' + // } + // ' ' + // a.dropdown-item(href="#") { + // 'Another action' + // } + // div.dropdown-divider {} + // a.dropdown-item(href="#") { + // 'Something else here' + // } + // } + //} + //li.nav-item { + // a.nav-link.disabled { + // 'Disabled' + // } + //} + } + ul.navbar-nav.ml-auto { + li.nav-item { + a.nav-link#give-feedback(href="") {'Give feedback'} } } } diff --git a/page.jst b/page.jst index 2d1e3dc..7dec5da 100644 --- a/page.jst +++ b/page.jst @@ -32,39 +32,31 @@ return async (env, head, body, scripts) => { await transaction.commit() let _out = [] - _out.push('') + _out.push('') html(lang="en") { head { + // Required meta tags meta(charset="utf-8") {} - meta(http-equiv="X-UA-Compatible" content="IE=edge") {} - meta(name="viewport" content="width=device-width,initial-scale=1") {} - // The above 3 meta tags *must* come first in the head; - // any other head content must come *after* these tags - - link(rel="stylesheet" href="/css/bootstrap.css") {} - link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Frank+Ruhl+Libre:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {} - link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {} - - await head(_out) + meta(name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no") {} - // HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries - // WARNING: Respond.js doesn't work if you view the page via file:// - _out.push('') + // Bootstrap CSS + link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous") {} - // use favicon generator website to get favicons.zip and favicons.html - _out.push(favicons) + await head(_out) //title {'Hello, world!'} } body { - await body(_out) - - // jQuery (necessary for Bootstrap's JavaScript plugins) - script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js") {} - // Include all compiled plugins (below), or include individual files as needed - //script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous") {} - script(src="/js/bootstrap.js") {} + await body(_out) //h1 {'Hello, world!'} + + // Optional JavaScript; choose one of the two! + + // Option 1: jQuery and Bootstrap Bundle (includes Popper) + script(src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous") {} + script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous") {} + + // Option 2: Separate Popper and Bootstrap JS + //script(src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous") {} + //script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous") {} + //script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous") {} await scripts(_out) } -- 2.34.1