Fix previousPaste menu

zerobin/static/css/style.css

@@ -10,7 +10,6 @@
 
 /* logo */
 
-
 .brand {
   font-size: 38px !important;
   padding: 0 !important;
@@ -41,7 +40,7 @@
   text-align: center;
 }
 
-.about span{
+.about span {
   font-size: 10px;
 }
 
@@ -51,7 +50,6 @@ body {
   padding-bottom: 40px;
 }
 
-
 .sidebar-nav {
   padding: 9px 0;
 }
@@ -60,8 +58,8 @@ select {
   width: 135px;
 }
 
-
+ul,
-ul, ol {
+ol {
   padding: 0;
   margin: 0;
 }
@@ -97,10 +95,9 @@ blockquote {
 }
 
 .alert .title {
-	display:block;
+  display: block;
 }
 
-
 .footer {
   text-align: center;
   bottom: 0px;
@@ -117,7 +114,7 @@ blockquote {
 /* Home */
 
 .btn-group {
-    float:left;
+  float: left;
 }
 
 html.file-upload p.file-upload {
@@ -127,14 +124,13 @@ html.file-upload p.file-upload {
 }
 
 html.file-upload p.file-upload {
-	display:inherit;
+  display: inherit;
 }
 
 html.no-file-upload p.file-upload {
-	display:none;
+  display: none;
 }
 
-
 input.btn-upload {
   position: relative;
   left: -6px;
@@ -148,7 +144,7 @@ input.hide-upload {
   left: -110px;
   -moz-opacity: 0;
   filter: alpha(opacity=0);
-	opacity: 0 ;
+  opacity: 0;
   z-index: 2;
   width: 100px;
   margin-top: -20px;
@@ -157,27 +153,31 @@ input.hide-upload {
   height: 49px;
 }
 
-
 /* Paste Page */
 
-
 #paste-content.linenums {
-	padding-left:0;
+  padding-left: 0;
 }
 
 .submit-form {
-	display:none;
+  display: none;
 }
 
-
+a#clip-button.hover {
-a#clip-button.hover{
+  cursor: pointer;
-	cursor:pointer;
+  text-decoration: underline;
-	text-decoration:underline;
 }
 
-li.L0, li.L1, li.L2, li.L3, li.L4,
+li.L0,
-li.L5, li.L6, li.L7, li.L8, li.L9
+li.L1,
-{
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
   list-style-type: decimal;
   background: inherit;
 }
@@ -195,8 +195,10 @@ pre.prettyprint {
 
 /* Specify class=linenums on a pre to get line numbering */
 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 {
   /* color: #bebec5;
   line-height: 18px;
@@ -218,22 +220,23 @@ pre {
 }
 
 .kwd {
-color: #66F;
+  color: #66F;
 }
 
-.pun, .opn, .clo {
+.pun,
-color: #0A0;
+.opn,
+.clo {
+  color: #0A0;
 }
 
 .lit {
-color: #933;
+  color: #933;
 }
 
 .com {
-color: #C0C;
+  color: #C0C;
 }
 
-
 /* Common css */
 
 .form-control,
@@ -245,26 +248,30 @@ color: #C0C;
   color: #f9fafc;
   border-radius: 3px;
 }
+
 .form-group {
   /* margin-bottom: 1rem; */
   margin-bottom: 0;
 }
+
 .select-date {
   width: 320px;
   float: right;
 }
+
 .select-date-clone {
   width: 60%;
   max-width: 320px;
 }
+
 .container-md {
   margin-top: 20px;
   padding-bottom: 80px;
 }
 
 form textarea {
-    overflow-y:auto;
+  overflow-y: auto;
-    min-height:250px;
+  min-height: 250px;
 }
 
 .legal {
@@ -274,12 +281,10 @@ form textarea {
   margin-top: 30px;
 }
 
-
 #alert-template {
   display: none;
 }
 
-
 /** Progress bar */
 
 .progress {
@@ -291,7 +296,7 @@ form textarea {
 .progress .bar {
   width: 25%;
   padding: 12px;
-	text-align:left;
+  text-align: left;
 }
 
 /* Previous paste list */
@@ -302,24 +307,23 @@ form textarea {
 }
 
 .previous-pastes canvas {
-	display:block;
+  display: block;
-	float:left;
+  float: left;
-	margin-right:5px;
+  margin-right: 5px;
 }
 
 html.local-storage .no-local-storage {
-	display:none;
+  display: none;
 }
 
 html.no-local-storage .local-storage {
-	display:none;
+  display: none;
 }
 
 canvas {
   border: 1px solid white;
 }
 
-
 .noscript {
   text-align: center;
   color: red;
@@ -327,27 +331,27 @@ canvas {
 }
 
 #faq dt {
-    margin:2em 0 1em 0;
+  margin: 2em 0 1em 0;
 }
 
 #faq p {
-    margin:1em;
+  margin: 1em;
 }
 
 #force-coloration {
-	text-decoration:underline;
+  text-decoration: underline;
 }
 
 #expiration-tag {
-    float:right;
+  float: right;
   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;
   filter: alpha(opacity=50);
-    font-weight:bold;
+  font-weight: bold;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
@@ -362,10 +366,6 @@ canvas {
 
 /* top Menu */
 
-#topmenu {
-	display: none;
-}
-
 .topnav {
   height: 60px;
   background-color: #333;
@@ -381,6 +381,7 @@ canvas {
   font-size: 17px;
   width: 175px;
 }
+
 .topnav .tagline {
   font-size: 0.9em;
   padding: 8px;
@@ -388,11 +389,10 @@ canvas {
   margin-left: 20px;
 }
 
-.topnav .tagline span{
+.topnav .tagline span {
   font-style: italic;
 }
 
-
 .topnav a.active {
   background-color: #4CAF50;
   color: white;
@@ -409,10 +409,11 @@ canvas {
 
 /* Styling the sub menu */
 nav {
-float: right;
+  float: right;
-margin: 18px;
+  margin: 18px;
 
 }
+
 nav ul li {
   float: left;
   list-style: none;
@@ -432,6 +433,7 @@ nav ul li a:hover {
   text-decoration: none;
 
 }
+
 .submenu {
   position: relative;
 }
@@ -444,7 +446,7 @@ nav ul li a:hover {
   z-index: 9999;
 }
 
-.submenu li{
+.submenu li {
   display: block;
   background: #375A7F;
   color: white;
@@ -454,7 +456,7 @@ nav ul li a:hover {
 /* Styling drop down links */
 .submenu li a {
   background: transparent;
-  padding:10px;
+  padding: 10px;
   display: block;
 }
 
@@ -467,20 +469,26 @@ nav ul li a:hover {
   display: block;
 }
 
-
 /* Responsive */
 @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 */
-  .btn {font-size: 0.77em;}
+  .btn {
-  pre {font-size: 70%;}
+    font-size: 0.77em;
+  }
+
+  pre {
+    font-size: 70%;
+  }
 }
- 
-
- 
-
-
-  

zerobin/static/js/behavior.js

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

zerobin/views/base.tpl

@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
   <meta charset="utf-8">
   <title>0bin - encrypted pastebin</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description"
+  <meta name="description" content="0bin is a client-side-encrypted
-          content="0bin is a client-side-encrypted
                    pastebin featuring burn after reading, history, and
                    a clipboard">
 
   <link rel="shortcut icon" href="/favicon.ico">
 
   %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:
   <link href="/static/css/prettify.css" rel="stylesheet" />
   <link href="/static/css/desert.css" rel="stylesheet" />
@@ -21,20 +20,30 @@
   <link href="/static/css/style.css?{{ VERSION }}" rel="stylesheet">
   %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>
-      <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>
 
-      <nav >
+      <nav>
         <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>
           </li>
         </ul>
@@ -49,17 +58,20 @@
     </noscript>
 
     <div class="container-md" id="wrap-content">
-        <div id='main' >{{!base}}</div> 
+      <div id='main'>{{!base}}</div>
     </div>
 
     <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>
       %if settings.DISPLAY_COUNTER:
       <strong>{{ pastes_count }}</strong> pastes øbinned
       %end
     </footer>
 
+  </div>
+
 
   <script src="/static/js/vue.js"></script>
   %if settings.COMPRESSED_STATIC_FILES:
@@ -88,17 +100,7 @@
     <span class="message"></span>
   </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>