upgrade to Bootstrap 5

hgrf · Jan 7, 2024 · 912f70a · 912f70a
1 parent 5e91617
commit 912f70a
Show file tree

Hide file tree

Showing 30 changed files with 278 additions and 168 deletions.
diff --git a/Makefile b/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
 

diff --git a/app/static/.gitignore b/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

diff --git a/app/static/css/base.css b/app/static/css/base.css
@@ -10,28 +10,10 @@ body {
   padding-top: 50px;
 }
 
-
-/*
- * Global add-ons
- */
-
-.sub-header {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-/*
- * 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;
 }
 
@@ -74,7 +56,7 @@ body {
 @media (max-width: 767px) {
     .sidebar.overlay {
         position: fixed;
-        top: 50px;
+        top: 56px;
         bottom: 0;
         left: 0;
         z-index: 1000; /* top */
@@ -93,7 +75,7 @@ body {
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     left: 0;
     z-index: 1000;
@@ -114,7 +96,7 @@ body {
         /* transparent black */
         background: rgba(0, 0, 0, 0.8);
         position: fixed;
-        top: 50px;
+        top: 56px;
         bottom: 0;
         left: 0;
         display: none;

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/auth/login.html b/app/templates/auth/login.html
@@ -25,11 +25,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-addon"><i class="bi-person"></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-addon"><i class="bi-lock"></i></span>
                             {{ form.password(class_='form-control', placeholder='password') }}
                         </div>
                         <div class="form-group input-group">

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -1,42 +1,50 @@
 {% extends "racine.html" %}
 
+{% block styles %}
+{{ super() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/sidebars.css') }}">
+{% endblock %}
+
 {% block navbar_top %}
-    <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"><a class="nav-link" href="/settings/smbresources"><i class="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/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"><a class="nav-link" href="/print"><i class="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="bi-person" title="Profile"></i><span>&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="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="bi-question-circle" title="Help"></i><span class="d-sm-none">Help</span></a></li>
     </ul>
-    <form class="nav navbar-form navbar-right">
-        <input type="text" id="navbar-search" class="form-control" placeholder="Search...">
-    </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">
-      <div class="row">
-        {% block sidebarnav %}{% endblock %}
-        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-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 %}
-            {% include "dialogs/confirmdelete.html" %}
-            {% include "dialogs/error.html" %}
-        {% endblock %}
-        </div>
+<div class="container-fluid">
+  <div class="row">
+    <div id="sidebar" class="col-sm-3 col-md-2 sidebar" style="width: 280px;">
+      {% block sidebarnav %}
+      {% endblock %}
+    </div>
+    <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-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 %}
+        {% include "dialogs/confirmdelete.html" %}
+        {% include "dialogs/error.html" %}
+      {% endblock %}
     </div>
-
-    <div class="content-overlay"></div>
+  </div>
+</div>
+<div class="content-overlay"></div>
 {% endblock %}
diff --git a/app/templates/dialogs/userbrowser.html b/app/templates/dialogs/userbrowser.html
@@ -4,7 +4,7 @@
     <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-addon"><i class="bi-person"></i></span>
             <input type="text" id="username" class="form-control" placeholder="username">
         </div>
         <div id="recent-collaborators"></div>

diff --git a/app/templates/help.html b/app/templates/help.html
@@ -7,9 +7,7 @@
 {% endblock %}
 
 {% block sidebarnav %}
-<div id="sidebar" class="col-sm-3 col-md-2 sidebar">
     <nav id="js-toc" class="toc"></nav>
-</div>
 {% endblock %}
 
 {% block page_content %}
@@ -49,12 +47,12 @@ <h2>Administrators</h2>
     <h2>The header</h2>
     <p>The header contains a search bar and some icons. If you type a keyword in the search bar and press enter, a list of samples containing
     the keyword in their sample name will be displayed. You can also select a search result from the dropdown menu and go directly to the
-    corresponding sample. In the case of shared samples, the sample owner is displayed after the <i class="glyphicon glyphicon-user"></i>-icon
+    corresponding sample. In the case of shared samples, the sample owner is displayed after the <i class="bi-person"></i>-icon
     and if the sample is not on the top level, the parent sample is displayed after the <i class="glyphicon glyphicon-level-up"></i>-icon. The
     dropdown list is limited to five search results.</p>
-    <p>The <i class="glyphicon glyphicon-print"></i>-icon in the header bar leads to the <a href="#printing">print</a>-page, the
-    <i class="glyphicon glyphicon-user"></i>-icon leads to your <a href="#modifying-your-profile">profile</a>-page, the
-    <i class="glyphicon glyphicon-log-out"></i>-icon logs you out of the system and the <i class="glyphicon glyphicon-question-sign"></i>-icon
+    <p>The <i class="bi-printer"></i>-icon in the header bar leads to the <a href="#printing">print</a>-page, the
+    <i class="bi-person"></i>-icon leads to your <a href="#modifying-your-profile">profile</a>-page, the
+    <i class="bi-box-arrow-right"></i>-icon logs you out of the system and the <i class="bi-question-circle"></i>-icon
     leads to this help page.</p>
 
     <h2>The navigation bar</h2>
@@ -84,8 +82,8 @@ <h2>The editor</h2>
     file server. You can see and modify shares in the "Shared with" field.</p>
     <p>Next to the sample name, at the top right of the editor window, there are buttons to archive or delete the sample. If you archive a sample,
     it disappears from your navigation bar, unless you explicitly activate the display of archived samples (see above). There is also a button
-    to locate your sample in the navigation bar on the left (the <i class="glyphicon glyphicon-search"></i>-icon). The
-    <i class="glyphicon glyphicon-arrow-down"></i>-button scrolls to the bottom of the page. If your sample has
+    to locate your sample in the navigation bar on the left (the <i class="bi-search"></i>-icon). The
+    <i class="bi-arrow-down"></i>-button scrolls to the bottom of the page. If your sample has
     a parent sample in the hierarchy, you can display the actions of the parent sample by clicking on the "eye"-symbol on the top right.
     If you want to invert the order of the actions (oldest to newest or vice versa), you can do this by clicking on the
     <i class="glyphicon glyphicon-resize-vertical"></i>-icon.</p>
@@ -102,7 +100,7 @@ <h2>Image compression</h2>
     converted to the JPEG format. When you open a sample in the editor, all images are shown in this format. However,
     the original image is also stored on the server and can be retrieved either by clicking on the image, in which
     case the image viewer will be opened (see above) with the original image, or by clicking on the
-    <i class="glyphicon glyphicon-hd-video"></i>-icon that appears on the top right of the image when your mouse hovers
+    <i class="bi-badge-hd-fill"></i>-icon that appears on the top right of the image when your mouse hovers
     over it, in which case the original image will be opened in a new window or tab.</p>
 
     <h2>Sharing samples</h2>
@@ -169,7 +167,7 @@ <h2>Using file servers</h2>
     </p>
 
     <h2>Printing</h2>
-    <p>By clicking on the <i class="glyphicon glyphicon-print"></i>-icon in the header bar, you get to the printing page, where you can print all
+    <p>By clicking on the <i class="bi-printer"></i>-icon in the header bar, you get to the printing page, where you can print all
     actions added in a specific time window or to a specific sample. If you want to define a time window, simply fill in the <i>From</i>- and
     <i>To</i>-fields using the popup calender or by typing the date in the following format: YYYY-MM-DD. If you want to restrict the printing
     to a specific sample, you can select it in the corresponding field. You need to explicitly select the sample from the dropdown menu, so that
@@ -179,7 +177,7 @@ <h2>Printing</h2>
     the checkbox <i>Hide user names</i>. In order to save space and ink, you can reduce the image sizes using the corresponding drop down menu.</p>
 
     <h2>Modifying your profile</h2>
-    <p>In order to modify your profile, click on the <i class="glyphicon glyphicon-user"></i>-icon in the header menu.</p>
+    <p>In order to modify your profile, click on the <i class="bi-person"></i>-icon in the header menu.</p>
 
     <h3>Changing your details</h3>
     <p>By selecting the "Change my details" entry in the menu on the left, you can change your user name or associated email address. You need
@@ -194,7 +192,7 @@ <h3>Leaving the lab</h3>
 
 {% if current_user.is_admin %}
     <h2>Modifying the settings</h2>
-    <p>In order to access the settings page, click on the <i class="glyphicon glyphicon-wrench"></i>-symbol on the upper right.</p>
+    <p>In order to access the settings page, click on the <i class="bi-gear"></i>-symbol on the upper right.</p>
 
     <h3>Set up email</h3>
     <p>In order to enable users to reset their password via email, the administrator has to set up an email account on the corresponding settings
@@ -203,8 +201,8 @@ <h3>Set up email</h3>
     <h3>Managing users</h3>
     <p>In order to manage users, select the "Users" menu item
     in the settings menu. New users can be added using the form at the bottom of the page. Existing users can be deleted by clicking on the
-    <i class="glyphicon glyphicon-trash"></i>-symbol in the corresponding row. The administrators can log in as any user by clicking on the
-    corresponding <i class="glyphicon glyphicon-log-in"></i>-icon. User names, email addresses and the admin "flag" can be edited by double-
+    <i class="bi-trash"></i>-symbol in the corresponding row. The administrators can log in as any user by clicking on the
+    corresponding <i class="bi-box-arrow-in-right"></i>-icon. User names, email addresses and the admin "flag" can be edited by double-
     clicking on the respective fields or by clicking on the edit button that appears when hovering over the fields.</p>
 
     <h3>Managing file servers</h3>

diff --git a/app/templates/main/main.html b/app/templates/main/main.html
@@ -7,11 +7,6 @@
     <link rel="stylesheet" href="{{url_for('static', filename='css/editor.css', version='20210420')}}">
 {% endblock %}
 
-{% block sidebarnav %}
-    <div id="sidebar" class="col-sm-3 col-md-2 sidebar">
-    </div>
-{% endblock %}
-
 {% block page_content %}
     <div id="editor-frame">
     </div>