Skip to content

Commit

Permalink
Merge pull request #234 from OGAWAHirofumi/use-bootstrap4
Browse files Browse the repository at this point in the history 
Use bootstrap4
  • Loading branch information
@ThomasWaldmann
ThomasWaldmann authored Nov 8, 2020
2 parents 63a3115 + 7d3c7b6 commit 8174633
Show file tree
Hide file tree
Showing 10 changed files with 295 additions and 74 deletions.
2 changes: 1 addition & 1 deletion setup.py
View file
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
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
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
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
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
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
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
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
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

0 comments on commit 8174633

Please sign in to comment.