Skip to content

Commit 2b0e1aa

Browse files
hgrfhgrf
committed
[WIP] upgrade to Bootstrap 5
1 parent 3c2f974 commit 2b0e1aa

10 files changed

Lines changed: 322 additions & 179 deletions

File tree

‎Makefile‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ install-mathjax:
265265

266266
install-js-dependencies: install-mathjax api-client
267267
mkdir -p app/static/css
268-
mkdir -p app/static/fonts
268+
mkdir -p app/static/css/fonts
269269

270270
# install typeahead.js
271271
wget -O js/src/typeahead/typeahead.bundle.js \
@@ -288,7 +288,8 @@ install-js-dependencies: install-mathjax api-client
288288
cd js && npm install && npx rollup -c
289289

290290
cp js/node_modules/bootstrap/dist/css/bootstrap.min.css app/static/css/bootstrap.min.css
291-
cp js/node_modules/bootstrap/dist/fonts/* app/static/fonts/
291+
cp js/node_modules/bootstrap-icons/font/bootstrap-icons.css app/static/css/bootstrap-icons.css
292+
cp js/node_modules/bootstrap-icons/font/fonts/* app/static/css/fonts/
292293

293294
cp js/node_modules/bootstrap-toc/dist/bootstrap-toc.min.css app/static/css/bootstrap-toc.min.css
294295

‎app/static/.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
mathjax/
22

33
css/bootstrap.min.css
4+
css/bootstrap-icons.css
45
css/bootstrap-toc.min.css
56
css/lightbox.css
67
css/typeahead.css
78

8-
fonts/
9+
css/fonts/
910

1011
images/close.png
1112
images/loading.gif

‎app/static/css/sidebars.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* from https://getbootstrap.com/docs/5.0/examples/sidebars/sidebars.css */
2+
3+
body {
4+
min-height: 100vh;
5+
min-height: -webkit-fill-available;
6+
}
7+
8+
html {
9+
height: -webkit-fill-available;
10+
}
11+
12+
main {
13+
display: flex;
14+
flex-wrap: nowrap;
15+
height: 100vh;
16+
height: -webkit-fill-available;
17+
max-height: 100vh;
18+
overflow-x: auto;
19+
overflow-y: hidden;
20+
}
21+
22+
.b-example-divider {
23+
flex-shrink: 0;
24+
width: 1.5rem;
25+
height: 100vh;
26+
background-color: rgba(0, 0, 0, .1);
27+
border: solid rgba(0, 0, 0, .15);
28+
border-width: 1px 0;
29+
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
30+
}
31+
32+
.bi {
33+
vertical-align: -.125em;
34+
pointer-events: none;
35+
fill: currentColor;
36+
}
37+
38+
.dropdown-toggle { outline: 0; }
39+
40+
.nav-flush .nav-link {
41+
border-radius: 0;
42+
}
43+
44+
.btn-toggle {
45+
display: inline-flex;
46+
align-items: center;
47+
padding: .25rem .5rem;
48+
font-weight: 600;
49+
color: rgba(0, 0, 0, .65);
50+
background-color: transparent;
51+
border: 0;
52+
}
53+
.btn-toggle:hover,
54+
.btn-toggle:focus {
55+
color: rgba(0, 0, 0, .85);
56+
background-color: #d2f4ea;
57+
}
58+
59+
.btn-toggle::before {
60+
width: 1.25em;
61+
line-height: 0;
62+
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");
63+
transition: transform .35s ease;
64+
transform-origin: .5em 50%;
65+
}
66+
67+
.btn-toggle[aria-expanded="true"] {
68+
color: rgba(0, 0, 0, .85);
69+
}
70+
.btn-toggle[aria-expanded="true"]::before {
71+
transform: rotate(90deg);
72+
}
73+
74+
.btn-toggle-nav a {
75+
display: inline-flex;
76+
padding: .1875rem .5rem;
77+
margin-top: .125rem;
78+
margin-left: 1.25rem;
79+
text-decoration: none;
80+
}
81+
.btn-toggle-nav a:hover,
82+
.btn-toggle-nav a:focus {
83+
background-color: #d2f4ea;
84+
}
85+
86+
.scrollarea {
87+
overflow-y: auto;
88+
}
89+
90+
.fw-semibold { font-weight: 600; }
91+
.lh-tight { line-height: 1.25; }

