groove/Part-DB-server
1
0
Fork 0
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-12-27 05:19:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement sidebar collapse with stimulus.

Browse source
This commit is contained in:
Jan Böhmer 2022-07-31 22:07:27 +02:00
parent ab179a8b71
commit 565cb3a790
5 changed files with 79 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

45
templates/_sidebar.html.twig
View file

@ -6,49 +6,4 @@
{{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
{{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
{{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}
{# <li id="treeBox-categories">
<div class="input-group input-group-sm mb-2 mt-1">
<button class="btn btn-light dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownCat">
{{ _self.sidebar_dropdown('tree-categories') }}
</ul>
<input type="search" class="form-control bg-light border-0" id="tree-category-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
</div>
<div id="tree-categories" data-tree-search="#tree-category-search"></div>
</li>
<li id="treeBox-devices" class="d-sm-none d-md-block">
<div class="input-group input-group-sm mb-2 mt-2">
<button class="btn btn-light dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownDev">
{{ _self.sidebar_dropdown('tree-devices') }}
</ul>
<input type="search" class="form-control bg-light border-0" id="tree-devices-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
</div>
<div id="tree-devices" data-tree-search="#tree-devices-search"></div>
</li>
<li id="treeBox-tools">
<div class="input-group input-group-sm mb-2 mt-2">
<button class="btn btn-light dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownTools">
{{ _self.sidebar_dropdown('tree-tools') }}
</ul>
<input type="search" class="form-control bg-light border-0" id="tree-tools-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
</div>
<div id="tree-tools" data-tree-search="#tree-tools-search"></div>
</li> #}
</div>

9
templates/base.html.twig
View file

@ -82,9 +82,6 @@
</div>
<div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 ps-0" id="main">
<button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}">
<i class="fas fa-angle-left"></i>
</button>
<div class="container-fluid me-0 pe-0" id="content-container">
<turbo-frame id="content" data-turbo-action="advance">
{# Here will be the real content be injected#}
@ -112,6 +109,12 @@
<i class="fas fa-angle-up fa-fw"></i>
</button>
{# Must be outside of the sidebar or it will be hidden too #}
<button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}"
{{ stimulus_controller('common/hide_sidebar') }} {{ stimulus_action('common/hide_sidebar', 'toggleSidebar') }}>
<i class="fas fa-angle-left"></i>
</button>
{% endblock %}
</body>