Skip to content

Commit 6233553

Browse files
author
Dmytro Lukianenko
committed
[UPD] update left menu
1 parent 510d42b commit 6233553

3 files changed

Lines changed: 92 additions & 63 deletions

File tree

‎core/src/Controllers/Frame.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ protected function evoLogoIcon(): string
323323
$svg = file_get_contents($path);
324324
if ($svg !== false) {
325325
$svg = preg_replace('/<\\?xml.*?\\?>/i', '', $svg);
326-
return '<span class="menu-icon-evo">' . trim($svg) . '</span>';
326+
return '<span class="icon menu-icon-evo" aria-hidden="true">' . trim($svg) . '</span>';
327327
}
328328
}
329329

‎manager/media/style/default/css/mainmenu.css‎

Lines changed: 90 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,12 @@
8989
}
9090
#mainMenu .nav > li > a:hover,
9191
#mainMenu .nav .label_searchid:hover {
92-
color: #f3f3f3;
92+
color: #fff;
9393
}
9494
/*#mainMenu.show .nav > li.dropdown:hover > a, */
9595
#mainMenu.show .nav > li.dropdown.hover > a {
96-
background-color: #fff;
97-
color: #444;
96+
background-color: transparent;
97+
color: #fff;
9898
}
9999
#mainMenu .nav > li > a .icon {
100100
display: inline-block;
@@ -139,11 +139,13 @@
139139
justify-content: center;
140140
width: 20px;
141141
height: 20px;
142+
pointer-events: none;
142143
}
143144
#mainMenu .menu-icon-evo svg {
144145
width: 20px;
145146
height: 20px;
146147
display: block;
148+
pointer-events: none;
147149
}
148150
#mainMenu #nav > li > a,
149151
#mainMenu #settings > li > a {
@@ -755,11 +757,12 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
755757
color: #464646;
756758
}
757759
.lightness #mainMenu .nav > li.active > a {
758-
color: #222;
759-
background: #fff;
760+
color: #fff;
761+
background: transparent;
760762
}
761763
.lightness #mainMenu.show .nav > li.dropdown.hover > a {
762-
color: #222;
764+
color: #fff;
765+
background-color: transparent;
763766
}
764767
/* light */
765768
.light #mainMenu {
@@ -775,7 +778,8 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
775778
color: #dcd9e3;
776779
}
777780
.light #mainMenu.show .nav > li.dropdown.hover > a {
778-
color: #444;
781+
color: #fff;
782+
background-color: transparent;
779783
}
780784
/* dark */
781785
.dark #mainMenu {
@@ -791,7 +795,8 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
791795
color: #bbb;
792796
}
793797
.dark #mainMenu.show .nav > li.dropdown.hover > a {
794-
color: #444;
798+
color: #fff;
799+
background-color: transparent;
795800
}
796801
/* darkness */
797802
.darkness #mainMenu {
@@ -809,8 +814,8 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
809814
}
810815
.darkness #mainMenu.show .nav > li.dropdown.hover > a,
811816
.dark.navbar-left #mainMenu.show .nav > li.dropdown.hover > a {
812-
color: #eee;
813-
background-color: #343942;
817+
color: #fff;
818+
background-color: transparent;
814819
}
815820
.darkness #mainMenu .nav > li > ul,
816821
.dark.navbar-left #mainMenu .nav > li > ul {
@@ -860,25 +865,31 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
860865
top: 0;
861866
}
862867
.navbar-left #tree {
863-
padding-left: 3rem;
868+
padding-left: 2.5rem;
864869
}
865870
.navbar-left.sidebar-closed #tree {
866871
padding-left: 0;
867872
}
868873
.navbar-left.sidebar-closed #main {
869-
left: 3rem !important;
874+
left: 2.5rem !important;
870875
}
871876
.navbar-left #mainMenu {
872-
width: 3rem;
877+
width: 2.5rem;
873878
height: 100%;
874879
}
875880
.navbar-left #mainMenu > .container {
876-
display: block;
881+
display: flex;
882+
flex-direction: column;
883+
height: 100%;
877884
padding-left: 0;
878885
padding-right: 0;
879886
}
880887
.navbar-left #mainMenu > .container > .row {
881-
display: block;
888+
display: flex;
889+
flex-direction: column;
890+
flex: 1 1 auto;
891+
justify-content: space-between;
892+
min-height: 0;
882893
margin-left: 0;
883894
margin-right: 0;
884895
}
@@ -888,11 +899,18 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
888899
.navbar-left #mainMenu #nav,
889900
.navbar-left #mainMenu #settings {
890901
float: none;
902+
width: 2.5rem;
891903
}
892904
.navbar-left #mainMenu #settings {
893-
margin-top: 0.5rem;
905+
display: flex;
906+
flex-direction: column;
907+
align-items: center;
908+
justify-content: flex-end;
909+
gap: 0.25rem;
894910
padding-top: 0.5rem;
895-
border-top: 1px solid rgba(255, 255, 255, 0.15);
911+
padding-bottom: 0.75rem;
912+
margin-top: 0;
913+
border-top: 0;
896914
}
897915
.navbar-left #mainMenu .nav > li {
898916
width: 100%;
@@ -906,9 +924,14 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
906924
.navbar-left #mainMenu #nav > li > a,
907925
.navbar-left #mainMenu #settings > li > a {
908926
padding: 0;
927+
justify-content: center;
928+
gap: 0;
929+
width: 100%;
930+
height: 2.5rem;
931+
line-height: 2.5rem;
909932
}
910933
.navbar-left #mainMenu #settings > li > a {
911-
padding: 0.5rem 0;
934+
padding: 0;
912935
}
913936
.navbar-left #mainMenu #nav > li > a > .fa {
914937
display: inline-block;
@@ -922,20 +945,21 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
922945
.navbar-left #mainMenu #nav > li > .fa,
923946
.navbar-left #mainMenu #nav > li > a > .fa,
924947
.navbar-left #mainMenu #system > a > .fa {
925-
font-size: 0.875rem;
948+
font-size: 20px;
949+
line-height: 20px;
926950
}
927951
.navbar-left #mainMenu #nav > li > a > svg,
928952
.navbar-left #mainMenu #searchform svg,
929953
.navbar-left #mainMenu #preview svg,
930954
.navbar-left #mainMenu #nav > li > svg,
931955
.navbar-left #mainMenu #nav > li > a > svg,
932956
.navbar-left #mainMenu #system > a > svg {
933-
width: 0.875rem;
934-
height: 0.875rem;
957+
width: 20px;
958+
height: 20px;
935959
}
936960
.navbar-left #mainMenu .nav > li > ul,
937961
.navbar-left #mainMenu #settings.nav > li > ul {
938-
left: 3rem;
962+
left: 2.5rem;
939963
top: 0;
940964
right: auto;
941965
bottom: 0;
@@ -950,17 +974,8 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
950974
.navbar-left #mainMenu #settings.nav > #account,
951975
.navbar-left #mainMenu #settings.nav > #system,
952976
.navbar-left #mainMenu #settings.nav > #fullscreen {
953-
position: absolute;
954-
width: 3rem;
955-
}
956-
.navbar-left #mainMenu #settings.nav > #account {
957-
bottom: 0;
958-
}
959-
.navbar-left #mainMenu #settings.nav > #system {
960-
bottom: 3.2rem;
961-
}
962-
.navbar-left #mainMenu #settings.nav > #fullscreen {
963-
bottom: 5rem;
977+
position: static;
978+
width: 100%;
964979
}
965980
.navbar-left #mainMenu #settings.nav > #account > ul,
966981
.navbar-left #mainMenu #settings.nav > #system > ul {
@@ -971,7 +986,7 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
971986
bottom: -5rem;
972987
}
973988
.navbar-left #mainMenu .nav > li > .sub-menu {
974-
margin-left: 3rem;
989+
margin-left: 2.5rem;
975990
border-radius: 0;
976991
}
977992
.navbar-left #mainMenu .menu-item-text,
@@ -987,25 +1002,48 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
9871002
.navbar-left #mainMenu #nav #bars {
9881003
width: 100%;
9891004
}
1005+
.navbar-left #mainMenu #nav {
1006+
margin-top: -6px;
1007+
}
9901008
.navbar-left #mainMenu #nav #site a {
9911009
position: static;
9921010
padding: 0.5rem 0;
9931011
}
9941012
.navbar-left #mainMenu #nav #site a::before {
995-
display: block;
996-
content: "";
997-
left: auto;
998-
width: 100%;
999-
height: 2.25rem;
1000-
background: transparent url("../images/misc/logo-navbar-left.png")
1001-
no-repeat 50% 50%;
1002-
background-size: 2.25rem;
1013+
display: none;
1014+
content: none;
10031015
}
10041016
.navbar-left #mainMenu #nav #site a i {
10051017
display: none;
10061018
}
10071019
.navbar-left #mainMenu #nav #site a svg {
1008-
display: none;
1020+
display: inline-block;
1021+
}
1022+
.navbar-left #mainMenu #searchform {
1023+
display: flex;
1024+
justify-content: center;
1025+
width: 100%;
1026+
}
1027+
.navbar-left #mainMenu #searchform form {
1028+
width: 100%;
1029+
display: flex;
1030+
flex-direction: column;
1031+
align-items: center;
1032+
}
1033+
.navbar-left #mainMenu #searchform .label_searchid {
1034+
display: flex;
1035+
align-items: center;
1036+
justify-content: center;
1037+
width: auto;
1038+
height: 2.5rem;
1039+
margin: 0;
1040+
}
1041+
.navbar-left #mainMenu #searchform .label_searchid svg,
1042+
.navbar-left #mainMenu #searchform .label_searchid .fa {
1043+
width: 20px;
1044+
height: 20px;
1045+
line-height: 20px;
1046+
display: block;
10091047
}
10101048
.navbar-left #mainMenu #searchform input,
10111049
.navbar-left #mainMenu #searchform .mask {
@@ -1056,16 +1094,16 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
10561094
}
10571095
@media (min-width: 1200px) {
10581096
.navbar-left #tree {
1059-
padding-left: 5rem;
1097+
padding-left: 2.5rem;
10601098
}
10611099
.navbar-left.sidebar-closed #main {
1062-
left: 5rem !important;
1100+
left: 2.5rem !important;
10631101
}
10641102
.navbar-left #mainMenu,
10651103
.navbar-left #mainMenu #nav.nav > #bars,
10661104
.navbar-left #mainMenu #settings.nav > #account,
10671105
.navbar-left #mainMenu #settings.nav > #system {
1068-
width: 5rem;
1106+
width: 2.5rem;
10691107
}
10701108
.navbar-left #mainMenu #nav #site::before {
10711109
display: none !important;
@@ -1079,30 +1117,21 @@ body.sidebar-closed #bars .icon-collapse { display: none !important; }
10791117
.navbar-left #mainMenu #nav > li > .fa,
10801118
.navbar-left #mainMenu #nav > li > a > .fa,
10811119
.navbar-left #mainMenu #system > a > .fa {
1082-
font-size: 1.125rem;
1120+
font-size: 20px;
1121+
line-height: 20px;
10831122
}
10841123
.navbar-left #mainMenu .menu-item-text,
10851124
.navbar-left #mainMenu .username {
1086-
display: block;
1087-
font-size: 0.6875rem;
1088-
line-height: 1em;
1089-
overflow: hidden;
1090-
white-space: nowrap;
1091-
text-overflow: ellipsis;
1092-
padding: 0 0.3125rem 0.5rem;
1093-
}
1094-
.navbar-left #mainMenu #nav #site a .menu-item-text {
1095-
padding-top: 0.5rem;
1096-
padding-bottom: 0;
1125+
display: none;
10971126
}
10981127
.navbar-left #mainMenu #settings.nav > #system {
1099-
bottom: 5rem;
1128+
bottom: auto;
11001129
}
11011130
.navbar-left #mainMenu .nav > li > ul,
11021131
.navbar-left #mainMenu #settings.nav > li > ul {
1103-
left: 5rem;
1132+
left: 2.5rem;
11041133
}
11051134
.navbar-left #mainMenu .nav > li > .sub-menu {
1106-
margin-left: 5rem;
1135+
margin-left: 2.5rem;
11071136
}
11081137
}