‎app/templates/base.html‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
{% block styles %}
44
{{ super() }}
5+
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebars.css') }}">
56
<style>
67
/* TODO: this should be in something like base.css */
78
div.sample {
@@ -17,24 +18,74 @@
1718
{% endblock %}
1819

1920
{% block navbar_top %}
20-
<ul class="nav navbar-nav navbar-right">
21+
<ul class="navbar-nav navbar-right">
2122
{% if current_user.is_admin %}
22-
<li><a href="/settings/smbresources"><i class="hidden-xs glyphicon glyphicon-wrench" title="Settings"></i><span class="visible-xs-block">Settings</span></a></li>
23+
<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>
2324
{% endif %}
24-
<li><a href="/print"><i class="hidden-xs glyphicon glyphicon-print" title="Print"></i><span class="visible-xs-block">Print</span></a></li>
25-
<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>
26-
<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>
27-
<li><a href="/help"><i class="hidden-xs glyphicon glyphicon-question-sign" title="Help"></i><span class="visible-xs-block">Help</span></a></li>
25+
<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>
26+
<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>
27+
<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>
28+
<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>
2829
</ul>
29-
<form class="nav navbar-form navbar-right">
30+
{# <form class="nav navbar-form navbar-right">
3031
<input type="text" id="navbar-search" class="form-control" placeholder="Search...">
31-
</form>
32+
</form> #}
3233
{% endblock %}
3334

3435
{% set begin_flashmsg = "<div class='alert alert-warning col-sm-9 col-md-10'><button type='button' class='close' data-dismiss='alert'>&times;</button>" %}
3536
{% set end_flashmsg = "</div>" %}
3637
{% block content %}
37-
<div class="container-fluid">
38+
<main>
39+
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
40+
<ul class="list-unstyled ps-0">
41+
<li class="mb-1">
42+
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
43+
Home
44+
</button>
45+
<div class="collapse" id="home-collapse" style="">
46+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
47+
<li><a href="#" class="link-dark rounded">Overview</a></li>
48+
<li><a href="#" class="link-dark rounded">Updates</a></li>
49+
<li><a href="#" class="link-dark rounded">Reports</a></li>
50+
</ul>
51+
</div>
52+
</li>
53+
<li class="mb-1">
54+
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
55+
Dashboard
56+
</button>
57+
<div class="collapse" id="dashboard-collapse">
58+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
59+
</ul>
60+
</div>
61+
</li>
62+
<li class="mb-1">
63+
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
64+
Orders
65+
</button>
66+
<div class="collapse" id="orders-collapse">
67+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
68+
</ul>
69+
</div>
70+
</li>
71+
<li class="border-top my-3"></li>
72+
<li class="mb-1">
73+
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
74+
Account
75+
</button>
76+
<div class="collapse" id="account-collapse">
77+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
78+
</ul>
79+
</div>
80+
</li>
81+
</ul>
82+
</div>
83+
<div>
84+
{% block page_content %}
85+
{% endblock %}
86+
</div>
87+
</main>
88+
{# <div class="container-fluid">
3889
<div class="row">
3990
{% block sidebarnav %}{% endblock %}
4091
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
@@ -54,5 +105,5 @@
54105
</div>
55106
</div>
56107

57-
<div class="content-overlay"></div>
108+
<div class="content-overlay"></div> #}
58109
{% endblock %}

‎app/templates/main/main.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
{% block styles %}
44
{{super()}}
55
<link rel="stylesheet" href="{{url_for('static', filename='css/lightbox.css')}}">
6-
<link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">
7-
<link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">
6+
<!--<link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">-->
7+
<!--<link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">-->
88
{% endblock %}
99

1010
{% block sidebarnav %}

‎app/templates/racine.html‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
{{ super() }}
1818
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
1919
<link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}">
20-
<link rel="stylesheet" href="{{url_for('static', filename='base.css')}}">
21-
<link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}">
20+
{# <link rel="stylesheet" href="{{url_for('static', filename='base.css')}}"> #}
21+
{# <link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}"> #}
2222
{% if config['DEBUG'] %}
2323
<style>
2424
.navbar-fixed-top {
@@ -29,24 +29,19 @@
2929
{% endblock %}
3030

3131
{% block navbar %}
32-
<nav class="navbar navbar-inverse navbar-fixed-top">
32+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
3333
<div class="container-fluid">
34-
<div class="navbar-header">
35-
<div class="nav-button nav-button-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
36-
<i class="glyphicon glyphicon-option-vertical"></i>
37-
</div>
38-
<div id="toggle-sidebar" class="nav-button nav-button-left nav-button-toggle">
39-
<i class="glyphicon glyphicon-menu-hamburger"></i>
40-
</div>
41-
<a class="navbar-brand" href="/">
42-
{% if config['DEBUG'] %}
43-
Racine #DEV#
44-
{% else %}
45-
Racine
46-
{% endif %}
47-
</a>
48-
</div>
49-
<div id="navbar" class="navbar-collapse collapse">
34+
<a class="navbar-brand" href="/">Racine</a>
35+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
36+
<span class="navbar-toggler-icon"></span>
37+
</button>
38+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
39+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
40+
</ul>
41+
<form class="d-flex">
42+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
43+
<button class="btn btn-outline-success" type="submit">Search</button>
44+
</form>
5045
{% block navbar_top %}
5146
{% endblock %}
5247
</div>

‎app/templates/skeleton.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!doctype html>
2+
<html lang="en">
33
<head>
44
{%- block head %}
55
<title>{% block title %}{{title|default}}{% endblock title %}</title>
66

77
{%- block metas %}
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta charset="utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
910
{%- endblock metas %}
1011

1112
{%- block styles %}
1213
<link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}">
14+
<link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap-icons.css')}}">
1315
{%- endblock styles %}
1416
{%- endblock head %}
1517
</head>

‎js/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
"license": "GPL v3",
77
"browser": "index.js",
88
"dependencies": {
9-
"bootstrap": "3.4.1",
9+
"bootstrap": "5.2.3",
10+
"bootstrap-icons": "1.10.4",
1011
"bootstrap-toc": "git+https://github.com/afeld/bootstrap-toc.git#v0.4.1",
11-
"jquery": "1.11.3",
12+
"jquery": "3.3.1",
1213
"lightbox2": "2.8.2"
1314
},
1415
"devDependencies": {

0 commit comments

Comments
 (0)