upgrade to Bootstrap 5

* replace all glyphicons with Bootstrap 5 icons
* replace all occurences of btn-default class
* replace all occurences of Bootstrap data- attributes by data-bs-
  attributes
* use Bootstrap 5's form classes
* etc.

Makefile

@@ -54,7 +54,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 \
@@ -77,7 +77,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/tocbot/dist/tocbot.css app/static/css/tocbot.css
 

app/static/.gitignore

@@ -1,11 +1,12 @@
 mathjax/
 
 css/bootstrap.min.css
+css/bootstrap-icons.css
 css/lightbox.css
 css/tocbot.css
 css/typeahead.css
 
-fonts/
+css/fonts/
 
 images/close.png
 images/loading.gif

app/static/css/base.css

@@ -10,61 +10,26 @@ body {
   padding-top: 50px;
 }
 
-/*
- * Top navigation
- * Hide default border to remove 1px line.
- */
-.navbar-fixed-top {
-  border: 0;
-}
-
 .navbar-brand > img {
   float: left;
-  height: 1.4em;
-  margin-top: -0.2em;
+  height: 1.6em;
+  margin-top: -0.1em;
   margin-right: 10px;
 }
 
-.nav-button {
-    display: none;
-}
-
-@media (max-width: 767px) {
-    .nav-button {
-        display: inline;
-        float: right;
-        color: #9d9d9d;
-        font-size: 18px;
-        line-height: 20px;
-        padding: 15px;
-        margin: 0px;
-        cursor: pointer;
-    }
-    .nav-button:hover {
-        color: #ffffff;
-    }
-    .nav-button.active {
-        color: #ffffff;
-    }
-    .nav-button-left {
-        float: left;
-    }
-}
-
 /*
  * Sidebar
  */
 
