Merge branch 'feature/OrderSidePanelProductGroupCollapse' into test

# Conflicts:
#	public/js/admin.js
#	public/js/module.js
#	public/mix-manifest.json
This commit is contained in:
E98Developer 2026-06-15 12:08:02 +02:00
commit dc51c2d0a1
3 changed files with 116 additions and 48 deletions

View File

@ -1406,6 +1406,13 @@ solution before template
$('.sidebar-wrapper a.categoryItem.categoryParent').off('click');
$('.sidebar-wrapper a.categoryItem.categoryParent').on('click', function (e) {
e.preventDefault();
$(this).next('ul.subgroup-list').slideToggle(200);
$(this).toggleClass('open');
});
$('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').off('click'); $('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').off('click');
$('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').on('click', $('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').on('click',
function () { function () {

View File

@ -44,7 +44,7 @@
<span>Csoportok</span> <span>Csoportok</span>
{{--<span class="badge badge-pill badge-warning">Új</span>--}} {{--<span class="badge badge-pill badge-warning">Új</span>--}}
</a> </a>
<div class="sidebar-submenu active" style="display: block;max-height: 220px; overflow: scroll;"> <div class="sidebar-submenu active" style="display: block;">
<ul> <ul>
@if(count($productGroup)>0) @if(count($productGroup)>0)
@include('modules.order.productSelectSidebarProductGroupPartial',$productGroup) @include('modules.order.productSelectSidebarProductGroupPartial',$productGroup)
@ -146,46 +146,51 @@
</a> </a>
</li> </li>
<li class="header-menu"> <li class="sidebar-dropdown extra-block active">
<span>Extra</span> <a href="#">
</li> <i class="fa fa-ellipsis-h"></i>
<li > <span>Extra</span>
<a href="#" class="sidebar favorites">
<i class="far fa-star"></i>
<span>Kedvencek</span>
</a>
</li>
<li>
<a href="#" class="sidebar often">
<i class="fa fa-calendar"></i>
<span>Gyakran vásárolt</span>
</a>
</li>
<li>
<a href="#" class="sidebar last">
<i class="fa fa-clock"></i>
<span>Utoljára vásárolt</span>
</a>
</li>
<li>
<a href="#" class="sidebar weekly">
<i class="fa fa-redo"></i>
<span>Heti termékek</span>
</a>
</li>
<li>
<a href="#" class="sidebar krel">
<i class="fas fa-sort-amount-down"></i>
<span>REL termékek</span>
</a>
</li>
<li>
<a href="#" class="sidebar specialOffer">
<i class="fa fa-percent"></i>
<span>Akciós termékek</span>
</a> </a>
<div class="sidebar-submenu" style="display: block;">
<ul>
<li >
<a href="#" class="sidebar favorites">
<i class="far fa-star"></i>
<span>Kedvencek</span>
</a>
</li>
<li>
<a href="#" class="sidebar often">
<i class="fa fa-calendar"></i>
<span>Gyakran vásárolt</span>
</a>
</li>
<li>
<a href="#" class="sidebar last">
<i class="fa fa-clock"></i>
<span>Utoljára vásárolt</span>
</a>
</li>
<li>
<a href="#" class="sidebar weekly">
<i class="fa fa-redo"></i>
<span>Heti termékek</span>
</a>
</li>
<li>
<a href="#" class="sidebar krel">
<i class="fas fa-sort-amount-down"></i>
<span>REL termékek</span>
</a>
</li>
<li>
<a href="#" class="sidebar specialOffer">
<i class="fa fa-percent"></i>
<span>Akciós termékek</span>
</a>
</li>
</ul>
</div>
</li> </li>
@ -343,8 +348,8 @@
.sidebar-wrapper { .sidebar-wrapper {
width: 260px; width: 260px;
height: 100%; height: calc(100% - 123px);
max-height: 100%; max-height: calc(100% - 123px);
position: fixed; position: fixed;
top: 123px; top: 123px;
left: -300px; left: -300px;
@ -557,6 +562,22 @@
} }
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent {
cursor: pointer;
position: relative;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105"; /* jobbra mutató nyíl */
position: absolute;
right: 15px;
transition: transform 0.2s ease;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent.open:after {
transform: rotate(90deg); /* nyitott állapotban lefelé fordul */
}
/*--------------------------side-footer------------------------------*/ /*--------------------------side-footer------------------------------*/
.sidebar-footer { .sidebar-footer {
@ -755,19 +776,44 @@
color: #b8bfce; color: #b8bfce;
} }
/*----- rugalmas magasság: a Csoportok tölti ki a szabad helyet -----*/
.sidebar-wrapper .sidebar-content {
display: flex;
flex-direction: column;
}
.sidebar-wrapper .sidebar-menu,
.sidebar-wrapper .sidebar-menu > ul {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0; /* flexben a görgetés feltétele */
}
/* a Csoportok li nőjjon, a többi (Kosár, Extra) megtartja a méretét */
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active:not(.extra-block) {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active:not(.extra-block) .sidebar-submenu {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
</style> </style>
<script> <script>
jQuery(function ($) { jQuery(function ($) {
$(".sidebar-dropdown > a").click(function() { $(".sidebar-dropdown:not(.extra-block) > a").click(function() {
$(".sidebar-submenu").slideUp(200); $(".sidebar-dropdown:not(.extra-block) .sidebar-submenu").slideUp(200);
if ($(this).parent().hasClass("active")) { if ($(this).parent().hasClass("active")) {
$(".sidebar-dropdown").removeClass("active"); $(".sidebar-dropdown:not(.extra-block)").removeClass("active");
$(this).parent().removeClass("active"); $(this).parent().removeClass("active");
} else { } else {
$(".sidebar-dropdown").removeClass("active"); $(".sidebar-dropdown:not(.extra-block)").removeClass("active");
$(this) $(this)
.next(".sidebar-submenu") .next(".sidebar-submenu")
.slideDown(200); .slideDown(200);
@ -777,6 +823,20 @@
} }
}); });
// Az Extra blokk függetlenül nyitható/csukható, nem zárja be a Csoportokat
var extraCollapsed = localStorage.getItem("sidebarExtraCollapsed") === "1";
if (extraCollapsed) {
$(".extra-block").removeClass("active");
$(".extra-block > .sidebar-submenu").hide();
}
$(".extra-block > a").click(function(e) {
e.preventDefault();
var $li = $(this).parent();
$(this).next(".sidebar-submenu").slideToggle(200);
$li.toggleClass("active");
localStorage.setItem("sidebarExtraCollapsed", $li.hasClass("active") ? "0" : "1");
});
$("#close-sidebar").click(function() { $("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled"); $(".page-wrapper").removeClass("toggled");
$(".containerStepper").removeClass("activeSideBar"); $(".containerStepper").removeClass("activeSideBar");

View File

@ -5,8 +5,9 @@
<li class="list-unstyled"> <li class="list-unstyled">
@if(!$productGroup['isLeaf']) @if(!$productGroup['isLeaf'])
<a class="categoryItem">{{$productGroup['name']}}</a> @php($openByDefault = in_array($productGroup['name'], ['Food', 'NonFood'], true))
<ul> <a class="categoryItem categoryParent{{ $openByDefault ? ' open' : '' }}">{{$productGroup['name']}}</a>
<ul class="subgroup-list" style="display:{{ $openByDefault ? 'block' : 'none' }};">
@include('modules.order.productSelectSidebarProductGroupPartial',$productGroup) @include('modules.order.productSelectSidebarProductGroupPartial',$productGroup)
</ul> </ul>
@else @else