[WIP] upgrade to Bootstrap 5

hgrf · Apr 20, 2023 · 2b0e1aa · 2b0e1aa
1 parent 3c2f974
commit 2b0e1aa
Show file tree

Hide file tree

Showing 10 changed files with 322 additions and 179 deletions.
diff --git a/Makefile b/Makefile
@@ -265,7 +265,7 @@ install-mathjax:
 
 install-js-dependencies: install-mathjax api-client
 	mkdir -p app/static/css
-	mkdir -p app/static/fonts
+	mkdir -p app/static/css/fonts
 
 	# install typeahead.js
 	wget -O js/src/typeahead/typeahead.bundle.js \
@@ -288,7 +288,8 @@ install-js-dependencies: install-mathjax api-client
 	cd js && npm install && npx rollup -c
 
 	cp js/node_modules/bootstrap/dist/css/bootstrap.min.css app/static/css/bootstrap.min.css
-	cp js/node_modules/bootstrap/dist/fonts/* app/static/fonts/
+	cp js/node_modules/bootstrap-icons/font/bootstrap-icons.css app/static/css/bootstrap-icons.css
+	cp js/node_modules/bootstrap-icons/font/fonts/* app/static/css/fonts/
 
 	cp js/node_modules/bootstrap-toc/dist/bootstrap-toc.min.css app/static/css/bootstrap-toc.min.css
 

diff --git a/app/static/.gitignore b/app/static/.gitignore
@@ -1,11 +1,12 @@
 mathjax/
 
 css/bootstrap.min.css
+css/bootstrap-icons.css
 css/bootstrap-toc.min.css
 css/lightbox.css
 css/typeahead.css
 
-fonts/
+css/fonts/
 
 images/close.png
 images/loading.gif

diff --git a/app/static/css/sidebars.css b/app/static/css/sidebars.css
@@ -0,0 +1,91 @@
+/* from https://getbootstrap.com/docs/5.0/examples/sidebars/sidebars.css */
+
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+main {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100vh;
+  height: -webkit-fill-available;
+  max-height: 100vh;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.b-example-divider {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+.dropdown-toggle { outline: 0; }
+
+.nav-flush .nav-link {
+  border-radius: 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, .65);
+  background-color: transparent;
+  border: 0;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: rgba(0, 0, 0, .85);
+  background-color: #d2f4ea;
+}
+
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform .35s ease;
+  transform-origin: .5em 50%;
+}
+
+.btn-toggle[aria-expanded="true"] {
+  color: rgba(0, 0, 0, .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: #d2f4ea;
+}
+
+.scrollarea {
+  overflow-y: auto;
+}
+
+.fw-semibold { font-weight: 600; }
+.lh-tight { line-height: 1.25; }
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -2,6 +2,7 @@
 
 {% block styles %}
 {{ super() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/sidebars.css') }}">
     <style>
     /* TODO: this should be in something like base.css */
     div.sample {
@@ -17,24 +18,74 @@
 {% endblock %}
 
 {% block navbar_top %}
-    <ul class="nav navbar-nav navbar-right">
+    <ul class="navbar-nav navbar-right">
         {% if current_user.is_admin %}
-            <li><a href="/settings/smbresources"><i class="hidden-xs glyphicon glyphicon-wrench" title="Settings"></i><span class="visible-xs-block">Settings</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="/settings/smbresources"><i class="d-none d-sm-block bi-gear" title="Settings"></i><span class="d-sm-none">Settings</span></a></li>
         {% endif %}
-        <li><a href="/print"><i class="hidden-xs glyphicon glyphicon-print" title="Print"></i><span class="visible-xs-block">Print</span></a></li>
-        <li><a href="/profile/changedetails"><i class="hidden-xs glyphicon glyphicon-user" title="Profile"></i><span class="hidden-xs">&nbsp;&nbsp;{{ current_user.username }}</span><span class="visible-xs-block">Profile</span></a></li>
-        <li><a href="{{ url_for('auth.logout') }}"><i class="hidden-xs glyphicon glyphicon-log-out" title="Sign out"></i><span class="visible-xs-block">Sign out</span></a></li>
-        <li><a href="/help"><i class="hidden-xs glyphicon glyphicon-question-sign" title="Help"></i><span class="visible-xs-block">Help</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/print"><i class="d-none d-sm-block bi-printer" title="Print"></i><span class="d-sm-none">Print</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/profile/changedetails"><i class="d-none d-sm-inline bi-person" title="Profile"></i><span class="d-none d-sm-inline">&nbsp;&nbsp;{{ current_user.username }}</span><span class="d-sm-none">Profile</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('auth.logout') }}"><i class="d-none d-sm-block bi-box-arrow-right" title="Sign out"></i><span class="d-sm-none">Sign out</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/help"><i class="d-none d-sm-block bi-question-circle" title="Help"></i><span class="d-sm-none">Help</span></a></li>
     </ul>
-    <form class="nav navbar-form navbar-right">
+    {# <form class="nav navbar-form navbar-right">
         <input type="text" id="navbar-search" class="form-control" placeholder="Search...">
-    </form>
+    </form>  #}
 {% endblock %}
 
 {% set begin_flashmsg = "<div class='alert alert-warning col-sm-9 col-md-10'><button type='button' class='close' data-dismiss='alert'>&times;</button>" %}
 {% set end_flashmsg = "</div>" %}
 {% block content %}
-    <div class="container-fluid">
+<main>
+<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
+    <ul class="list-unstyled ps-0">
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
+          Home
+        </button>
+        <div class="collapse" id="home-collapse" style="">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">Overview</a></li>
+            <li><a href="#" class="link-dark rounded">Updates</a></li>
+            <li><a href="#" class="link-dark rounded">Reports</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+          Dashboard
+        </button>
+        <div class="collapse" id="dashboard-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+          Orders
+        </button>
+        <div class="collapse" id="orders-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+          Account
+        </button>
+        <div class="collapse" id="account-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div>
+  {% block page_content %}
+  {% endblock %}
+  </div>
+</main>
+    {# <div class="container-fluid">
       <div class="row">
         {% block sidebarnav %}{% endblock %}
         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
@@ -54,5 +105,5 @@
       </div>
     </div>
 
-    <div class="content-overlay"></div>
+    <div class="content-overlay"></div> #}
 {% endblock %}
diff --git a/app/templates/main/main.html b/app/templates/main/main.html
@@ -3,8 +3,8 @@
 {% block styles %}
 {{super()}}
     <link rel="stylesheet" href="{{url_for('static', filename='css/lightbox.css')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">
+    <!--<link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">-->
+    <!--<link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">-->
 {% endblock %}
 
 {% block sidebarnav %}

diff --git a/app/templates/racine.html b/app/templates/racine.html
@@ -17,8 +17,8 @@
 {{ super() }}
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}">
-    <link rel="stylesheet" href="{{url_for('static', filename='base.css')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}">
+    {# <link rel="stylesheet" href="{{url_for('static', filename='base.css')}}"> #}
+    {# <link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}"> #}
     {% if config['DEBUG'] %}
         <style>
             .navbar-fixed-top {
@@ -29,24 +29,19 @@
 {% endblock %}
 
 {% block navbar %}
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container-fluid">
-            <div class="navbar-header">
-                <div class="nav-button nav-button-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <i class="glyphicon glyphicon-option-vertical"></i>
-                </div>
-                <div id="toggle-sidebar" class="nav-button nav-button-left nav-button-toggle">
-                    <i class="glyphicon glyphicon-menu-hamburger"></i>
-                </div>
-                <a class="navbar-brand" href="/">
-                    {% if config['DEBUG'] %}
-                    Racine #DEV#
-                    {% else %}
-                    Racine
-                    {% endif %}
-                </a>
-            </div>
-            <div id="navbar" class="navbar-collapse collapse">
+            <a class="navbar-brand" href="/">Racine</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                </ul>
+                <form class="d-flex">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
                 {% block navbar_top %}
                 {% endblock %}
             </div>

diff --git a/app/templates/skeleton.html b/app/templates/skeleton.html
@@ -1,15 +1,17 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
     {%- block head %}
     <title>{% block title %}{{title|default}}{% endblock title %}</title>
 
     {%- block metas %}
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     {%- endblock metas %}
 
     {%- block styles %}
     <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}">
+    <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap-icons.css')}}">
     {%- endblock styles %}
     {%- endblock head %}
   </head>

diff --git a/js/package.json b/js/package.json
@@ -6,9 +6,10 @@
   "license": "GPL v3",
   "browser": "index.js",
   "dependencies": {
-    "bootstrap": "3.4.1",
+    "bootstrap": "5.2.3",
+    "bootstrap-icons": "1.10.4",
     "bootstrap-toc": "git+https://github.com/afeld/bootstrap-toc.git#v0.4.1",
-    "jquery": "1.11.3",
+    "jquery": "3.3.1",
     "lightbox2": "2.8.2"
   },
   "devDependencies": {