From fc71c322d710acb0f1fb3b949ff07bb590d19d28 Mon Sep 17 00:00:00 2001 From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:58:59 -0500 Subject: [PATCH] improve sidebar --- pyra/config.py | 23 +++--- web/css/sidebar.css | 154 +++++++++++++++----------------------- web/js/sidebar.js | 40 ++++++---- web/templates/config.html | 48 +++++++----- web/templates/navbar.html | 2 +- 5 files changed, 130 insertions(+), 137 deletions(-) diff --git a/pyra/config.py b/pyra/config.py index ed7c50de1..8fb74a4e4 100644 --- a/pyra/config.py +++ b/pyra/config.py @@ -48,10 +48,11 @@ # - integer (integer) # - digits (string) _CONFIG_SPEC_DICT = dict( - Hidden=dict( + Info=dict( type='section', - name=_('Hidden'), - description=_('These options should be hidden from the user interface.'), + name=_('Info'), + description=_('For information purposes only.'), + icon='info', CONFIG_VERSION=dict( type='integer', name=_('Config version'), @@ -60,7 +61,7 @@ min=0, max=0, # increment when updating config data_parsley_type='integer', - extra_class='col-md-1', + extra_class='col-md-3', ), FIRST_RUN_COMPLETE=dict( type='boolean', @@ -73,6 +74,7 @@ type='section', name=_('General'), description=_('General settings.'), + icon='gear', LOCALE=dict( type='option', name=_('Locale'), @@ -86,7 +88,7 @@ f'English ({_("English")})', f'Español ({_("Spanish")})', ], - extra_class='col-md-3', + extra_class='col-lg-6', ), LAUNCH_BROWSER=dict( type='boolean', @@ -105,6 +107,7 @@ type='section', name=_('Logging'), description=_('Logging settings.'), + icon='file-code', LOG_DIR=dict( type='string', name=_('Log directory'), @@ -114,7 +117,7 @@ else r'^\/(?:[^/]+\/)*$ ', # https://regexpattern.com/windows-folder-path/ # https://regexpattern.com/linux-folder-path/ - extra_class='col-md-6', + extra_class='col-lg-8', ), DEBUG_LOGGING=dict( type='boolean', @@ -128,6 +131,7 @@ type='section', name=_('Network'), description=_('Network settings.'), + icon='network-wired', HTTP_HOST=dict( type='string', name=_('HTTP host address'), @@ -137,7 +141,7 @@ data_parsley_pattern=r'\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)[.]){3}' r'(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b', # https://codverter.com/blog/articles/tech/20190105-extract-ipv4-ipv6-ip-addresses-using-regex.html - extra_class='col-md-2', + extra_class='col-md-4', ), HTTP_PORT=dict( type='integer', @@ -148,20 +152,21 @@ min=21, max=65535, data_parsley_type='integer', - extra_class='col-md-1', + extra_class='col-md-3', ), HTTP_ROOT=dict( type='string', name=_('HTTP root'), beta=True, description=_('Todo: The base URL of the web server. Used for reverse proxies.'), - extra_class='col-md-4', + extra_class='col-lg-6', ), ), Updater=dict( type='section', name=_('Updater'), description=_('Updater settings.'), + icon='arrows-spin', AUTO_UPDATE=dict( type='boolean', name=_('Auto update'), diff --git a/web/css/sidebar.css b/web/css/sidebar.css index ae4c436f3..a6ad403a4 100644 --- a/web/css/sidebar.css +++ b/web/css/sidebar.css @@ -1,140 +1,106 @@ -/*sidebar*/ -/*! - * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar) - * Copyright 2013-2017 Start Bootstrap - * Licensed under MIT - -(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE) - */ - -#menu-toggle { - color: white; - position: absolute; - top: 10px; - left: 10px; - background: black; -} - +/*https://codepen.io/lfrichter/pen/mQJJyB*/ #wrapper { - padding-left: 250px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } -#wrapper.toggled { - padding-left: 0; +#wrapper.sidebar-expanded { + padding-left: 250px; +} + +#wrapper.sidebar-collapsed { + padding-left: 80px; } #sidebar-wrapper { + top: 80px; position: fixed; - left: 250px; - width: 250px; - height: 100%; - margin-left: -250px; + height: 100vh; + background-color: #151515; + /*padding: 0;*/ overflow-y: scroll; overflow-x: hidden; - background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } -#wrapper.toggled #sidebar-wrapper { - width: 0; +#sidebar-wrapper.sidebar-expanded { + width: 250px; + left: 250px; + margin-left: -250px; +} + +#sidebar-wrapper.sidebar-collapsed { + width: 80px; + left: 80px; + margin-left: -80px; } #page-content-wrapper { - /*calc method - https://stackoverflow.com/a/14101451/11214013*/ - width: calc(100% - 250px); position: absolute; padding: 50px; } -#wrapper.toggled #page-content-wrapper { - position: absolute; - margin-right: -250px; - width: 100%; +#page-content-wrapper.sidebar-expanded { + /*calc method - https://stackoverflow.com/a/14101451/11214013*/ + width: -moz-calc(100% - 250px); /* Firefox */ + width: -webkit-calc(100% - 250px); /* WebKit */ + width: -o-calc(100% - 250px); /* Opera */ + width: calc(100% - 250px); /* Standard */ } -/* Sidebar Styles */ - -.sidebar-nav { - position: absolute; - top: 0; - width: 250px; - margin: 0; - padding: 0; - list-style: none; +#page-content-wrapper.sidebar-collapsed { + /*calc method - https://stackoverflow.com/a/14101451/11214013*/ + width: -moz-calc(100% - 80px); /* Firefox */ + width: -webkit-calc(100% - 80px); /* WebKit */ + width: -o-calc(100% - 80px); /* Opera */ + width: calc(100% - 80px); /* Standard */ } -.sidebar-nav li { - text-indent: 20px; - line-height: 40px; +/* ----------| Menu item*/ +#sidebar-wrapper .list-group a { + height: 50px; + color: white; } -.sidebar-nav li a { - display: block; - text-decoration: none; - color: #999999; +/* ----------| Submenu item*/ +#sidebar-wrapper .list-group li.list-group-item { + background-color: #151515; } -.sidebar-nav li a:hover { - text-decoration: none; - color: #fff; - background: rgba(255, 255, 255, 0.2); +#sidebar-wrapper .list-group .sidebar-submenu a { + height: 45px; + padding-left: 30px; } -.sidebar-nav li a:active, .sidebar-nav li a:focus { - text-decoration: none; +.sidebar-submenu { + font-size: 0.9rem; } -.sidebar-nav>.sidebar-brand { - height: 65px; - font-size: 18px; - line-height: 60px; +/* ----------| Separators */ +.sidebar-separator-title { + background-color: #151515; + height: 35px; } -.sidebar-nav>.sidebar-brand a { - color: #999999; +.sidebar-separator { + background-color: #151515; + height: 25px; } -.sidebar-nav>.sidebar-brand a:hover { - color: #fff; - background: none; +.logo-separator { + background-color: #151515; + height: 60px; } -/** -@media(min-width:768px) { - -#wrapper { - padding-left: 0; - } - -#wrapper.toggled { - padding-left: 0px; - } - -#sidebar-wrapper { - width: 250px; - } - -#wrapper.toggled -#sidebar-wrapper { - width: 250px; - } - -#page-content-wrapper { - padding-left: 50px; - position: relative; - } - -#wrapper.toggled #page-content-wrapper { - position: relative; - margin-right: 0; - padding-left: 35px; } +a.bg-dark { + background-color: #151515 !important; +} +a.bg-dark:not(.no-hover):hover { + background-color: #303436 !important; } -**/ diff --git a/web/js/sidebar.js b/web/js/sidebar.js index d36a44c38..23e9de314 100644 --- a/web/js/sidebar.js +++ b/web/js/sidebar.js @@ -1,17 +1,29 @@ -$("#menu-toggle").click(function(e) { - e.preventDefault(); - const isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./); +//https://codepen.io/lfrichter/pen/mQJJyB - $("#toggleIcon").toggleClass("fa fa-angle-double-left fa fa-angle-double-right"); - let wrapper = $("#wrapper") - wrapper.toggleClass("toggled"); +// Collapse/Expand icon +$('#collapse-icon').addClass('fa-xmark'); - if(isIE11){ - let sidebarWrapper = $("#sidebar-wrapper") - if(wrapper.hasClass("toggled")){ - sidebarWrapper.css("margin-left", "-268px") - } else { - sidebarWrapper.css("margin-left", "-250px") - } - } +// Collapse click +$('[data-toggle=sidebar-collapse]').click(function() { + SidebarCollapse(); }); + +function SidebarCollapse () { + $('.menu-collapsed').toggleClass('d-none'); + $('.sidebar-submenu').toggleClass('d-none'); + $('.submenu-icon').toggleClass('d-none'); + $('#wrapper').toggleClass('sidebar-expanded sidebar-collapsed'); + $('#sidebar-wrapper').toggleClass('sidebar-expanded sidebar-collapsed'); + $('#page-content-wrapper').toggleClass('sidebar-expanded sidebar-collapsed'); + + // Treating d-flex/d-none on separators with title + let SeparatorTitle = $('.sidebar-separator-title'); + if ( SeparatorTitle.hasClass('d-flex') ) { + SeparatorTitle.removeClass('d-flex'); + } else { + SeparatorTitle.addClass('d-flex'); + } + + // Collapse/Expand icon + $('#collapse-icon').toggleClass('fa-xmark fa-bars'); +} diff --git a/web/templates/config.html b/web/templates/config.html index 18ba61372..51dc20a4c 100644 --- a/web/templates/config.html +++ b/web/templates/config.html @@ -5,30 +5,42 @@ {% endblock head %} {% block content %} -
+ - +
{% endblock content %} {% block end %} diff --git a/web/templates/navbar.html b/web/templates/navbar.html index 3bd53cf10..a81716760 100644 --- a/web/templates/navbar.html +++ b/web/templates/navbar.html @@ -1,4 +1,4 @@ -