From 8537f396b35f757fa6371ae74ea8e2f18b8fdd2f Mon Sep 17 00:00:00 2001 From: El RIDO Date: Sat, 27 Jun 2020 13:36:53 +0200 Subject: [PATCH] add a crude responsive collapsible sidebar --- css/bootstrap/privatebin.css | 46 ++++++++++++++++++++++++++++++++++++ js/privatebin.js | 12 ++++++---- tpl/bootstrap.php | 12 ++++++++-- tpl/page.php | 2 +- 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/css/bootstrap/privatebin.css b/css/bootstrap/privatebin.css index 72e420ed..ff697722 100644 --- a/css/bootstrap/privatebin.css +++ b/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; +} diff --git a/js/privatebin.js b/js/privatebin.js index 6826da4a..aa869bc5 100644 --- a/js/privatebin.js +++ b/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(); diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php index 71da5a66..f35adf9a 100644 --- a/tpl/bootstrap.php +++ b/tpl/bootstrap.php @@ -72,7 +72,7 @@ endif; ?> - + @@ -447,7 +447,15 @@ if ($isCpct): endif; ?>
+
+ @@ -466,7 +474,7 @@ if ($FILEUPLOAD): ?> - +