Skip to content

Commit df9572d

Browse files
zombieFoxzombieFox
committed
[design] improve menu layout and add sub menu links
1 parent 247371e commit df9572d

20 files changed

+321
-189
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.38.0",
3+
"version": "4.39.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/menu.css‎

Lines changed: 119 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
position: fixed;
44
top:0;
55
right:0;
6-
width:100%;
7-
height:80vh;
6+
width:100vw;
7+
height:90vh;
88
transform:translateY(calc(-100%-2em));
99
user-select: none;
1010
z-index:var(--z-index-menu);
@@ -26,6 +26,11 @@
2626
border-radius:var(--theme-radius);
2727
width:100%;
2828
max-height:100%;
29+
display: grid;
30+
grid-template-rows: auto 1fr;
31+
grid-template-columns:1fr auto;
32+
justify-items: stretch;
33+
align-items: stretch;
2934
overflow-y: auto;
3035
pointer-events: all;
3136
transition: box-shadow var(--layout-timing-extra-fast);
@@ -42,6 +47,33 @@
4247
.menu-nav{
4348
display: flex;
4449
flex-direction: row;
50+
flex-wrap: wrap;
51+
}
52+
53+
.menu-nav-item{
54+
flex-grow:1;
55+
flex-basis:33.33333333%;
56+
}
57+
58+
.menu-nav-tab{
59+
background-color: transparent;
60+
margin:0;
61+
padding-top:0;
62+
padding-bottom:0;
63+
border-radius:0;
64+
height:3.25em;
65+
width:100%;
66+
line-height:1;
67+
}
68+
69+
.menu-nav-tab:after,
70+
.menu-nav-tab:after{
71+
background-color: transparent;
72+
border-radius:0;
73+
}
74+
75+
.menu-nav-body{
76+
display: none;
4577
}
4678

4779
.menu-nav-area-tab{
@@ -59,150 +91,155 @@
5991
align-items: flex-start;
6092
}
6193

