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.

Sign up for GitHub

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

Jump to bottom

Use bootstrap4 #234

Merged
merged 2 commits into from
Nov 8, 2020
Merged

Use bootstrap4 #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ed7bb1
Migrate to bootstrap4
OGAWAHirofumi Nov 8, 2020
7d3c7b6
Add screen shots test for UI
OGAWAHirofumi Nov 8, 2020
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
2 changes: 1 addition & 1 deletion setup.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
'xstatic',
'XStatic-asciinema-player',
'xstatic-bootbox',
'xstatic-bootstrap<4.0.0.0',
'xstatic-bootstrap>=4.0.0.0,<5.0.0.0',
'xstatic-font-awesome',
'xstatic-jquery',
'xstatic-jquery-ui',
Expand Down
4 changes: 4 additions & 0 deletions src/bepasty/static/app/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,16 @@ body {
/* override pygments table highlighting style */
table.highlighttable {
width: 100%;
border: 1px solid #ccc;
background-color: #f5f5f5;
}

.linenodiv pre, .highlight pre {
margin-bottom: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 9.5px;
}

.highlight p {
Expand All @@ -121,6 +124,7 @@ table.highlighttable {
.highlight pre {
padding-left: 0;
padding-right: 0;
border-left: 1px solid #ccc;
}

/* Set minimal width and let the contents push the block width */
Expand Down
58 changes: 33 additions & 25 deletions src/bepasty/templates/_layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
Expand All @@ -24,40 +24,48 @@
<body>
<div id="wrapper">
<!-- Begin header -->
<div id="header">
<div id="header" class="pb-3">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('bepasty.index') }}">
{{ config.SITENAME }} (Permissions: {% for permission, permission_icon in flaskg.icon_permissions %}<i class="fa fa-{{ permission_icon }}" title="{{ permission }}"></i> {% endfor %})
</a>
</div>
<a class="navbar-brand" href="{{ url_for('bepasty.index') }}">
{{ config.SITENAME }} (Permissions: {% for permission, permission_icon in flaskg.icon_permissions %}<i class="fa fa-{{ permission_icon }}" title="{{ permission }}"></i> {% endfor %})
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="http://bepasty-server.readthedocs.org/en/latest/">Documentation</a></li>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="http://bepasty-server.readthedocs.org/en/latest/">Documentation</a>
</li>
{% if may(LIST) %}
<li><a href="{{ url_for('bepasty.filelist') }}">List all Items</a></li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('bepasty.filelist') }}">List all Items</a>
</li>
{% endif %}
</ul>
{% if flaskg.logged_in %}
<form class="navbar-form navbar-right" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
<input class="btn btn-default" type="submit" value="Logout">
<form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
<div class="form-row">
<div class="col">
<input class="btn btn-outline-secondary" type="submit" value="Logout">
</div>
</div>
</form>
{% else %}
<form class="navbar-form navbar-right form-inline" role="form" method="post" action="{{ url_for('bepasty.login') }}">
<div class="form-group">
<input class="form-control" type="password" name="token" autofocus>
<form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.login') }}">
<div class="form-row">
<div class="col">
<input class="form-control" type="password" name="token" placeholder="Password" autofocus>
</div>
<div class="col">
<button type="submit" class="btn btn-outline-secondary">Login</button>
</div>
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
{% endif %}
</div><!-- /.navbar-collapse -->
Expand Down Expand Up @@ -87,7 +95,7 @@
<!-- jQuery UI -->
<script src="{{ url_for('bepasty.xstatic', name='jquery_ui', filename='jquery-ui.min.js') }}" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="{{ url_for('bepasty.xstatic', name='bootstrap', filename='js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('bepasty.xstatic', name='bootstrap', filename='js/bootstrap.bundle.min.js') }}" type="text/javascript"></script>
{% block extra_script %}{% endblock %}
</body>
</html>
14 changes: 7 additions & 7 deletions src/bepasty/templates/_utils.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,33 +41,33 @@
{% endif %}
</td>
<td>
<div class="btn-group">
<a href="{{ url_for('bepasty.display', name=file['id']) }}" class="btn btn-xs btn-info">
<div class="btn-group flex-wrap flex-md-nowrap" role="group">
<a href="{{ url_for('bepasty.display', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
display
</a>
<a href="{{ url_for('bepasty.download', name=file['id']) }}" class="btn btn-xs btn-info">
<a href="{{ url_for('bepasty.download', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
download
</a>
<a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="btn btn-xs btn-info">
<a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
inline
</a>
{% if may(DELETE) %}
<form action="{{ url_for('bepasty.delete', name=file['id']) }}" method="post" class="btn-group">
<button type="submit" class="btn btn-xs btn-danger">
<button type="submit" class="btn btn-sm btn-danger">
delete
</button>
</form>
{% endif %}
{% if may(ADMIN) %}
{% if not file['locked'] %}
<form action="{{ url_for('bepasty.lock', name=file['id']) }}" method="post" class="btn-group">
<button type="submit" class="btn btn-xs btn-danger">
<button type="submit" class="btn btn-sm btn-danger">
lock
</button>
</form>
{% else %}
<form action="{{ url_for('bepasty.unlock', name=file['id']) }}" method="post" class="btn-group">
<button type="submit" class="btn btn-xs btn-info">
<button type="submit" class="btn btn-sm btn-info">
unlock
</button>
</form>
Expand Down
12 changes: 6 additions & 6 deletions src/bepasty/templates/display.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{% extends "_layout.html" %}

