Fix previousPaste menu

zerobin/static/css/style.css

@@ -10,7 +10,6 @@
 
 /* logo */
 
-
 .brand {
   font-size: 38px !important;
   padding: 0 !important;
@@ -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;
 }
@@ -100,7 +98,6 @@ blockquote {
   display: block;
 }
 
-
 .footer {
   text-align: center;
   bottom: 0px;
@@ -134,7 +131,6 @@ html.no-file-upload p.file-upload {
   display: none;
 }
 
-
 input.btn-upload {
   position: relative;
   left: -6px;
@@ -157,10 +153,8 @@ input.hide-upload {
   height: 49px;
 }
 
-
 /* Paste Page */
 
-
 #paste-content.linenums {
   padding-left: 0;
 }
@@ -169,15 +163,21 @@ input.hide-upload {
   display: none;
 }
 
-
 a#clip-button.hover {
   cursor: pointer;
   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;
@@ -221,7 +223,9 @@ pre {
   color: #66F;
 }
 
-.pun, .opn, .clo {
+.pun,
+.opn,
+.clo {
   color: #0A0;
 }
 
@@ -233,7 +237,6 @@ color: #933;
   color: #C0C;
 }
 
-
 /* Common css */
 
 .form-control,
@@ -245,18 +248,22 @@ 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;
@@ -274,12 +281,10 @@ form textarea {
   margin-top: 30px;
 }
 
-
 #alert-template {
   display: none;
 }
 
-
 /** Progress bar */
 
 .progress {
@@ -319,7 +324,6 @@ canvas {
   border: 1px solid white;
 }
 
-
 .noscript {
   text-align: center;
   color: red;
@@ -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;
@@ -392,7 +393,6 @@ canvas {
   font-style: italic;
 }
 
-
 .topnav a.active {
   background-color: #4CAF50;
   color: white;
@@ -413,6 +413,7 @@ float: right;
   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;
 }
@@ -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%;}
-
-  /* Fonts */
-  .btn {font-size: 0.77em;}
-  pre {font-size: 70%;}
   }
 
+  .topnav .tagline {
+    display: none;
+  }
 
+  .brand {
+    margin-left: 1%;
+  }
 
+  /* Fonts */
+  .btn {
+    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>
   <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" />
@@ -25,16 +24,26 @@
 
 <body>
 
+  <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>
         <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>
@@ -53,13 +62,16 @@
     </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,16 +100,6 @@
     <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>