Просмотр исходного кода

add a crude responsive collapsible sidebar

El RIDO 6 лет назад
Родитель
Сommit
8537f396b3
4 измененных файлов с 65 добавлено и 7 удалено
  1. 46 0
      css/bootstrap/privatebin.css
  2. 8 4
      js/privatebin.js
  3. 10 2
      tpl/bootstrap.php
  4. 1 1
      tpl/page.php

+ 46 - 0
css/bootstrap/privatebin.css

@@ -205,3 +205,49 @@ li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
 .modal .modal-content button {
 	margin: 0.5em 0;
 }
+
+/* sidebar */
+#menu-toggle {
+	position: absolute;
+	top: 145px;
+	left: -3.3ch;
+	transform: rotate(90deg);
+	transition: all 0.5s ease;
+}
+
+main.toggled #menu-toggle {
+	left: 220px;
+}
+
+@media (max-width: 768px) {
+	#menu-toggle {
+		position: static;
+		margin-bottom: 1em;
+		transform: rotate(0);
+	}
+}
+
+main {
+	padding-left: 0;
+	transition: all 0.5s ease;
+}
+
+main.toggled {
+	padding-left: 250px;
+}
+
+#sidebar-wrapper {
+	position: fixed;
+	left: 250px;
+	width: 0;
+	height: 100%;
+	margin-left: -250px;
+	padding-left: 4ch;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	transition: all 0.5s ease;
+}
+
+main.toggled #sidebar-wrapper {
+	width: 250px;
+}

+ 8 - 4
js/privatebin.js

@@ -12,9 +12,9 @@
  */
 
 // global Base64, DOMPurify, FileReader, RawDeflate, history, navigator, prettyPrint, prettyPrintOne, showdown, kjua
+'use strict';
 
 jQuery.fn.draghover = function() {
-    'use strict';
     return this.each(function() {
         let collection = $(),
             self = $(this);
@@ -37,14 +37,11 @@ jQuery.fn.draghover = function() {
 
 // main application start, called when DOM is fully loaded
 jQuery(document).ready(function() {
-    'use strict';
     // run main controller
     $.PrivateBin.Controller.init();
 });
 
 jQuery.PrivateBin = (function($, RawDeflate) {
-    'use strict';
-
     /**
      * zlib library interface
      *
@@ -5364,6 +5361,13 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 });
             });
 
+            // attach memory sidebar toggle
+            $("#menu-toggle").on('click', function(e) {
+                e.preventDefault();
+                $("#menu-toggle .glyphicon").toggleClass("glyphicon glyphicon-menu-down glyphicon glyphicon-menu-up")
+                $("main").toggleClass("toggled");
+            });
+
             // initialize other modules/"classes"
             Alert.init();
             Model.init();

+ 10 - 2
tpl/bootstrap.php

@@ -72,7 +72,7 @@ endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-2.0.8.js" integrity="sha512-QwcEKGuEmKtMguCO9pqNtUtZqq9b/tJ8gNr5qhY8hykq3zKTlDOvpZAmf6Rs8yH35Bz1ZdctUjj2qEWxT5aXCg==" crossorigin="anonymous"></script>
 		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-LYos+qXHIRqFf5ZPNphvtTB0cgzHUizu2wwcOwcwz/VIpRv9lpcBgPYz4uq6jx0INwCAj6Fbnl5HoKiLufS2jg==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-pIM3/kBh5nI0TNPXyjhhqCrLE2enQc0DjiIfmpH2RoHaeDPNh2aTKIqEf8Ms6JMGWD/xJreAU7XUElWgELCkYQ==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-xXyscWa4PKPNa2wyjP3k1es3nGNnjvupAqpJNdjzOECQU1WWIFzajsdhVE325t5X4BHpKF5M9ash4ubmW2BsVQ==" crossorigin="anonymous"></script>
 		<!-- icon -->
 		<link rel="apple-touch-icon" href="img/apple-touch-icon.png?<?php echo rawurlencode($VERSION); ?>" sizes="180x180" />
 		<link rel="icon" type="image/png" href="img/favicon-32x32.png?<?php echo rawurlencode($VERSION); ?>" sizes="32x32" />
@@ -447,7 +447,15 @@ if ($isCpct):
 endif;
 ?></nav>
 		<main>
+			<div id="sidebar-wrapper">
+				<h4><?php echo I18n::_('Memory'); ?></h4>
+				<p><?php echo I18n::_('The memory lets you remember different paste links. The memory is unique to each website and device.'); ?></p>
+			</div>
 			<section class="container">
+				<button id="menu-toggle" class="btn btn-<?php echo $isDark ? 'warning' : 'default'; ?>">
+					<span class="glyphicon glyphicon-menu-up"  aria-hidden="true"></span>
+					<?php echo I18n::_('Memory'); ?>
+				</button>
 <?php
 if (strlen($NOTICE)):
 ?>
@@ -466,7 +474,7 @@ if ($FILEUPLOAD):
 ?>
 				<div id="attachment" role="alert" class="hidden alert alert-info">
 					<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
-					<a class="alert-link"><?php echo I18n::_('Download attachment'), PHP_EOL; ?></a>
+					<a class="alert-link"><?php echo I18n::_('Download attachment'); ?></a>
 				</div>
 <?php
 endif;

+ 1 - 1
tpl/page.php

@@ -50,7 +50,7 @@ endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-2.0.8.js" integrity="sha512-QwcEKGuEmKtMguCO9pqNtUtZqq9b/tJ8gNr5qhY8hykq3zKTlDOvpZAmf6Rs8yH35Bz1ZdctUjj2qEWxT5aXCg==" crossorigin="anonymous"></script>
 		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-LYos+qXHIRqFf5ZPNphvtTB0cgzHUizu2wwcOwcwz/VIpRv9lpcBgPYz4uq6jx0INwCAj6Fbnl5HoKiLufS2jg==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-pIM3/kBh5nI0TNPXyjhhqCrLE2enQc0DjiIfmpH2RoHaeDPNh2aTKIqEf8Ms6JMGWD/xJreAU7XUElWgELCkYQ==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-xXyscWa4PKPNa2wyjP3k1es3nGNnjvupAqpJNdjzOECQU1WWIFzajsdhVE325t5X4BHpKF5M9ash4ubmW2BsVQ==" crossorigin="anonymous"></script>
 		<!-- icon -->
 		<link rel="apple-touch-icon" href="img/apple-touch-icon.png?<?php echo rawurlencode($VERSION); ?>" sizes="180x180" />
 		<link rel="icon" type="image/png" href="img/favicon-32x32.png?<?php echo rawurlencode($VERSION); ?>" sizes="32x32" />