Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade to Bootstrap 5 #159

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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/bootstrap-icons/font/bootstrap-icons.css app/static/css/bootstrap-icons.css
cp js/node_modules/bootstrap-icons/font/fonts/* app/static/css/fonts/
Expand Down
43 changes: 8 additions & 35 deletions app/static/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,51 +30,24 @@ body {

.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 */
Expand All @@ -90,10 +63,10 @@ body {
}
}

@media (min-width: 768px) {
@media (min-width: 992px) {
.sidebar {
position: fixed;
top: 50px;
top: 56px;
bottom: 0;
left: 0;
z-index: 1000;
Expand All @@ -107,14 +80,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;
Expand Down
8 changes: 6 additions & 2 deletions app/static/css/login.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
.login-container {
margin: auto;
position: absolute;
top: 50px;
top: 56px;
left: 0;
bottom: 0;
right: 0;
Expand All @@ -47,7 +47,11 @@
max-width: 700px;
}

@media (min-width: 768px) {
.login-container div {
margin: 10px;
}

@media (min-width: 992px) {
.login-container {
min-width: 700px;
}
Expand Down
4 changes: 2 additions & 2 deletions app/templates/auth/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -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="{{ icons.user }}"></i></span>
<span class="input-group-text"><i class="{{ icons.user }}"></i></span>
{{ form.username(class_='form-control', placeholder='username') }}
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="{{ icons.lock }}"></i></span>
<span class="input-group-text"><i class="{{ icons.lock }}"></i></span>
{{ form.password(class_='form-control', placeholder='password') }}
</div>
<div class="form-group input-group">
Expand Down
33 changes: 16 additions & 17 deletions app/templates/base.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% 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">
<div class="nav-button nav-button-toggle" data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar">
<i class="{{ icons.toggleHeaderNav }}"></i>
</div>
<div id="toggle-sidebar" class="nav-button nav-button-left nav-button-toggle">
Expand All @@ -11,43 +11,42 @@

{% block navbar_top %}
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_admin %}
<li><a href="/settings/smbresources"><i class="hidden-xs {{ icons.settings }}" title="Settings"></i><span class="visible-xs-block">Settings</span></a></li>
{% endif %}
<li><a href="/print"><i class="hidden-xs {{ icons.printer }}" title="Print"></i><span class="visible-xs-block">Print</span></a></li>
<li><a href="/profile/overview"><i class="hidden-xs {{ icons.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 {{ icons.logout }}" title="Sign out"></i><span class="visible-xs-block">Sign out</span></a></li>
<li><a href="/help"><i class="hidden-xs {{ icons.help }}" title="Help"></i><span class="visible-xs-block">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>
<ul class="navbar-nav navbar-right">
{% if current_user.is_admin %}
<li class="nav-item ms-2"><a class="nav-link" href="/settings/smbresources"><i class="{{ icons.settings }}" title="Settings"></i><span class="d-md-none ms-2">Settings</span></a></li>
{% endif %}
<li class="nav-item ms-2"><a class="nav-link" href="/print"><i class="{{ icons.printer }}" 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="{{ icons.user }}" 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="{{ icons.logout }}" 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="{{ icons.help }}" title="Help"></i><span class="d-md-none ms-2">Help</span></a></li>
</ul>
{% 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 %}
4 changes: 2 additions & 2 deletions app/templates/browser.html
Original file line number Diff line number Diff line change
Expand Up @@ -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="">
<button type="button" class="btn btn-secondary folder" data-url="">
<i class="btn-home {{ icons.home }}"></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 %}
Expand Down
2 changes: 1 addition & 1 deletion app/templates/dialogs/confirmdelete.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion app/templates/dialogs/error.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
6 changes: 3 additions & 3 deletions app/templates/dialogs/userbrowser.html
Original file line number Diff line number Diff line change
Expand Up @@ -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="{{ icons.user }}"></i></span>
<span class="input-group-text"><i class="{{ icons.user }}"></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 %}
4 changes: 2 additions & 2 deletions app/templates/help.html
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ <h4>Leaving the lab</h4>
You will still be able to log in after leaving. The designated user will see your name at the bottom of his navigation bar. By double-clicking
on your name, the other user can access all of your samples.</p>
<img src="/static/help/leaving.png?version=20191203">

</div>
{% if current_user.is_admin %}
<h3>Modifying the settings</h3>
<p>In order to access the settings page, click on the <i class="{{ icons.settings }}"></i>-symbol on the upper right.</p>
Expand Down Expand Up @@ -222,7 +222,7 @@ <h4>Other settings pages</h4>
<p>The "Log" page gives you access to the server's log file for debugging.</p>
<p>The "Uploads" page provides information about lost, empty, unused and duplicate uploads. It can take a long time to load, since a lot
of database and filesystem operations are required to collect this data.</p>

</div>
{% endif %}
</div>
{% endblock %}
46 changes: 21 additions & 25 deletions app/templates/main/sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h3 class="page-header">
{% if sample.owner == current_user %}
<i class="{{ icons.trashAlt }} editor-shortcut" title="Delete sample"
data-href="/delsample/{{ sample.id }}" data-type="sample" data-id="{{ sample.id }}"
data-toggle="modal" data-target="#dlg-confirm-delete">
data-bs-toggle="modal" data-bs-target="#dlg-confirm-delete">
</i>
<i id="archive" class="editor-shortcut"></i>
<i id="collaborate" class="editor-shortcut"></i>
Expand Down Expand Up @@ -57,7 +57,7 @@ <h3 class="page-header">
{% for share in shares %}
<div class="sharelistentry" id="sharelistentry{{ share.id }}">
{% if sample.owner == current_user or share.user == current_user %}
<a data-type="share" data-id="{{ share.id }}" data-toggle="modal" data-target="#dlg-confirm-delete" href="">
<a data-type="share" data-id="{{ share.id }}" data-bs-toggle="modal" data-bs-target="#dlg-confirm-delete" href="">
<i class="{{ icons.remove }}"></i>
</a>
{% else %}
Expand All @@ -71,10 +71,10 @@ <h3 class="page-header">
</div>
<div class="sharelistbuttons">
{% if shares|length > 4 %}
<a id="collapsebutton" role="button" class="collapsed" data-toggle="collapse" href="#sharelistcontainer" aria-expanded="false" aria-controls="sharelistcontainer"></a>
<a id="collapsebutton" role="button" class="collapsed" data-bs-toggle="collapse" href="#sharelistcontainer" aria-expanded="false" aria-controls="sharelistcontainer"></a>
{% endif %}
{% if sample.owner == current_user %}
<a data-toggle="modal" data-target="#userbrowser" href=""><i class="{{ icons.newItem }}"></i> add share</a>
<a data-bs-toggle="modal" data-bs-target="#userbrowser" href=""><i class="{{ icons.newItem }}"></i> add share</a>
{% endif %}
</div>
</div>
Expand All @@ -83,16 +83,14 @@ <h3 class="page-header">

<div class="container-fluid">
{% if invertactionorder %}
<div class="row list-entry">
<form id="newactionform">
{{ newactionform.hidden_tag() }}
<div class="col-md-2">
{{ wtf.form_field(newactionform.timestamp) }}
{{ wtf.form_field(newactionform.submit) }}
</div>
<div class="col-md-10">{{ wtf.form_field(newactionform.description) }}</div>
</form>
</div>
<form class="row list-entry" id="newactionform">
{{ newactionform.hidden_tag() }}
<div class="col-md-2">
{{ wtf.form_field(newactionform.timestamp) }}
{{ wtf.form_field(newactionform.submit) }}
</div>
<div class="col-md-10">{{ wtf.form_field(newactionform.description) }}</div>
</form>
{% endif %}
{% for i in range(actions|length)%}
{% set action=actions[i] %}
Expand All @@ -103,7 +101,7 @@ <h3 class="page-header">
{% if action.owner != current_user %}<div style="font-style: italic">{{ action.owner.username }}</div>{% endif %}
{% if action.sample != sample %}<div style="font-style: italic;">{{ action.sample.name }}</div>{% endif %}
{% if action.owner == current_user or sample.iscollaborative %}
<i class="actionicon {{ icons.trash }}" data-type="action" data-id="{{ action.id }}" data-toggle="modal" data-target="#dlg-confirm-delete"></i>
<i class="actionicon {{ icons.trash }}" data-type="action" data-id="{{ action.id }}" data-bs-toggle="modal" data-bs-target="#dlg-confirm-delete"></i>
{% if not i == 0 %} {# can be moved up #}
<i class="actionicon {{ icons.arrowUp }} swapaction" data-id="{{ action.id }}" data-swapid="{{ actions[i-1].id }}"></i>
{% endif %}
Expand All @@ -118,16 +116,14 @@ <h3 class="page-header">
</div>
{% endfor %}
{% if not invertactionorder %}
<div class="row list-entry">
<form id="newactionform">
{{ newactionform.hidden_tag() }}
<div class="col-md-2">
{{ wtf.form_field(newactionform.timestamp) }}
{{ wtf.form_field(newactionform.submit) }}
</div>
<div class="col-md-10">{{ wtf.form_field(newactionform.description) }}</div>
</form>
</div>
<form class="row list-entry" id="newactionform">
{{ newactionform.hidden_tag() }}
<div class="col-md-2">
{{ wtf.form_field(newactionform.timestamp) }}
{{ wtf.form_field(newactionform.submit) }}
</div>
<div class="col-md-10">{{ wtf.form_field(newactionform.description) }}</div>
</form>
{% endif %}
</div>

2 changes: 1 addition & 1 deletion app/templates/main/searchresults.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h2><b>Search results:</b> "{{ term }}"</h2>
<h4><b>Search results:</b> "{{ term }}"</h4>
<hr>
<div class="resultslist" style="max-width:500px;">
{% for r in results %}
Expand Down
4 changes: 2 additions & 2 deletions app/templates/main/tree.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div id="nav-entry{{ sample.id }}"
class="nav-entry nav-dropzone{% if sample.isarchived %} nav-entry-archived{% endif %}"
data-id="{{ sample.id }}" data-name="{{ sample.name }}"
data-toggle="collapse" data-target="#nav-children{{ sample.id }}"
data-bs-toggle="collapse" data-bs-target="#nav-children{{ sample.id }}"
draggable="true">
<div class="nav-entry-name">{{ sample.name }}</div>
{% if sample.owner != current_user %}
Expand All @@ -28,7 +28,7 @@
{# HTML for navbar #}
<div class="navbar-shortcuts">
<span class="left">
<a data-toggle="modal" data-target="#dlg-new-sample" href="" title="New sample">
<a data-bs-toggle="modal" data-bs-target="#dlg-new-sample" href="" title="New sample">
<i class="{{ icons.newItem }}"></i>
</a>
</span>
Expand Down
Loading
Loading