Fix navbar spacing, headings spacing, modal dialogs
[ndcode_site.git] / navbar.jst
index 99d54bf..fea0c4a 100644 (file)
@@ -45,76 +45,65 @@ return async (env, head, body, scripts) => {
       let index = env.parsed_url.pathname.indexOf('/', 1)
       let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
 
-      div(style="padding-left: calc(100vw - 100%);") {
-        div.container(style="margin-top: 5px; margin-bottom: 5px;") {
-          div.row {
-            div.'col-sm-8'.vbottom {
-              _out.push(logo_large)
-            }
-            div.'col-sm-4'.vbottom(style="padding-bottom: 15px;") {
-              //div {
-              //  let signed_in =
-              //    Object.prototype.hasOwnProperty.call(env.session, 'account')
-              //  span#signed-in-status {
-              //    if (signed_in)
-              //      `Signed in as ${env.session.account}.`
-              //    else
-              //      'Browsing as guest.'
-              //  }
-              //  ' '
-              //  if (signed_in)
-              //    a#sign-in(href="" hidden="") {'Sign in'}
-              //  else
-              //    a#sign-in(href="") {'Sign in'}
-              //  ' '
-              //  if (signed_in)
-              //    a#sign-out(href="") {'Sign out'}
-              //  else
-              //    a#sign-out(href="" hidden="") {'Sign out'}
-              //}
-              //p {}
+      div.container {
+        div.row.align-items-center.py-3 {
+          div.col-sm-8 {
+            _out.push(logo_large)
+          }
+          div.'col-sm-4' {
+            //div {
+            //  let signed_in =
+            //    Object.prototype.hasOwnProperty.call(env.session, 'account')
+            //  span#signed-in-status {
+            //    if (signed_in)
+            //      `Signed in as ${env.session.account}.`
+            //    else
+            //      'Browsing as guest.'
+            //  }
+            //  ' '
+            //  if (signed_in)
+            //    a#sign-in(href="" hidden="") {'Sign in'}
+            //  else
+            //    a#sign-in(href="") {'Sign in'}
+            //  ' '
+            //  if (signed_in)
+            //    a#sign-out(href="") {'Sign out'}
+            //  else
+            //    a#sign-out(href="" hidden="") {'Sign out'}
+            //}
+            //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.form-inline.'my-2'.my-lg-0(action="/search/index.html") {
-                div.input-group.mb-3 {
-                  input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
-                  div.input-group-append {
-                    button.btn.btn-outline-secondary#search-button(type="submit") {
-                      _out.push(icon_search_mono)
-                    }
+            form/*.form-inline*/(action="/search/index.html") {
+              div.input-group {
+                input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
+                div.input-group-append {
+                  button.btn.btn-outline-secondary#search-button(type="submit") {
+                    _out.push(icon_search_mono)
                   }
                 }
               }
             }
-            //div.'col-sm-1'.vbottom {
-            //  // a nested div is used to avoid hover colour on the padding
-            //  div.nav-li-a(style="text-align: center;") {
-            //    a(href="/online_store/view_cart/index.html") {
-            //      div.cart-icon {
-            //        _out.push(icon_cart_small)
-            //      }
-            //      div.cart-number {
-            //        div.cart-circle {
-            //          `${(env.cart.items || []).length}`
-            //        }
-            //      }
-            //    }
-            //  }
-            //}
           }
+
+          //div.'col-sm-1'.vbottom {
+          //  // a nested div is used to avoid hover colour on the padding
+          //  div.nav-li-a(style="text-align: center;") {
+          //    a(href="/online_store/view_cart/index.html") {
+          //      div.cart-icon {
+          //        _out.push(icon_cart_small)
+          //      }
+          //      div.cart-number {
+          //        div.cart-circle {
+          //          `${(env.cart.items || []).length}`
+          //        }
+          //      }
+          //    }
+          //  }
+          //}
         }
       }
       nav.navbar.navbar-expand-lg.navbar-dark.bg-primary {
-        div.container { //div(style="padding-left: calc(100vw - 100%);") {
+        div.container {
           //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") {
@@ -181,15 +170,13 @@ return async (env, head, body, scripts) => {
           }
         }
       }
-      div(style="padding-left: calc(100vw - 100%); margin-top: 20px; margin-bottom: 40px;") {
-        div.container {
-          await body(_out)
-        }
+      div.container {
+        await body(_out)
       }
-      div.footer(style="padding-left: calc(100vw - 100%);") {
+      footer {
         div.container {
           a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-            img(alt="Creative Commons License" style="border-width:0" src="/images/by-sa_3.0_88x31.png") {}
+            img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
           }
           p {
             'This website is '
@@ -214,12 +201,7 @@ return async (env, head, body, scripts) => {
       //  div.modal-dialog {
       //    div.modal-content {
       //      div.modal-header {
-      //        button.close(type="button" data-dismiss="modal") {
-      //          '×'
-      //        }
-      //        h4.modal-title {
-      //          'Sign in'
-      //        }
+      //        span.h4.modal-title {'Sign in'}
       //      }
       //      div.modal-body {
       //        form#sign-in-form(method="post" action="/sign_in.json" role="form") {
@@ -258,7 +240,7 @@ return async (env, head, body, scripts) => {
       //        button.btn.btn-primary(type="submit" form="sign-in-form") {
       //          'Sign in'
       //        }
-      //        button.btn.btn-default(type="button" data-dismiss="modal") {
+      //        button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
       //          'Cancel'
       //        }
       //      }
@@ -270,12 +252,7 @@ return async (env, head, body, scripts) => {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
-              button.close(type="button" data-dismiss="modal") {
-                '×'
-              }
-              h4.modal-title {
-                'Give feedback'
-              }
+              span.h4.modal-title {'Give feedback'}
             }
             div.modal-body {
               p {
@@ -310,7 +287,7 @@ return async (env, head, body, scripts) => {
               button.btn.btn-primary(type="submit" form="feedback-form") {
                 'Submit'
               }
-              button.btn.btn-default(type="button" data-dismiss="modal") {
+              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Cancel'
               }
             }
@@ -322,18 +299,13 @@ return async (env, head, body, scripts) => {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
-              button.close(type="button" data-dismiss="modal") {
-                '×'
-              }
-              h4.modal-title {
-                'Message'
-              }
+              span.h4.modal-title {'Message'}
             }
             div.modal-body {
               p#message-modal-message {}
             }
             div.modal-footer {
-              button.btn.btn-default(type="button" data-dismiss="modal") {
+              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Close'
               }
             }