blitzwing/bintzwing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add a crude responsive collapsible sidebar

Browse source
This commit is contained in:
El RIDO 2020-06-27 13:36:53 +02:00
parent e35a26c916
commit 8537f396b3
No known key found for this signature in database
GPG key ID: 0F5C940A6BD81F92
4 changed files with 65 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
css/bootstrap/privatebin.css
View file

@ -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;
}

12
js/privatebin.js
View file

@ -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();

12
tpl/bootstrap.php
View file

@ -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;

2
tpl/page.php
View file

@ -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" />