add a crude responsive collapsible sidebar

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

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 { .modal .modal-content button {
margin: 0.5em 0; 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;
}

View file

@ -12,9 +12,9 @@
*/ */
// global Base64, DOMPurify, FileReader, RawDeflate, history, navigator, prettyPrint, prettyPrintOne, showdown, kjua // global Base64, DOMPurify, FileReader, RawDeflate, history, navigator, prettyPrint, prettyPrintOne, showdown, kjua
'use strict';
jQuery.fn.draghover = function() { jQuery.fn.draghover = function() {
'use strict';
return this.each(function() { return this.each(function() {
let collection = $(), let collection = $(),
self = $(this); self = $(this);
@ -37,14 +37,11 @@ jQuery.fn.draghover = function() {
// main application start, called when DOM is fully loaded // main application start, called when DOM is fully loaded
jQuery(document).ready(function() { jQuery(document).ready(function() {
'use strict';
// run main controller // run main controller
$.PrivateBin.Controller.init(); $.PrivateBin.Controller.init();
}); });
jQuery.PrivateBin = (function($, RawDeflate) { jQuery.PrivateBin = (function($, RawDeflate) {
'use strict';
/** /**
* zlib library interface * 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" // initialize other modules/"classes"
Alert.init(); Alert.init();
Model.init(); Model.init();

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/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/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 --> <!-- icon -->
<link rel="apple-touch-icon" href="img/apple-touch-icon.png?<?php echo rawurlencode($VERSION); ?>" sizes="180x180" /> <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" /> <link rel="icon" type="image/png" href="img/favicon-32x32.png?<?php echo rawurlencode($VERSION); ?>" sizes="32x32" />
@ -447,7 +447,15 @@ if ($isCpct):
endif; endif;
?></nav> ?></nav>
<main> <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"> <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 <?php
if (strlen($NOTICE)): if (strlen($NOTICE)):
?> ?>
@ -466,7 +474,7 @@ if ($FILEUPLOAD):
?> ?>
<div id="attachment" role="alert" class="hidden alert alert-info"> <div id="attachment" role="alert" class="hidden alert alert-info">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> <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> </div>
<?php <?php
endif; endif;

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/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/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 --> <!-- icon -->
<link rel="apple-touch-icon" href="img/apple-touch-icon.png?<?php echo rawurlencode($VERSION); ?>" sizes="180x180" /> <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" /> <link rel="icon" type="image/png" href="img/favicon-32x32.png?<?php echo rawurlencode($VERSION); ?>" sizes="32x32" />