mirror/0bin
1
0
Fork 0
mirror of https://github.com/Tygs/0bin.git synced 2023-08-10 21:13:00 +03:00
Code Issues Projects Releases Wiki Activity

Fix previousPaste menu

Browse Source
This commit is contained in:
ksamuel 2020-08-12 11:00:41 +02:00
parent 601aa5a16b
commit 7c6adb32ab
3 changed files with 288 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

424
zerobin/static/css/style.css
View File

@ -10,181 +10,181 @@
/* logo */ /* logo */
.brand { .brand {
font-size: 38px !important; font-size: 38px !important;
padding: 0 !important; padding: 0 !important;
margin-left: 10%; margin-left: 10%;
} }
.brand span { .brand span {
font-size: 48px; font-size: 48px;
line-height: 0; line-height: 0;
} }
.brand em { .brand em {
display: inline; display: inline;
color: #D40202; color: #D40202;
font-size: 27px; font-size: 27px;
} }
.about { .about {
line-height: 13px; line-height: 13px;
font-style: italic; font-style: italic;
text-align: right; text-align: right;
padding-top: 9px; padding-top: 9px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.center { .center {
text-align: center; text-align: center;
} }
.about span{ .about span {
font-size: 10px; font-size: 10px;
} }
/* body & other stuff */ /* body & other stuff */
body { body {
padding-bottom: 40px; padding-bottom: 40px;
} }
.sidebar-nav { .sidebar-nav {
padding: 9px 0; padding: 9px 0;
} }
select { select {
width: 135px; width: 135px;
} }
ul, ol { ul,
padding: 0; ol {
margin: 0; padding: 0;
margin: 0;
} }
li { li {
margin-left: -9px; margin-left: -9px;
} }
a { a {
color: #2ea1d7; color: #2ea1d7;
} }
a:hover { a:hover {
color: #1888bc; color: #1888bc;
} }
p { p {
margin: 0 0 20px; margin: 0 0 20px;
} }
.grey { .grey {
color: #999; color: #999;
} }
.nav-list { .nav-list {
padding-right: 0px !important; padding-right: 0px !important;
font-size: 12px; font-size: 12px;
} }
blockquote { blockquote {
width: 630px; width: 630px;
float: left; float: left;
} }
.alert .title { .alert .title {
display:block; display: block;
}
.footer {
text-align: center;
bottom: 0px;
position: fixed;
height: 60px;
width: 100%;
display: block;
margin: 0px 0px 0px 0px;
padding: 8px 0 0 0;
left: 0;
background-color: #424141;
} }
.footer {
text-align: center;
bottom: 0px;
position: fixed;
height: 60px;
width: 100%;
display: block;
margin: 0px 0px 0px 0px;
padding: 8px 0 0 0;
left: 0;
background-color: #424141;
}
/* Home */ /* Home */
.btn-group { .btn-group {
float:left; float: left;
} }
html.file-upload p.file-upload { html.file-upload p.file-upload {
float: left; float: left;
margin: 22px 0px 0px 21px; margin: 22px 0px 0px 21px;
display: none; display: none;
} }
html.file-upload p.file-upload { html.file-upload p.file-upload {
display:inherit; display: inherit;
} }
html.no-file-upload p.file-upload { html.no-file-upload p.file-upload {
display:none; display: none;
} }
input.btn-upload { input.btn-upload {
position: relative; position: relative;
left: -6px; left: -6px;
width: 100px; width: 100px;
z-index: 1; z-index: 1;
margin-top: -13px; margin-top: -13px;
} }
input.hide-upload { input.hide-upload {
position: relative; position: relative;
left: -110px; left: -110px;
-moz-opacity: 0; -moz-opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
opacity: 0 ; opacity: 0;
z-index: 2; z-index: 2;
width: 100px; width: 100px;
margin-top: -20px; margin-top: -20px;
cursor: pointer; cursor: pointer;
cursor: hand; cursor: hand;
height: 49px; height: 49px;
} }
/* Paste Page */ /* Paste Page */
#paste-content.linenums { #paste-content.linenums {
padding-left:0; padding-left: 0;
} }
.submit-form { .submit-form {
display:none; display: none;
}
a#clip-button.hover{
cursor:pointer;
text-decoration:underline;
} }
li.L0, li.L1, li.L2, li.L3, li.L4, a#clip-button.hover {
li.L5, li.L6, li.L7, li.L8, li.L9 cursor: pointer;
{ text-decoration: underline;
list-style-type: decimal; }
background: inherit;
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
list-style-type: decimal;
background: inherit;
} }
pre.prettyprint { pre.prettyprint {
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
} }
.prettyprint.linenums { .prettyprint.linenums {
@ -195,8 +195,10 @@ pre.prettyprint {
/* Specify class=linenums on a pre to get line numbering */ /* Specify class=linenums on a pre to get line numbering */
ol.linenums { ol.linenums {
margin: 0 0 0 55px; /* IE indents via margin-left */ margin: 0 0 0 55px;
/* IE indents via margin-left */
} }
ol.linenums li { ol.linenums li {
/* color: #bebec5; /* color: #bebec5;
line-height: 18px; line-height: 18px;
@ -210,165 +212,163 @@ ol.linenums li {
} }
pre { pre {
/* font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif; /* font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif;
line-height: 21px; line-height: 21px;
font-size: 12px; */ font-size: 12px; */
white-space: pre-wrap; white-space: pre-wrap;
overflow: visible; overflow: visible;
} }
.kwd { .kwd {
color: #66F; color: #66F;
} }
.pun, .opn, .clo { .pun,
color: #0A0; .opn,
.clo {
color: #0A0;
} }
.lit { .lit {
color: #933; color: #933;
} }
.com { .com {
color: #C0C; color: #C0C;
} }
/* Common css */ /* Common css */
.form-control, .form-control,
.form-control:focus, .form-control:focus,
.form-control:disabled, .form-control:disabled,
.form-control[readonly], .form-control[readonly],
#paste-content { #paste-content {
background-color: #375a7f; background-color: #375a7f;
color: #f9fafc; color: #f9fafc;
border-radius: 3px; border-radius: 3px;
} }
.form-group { .form-group {
/* margin-bottom: 1rem; */ /* margin-bottom: 1rem; */
margin-bottom: 0; margin-bottom: 0;
} }
.select-date { .select-date {
width: 320px; width: 320px;
float: right; float: right;
} }
.select-date-clone { .select-date-clone {
width: 60%; width: 60%;
max-width: 320px; max-width: 320px;
} }
.container-md { .container-md {
margin-top: 20px; margin-top: 20px;
padding-bottom: 80px; padding-bottom: 80px;
} }
form textarea { form textarea {
overflow-y:auto; overflow-y: auto;
min-height:250px; min-height: 250px;
} }
.legal { .legal {
margin: 0 auto; margin: 0 auto;
width: 300px; width: 300px;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
} }
#alert-template { #alert-template {
display: none; display: none;
} }
/** Progress bar */ /** Progress bar */
.progress { .progress {
margin: 8px 0 8px 0; margin: 8px 0 8px 0;
height: 1.5rem; height: 1.5rem;
display: none; display: none;
} }
.progress .bar { .progress .bar {
width: 25%; width: 25%;
padding: 12px; padding: 12px;
text-align:left; text-align: left;
} }
/* Previous paste list */ /* Previous paste list */
.progress-container { .progress-container {
margin: 8px 0 8px 0; margin: 8px 0 8px 0;
clear: both; clear: both;
} }
.previous-pastes canvas { .previous-pastes canvas {
display:block; display: block;
float:left; float: left;
margin-right:5px; margin-right: 5px;
} }
html.local-storage .no-local-storage { html.local-storage .no-local-storage {
display:none; display: none;
} }
html.no-local-storage .local-storage { html.no-local-storage .local-storage {
display:none; display: none;
} }
canvas { canvas {
border: 1px solid white; border: 1px solid white;
} }
.noscript { .noscript {
text-align: center; text-align: center;
color: red; color: red;
font-weight: bold; font-weight: bold;
} }
#faq dt { #faq dt {
margin:2em 0 1em 0; margin: 2em 0 1em 0;
} }
#faq p { #faq p {
margin:1em; margin: 1em;
} }
#force-coloration { #force-coloration {
text-decoration:underline; text-decoration: underline;
} }
#expiration-tag { #expiration-tag {
float:right; float: right;
margin: 1em; margin: 1em;
background:grey; background: grey;
color:white; color: white;
font-size:0.8em; font-size: 0.8em;
padding:0 1ex; padding: 0 1ex;
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
font-weight:bold; font-weight: bold;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
} }
#content.hover { #content.hover {
background-color: #eee; background-color: #eee;
} }
/* top Menu */ /* top Menu */
#topmenu { .topnav {
display: none;
}
.topnav {
height: 60px; height: 60px;
background-color: #333; background-color: #333;
} }
.topnav .brand { .topnav .brand {
@ -381,17 +381,17 @@ canvas {
font-size: 17px; font-size: 17px;
width: 175px; width: 175px;
} }
.topnav .tagline { .topnav .tagline {
font-size: 0.9em; font-size: 0.9em;
padding: 8px; padding: 8px;
float: left; float: left;
margin-left: 20px; margin-left: 20px;
} }
.topnav .tagline span{ .topnav .tagline span {
font-style: italic; font-style: italic;
} }
.topnav a.active { .topnav a.active {
background-color: #4CAF50; background-color: #4CAF50;
@ -403,16 +403,17 @@ canvas {
} }
.topnav .bi-list { .topnav .bi-list {
width: 2em; width: 2em;
height: 2em; height: 2em;
} }
/* Styling the sub menu */ /* Styling the sub menu */
nav { nav {
float: right; float: right;
margin: 18px; margin: 18px;
} }
nav ul li { nav ul li {
float: left; float: left;
list-style: none; list-style: none;
@ -422,39 +423,40 @@ nav ul li a {
color: white; color: white;
background: #333333; background: #333333;
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
} }
nav ul li a:hover { nav ul li a:hover {
background: #375A7F; background: #375A7F;
border-radius: 3px; border-radius: 3px;
color: #FFF; color: #FFF;
text-decoration: none; text-decoration: none;
} }
.submenu { .submenu {
position: relative; position: relative;
} }
.submenu ul { .submenu ul {
position: absolute; position: absolute;
margin: 8px 0 0px 9px; margin: 8px 0 0px 9px;
display: none; display: none;
width: -webkit-fill-available; width: -webkit-fill-available;
z-index: 9999; z-index: 9999;
} }
.submenu li{ .submenu li {
display: block; display: block;
background: #375A7F; background: #375A7F;
color: white; color: white;
float: none; float: none;
} }
/* Styling drop down links */ /* Styling drop down links */
.submenu li a { .submenu li a {
background: transparent; background: transparent;
padding:10px; padding: 10px;
display: block; display: block;
} }
@ -467,20 +469,26 @@ nav ul li a:hover {
display: block; display: block;
} }
/* Responsive */ /* Responsive */
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;} .topnav a:not(:first-child) {
.topnav .tagline {display: none;} display: none;
.brand { margin-left: 1%;} }
.topnav .tagline {
display: none;
}
.brand {
margin-left: 1%;
}
/* Fonts */ /* Fonts */
.btn {font-size: 0.77em;} .btn {
pre {font-size: 70%;} font-size: 0.77em;
}
pre {
font-size: 70%;
}
} }

