diff --git a/gas/static/gas/css/gas.css b/gas/static/gas/css/gas.css index 8139682..6371124 100644 --- a/gas/static/gas/css/gas.css +++ b/gas/static/gas/css/gas.css @@ -7,6 +7,11 @@ --info: #99f; } +#logo { + width: 100px; + height: auto; +} + table { border-collapse: collapse; border: 1px solid gray; @@ -74,11 +79,6 @@ a, a:visited { content: ''; } -#logo { - width: 100px; - height: auto; -} - #content { flex: 4; } @@ -97,6 +97,18 @@ a, a:visited { background-color: #fafafa; } +#sidebar ul ul { + display: none; +} + +#sidebar ul li.dropdown { + cursor: pointer; +} + +#sidebar ul li.dropdown.open > ul { + display:block; +} + ul.actions { list-style-type: none; padding: 0; diff --git a/gas/static/gas/js/gas.js b/gas/static/gas/js/gas.js index 4c67f1a..1e34ae9 100644 --- a/gas/static/gas/js/gas.js +++ b/gas/static/gas/js/gas.js @@ -1,4 +1,8 @@ var GAS = { + config: { + 'menuItemSelector': '.dropdown', + 'openedMenuItemClass': 'open', + }, init: function() { $(document).ready(function(){ $('.select2').select2({ @@ -10,6 +14,10 @@ var GAS = { let $message = $(this).parents('.message'); $message.remove(); }); + GAS.toggle( + GAS.config.menuItemSelector, + GAS.config.openedMenuItemClass, + ); }); var csrftoken = GAS.getCookie('csrftoken'); @@ -67,6 +75,19 @@ var GAS = { } } return cookieValue; + }, + + toggle: function(selector, cssclass) { + const items = document.querySelectorAll(selector); + for (const item of items) { + item.addEventListener('click', function(ev) { + if (item.classList.contains(cssclass)) { + item.classList.remove(cssclass); + } else { + item.classList.add(cssclass); + } + }); + } } } diff --git a/gas/templates/gas/base.html b/gas/templates/gas/base.html index 34a5e9f..bf00755 100644 --- a/gas/templates/gas/base.html +++ b/gas/templates/gas/base.html @@ -80,7 +80,11 @@