-
 /* Hide for mobile, show later */
 .sidebar {
   display: none;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 991px) {
     .sidebar.overlay {
         position: fixed;
-        top: 50px;
+        top: 56px;
         bottom: 0;
         left: 0;
         z-index: 1000; /* top */
@@ -80,10 +45,10 @@ body {
     }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar {
     position: fixed;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     left: 0;
     z-index: 1000;
@@ -97,14 +62,14 @@ body {
 }
 
 /* Content overlay for small screen sidebar */
-@media (max-width: 767px) {
+@media (max-width: 991px) {
     .content-overlay {
         /* full screen */
         width: 100vw;
         /* transparent black */
         background: rgba(0, 0, 0, 0.8);
         position: fixed;
-        top: 50px;
+        top: 56px;
         bottom: 0;
         left: 0;
         display: none;
@@ -138,7 +103,7 @@ body {
 .main {
   padding: 20px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .main {
     padding-right: 40px;
     padding-left: 40px;

app/static/css/editor.css

@@ -259,7 +259,7 @@ div.news > div.news-title {
     cursor: pointer;
 }
 
-div.news > div.news-title > i.glyphicon {
+div.news > div.news-title > i {
     color: #FF0000;
 }
 

app/static/css/login.css

@@ -28,7 +28,7 @@
 .login-container {
     margin: auto;
     position: absolute;
-    top: 50px;
+    top: 56px;
     left: 0;
     bottom: 0;
     right: 0;
@@ -38,7 +38,11 @@
     max-width: 700px;
 }
 
-@media (min-width: 768px) {
+.login-container div {
+    margin: 10px;
+}
+
+@media (min-width: 992px) {
     .login-container {
         min-width: 700px;
     }

app/templates/auth/login.html

@@ -22,11 +22,11 @@
                 <form method="POST" action="#" id="loginform">
                     {{ form.hidden_tag() }}
                     <div class="form-group input-group">
-                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+                        <span class="input-group-text"><i class="bi-person-fill"></i></span>
                         {{ form.username(class_='form-control', placeholder='username') }}
                     </div>
                     <div class="form-group input-group">
-                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
+                        <span class="input-group-text"><i class="bi-lock-fill"></i></span>
                         {{ form.password(class_='form-control', placeholder='password') }}
                     </div>
                     <div class="form-group input-group">

app/templates/base.html

@@ -1,53 +1,54 @@
 {% extends "racine.html" %}
 
 {% block navbar_top_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>
+<button class="btn btn-outline-secondary d-lg-none me-3" id="toggle-sidebar">
+  <span class="navbar-toggler-icon"></span>
+</button>
+{% endblock %}
+
+{% block navbar_top_footer %}
+<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>
 {% endblock %}
 
 {% block navbar_top %}
-  <div id="navbar" class="navbar-collapse collapse">
-    <ul class="nav navbar-nav navbar-right">
+    <form class="d-flex">
+      <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search" id="navbar-search">
+    </form>
+    <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 ms-2"><a class="nav-link" href="/settings/smbresources"><i class="bi-gear-fill" title="Settings"></i><span class="d-md-none ms-2">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/overview"><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 ms-2"><a class="nav-link" href="/print"><i class="bi-printer-fill" title="Print"></i><span class="d-md-none ms-2">Print</span></a></li>
+        <li class="nav-item ms-2"><a class="nav-link" href="/profile/overview"><i class="bi-person-fill" title="Profile"></i><span class="d-none d-md-inline ms-2">{{ current_user.username }}</span><span class="d-md-none ms-2">Profile</span></a></li>
+        <li class="nav-item ms-2"><a class="nav-link" href="{{ url_for('auth.logout') }}"><i class="bi-box-arrow-right" title="Sign out"></i><span class="d-md-none ms-2">Sign out</span></a></li>
+        <li class="nav-item ms-2"><a class="nav-link" href="/help"><i class="bi-question-circle-fill" title="Help"></i><span class="d-md-none ms-2">Help</span></a></li>
     </ul>
-    <form class="nav navbar-form navbar-right">
-        <input type="text" id="navbar-search" class="form-control" placeholder="Search...">
-    </form>
-  </div>
 {% endblock %}
 
 {% block content %}
     <div class="container-fluid">
       <div class="row">
-        <div id="sidebar" class="col-sm-3 col-md-2 sidebar">
+        <div id="sidebar" class="col-lg-2 sidebar">
           {% block sidebarnav %}{% endblock %}
         </div>
-        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+        <div class="col-lg-10 offset-lg-2 main">
           <div class="container" id="flashmessages">
             {% for message in get_flashed_messages() %}
             {{ begin_flashmsg|safe }}
             {{ message }}
             {{ end_flashmsg|safe }}
             {% endfor %}
           </div>
-        {% block page_content %}{% endblock %}
-        {% block dialogs %}
+          {% block page_content %}
+          {% endblock %}
+          {% block dialogs %}
             {% include "dialogs/confirmdelete.html" %}
             {% include "dialogs/error.html" %}
-        {% endblock %}
+          {% endblock %}
         </div>
       </div>
     </div>
-
     <div class="content-overlay"></div>
 {% endblock %}

app/templates/browser.html

@@ -11,14 +11,14 @@
 <div id="browser-frame">
     <div id="header">
         <div id="pathbuttons" class="btn-group" role="group">
-            <button type="button" class="btn btn-default folder" data-url="">
-                <i class="glyphicon glyphicon-home"></i>
+            <button type="button" class="btn btn-secondary folder" data-url="">
+                <i class="bi-house"></i>
             </button>
             {% if smb_path is not undefined and smb_path != '' %}
                 {% set curr_path = '' %}
                 {% for element in smb_path.split('/') %}
                     {% set curr_path = curr_path+('/' if curr_path != '' else '')+element %}
-                    <button type="button" class="btn btn-default folder" data-url="{{ curr_path }}">
+                    <button type="button" class="btn btn-secondary folder" data-url="{{ curr_path }}">
                         {{ element }}
                     </button>
                 {% endfor %}

app/templates/dialogs/confirmdelete.html

@@ -7,7 +7,7 @@
         <p class="debug-id"></p>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
         <a class="btn btn-danger btn-ok">Delete</a>
     </div>
 {% endcall %}

app/templates/dialogs/error.html

@@ -3,6 +3,6 @@
 {% call dialog.render_modal_dialog('dlg-error', 'Error') %}
     <div class="modal-body"></div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
     </div>
 {% endcall %}

app/templates/dialogs/userbrowser.html

@@ -4,15 +4,15 @@
     <div class="modal-body">
         <div>Select a user you want to share this sample with:<br>&nbsp;</div>
         <div class="form-group input-group">
-            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+            <span class="input-group-text"><i class="bi-person-fill"></i></span>
             <input type="text" id="username" class="form-control" placeholder="username">
         </div>
         <div id="recent-collaborators"></div>
     </div>
     <div class="modal-footer">
-        <button id="userbrowserok" type="button" class="btn btn-primary" data-dismiss="modal">
+        <button id="userbrowserok" type="button" class="btn btn-primary" data-bs-dismiss="modal">
             OK
         </button>
-        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
     </div>
 {% endcall %}