{% block content %}
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
<h1>
{{ item.meta['filename'] }}
</h1>
<div class="btn-group">
<div class="btn-group flex-wrap flex-md-nowrap" role="group">
{% if not item.meta['locked'] or may(ADMIN) %}
<a id="qr-btn" href="{{ url_for('bepasty.qr', name=name) }}" class="btn btn-info">
<span class="fa fa-qrcode"></span> QR
</a>
<a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info">
<a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info" role="button">
<span class="fa fa-download"></span> Download
</a>
<a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info">
<a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info" role="button">
<span class="fa fa-asterisk"></span> Inline
</a>
{% endif %}
Expand Down Expand Up @@ -43,7 +43,7 @@ <h1>
{% endif %}
</div>
</div>
<div class="panel-body">
<div class="card-body">
<p>
Type: {{ item.meta['type'] }},
Size: {{ item.meta['size'] }} bytes,
Expand Down
6 changes: 3 additions & 3 deletions src/bepasty/templates/error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{% extends "_layout.html" %}

{% block content %}
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
<h1>
{{ heading }}
</h1>
</div>
<div class="panel-body">
<div class="card-body">
<div class="alert alert-danger">
{{ body }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/bepasty/templates/filelist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{% block content %}
<div class="row">
<div class="col-sm-12">
<div class="col-md-12">
{{ utils.filelist(files) }}
</div>
</div>
Expand Down
46 changes: 26 additions & 20 deletions src/bepasty/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

{% macro maximum_lifetime() -%}
<div class="row">
<div class="col-md-3 form-group">
<div class="col-lg-3 form-group">
<input class="form-control" name="maxlife-value" type="number" min="1" value="1" /><br>
</div>
<div class="col-md-9 form-group">
<div class="col-lg-9 form-group">
<select class="form-control" name="maxlife-unit" size="1">
<option value="months">Months</option>
<option value="weeks">Weeks</option>
Expand All @@ -22,35 +22,35 @@
{% block content %}
{% if may(CREATE) %}
<div class="row">
<div class="col-sm-8">
<div class="col-md-8">
<form action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<textarea class="form-control" id="formupload" name="text" placeholder="Paste text here..." autofocus></textarea>
</div>
<div class="row">
<div class="col-xs-3 form-group">
<div class="col-3 form-group">
<input class="form-control" type="text" id="contenttype" name="contenttype" size="30" placeholder="Content-Type">
</div>
<div class="col-xs-6 form-group">
<div class="col-6 form-group">
<input class="form-control" type="text" id="filename" name="filename" size="40" placeholder="optional download-filename">
</div>
<div class="col-xs-3">
<button id="formupload-submit" class="btn btn-success btn-block">Submit</button>
<div class="col-3">
<button id="formupload-submit" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
<hr>
<label>Maximum lifetime value (choose before dragging or submitting)</label>
{{ maximum_lifetime() }}
<span class="btn btn-default fileinput-button dropzone">
<span class="btn btn-light fileinput-button dropzone">
<i class="fa fa-upload"></i>
<span>drag and drop files here - or click to select files</span>
<!-- Input for file upload widget -->
<input id="fileupload" type="file" name="file" multiple style="height: 100%; width: 100%;">
<input id="fileupload" type="file" class="form-control-file" name="file" multiple style="height: 100%; width: 100%;">
</span>
<noscript><br><button id="fileupload-submit" class="btn btn-success btn-block">Upload</button></noscript>
</form>
</div>
<div class="col-sm-4">
<div class="col-md-4">
<!-- item name list assembled here and offered for submission -->
<form id="filelist-form" style="display: none" action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
Expand All @@ -59,47 +59,53 @@
{{ maximum_lifetime() }}
<input type="hidden" name="contenttype" value="text/x-bepasty-list">
<div class="row">
<div class="col-md-7 form-group">
<div class="col-lg-7 form-group">
<input class="form-control" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
</div>
<div class="col-md-5">
<div class="col-lg-5">
<button class="btn btn-success btn-block">Create List Item</button>
</div>
</div>
</form>
<button id="fileupload-abort" class="btn btn-danger pull-right" style="visibility: hidden">abort</button>
<!-- The progress bar -->
<div id="fileupload-progress" class="progress progress-striped active" style="visibility: hidden">
<div class="progress-bar"></div>
<div class="d-flex pt-3 pb-3 align-items-center">
<!-- The progress bar -->
<div class="col-lg-9 pl-0 pr-0">
<div id="fileupload-progress" class="progress" style="visibility: hidden">
<div class="progress-bar progress-bar-striped active" role="progressbar"></div>
</div>
</div>
<div class="col-lg-3">
<button id="fileupload-abort" class="btn btn-danger" style="visibility: hidden">abort</button>
</div>
</div>
<!-- Uploaded files -->
<div id="files" class="files"></div>
</div>
</div>

{% else %}
<div class="page-header">
<div class="pb-2 mt-4 mb-2 border-bottom">
<h1>bepasty, the Binary File Upload Site</h1>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-sm-3">
<div class="col-md-3">
<span class="fa fa-thumbs-o-up"></span>
<h2>Free and Nice</h2>
<p>
A pastebin for <em>all</em> the stuff,<br>
not just for text.
</p>
</div>
<div class="col-sm-6">
<div class="col-md-6">
<span class="fa fa-eye"></span>
<h2>Free and Open Source</h2>
<p>
bepasty is free and open source software.<br>
<a href="https://github.com/bepasty/">bepasty project on github</a>
</p>
</div>
<div class="col-sm-3">
<div class="col-md-3">
<span class="fa fa-heart-o"></span>
<h2>Awesome Code</h2>
<p>
Expand Down
22 changes: 11 additions & 11 deletions src/bepasty/templates/qr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,28 +71,28 @@


{% block content %}
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="text">Content:</label>
<div class="col-sm-9">
<div class="card">
<div class="card-header">
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right text-nowrap" for="text">Content:</label>
<div class="col-md-9">
<input class="form-control" id="text" placeholder="https://example.org/" size="80"
value="{{ text }}">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" for="errorCorrectionLevel">Error correction:</label>
<div class="col-sm-2">
<label class="col-md-3 col-form-label text-md-right text-nowrap" for="errorCorrectionLevel">Error correction:</label>
<div class="col-md-2">
<select class="form-control" id="errorCorrectionLevel" name="e">
<option value="L">7% (L)</option>
<option value="M">15% (M)</option>
<option value="Q">25% (Q)</option>
<option value="H" selected="selected">30% (H)</option>
</select>
</div>
<label class="control-label col-sm-1" for="qrsize">Size:</label>
<div class="col-sm-6">
<label class="col-md-1 col-form-label text-md-right text-nowrap" for="qrsize">Size:</label>
<div class="col-md-6">
<input type="range" class="form-control" id="qrsize" min="45" max="500" value="100">
</div>
</div>
Expand All @@ -103,7 +103,7 @@
</div>
</div>

<div class="panel-body">
<div class="card-body">
<div class="text-center">
<div id="qr"></div>
</div>
Expand Down
Loading