Skip to content

Commit 8052736

Browse files
zombieFoxzombieFox
authored
[feature] add layout direction controls
1 parent f22a34a commit 8052736

31 files changed

+1330
-1088
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nightTab",
3-
"version": "4.44.2",
3+
"version": "5.0.0",
44
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
55
"main": "index.js",
66
"scripts":{

‎src/css/group.css‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,10 @@
33
padding-bottom:calc(calc(var(--layout-space) /2) *var(--layout-padding));
44
padding-left:calc(var(--layout-space) *var(--layout-padding));
55
padding-right:calc(var(--layout-space) *var(--layout-padding));
6-
width:var(--link-area-width);
6+
width:100%;
77
display: flex;
88
}
99

10-
.is-group-order-headerbody .group{
11-
flex-direction: column;
12-
}
13-
14-
.is-group-order-bodyheader .group{
15-
flex-direction: column-reverse;
16-
}
17-
1810
.group:first-child{
1911
padding-top:calc(var(--layout-space) *var(--layout-padding));
2012
}
@@ -23,13 +15,20 @@
2315
padding-bottom:calc(var(--layout-space) *var(--layout-padding));
2416
}
2517

18+
.is-group-order-headerbody .group{
19+
flex-direction: column;
20+
}
21+
22+
.is-group-order-bodyheader .group{
23+
flex-direction: column-reverse;
24+
}
25+
2626
.is-group-border .group:not(:last-child):not(:only-child){
2727
border-bottom:calc(var(--layout-line-width) *var(--group-border)) solid rgb(var(--theme-accent));
2828
}
2929

3030
.is-group-border .group{
31-
padding-top:calc(var(--layout-space) *var(--layout-padding));
32-
padding-bottom:calc(var(--layout-space) *var(--layout-padding));
31+
padding:calc(var(--layout-space) *var(--layout-padding));
3332
}
3433

3534
.group-header{
@@ -163,3 +162,11 @@
163162
grid-gap:calc(var(--layout-space) *var(--layout-gutter));
164163
grid-template-columns:repeat(auto-fill,minmax(var(--link-item-width),1fr));
165164
}
165+
166+
.is-link-area-direction-ltr .group-body{
167+
direction: ltr;
168+
}
169+
170+
.is-link-area-direction-rtl .group-body{
171+
direction: rtl;
172+
}

‎src/css/header.css‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,27 @@
66
pointer-events: none;
77
}
88

9+
.is-layout-direction-horizontal .header{
10+
max-height:100vh;
11+
position: sticky;
12+
top:0;
13+
left: initial;
14+
align-self: stretch;
15+
align-items: center;
16+
}
17+
18+
.is-layout-direction-horizontal .header{
19+
width:100%;
20+
}
21+
22+
.is-link-show.is-layout-direction-horizontal .header{
23+
width:calc(calc(var(--header-area-width) /2) -calc(calc(var(--link-area-width) /2) -50%));
24+
}
25+
26+
.is-layout-direction-vertical .header{
27+
width:100%;
28+
}
29+
930
.is-header-color-show .header{
1031
pointer-events: all;
1132
}
@@ -22,94 +43,71 @@
2243
justify-content: flex-end;
2344
}
2445

