Skip to content

Commit 84626ef

Browse files
AlecRustAlecRust
authored
Improve toolbar on mobile (hestiacp#3077)
1 parent d191247 commit 84626ef

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+837
-795
lines changed

‎web/css/src/themes/dark.css‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -179,13 +179,36 @@ strong {
179179
border-top: 1px solid #454545;
180180
}
181181

182-
.l-sort {
182+
.toolbar {
183183
border-color: #454545;
184184
background-color: #282828;
185-
}
186185

187-
.l-sort.active {
188-
box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
186+
&.active {
187+
box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
188+
}
189+
190+
& .form-select {
191+
border-color: #454545;
192+
background-color: #212121;
193+
194+
&:hover {
195+
background-color: #212121;
196+
}
197+
}
198+
199+
& .form-control {
200+
border-color: #454545;
201+
background-color: #212121;
202+
203+
&:hover {
204+
background-color: #212121;
205+
border-right-color: #0090ff;
206+
}
207+
208+
&:focus {
209+
border-right-color: #0080df;
210+
}
211+
}
189212
}
190213

191214
.context-menu.sort-order {
@@ -226,19 +249,19 @@ strong {
226249
inset -1px -1px 4px rgb(40 40 40 / 40%);
227250
}
228251

229-
.l-sort-toolbar .sort-by:hover {
252+
.toolbar-right .sort-by:hover {
230253
color: #d4d4d4;
231254
}
232255

233-
.l-sort-toolbar .sort-by:hover b {
256+
.toolbar-right .sort-by:hover b {
234257
color: #d4d4d4;
235258
}
236259

237-
.l-sort-toolbar .toggle-all:hover {
260+
.toolbar-right .toggle-all:hover {
238261
color: #d4d4d4;
239262
}
240263

241-
.l-sort-toolbar__filter-apply {
264+
.toolbar-submit {
242265
border-color: #454545;
243266
background-color: #424242;
244267
text-shadow: 1px 1px rgb(0 0 0 / 90%);
@@ -257,7 +280,7 @@ strong {
257280
}
258281
}
259282

260-
.l-sort-toolbar .toolbar-link {
283+
.toolbar-link {
261284
color: #dadada;
262285

263286
&.selected {
@@ -269,29 +292,6 @@ strong {
269292
}
270293
}
271294

272-
.l-sort-toolbar .form-select {
273-
border-color: #454545;
274-
background-color: #212121;
275-
276-
&:hover {
277-
background-color: #212121;
278-
}
279-
}
280-
281-
.l-sort-toolbar .form-control {
282-
border-color: #454545;
283-
background-color: #212121;
284-
285-
&:hover {
286-
background-color: #212121;
287-
border-right-color: #0090ff;
288-
}
289-
290-
&:focus {
291-
border-right-color: #0080df;
292-
}
293-
}
294-
295295
.l-unit {
296296
color: #dadada;
297297
}

‎web/css/src/themes/default.css‎

Lines changed: 99 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -591,33 +591,74 @@
591591
border-top: 1px solid #ddd;
592592
}
593593

594-
.l-sort {
595-
display: flex;
596-
height: 45px;
597-
justify-content: center;
594+
.toolbar {
598595
background-color: #fff;
599596
border-top: 1px solid #ddd;
600597
border-bottom: 1px solid #ddd;
601598

602-
&.active {
603-
box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
599+
& .form-select {
600+
min-width: 175px;
601+
color: inherit;
602+
padding-top: 4px;
603+
padding-bottom: 4px;
604+
box-shadow: none;
605+
border-color: #ddd;
606+
border-right-color: transparent;
607+
border-top-right-radius: 0;
608+
border-bottom-right-radius: 0;
609+
610+
&:focus {
611+
box-shadow: none;
612+
}
613+
}
614+
615+
& .form-control {
616+
padding-top: 4px;
617+
padding-bottom: 4px;
618+
box-shadow: none;
619+
border-color: #ddd;
620+
border-right-color: transparent;
621+
border-top-right-radius: 0;
622+
border-bottom-right-radius: 0;
623+
624+
&:hover {
625+
border-right-color: #94c8f0;
626+
}
627+
628+
&:focus {
629+
border-right-color: #008fee;
630+
}
631+
632+
&.activated {}
604633
}
605634

606635
@media (--viewport-medium) {
607636
position: sticky;
608637
z-index: 1;
609638
top: 39px;
639+
height: 45px;
640+
display: flex;
641+
justify-content: center;
642+
align-items: center;
643+
644+
&.active {
645+
box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
646+
}
610647
}
611648
}
612649

613-
.l-sort__inner {
614-
display: flex;
615-
justify-content: space-between;
616-
align-items: center;
617-
max-width: 1024px;
618-
width: 100%;
619-
padding-left: 20px;
620-
padding-right: 20px;
650+
.toolbar-inner {
651+
padding: 10px 20px;
652+
653+
@media (--viewport-medium) {
654+
display: flex;
655+
justify-content: space-between;
656+
align-items: center;
657+
flex-grow: 1;
658+
max-width: 1024px;
659+
padding-top: 5px;
660+
padding-bottom: 5px;
661+
}
621662

622663
@media (--viewport-large) {
623664
padding-left: 0;
@@ -629,6 +670,7 @@
629670
position: absolute;
630671
top: 35px;
631672
left: 0;
673+
z-index: 1;
632674
overflow: hidden;
633675
border-radius: 4px;
634676
font-size: 0.8rem;
@@ -697,10 +739,7 @@
697739
border-bottom: none;
698740
}
699741

700-
.l-sort-toolbar {
701-
display: flex;
702-
position: relative;
703-
742+
.toolbar-right {
704743
& form {
705744
display: flex;
706745
}
@@ -716,7 +755,6 @@
716755
& .sort-by {
717756
cursor: pointer;
718757
text-transform: uppercase;
719-
padding: 5px 12px 0;
720758
font-size: 0.8rem;
721759

722760
&:hover {
@@ -740,9 +778,29 @@
740778
padding-left: 3px;
741779
}
742780
}
781+
782+
@media (--viewport-medium) {
783+
display: flex;
784+
}
785+
}
786+
787+
.toolbar-sorting {
788+
display: flex;
789+
align-items: center;
790+
position: relative;
791+
padding-bottom: 5px;
792+
793+
& form {
794+
flex-grow: 1;
795+
margin-left: 10px;
796+
}
797+
798+
@media (--viewport-medium) {
799+
padding-bottom: 0;
800+
}
743801
}
744802

745-
.l-sort-toolbar__filter-apply {
803+
.toolbar-submit {
746804
display: flex;
747805
align-items: center;
748806
border: 1px solid #ddd;
@@ -752,6 +810,7 @@
752810
box-shadow: inset 0 0 1px rgb(41 90 152 / 10%), inset 0 0 2px rgb(255 255 255 / 100%);
753811
text-shadow: 1px 1px rgb(255 255 255 / 90%);
754812
color: #069;
813+
min-width: 32px;
755814
padding: 0 10px;
756815
font-size: 0.75rem;
757816

@@ -766,28 +825,7 @@
766825
}
767826
}
768827

769-
.l-sort-toolbar__search {
770-
size: 25px;
771-
background-position: -333px -37px;
772-
border: none;
773-
774-
&:hover {
775-
background-position: -368px -37px;
776-
border-color: #afafac;
777-
}
778-
779-
&:active {
780-
background-position: -404px -37px;
781-
border-color: #50bdb5;
782-
}
783-
}
784-
785-
.l-sort-toolbar__search--active {
786-
background-position: -404px -37px;
787-
border-color: #50bdb5;
788-
}
789-
790-
.l-sort-toolbar .toolbar-link {
828+
.toolbar-link {
791829
display: block;
792830
padding: 6px 12px;
793831
color: #777;
@@ -807,9 +845,10 @@
807845
}
808846
}
809847

810-
.l-unit-toolbar__buttonstrip {
848+
.toolbar-buttons {
811849
display: flex;
812850
align-items: center;
851+
padding-bottom: 10px;
813852

814853
& .button {
815854
min-width: 0;
@@ -825,6 +864,10 @@
825864
& .inline-danger {
826865
margin-right: 20px;
827866
}
867+
868+
@media (--viewport-medium) {
869+
padding-bottom: 0;
870+
}
828871
}
829872

830873
.body-user .l-unit.animate__animated.animate__fadeIn {
@@ -835,42 +878,6 @@
835878
line-height: 2rem;
836879
}
837880

838-
.l-sort-toolbar .form-select {
839-
min-width: 175px;
840-
color: inherit;
841-
padding-top: 4px;
842-
padding-bottom: 4px;
843-
box-shadow: none;
844-
border-color: #ddd;
845-
border-right-color: transparent;
846-
border-top-right-radius: 0;
847-
border-bottom-right-radius: 0;
848-
849-
&:focus {
850-
box-shadow: none;
851-
}
852-
}
853-
854-
.l-sort-toolbar .form-control {
855-
padding-top: 4px;
856-
padding-bottom: 4px;
857-
box-shadow: none;
858-
border-color: #ddd;
859-
border-right-color: transparent;
860-
border-top-right-radius: 0;
861-
border-bottom-right-radius: 0;
862-
863-
&:hover {
864-
border-right-color: #94c8f0;
865-
}
866-
867-
&:focus {
868-
border-right-color: #008fee;
869-
}
870-
871-
&.activated {}
872-
}
873-
874881
.l-unit {
875882
color: #707070;
876883
padding: 0 0 0 14px;
@@ -915,6 +922,15 @@
915922

916923
.units {
917924
overflow-x: auto;
925+
padding-left: 20px;
926+
padding-right: 20px;
927+
padding-bottom: 20px;
928+
929+
@media (--viewport-large) {
930+
padding-left: 0;
931+
padding-right: 0;
932+
padding-bottom: 0;
933+
}
918934
}
919935

920936
.units .l-unit {
@@ -2093,10 +2109,6 @@ body.mobile .l-unit-toolbar__col--right {
20932109
}
20942110
}
20952111

2096-
.l-content.collapsed .l-sort {
2097-
margin-top: 94px;
2098-
}
2099-
21002112
.console-output {
21012113
font-family: var(--font-family-monospace);
21022114
font-size: 0.92rem;
@@ -2349,8 +2361,10 @@ form#vstobjects.suspended {
23492361
color: #fff;
23502362
}
23512363

2352-
.l-sort-toolbar__search-box {
2353-
margin-left: 12px;
2364+
.toolbar-search {
2365+
@media (--viewport-medium) {
2366+
margin-left: 12px;
2367+
}
23542368
}
23552369

23562370
.ui-dialog .ui-dialog-buttonpane {

0 commit comments

Comments
 (0)