Skip to content

Commit 68a6a30

Browse files
AlecRustAlecRust
authored
Simplify parallax/fixed/sticky positioning (hestiacp#3044)
* Consistent viewport meta tag * Simplify fixed/sticky positioning
1 parent c7ea75c commit 68a6a30

File tree

91 files changed

+231
-443
lines changed

Some content is hidden

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

91 files changed

+231
-443
lines changed

‎install/common/templates/web/skel/document_errors/403.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Access Denied</title>
77
<style>
88
body {

‎install/common/templates/web/skel/document_errors/404.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Page Not Found</title>
77
<style>
88
body {

‎install/common/templates/web/skel/document_errors/410.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Resource is Gone</title>
77
<style>
88
body {

‎install/common/templates/web/skel/document_errors/50x.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Internal Server Error</title>
77
<style>
88
body {

‎install/common/templates/web/skel/public_html/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Coming Soon</title>
77
<style>
88
body {

‎install/common/templates/web/suspend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Access Denied</title>
77
<style>
88
body {

‎install/common/templates/web/unassigned/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Success!</title>
77
<style>
88
body {

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -256,22 +256,17 @@ strong {
256256
color: #aaa;
257257
}
258258

259-
.l-separator.selected,
260259
.l-separator {
261260
border-top: 1px solid #454545;
262261
}
263262

264-
div.l-content > div.l-separator:nth-of-type(2) {
265-
}
266-
267-
div.l-content > div.l-separator:nth-of-type(4) {
268-
border-bottom: 1px solid #454545;
263+
.l-sort {
264+
border-color: #454545;
269265
background-color: #282828;
270-
box-shadow: 0 4px 6px rgb(0 0 0 / 25%) !important;
271266
}
272267

273-
.l-sort {
274-
background-color: #282828;
268+
.l-sort.is-active {
269+
box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
275270
}
276271

277272
.context-menu.sort-order {
@@ -396,7 +391,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
396391
border-left: 1px solid #212121 !important;
397392
border-right: 1px solid #212121 !important;
398393
border-bottom: 1px solid #212121 !important;
399-
border-top: 1px solid #454545 !important;
400394
text-shadow: 0 1px rgb(0 0 0 / 95%);
401395
border-bottom-left-radius: 0 !important;
402396
border-bottom-right-radius: 0 !important;

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

Lines changed: 31 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -291,11 +291,11 @@ table {
291291
.l-header {
292292
background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
293293
background-color: #5070a6;
294-
overflow: hidden;
295294
position: fixed;
296295
width: 100%;
297296
height: 39px;
298297
z-index: 900;
298+
top: 0;
299299
font-size: 0.8rem;
300300
text-shadow: 1px 1px rgb(0 0 0 / 25%);
301301
box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
@@ -684,35 +684,26 @@ table {
684684
}
685685

686686
.l-stat {
687-
margin: 34px auto;
688-
position: fixed;
689687
background-color: #fff;
690-
z-index: 100;
691-
padding-top: 36px;
688+
padding-top: 31px;
692689
overflow: hidden;
693690
text-align: center;
694691
display: flex;
695-
width: 100%;
696-
max-width: 1020px;
697692
}
698693

699694
.l-stat__col {
700-
display: inline-block;
701-
vertical-align: top;
702695
flex: 1;
703696
}
704697

705698
.l-stat__col a {
706-
display: inline-block;
707-
padding-bottom: 36px;
708-
min-height: 113px;
709-
width: 136px;
710-
border-bottom: 4px solid #fff;
699+
display: block;
700+
min-height: 110px;
711701
overflow: hidden;
702+
margin-left: 20px;
703+
margin-right: 20px;
704+
border-bottom: 4px solid #fff;
705+
padding-bottom: 16px;
712706
background-color: #fff;
713-
padding-top: 3px;
714-
margin-top: -3px;
715-
padding-left: 5px;
716707
}
717708

718709
.l-stat__col a:hover {
@@ -780,39 +771,35 @@ table {
780771
color: #c36;
781772
}
782773

783-
.l-separator.selected,
784774
.l-separator {
785775
height: 1px;
786776
border-top: 1px solid #ddd;
787777
}
788778

789-
div.l-content > div.l-separator:nth-of-type(2) {
790-
margin-top: 180px;
791-
width: 100%;
792-
position: fixed;
793-
z-index: 120;
779+
.l-sort {
780+
display: flex;
781+
position: sticky;
782+
z-index: 2;
783+
top: 38px;
784+
height: 44px;
785+
justify-content: center;
786+
background-color: #fff;
787+
padding-top: 6px;
788+
padding-bottom: 6px;
789+
border-top: 1px solid #ddd;
790+
border-bottom: 1px solid #ddd;
794791
}
795792

796-
div.l-content > div.l-separator:nth-of-type(4) {
797-
margin-top: 225px;
798-
width: 100%;
799-
position: fixed;
800-
z-index: 110;
801-
border-top: none;
802-
border-bottom: 1px solid #ddd;
793+
.l-sort.is-active {
794+
box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
803795
}
804796

805-
.l-sort {
806-
position: fixed;
797+
.l-sort__inner {
807798
display: flex;
808799
justify-content: space-between;
809800
align-items: center;
810-
width: 100%;
811801
max-width: 1020px;
812-
background-color: #fff;
813-
z-index: 120;
814-
margin-top: 181px;
815-
height: 44px;
802+
width: 100%;
816803
}
817804

818805
.l-sort__create-btn {
@@ -869,7 +856,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
869856
position: absolute;
870857
top: 35px;
871858
left: 0;
872-
z-index: 3;
873859
overflow: hidden;
874860
border-radius: 4px;
875861
background-color: rgb(255 255 255 / 95%);
@@ -1208,7 +1194,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
12081194
border-left: 1px solid #d0d0d0 !important;
12091195
border-right: 1px solid #d0d0d0 !important;
12101196
border-bottom: 1px solid #d0d0d0 !important;
1211-
border-top: 1px solid #d0d0d0 !important;
12121197
text-shadow: 0 1px rgb(255 255 255 / 100%);
12131198
box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%) !important;
12141199
border-radius: 0 0 6px 6px;
@@ -1219,8 +1204,8 @@ div.l-content > div.l-separator:nth-of-type(4) {
12191204
line-height: 1rem;
12201205
margin-top: 1px;
12211206
position: sticky;
1222-
top: 145px;
1223-
z-index: 100;
1207+
top: 82px;
1208+
z-index: 1;
12241209
padding-top: 4px;
12251210
padding-bottom: 4px;
12261211
}
@@ -1959,7 +1944,7 @@ body.mobile .l-unit-toolbar__col--right {
19591944

19601945
.form-container {
19611946
font-size: 0.85rem;
1962-
padding: 1em 1em 2em 9rem;
1947+
padding: 2em 1em 2em 9rem;
19631948
}
19641949

19651950
.vst-error {
@@ -2580,36 +2565,20 @@ body.mobile .l-unit-toolbar__col--right {
25802565
padding-top: 2px;
25812566
}
25822567

2583-
div.l-content.collapsed > div.l-separator:nth-of-type(2) {
2584-
margin-top: 93px;
2585-
position: fixed;
2586-
}
2587-
2588-
div.l-content.collapsed > div.l-separator:nth-of-type(4) {
2589-
margin-top: 138px;
2590-
position: fixed;
2568+
.l-content {
2569+
padding-top: 39px;
25912570
}
25922571

2593-
div.l-content.collapsed .l-sort {
2572+
.l-content.collapsed .l-sort {
25942573
margin-top: 94px;
25952574
}
25962575

2597-
.l-content > .units.l-center::before {
2598-
content: "";
2599-
display: block;
2600-
height: 224px;
2601-
}
2602-
26032576
.console-output {
26042577
font-family: Inconsolata, "Lucida Console", Monaco, monospace;
26052578
font-size: 0.92rem;
26062579
color: #202020;
26072580
}
26082581

2609-
form#vstobjects {
2610-
padding-top: 240px;
2611-
}
2612-
26132582
form#vstobjects.suspended {
26142583
background-color: #fff;
26152584
padding-bottom: 30px;
@@ -3085,7 +3054,7 @@ form#vstobjects.suspended {
30853054
.helper-container {
30863055
float: right;
30873056
margin-bottom: -450px;
3088-
margin-top: 425px;
3057+
margin-top: 199px;
30893058
margin-right: 14px;
30903059
padding-top: 0;
30913060
width: 610px;

‎web/css/src/themes/vestia.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@ a#btn-back:focus {
503503
}
504504

505505
.helper-container {
506-
margin-top: 420px;
506+
margin-top: 194px;
507507
border-radius: 0;
508508
box-shadow: none;
509509
}

0 commit comments

Comments
 (0)