19
zerobin/static/js/behavior.js
View File

@ -15,26 +15,25 @@ Vue.options.delimiters = ['{%', '%}'];
// Force focus for textarea (firefox hack) // Force focus for textarea (firefox hack)
setTimeout(function () { setTimeout(function () {
document.querySelector('textarea').focus() document.getElementById('content').focus()
}, 100) }, 100)
// Parse obfuscaded emails and make them usable // Parse obfuscaded emails and make them usable
const menu = new Vue({ const menu = new Vue({
el: "#menu-top", el: "#menu-top",
methods: { methods: {
formatEmail: (email) => {
return "mailto:" + email.replace('__AT__', '@');
},
} }
}) })
const app = new Vue({ const app = new Vue({
el: '#wrap-content', el: '#app',
data: { data: {
previousPastes: [], previousPastes: [],
downloadLink: {}, downloadLink: {},
displayBottomToolBar: false, displayBottomToolBar: false,
openPreviousPastesMenu: false,
isUploading: false, isUploading: false,
currentPaste: { currentPaste: {
ownerKey: '', ownerKey: '',
@ -77,7 +76,12 @@ const app = new Vue({
isLoading: false isLoading: false
}, },
methods: { methods: {
forceLoadPaste: (link) => {
formatEmail: (email) => {
return "mailto:" + email.replace('__AT__', '@');
},
forceLoad: (link) => {
window.location = link; window.location = link;
window.location.reload(); window.location.reload();
}, },
@ -130,8 +134,7 @@ const app = new Vue({
}) })
}).then(function (response) { }).then(function (response) {
if (response.ok) { if (response.ok) {
window.location = "/"; app.forceLoad("/");
window.reload()
} else { } else {
form.forEach((node) => node.disabled = false); form.forEach((node) => node.disabled = false);
app.isLoading = false app.isLoading = false

120
zerobin/views/base.tpl
View File

@ -1,40 +1,49 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<title>0bin - encrypted pastebin</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>0bin - encrypted pastebin</title>
<meta name="description" <meta name="viewport" content="width=device-width, initial-scale=1">
content="0bin is a client-side-encrypted <meta name="description" content="0bin is a client-side-encrypted
pastebin featuring burn after reading, history, and pastebin featuring burn after reading, history, and
a clipboard"> a clipboard">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
<link href="/static/css/style.min.css?{{ VERSION }}" <link href="/static/css/style.min.css?{{ VERSION }}" rel="stylesheet" />
rel="stylesheet" /> %else:
%else: <link href="/static/css/prettify.css" rel="stylesheet" />
<link href="/static/css/prettify.css" rel="stylesheet" /> <link href="/static/css/desert.css" rel="stylesheet" />
<link href="/static/css/desert.css" rel="stylesheet" /> <link href="/static/css/bootswatch.4.5.css" rel="stylesheet">
<link href="/static/css/bootswatch.4.5.css" rel="stylesheet"> <link href="/static/css/style.css?{{ VERSION }}" rel="stylesheet">
<link href="/static/css/style.css?{{ VERSION }}" rel="stylesheet"> %end
%end
</head> </head>
<body> <body>
<div class="topnav" > <div id="app">
<div class="topnav">
<a class="brand" href="/"><span>ø</span>bin<em>.net</em></a> <a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
<span class="tagline">"A client side encrypted PasteBin"<br><span>All pastes are AES256 encrypted, we cannot know what you paste...</span> <span class="tagline">"A client side encrypted PasteBin"<br><span>All pastes are AES256 encrypted, we cannot know
what you paste...</span>
</span> </span>
<nav > <nav>
<ul> <ul>
<li class="submenu" ><a href="#" onclick="ToggleMenu()">Previous pastes +</a> <li class="submenu"><a href="#" @click="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
<ul class="previous-pastes" id="topmenu"> pastes +</a>
<li class="item active"><a href="#">No paste yet...</a></li> <ul class="previous-pastes" id="topmenu" v-if="openPreviousPastesMenu"
@mouseleave="openPreviousPastesMenu =false">
<li class="item active" v-if="previousPastes.length === 0">
<a href="#">No paste yet...</a>
</li>
<li class="item active" v-for="paste in previousPastes">
<a :href="paste.link" @click="forceLoad(paste.link)">{% paste.displayDate %}.</a>
</li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -43,23 +52,26 @@
</div> </div>
<noscript class="container noscript"> <noscript class="container noscript">
<p>This pastebin uses client-side encryption. Therefore, it needs JavaScript enabled.</p> <p>This pastebin uses client-side encryption. Therefore, it needs JavaScript enabled.</p>
<p>It seems like your browser doesn't have JavaScript enable.</p> <p>It seems like your browser doesn't have JavaScript enable.</p>
<p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p> <p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p>
</noscript> </noscript>
<div class="container-md" id="wrap-content"> <div class="container-md" id="wrap-content">
<div id='main' >{{!base}}</div> <div id='main'>{{!base}}</div>
</div> </div>
<footer class="footer"> <footer class="footer">
<a href="https://www.0bin.net/">Create a paste</a> - <a href="/faq/">Faq</a> - <a href="https://github.com/sametmax/0bin">Github</a> <a href="https://www.0bin.net/">Create a paste</a> - <a href="/faq/">Faq</a> - <a
href="https://github.com/sametmax/0bin">Github</a>
<br> <br>
%if settings.DISPLAY_COUNTER: %if settings.DISPLAY_COUNTER:
<strong>{{ pastes_count }}</strong> pastes øbinned <strong>{{ pastes_count }}</strong> pastes øbinned
%end %end
</footer> </footer>
</div>
<script src="/static/js/vue.js"></script> <script src="/static/js/vue.js"></script>
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
@ -74,31 +86,21 @@
</script> </script>
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
<script src="/static/js/additional.min.js?{{ settings.VERSION }}"></script> <script src="/static/js/additional.min.js?{{ settings.VERSION }}"></script>
%else: %else:
<script src="/static/js/lzw.js"></script> <script src="/static/js/lzw.js"></script>
<script src="/static/js/prettify.min.js"></script> <script src="/static/js/prettify.min.js"></script>
<script src="/static/js/ZeroClipboard.js"></script> <script src="/static/js/ZeroClipboard.js"></script>
%end %end
<p id="alert-template" class="alert-primary"> <p id="alert-template" class="alert-primary">
<a class="close" data-dismiss="alert" href="#">×</a> <a class="close" data-dismiss="alert" href="#">×</a>
<strong class="title"></strong> <strong class="title"></strong>
<span class="message"></span> <span class="message"></span>
</p> </p>
<script>
function ToggleMenu() {
var x = document.getElementById("topmenu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</body>
</html> </html>