25-
.is-link-show.is-header-position-sticky .header{
46+
.is-layout-direction-vertical.is-link-show.is-header-position-sticky .header{
2647
position: sticky;
2748
left:0;
2849
}
2950

30-
.is-link-show.is-header-position-inline .header{
51+
.is-layout-direction-vertical.is-link-show.is-header-position-inline .header{
3152
position: relative;
3253
left:0;
3354
}
3455

35-
.is-layout-order-headerlink.is-link-show .header{
56+
.is-layout-direction-vertical.is-layout-order-headerlink.is-link-show .header{
3657
top:0;
3758
}
3859

39-
.is-layout-order-linkheader.is-link-show .header{
60+
.is-layout-direction-vertical.is-layout-order-linkheader.is-link-show .header{
4061
bottom:0;
4162
}
4263

43-
.header-color{
64+
.header-area{
4465
background-color: transparent;
45-
content:"";
46-
width:100%;
47-
height:100%;
48-
display: block;
49-
position: absolute;
50-
top:0;
51-
left:0;
52-
pointer-events: none;
5366
transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
5467
}
5568

56-
.is-header-radius .header-color{
69+
.is-layout-direction-vertical .header-area{
70+
width:var(--header-area-width);
71+
}
72+
73+
.is-layout-direction-horizontal .header-area{
74+
width:100%;
75+
}
76+
77+
.is-header-radius .header-area{
5778
border-radius:calc(var(--theme-radius) *4);
5879
}
5980

60-
.is-header-color-by-theme.is-header-color-style-always .header-color{
81+
.is-header-color-by-theme.is-header-color-style-always .header-area{
6182
background-color:rgba(var(--header-color-theme),var(--header-opacity));
6283
}
6384

64-
.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-color{
85+
.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-area{
6586
background-color:rgba(var(--header-color-theme),var(--header-opacity));
6687
}
6788

68-
.is-header-color-by-custom.is-header-color-style-always .header-color{
89+
.is-header-color-by-custom.is-header-color-style-always .header-area{
6990
background-color:rgba(var(--header-color-custom),var(--header-opacity));
7091
}
7192

72-
.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-color{
93+
.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-area{
7394
background-color:rgba(var(--header-color-custom),var(--header-opacity));
7495
}
7596

7697
.header-area{
7798
padding:calc(var(--layout-space) *var(--layout-padding));
7899
position: relative;
79-
width:var(--header-area-width);
80100
pointer-events: none;
81101
}
82102

83103
.is-header-border-top .header-area{
84-
border-top:calc(var(--layout-line-width) *var(--header-border-top)) solid transparent;
85-
}
86-
87-
.is-header-border-bottom .header-area{
88-
border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid transparent;
89-
}
90-
91-
.header-border{
92-
width:100%;
93-
height:100%;
94-
display: block;
95-
position: absolute;
96-
top:0;
97-
left:0;
98-
pointer-events: none;
99-
}
100-
101-
.is-header-border-top .header-border{
102104
border-top:calc(var(--layout-line-width) *var(--header-border-top)) solid rgb(var(--theme-accent));
103105
}
104106

105-
.is-header-border-bottom .header-border{
107+
.is-header-border-bottom .header-area{
106108
border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid rgb(var(--theme-accent));
107109
}
108110

109-
.is-header-radius .header-color{
110-
border-radius:calc(var(--theme-radius) *4);
111-
}
112-
113111
.header-item-grid{
114112
margin:calc(-1*calc(var(--layout-space) *var(--layout-gutter))) 00calc(-1*calc(var(--layout-space) *var(--layout-gutter)));
115113
position: relative;

‎src/css/layout.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,33 @@
22
position: relative;
33
width:var(--layout-width);
44
font-size:calc(1em*var(--layout-size));
5+
flex-wrap: nowrap;
6+
}
7+
8+
.is-layout-direction-vertical .layout{
9+
display: flex;
10+
}
11+
12+
.is-layout-direction-vertical.is-layout-order-headerlink .layout{
13+
flex-direction: column;
14+
}
15+
16+
.is-layout-direction-vertical.is-layout-order-linkheader .layout{
17+
flex-direction: column-reverse;
18+
}
19+
20+
.is-layout-direction-horizontal .layout{
21+
display: inline-flex;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
26+
.is-layout-direction-horizontal.is-layout-order-headerlink .layout{
27+
flex-direction: row;
28+
}
29+
30+
.is-layout-direction-horizontal.is-layout-order-linkheader .layout{
31+
flex-direction: row-reverse;
532
}
633

734
.is-layout-alignment-horizontal-leftbody{

‎src/css/link.css‎

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,84 @@
55
z-index:var(--z-index-link);
66
}
77

8-
.is-link-show .link{
9-
display: flex;
8+
.is-layout-direction-horizontal .link{
9+
align-items: center;
1010
}
1111

12-
.is-link-area-justify-left .link{
13-
align-items: flex-start;
12+
.is-layout-direction-vertical .link{
13+
width:100%;
1414
}
1515

16-
.is-link-area-justify-center .link{
17-
align-items: center;
16+
.is-layout-direction-vertical.is-layout-order-headerlink .link{
17+
margin-top:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
1818
}
1919

20-
.is-link-area-justify-right .link{
21-
align-items: flex-end;
20+
.is-layout-direction-vertical.is-layout-order-linkheader .link{
21+
margin-bottom:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
2222
}
2323

24-
.is-layout-order-headerlink .link{
25-
margin-top:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
24+
.is-layout-direction-horizontal.is-layout-order-headerlink .link{
25+
margin-left:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
2626
}
2727

28-
.is-layout-order-linkheader .link{
29-
margin-bottom:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
28+
.is-layout-direction-horizontal.is-layout-order-linkheader .link{
29+
margin-right:calc(-1*calc(var(--layout-space) *var(--layout-padding)));
3030
}
3131

32-
.is-layout-order-headerlink.is-header-border-bottom .link,
33-
.is-layout-order-headerlink.is-header-color-style-always .link{
32+
.is-layout-direction-horizontal .link{
33+
width:calc(calc(var(--link-area-width) /2) -calc(calc(var(--header-area-width) /2) -50%) +calc(var(--layout-space) *var(--layout-padding)));
34+
}
35+
36+
.is-layout-direction-vertical.is-layout-order-headerlink.is-header-border-bottom .link,
37+
.is-layout-direction-vertical.is-layout-order-headerlink.is-header-color-style-always .link{
3438
margin-top:0;
3539
}
3640

37-
.is-layout-order-linkheader.is-header-border-top .link,
38-
.is-layout-order-linkheader.is-header-color-style-always .link{
41+
.is-layout-direction-vertical.is-layout-order-linkheader.is-header-border-top .link,
42+
.is-layout-direction-vertical.is-layout-order-linkheader.is-header-color-style-always .link{
3943
margin-bottom:0;
4044
}
4145

46+
.is-layout-direction-horizontal.is-layout-order-headerlink.is-group-border .link,
47+
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-border-top .link,
48+
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-border-bottom .link,
49+
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-color-style-always .link{
50+
width:50%;
51+
margin-left:0;
52+
}
53+
54+
.is-layout-direction-horizontal.is-layout-order-linkheader.is-group-border .link,
55+
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-border-top .link,
56+
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-border-bottom .link,
57+
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-color-style-always .link{
58+
width:50%;
59+
margin-right:0;
60+
}
61+
62+
.is-link-show .link{
63+
display: flex;
64+
}
65+
66+
.is-layout-direction-vertical .link-area{
67+
width:var(--link-area-width);
68+
}
69+
70+
.is-layout-direction-horizontal .link-area{
71+
width:100%;
72+
}
73+
74+
.is-link-area-justify-left .link{
75+
align-items: flex-start;
76+
}
77+
78+
.is-link-area-justify-center .link{
79+
align-items: center;
80+
}
81+
82+
.is-link-area-justify-right .link{
83+
align-items: flex-end;
84+
}
85+
4286
.link-sort-placeholder{
4387
background-color:rgba(var(--theme-accent),0.2);
4488
border-radius:var(--theme-radius);
@@ -51,6 +95,7 @@
5195

5296
.link-item.link-empty{
5397
background-color:rgba(var(--theme-color-04),0.2);
98+
padding:0.5em1em;
5499
border-radius:var(--theme-radius);
55100
height: inherit;
56101
text-align: center;
@@ -99,6 +144,11 @@
99144
z-index:1;
100145
}
101146

147+
.is-link-area-direction-ltr .link-item,
148+
.is-link-area-direction-rtl .link-item{
149+
direction: ltr;
150+
}
151+
102152
.link-item:focus-within,
103153
.link-item:focus,
104154
.link-item:hover{

‎src/html/layout.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<mainclass="layout">
22

3-
<headerclass="header">
4-
<divclass="header-color"></div>
5-
<divclass="header-border"></div>
6-
<divclass="header-area"></div>
7-
</header>
3+
<headerclass="header"></header>
84

95
<sectionclass="link"></section>
106

‎src/html/menu.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99

1010
@@include("./menu/content/header.html")
1111

12-
@@include("./menu/content/groups.html")
13-
1412
@@include("./menu/content/bookmarks.html")
13+
14+
@@include("./menu/content/groups.html")
1515

1616
@@include("./menu/content/theme.html")
1717

0 commit comments

Comments
(0)