mirror_php/humhub
1
0
Fork 0
mirror of https://github.com/humhub/humhub.git synced 2025-04-22 08:03:35 +02:00
Code Issues Projects Releases Wiki Activity

BS5 - Profile/Space/Admin Menu Issue (Mobile) #506 - https://github.com/humhub/humhub-internal/issues/506

Browse Source
This commit is contained in:
Marc Farré 2025-01-11 21:11:53 +00:00
parent 97a650d4fc
commit aef3f2b8b7
5 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
protected/humhub/modules/ui/menu/widgets/views/left-navigation.php
View File

@ -16,7 +16,7 @@ use humhub\modules\ui\view\components\View;
<div class="panel-heading"><?= $menu->panelTitle; ?></div>
<?php endif; ?>
<div class="list-group">
<div class="list-group list-group-horizontal list-group-vertical-md">
<?php foreach ($entries as $entry): ?>
<?= $entry->render(['class' => 'list-group-item']) ?>
<?php endforeach; ?>

26
static/scss/_list-group.scss
View File

@ -61,6 +61,32 @@ a.list-group-item {
}
}
// Introduce a new class for vertical list groups
@include media-breakpoint-up(sm) {
.list-group-vertical-sm {
flex-direction: column;
}
}
@include media-breakpoint-up(md) {
.list-group-vertical-md {
flex-direction: column;
}
}
@include media-breakpoint-up(lg) {
.list-group-vertical-lg {
flex-direction: column;
}
}
@include media-breakpoint-up(xl) {
.list-group-vertical-xl {
flex-direction: column;
}
}
@include media-breakpoint-up(xxl) {
.list-group-vertical-xxl {
flex-direction: column;
}
}
@include media-breakpoint-down(lg) {
.list-group {

68
static/scss/_mobile.scss
View File

@ -28,63 +28,43 @@
// Layout Contents: Adjusting the contents to fit perfectly on mobile devices
#layout-content {
// Layout Space: Space navigation
// Left navigation on mobile, when becoming horizontal, should be scrollable
.left-navigation {
.list-group {
.list-group-horizontal.list-group-vertical-md {
-webkit-overflow-scrolling: auto;
white-space: nowrap;
overflow-x: auto;
}
}
.left-navigation .list-group::-webkit-scrollbar {
-webkit-appearance: none;
}
// Safari
.table-responsive,
.left-navigation .list-group {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
.left-navigation .list-group::-webkit-scrollbar:vertical {
width: 8px;
}
&::-webkit-scrollbar:vertical {
width: 8px;
}
.left-navigation .list-group::-webkit-scrollbar:horizontal {
height: 8px;
}
&::-webkit-scrollbar:horizontal {
height: 8px;
}
.left-navigation .list-group::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
.left-navigation .list-group::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
&::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
}
// Responsive tables
.table-responsive::-webkit-scrollbar {
-webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar:vertical {
width: 8px;
}
.table-responsive::-webkit-scrollbar:horizontal {
height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
.table-responsive::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
.panel {
margin-bottom: 5px;

55
themes/HumHub/css/theme.css
View File

@ -12510,6 +12510,31 @@ a.list-group-item:hover, a.list-group-item.active:hover, a.list-group-item.activ
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 576px) {
.list-group-vertical-sm {
flex-direction: column;
}
}
@media (min-width: 768px) {
.list-group-vertical-md {
flex-direction: column;
}
}
@media (min-width: 992px) {
.list-group-vertical-lg {
flex-direction: column;
}
}
@media (min-width: 1200px) {
.list-group-vertical-xl {
flex-direction: column;
}
}
@media (min-width: 1400px) {
.list-group-vertical-xxl {
flex-direction: column;
}
}
@media (max-width: 991.98px) {
.list-group {
margin-left: 4px;
@ -14590,44 +14615,26 @@ img.bounceIn {
:root {
--hh-fixed-header-height: 105px;
}
#layout-content .left-navigation .list-group {
#layout-content .left-navigation .list-group-horizontal.list-group-vertical-md {
-webkit-overflow-scrolling: auto;
white-space: nowrap;
overflow-x: auto;
}
#layout-content .left-navigation .list-group::-webkit-scrollbar {
#layout-content .table-responsive::-webkit-scrollbar, #layout-content .left-navigation .list-group::-webkit-scrollbar {
-webkit-appearance: none;
}
#layout-content .left-navigation .list-group::-webkit-scrollbar:vertical {
#layout-content .table-responsive::-webkit-scrollbar:vertical, #layout-content .left-navigation .list-group::-webkit-scrollbar:vertical {
width: 8px;
}
#layout-content .left-navigation .list-group::-webkit-scrollbar:horizontal {
#layout-content .table-responsive::-webkit-scrollbar:horizontal, #layout-content .left-navigation .list-group::-webkit-scrollbar:horizontal {
height: 8px;
}
#layout-content .left-navigation .list-group::-webkit-scrollbar-thumb {
#layout-content .table-responsive::-webkit-scrollbar-thumb, #layout-content .left-navigation .list-group::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#layout-content .left-navigation .list-group::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
#layout-content .table-responsive::-webkit-scrollbar {
-webkit-appearance: none;
}
#layout-content .table-responsive::-webkit-scrollbar:vertical {
width: 8px;
}
#layout-content .table-responsive::-webkit-scrollbar:horizontal {
height: 8px;
}
#layout-content .table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#layout-content .table-responsive::-webkit-scrollbar-track {
#layout-content .table-responsive::-webkit-scrollbar-track, #layout-content .left-navigation .list-group::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}

2
themes/HumHub/css/theme.map
View File

File diff suppressed because one or more lines are too long