62-
.menu-nav:not(:last-child){
63-
margin:0;
94+
.menu-list{
95+
display: none;
6496
}
6597

6698
.menu-content{
6799
padding:0calc(var(--menu-space) *3);
100+
grid-column-start:1;
101+
grid-column-end:3;
68102
}
69103

70-
.menu-content-area{
71-
display: grid;
72-
grid-template-columns:1fr;
73-
}
74-
75-
.menu-item{
104+
.menu-content-item{
105+
padding-top:calc(var(--menu-space) *2);
106+
padding-bottom:calc(var(--menu-space) *2);
76107
position: relative;
77108
z-index:1;
78109
}
79110

80-
.menu-item:not(:last-child){
111+
.menu-content-item:not(:last-child){
81112
border-bottom:var(--horizontal-rule);
82113
}
83114

84115
.menu-item-header{
85-
padding:calc(var(--menu-space) *2)0;
116+
margin-bottom:calc(var(--menu-space) *2);
86117
}
87118

88119
.menu-item-header-text{
89120
margin-bottom:0;
90121
}
91122

92123
.menu-item-form{
93-
padding:00calc(var(--menu-space) *3) calc(var(--menu-space) *3);
124+
margin:00calc(var(--menu-space) *2) calc(var(--menu-space) *2);
94125
z-index:1;
95126
}
96127

97-
.menu-nav-button{
98-
background-color: transparent;
99-
margin:0;
100-
padding-top:0;
101-
padding-bottom:0;
102-
border-radius:0;
103-
height:3.25em;
104-
line-height:1;
105-
flex-grow:1;
106-
}
107-
108-
.menu-nav-button:after,
109-
.menu-nav-button:after{
110-
background-color: transparent;
111-
border-radius:0;
112-
}
113-
114-
.menu-nav-area-tab .menu-nav-button:first-child{
115-
border-radius:var(--theme-radius) 000;
116-
}
117-
118-
.menu-nav-area-close .menu-nav-button{
119-
border-radius:0var(--theme-radius) 00;
120-
}
121-
122128
@media (min-width:550px){
123129
.menu{
124-
width:80vw;
125-
}
126-
127-
.menu-nav-area-tab .menu-nav-button{
128-
flex-basis:33.3333333333%;
129-
max-width:33.3333333333%;
130+
width:90vw;
130131
}
131132
}
132133

133134
@media (min-width:700px){
134135
.menu{
135-
width:70vw;
136+
width:100%;
136137
height:100%;
137138
max-height: initial;
138139
}
139140

140141
.menu-area{
141-
overflow-y: initial;
142-
display: grid;
143-
grid-template-columns:1fr;
144-
grid-template-rows: auto 1fr;
145-
justify-items: stretch;
142+
max-height:100%;
143+
grid-template-rows:1fr;
144+
grid-template-columns:2fr4fr auto;
145+
overflow: hidden;
146+
}
147+
148+
.menu-nav{
149+
grid-column-start:1;
150+
grid-column-end:2;
151+
grid-row-start:1;
152+
grid-row-end:2;
153+
flex-direction: column;
146154
align-items: stretch;
155+
flex-wrap: nowrap;
156+
overflow-y: auto;
157+
}
158+
159+
.menu-nav-item{
160+
flex-grow:0;
161+
flex-basis: auto;
162+
}
163+
164+
.menu-nav .menu-nav-tab{
165+
padding-left:calc(var(--menu-space) *2);
166+
padding-right:calc(var(--menu-space) *2);
167+
justify-content: flex-start;
168+
}
169+
170+
.menu-nav-body{
171+
background-color:rgb(var(--theme-color-02));
172+
display: flex;
173+
flex-direction: column;
174+
flex-wrap: nowrap;
175+
}
176+
177+
.menu-close{
178+
grid-column-start:3;
179+
grid-column-end:4;
180+
grid-row-start:1;
181+
grid-row-end:2;
147182
}
148183

149184
.menu-content{
150185
padding:0calc(var(--menu-space) *4);
186+
grid-column-start:2;
187+
grid-column-end:3;
188+
grid-row-start:1;
189+
grid-row-end:2;
151190
overflow-y: auto;
191+
scroll-behavior: smooth;
152192
}
153193

154-
.menu-item{
155-
display: grid;
156-
grid-template-columns:2fr3fr;
157-
grid-template-rows:1fr;
158-
align-items: flex-start;
159-
grid-gap:2em;
194+
.menu-content-overscroll{
195+
padding-bottom:calc(var(--menu-space) *30);
196+
}
197+
198+
.menu-content-item{
199+
padding-top:calc(var(--menu-space) *3);
200+
padding-bottom:calc(var(--menu-space) *3);
160201
}
161202

162-
.menu-item-header{
163-
padding:calc(var(--menu-space) *1.75) 0;
164-
position: sticky;
165-
top:0;
166-
z-index:3;
203+
.menu-nav-sub{
204+
background-color: transparent;
205+
margin:0;
206+
padding-top:0;
207+
padding-bottom:0;
208+
padding-left:calc(var(--menu-space) *5);
209+
border-radius:0;
210+
height:3em;
211+
width:100%;
212+
line-height:1;
213+
justify-content: flex-start;
167214
}
168215

169-
.menu-nav-area-tab .menu-nav-button{
170-
flex-basis:50%;
171-
max-width:50%;
216+
.menu-nav-sub:after,
217+
.menu-nav-sub:after{
218+
background-color: transparent;
219+
border-radius:0;
172220
}
173221

174222
.menu-item-form{
175-
padding:calc(var(--menu-space) *2.5) 0;
176-
z-index:2;
223+
margin:000calc(var(--menu-space) *3);
177224
}
178225
}
179226

180227
@media (min-width:900px){
181228
.menu{
182-
width:70vw;
183-
}
184-
185-
.menu-item{
186-
grid-template-columns:1fr2fr;
187-
}
188-
189-
.menu-nav-area-tab .menu-nav-button{
190-
flex-basis:33.3333333333%;
191-
max-width:33.3333333333%;
229+
width:80vw;
192230
}
193231
}
194232

195233
@media (min-width:1100px){
196-
.menu-nav-area-tab .menu-nav-button{
197-
padding-left:0.25em;
198-
padding-right:0.25em;
199-
flex-basis: auto;
200-
max-width: inherit;
234+
.menu{
235+
width:70vw;
201236
}
202237
}
203238

204239
@media (min-width:1600px){
205240
.menu{
206-
width:50vw;
241+
width:60vw;
242+
max-width:60em;
243+
max-height:60em;
207244
}
208245
}

‎src/css/variables.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@
127127
--layout-timing-medium:var(--layout-duration-06) ease-in-out;
128128
--layout-timing-slow:var(--layout-duration-08) ease-in-out;
129129
--layout-timing-extra-slow:var(--layout-duration-10) ease-in-out;
130-
--horizontal-rule:calc(var(--layout-line-width) /2) solid rgb(var(--theme-color-02));
130+
--horizontal-rule:var(--layout-line-width) solid rgb(var(--theme-color-02));
131131
/* background */
132132
--background-color-theme:var(--theme-color-01);
133133
--background-color-custom:rgb(0,0,0);
@@ -215,7 +215,7 @@
215215
000calc(var(--layout-line-width) *2) rgba(var(--theme-color-10),0.25);
216216
--form-ring-accent:000var(--layout-line-width) rgb(var(--theme-accent)),
217217
000calc(var(--layout-line-width) *2) rgba(var(--theme-accent),0.25);
218-
--form-wrap-space:0.75em;
218+
--form-wrap-space:1em;
219219
/* menu */
220220
--menu-space:0.75em;
221221
/* button */

‎src/html/menu.html‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,25 @@
33

44
@@include("./menu/menu-nav.html")
55

6-
<divclass="menu-content">
6+
@@include("./menu/menu-close.html")
77

8-
@@include("./menu/menu-content/layout.html")
8+
@@include("./menu/menu-content/layout.html")
99

10-
@@include("./menu/menu-content/header.html")
10+
@@include("./menu/menu-content/header.html")
1111

12-
@@include("./menu/menu-content/groups.html")
12+
@@include("./menu/menu-content/groups.html")
1313

14-
@@include("./menu/menu-content/bookmarks.html")
14+
@@include("./menu/menu-content/bookmarks.html")
1515

16-
@@include("./menu/menu-content/theme.html")
16+
@@include("./menu/menu-content/theme.html")
1717

18-
@@include("./menu/menu-content/background.html")
18+
@@include("./menu/menu-content/background.html")
1919

20-
@@include("./menu/menu-content/data.html")
20+
@@include("./menu/menu-content/data.html")
2121

22-
@@include("./menu/menu-content/coffee.html")
22+
@@include("./menu/menu-content/coffee.html")
2323

24-
@@include("./menu/menu-content/nightTab.html")
25-
26-
</div>
24+
@@include("./menu/menu-content/nighttab.html")
2725

2826
</div>
2927
</section>

‎src/html/menu/menu-close.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<divclass="menu-close">
2+
<buttonclass="menu-nav-tab control-menu-close button" tabindex="-1"><spanclass="icon-close"></span></button>
3+
</div>

‎src/html/menu/menu-content/background.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<divclass="menu-content-area menu-content-area-background is-hidden">
2-
<divclass="menu-item">
1+
<divid="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
2+
<divid="menu-content-background-color" class="menu-content-item">
33
<divclass="menu-item-header">
44
<h1class="menu-item-header-text">Colour</h1>
55
</div>
@@ -33,7 +33,7 @@ <h1 class="menu-item-header-text">Colour</h1>
3333
</div>
3434
</div>
3535
</div>
36-
<divclass="menu-item">
36+
<divid="menu-content-background-image" class="menu-content-item">
3737
<divclass="menu-item-header">
3838
<h1class="menu-item-header-text">Image</h1>
3939
</div>

0 commit comments

Comments
(0)