‎manager/media/style/default/css/tree.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
#treeloader .fa { font-size: 1em; }
55
#treeloader.visible { opacity: 0.7; visibility: visible; -webkit-transition-duration: 0s; transition-duration: 0s }
66
.treeframebody { height: 100%; min-height: calc(100% + 1px); background-color: #fafafa; border-right: 1px solid #cfd2d6; }
7-
#treeMenu { display: flex; align-items: center; gap: 0.4rem; width: 100%; height: 1.875rem; margin-top: -1px; padding: 0 0.4rem; background-color: #dfdfdf; border-bottom: 1px solid #cfd2d6 }
7+
#treeMenu { display: flex; align-items: center; gap: 0.4rem; width: 100%; height: 1.875rem; padding: 0 0.4rem; background-color: #dfdfdf; border-bottom: 1px solid #cfd2d6 }
88
#treeMenu .treeButton { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; cursor: pointer; height: 1.875rem; padding: 0 0.35rem; white-space: nowrap; text-align: left; vertical-align: middle; -webkit-transition-duration: 0.15s; transition-duration: 0.15s }
99
#treeMenu .treeButton:hover:not(.disabled) { background-color: rgba(255, 255, 255, .5); cursor: pointer; -webkit-transition-duration: 0s; transition-duration: 0s }
1010
#treeMenu .treeButton:not(.disabled):active { background-color: #d5d5d5 }

0 commit comments

Comments
 (0)