add a crude responsive collapsible sidebar
This commit is contained in:
parent
e35a26c916
commit
8537f396b3
4 changed files with 65 additions and 7 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
Loading…
Reference in a new issue