Skip to content

Commit 5108a7c

Browse files
zombieFoxzombieFox
authored
[feature] control header and link order in layout area
1 parent 4ed92ce commit 5108a7c

File tree

13 files changed

+175
-60
lines changed

13 files changed

+175
-60
lines changed

‎src/css/base.css‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,3 @@ body{
2020
min-height:100vh;
2121
transition: background-color var(--layout-animation-speed-fast) ease-in-out;
2222
}
23-
24-
.is-layout-scroll-past-endbody{
25-
margin-bottom:40vh;
26-
}
27-
28-
.is-layout-alignment-horizontal-leftbody{
29-
align-items: flex-start;
30-
}
31-
32-
.is-layout-alignment-horizontal-centerbody{
33-
align-items: center;
34-
}
35-
36-
.is-layout-alignment-horizontal-rightbody{
37-
align-items: flex-end;
38-
}
39-
40-
.is-layout-alignment-vertical-topbody{
41-
justify-content: flex-start;
42-
}
43-
44-
.is-layout-alignment-vertical-centerbody{
45-
justify-content: center;
46-
}
47-
48-
.is-layout-alignment-vertical-bottombody{
49-
justify-content: flex-end;
50-
}

‎src/css/header.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,17 @@
1919

2020
.is-link-show .header{
2121
position: sticky;
22-
top:0;
2322
left:0;
2423
}
2524

25+
.is-layout-order-headerLink.is-link-show .header{
26+
top:0;
27+
}
28+
29+
.is-layout-order-linkHeader.is-link-show .header{
30+
bottom:0;
31+
}
32+
2633
.header-shade{
2734
background-color: transparent;
2835
content:"";

‎src/css/layout.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.layout{
2+
position: relative;
3+
width:var(--layout-width);
4+
}
5+
6+
.is-layout-scroll-past-endbody{
7+
margin-bottom:40vh;
8+
}
9+
10+
.is-layout-alignment-horizontal-leftbody{
11+
align-items: flex-start;
12+
}
13+
14+
.is-layout-alignment-horizontal-centerbody{
15+
align-items: center;
16+
}
17+
18+
.is-layout-alignment-horizontal-rightbody{
19+
align-items: flex-end;
20+
}
21+
22+
.is-layout-alignment-vertical-topbody{
23+
justify-content: flex-start;
24+
}
25+
26+
.is-layout-alignment-vertical-centerbody{
27+
justify-content: center;
28+
}
29+
30+
.is-layout-alignment-vertical-bottombody{
31+
justify-content: flex-end;
32+
}

‎src/css/link.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
}
2323

2424
.link-area{
25-
padding-bottom:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
2625
padding-left:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
2726
padding-right:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
2827
font-size:calc(var(--link-item-size) *1);
@@ -34,11 +33,24 @@
3433
grid-template-columns:repeat(auto-fill,minmax(var(--link-item-width),1fr));
3534
}
3635

37-
.is-header-border-bottom .link-area,
38-
.is-header-shade-style-always .link-area{
36+
.is-layout-order-headerLink .link-area{
37+
padding-bottom:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
38+
}
39+
40+
.is-layout-order-headerLink.is-header-border-bottom .link-area,
41+
.is-layout-order-headerLink.is-header-shade-style-always .link-area{
42+
padding-top:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
43+
}
44+
45+
.is-layout-order-linkHeader .link-area{
3946
padding-top:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
4047
}
4148

49+
.is-layout-order-linkHeader.is-header-border-top .link-area,
50+
.is-layout-order-linkHeader.is-header-shade-style-always .link-area{
51+
padding-bottom:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
52+
}
53+
4254
.link-item{
4355
font-size:1em;
4456
position: relative;

‎src/css/main.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/index.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<linkrel="stylesheet" href="css/reset.css">
1010
<linkrel="stylesheet" href="css/variables.css">
1111
<linkrel="stylesheet" href="css/base.css">
12-
<linkrel="stylesheet" href="css/main.css">
12+
<linkrel="stylesheet" href="css/layout.css">
1313
<linkrel="stylesheet" href="css/edge.css">
1414
<linkrel="stylesheet" href="css/animation.css">
1515
<linkrel="stylesheet" href="css/fonts.css">
@@ -43,7 +43,7 @@
4343
<divclass="background-accent"></div>
4444
</div>
4545

46-
<mainclass="main">
46+
<mainclass="layout">
4747

4848
<headerclass="header">
4949
<divclass="header-shade"></div>
@@ -164,6 +164,21 @@ <h1 class="menu-item-header-text">Area</h1>
164164
<pclass="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
165165
</div>
166166
</div>
167+
<divclass="menu-item">
168+
<divclass="menu-item-header">
169+
<h1class="menu-item-header-text">Area order</h1>
170+
</div>
171+
<divclass="menu-item-form">
172+
<divclass="input-wrap">
173+
<inputid="control-layout-order-headerLink" class="control-layout-order-headerLink" type="radio" name="control-layout-order" value="headerLink" tabindex="1">
174+
<labelfor="control-layout-order-headerLink">Header then Bookmarks</label>
175+
</div>
176+
<divclass="input-wrap">
177+
<inputid="control-layout-order-linkHeader" class="control-layout-order-linkHeader" type="radio" name="control-layout-order" value="linkHeader" tabindex="1">
178+
<labelfor="control-layout-order-linkHeader">Bookmarks then Header</label>
179+
</div>
180+
</div>
181+
</div>
167182
<divclass="menu-item">
168183
<divclass="menu-item-header">
169184
<h1class="menu-item-header-text">Padding</h1>

‎src/js/control.js‎

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ var control = (function(){
3838
event: "input",
3939
func: function(){
4040
edge.render({
41-
element: helper.e(".main"),
41+
element: helper.e(".layout"),
4242
});
4343
}
4444
},{
4545
event: "mousedown",
4646
func: function(){
4747
edge.render({
48-
element: helper.e(".main"),
48+
element: helper.e(".layout"),
4949
});
5050
}
5151
},{
@@ -63,7 +63,7 @@ var control = (function(){
6363
func: function(){
6464
if(event.keyCode==37||event.keyCode==38||event.keyCode==39||event.keyCode==40){
6565
edge.render({
66-
element: helper.e(".main"),
66+
element: helper.e(".layout"),
6767
});
6868
};
6969
}
@@ -85,7 +85,7 @@ var control = (function(){
8585
event: "change",
8686
func: function(){
8787
edge.render({
88-
element: helper.e(".main"),
88+
element: helper.e(".layout"),
8989
delay: 500
9090
});
9191
}
@@ -101,7 +101,7 @@ var control = (function(){
101101
event: "change",
102102
func: function(){
103103
edge.render({
104-
element: helper.e(".main"),
104+
element: helper.e(".layout"),
105105
delay: 500
106106
});
107107
}
@@ -117,7 +117,7 @@ var control = (function(){
117117
event: "change",
118118
func: function(){
119119
edge.render({
120-
element: helper.e(".main"),
120+
element: helper.e(".layout"),
121121
delay: 500
122122
});
123123
}
@@ -133,7 +133,7 @@ var control = (function(){
133133
event: "change",
134134
func: function(){
135135
edge.render({
136-
element: helper.e(".main"),
136+
element: helper.e(".layout"),
137137
delay: 500
138138
});
139139
}
@@ -149,7 +149,7 @@ var control = (function(){
149149
event: "change",
150150
func: function(){
151151
edge.render({
152-
element: helper.e(".main"),
152+
element: helper.e(".layout"),
153153
delay: 500
154154
});
155155
}
@@ -165,14 +165,50 @@ var control = (function(){
165165
event: "change",
166166
func: function(){
167167
edge.render({
168-
element: helper.e(".main"),
168+
element: helper.e(".layout"),
169169
delay: 500
170170
});
171171
}
172172
}],
173173
func: function(){
174174
render();
175175
}
176+
},{
177+
element: helper.e(".control-layout-order-headerLink"),
178+
path: "layout.order",
179+
type: "radio",
180+
additionalEvents: [{
181+
event: "change",
182+
func: function(){
183+
edge.render({
184+
element: helper.e(".layout"),
185+
delay: 500
186+
});
187+
}
188+
}],
189+
func: function(){
190+
layout.render.order();
191+
header.render.shade();
192+
render();
193+
}
194+
},{
195+
element: helper.e(".control-layout-order-linkHeader"),
196+
path: "layout.order",
197+
type: "radio",
198+
additionalEvents: [{
199+
event: "change",
200+
func: function(){
201+
edge.render({
202+
element: helper.e(".layout"),
203+
delay: 500
204+
});
205+
}
206+
}],
207+
func: function(){
208+
layout.render.order();
209+
header.render.shade();
210+
render();
211+
}
176212
},{
177213
element: helper.e(".control-layout-padding"),
178214
path: "layout.padding",
@@ -181,14 +217,14 @@ var control = (function(){
181217
event: "input",
182218
func: function(){
183219
edge.render({
184-
element: helper.e(".main"),
220+
element: helper.e(".layout"),
185221
});
186222
}
187223
},{
188224
event: "mousedown",
189225
func: function(){
190226
edge.render({
191-
element: helper.e(".main"),
227+
element: helper.e(".layout"),
192228
});
193229
}
194230
},{
@@ -206,7 +242,7 @@ var control = (function(){
206242
func: function(){
207243
if(event.keyCode==37||event.keyCode==38||event.keyCode==39||event.keyCode==40){
208244
edge.render({
209-
element: helper.e(".main"),
245+
element: helper.e(".layout"),
210246
});
211247
};
212248
}
@@ -227,14 +263,14 @@ var control = (function(){
227263
event: "input",
228264
func: function(){
229265
edge.render({
230-
element: helper.e(".main"),
266+
element: helper.e(".layout"),
231267
});
232268
}
233269
},{
234270
event: "mousedown",
235271
func: function(){
236272
edge.render({
237-
element: helper.e(".main"),
273+
element: helper.e(".layout"),
238274
});
239275
}
240276
},{
@@ -252,7 +288,7 @@ var control = (function(){
252288
func: function(){
253289
if(event.keyCode==37||event.keyCode==38||event.keyCode==39||event.keyCode==40){
254290
edge.render({
255-
element: helper.e(".main"),
291+
element: helper.e(".layout"),
256292
});
257293
};
258294
}
@@ -278,6 +314,7 @@ var control = (function(){
278314
type: "checkbox",
279315
func: function(){
280316
render();
317+
header.render.shade();
281318
}
282319
},{
283320
element: helper.e(".control-header-area-width"),
@@ -2375,8 +2412,11 @@ var control = (function(){
23752412
helper.removeClass(html,"is-layout-alignment-vertical-top");
23762413
helper.removeClass(html,"is-layout-alignment-vertical-center");
23772414
helper.removeClass(html,"is-layout-alignment-vertical-bottom");
2415+
helper.removeClass(html,"is-layout-order-headerLink");
2416+
helper.removeClass(html,"is-layout-order-linkHeader");
23782417
helper.addClass(html,"is-layout-alignment-horizontal-"+state.get().layout.alignment.horizontal);
23792418
helper.addClass(html,"is-layout-alignment-vertical-"+state.get().layout.alignment.vertical);
2419+
helper.addClass(html,"is-layout-order-"+state.get().layout.order);
23802420
if(state.get().layout.scrollPastEnd){
23812421
helper.addClass(html,"is-layout-scroll-past-end");
23822422
};
@@ -2686,6 +2726,8 @@ var control = (function(){
26862726
};
26872727
};
26882728
var_link=function(){
2729+
helper.e(".control-layout-order-headerLink").disabled=true;
2730+
helper.e(".control-layout-order-linkHeader").disabled=true;
26892731
helper.e("[for=control-link-area-width]").setAttribute("disabled","");
26902732
helper.e(".control-link-area-width").disabled=true;
26912733
helper.e(".control-link-area-width-match").disabled=true;
@@ -2725,6 +2767,8 @@ var control = (function(){
27252767
helper.e(".control-link-sort-letter").disabled=true;
27262768
helper.e(".control-link-sort-icon").disabled=true;
27272769
if(state.get().link.show){
2770+
helper.e(".control-layout-order-headerLink").disabled=false;
2771+
helper.e(".control-layout-order-linkHeader").disabled=false;
27282772
helper.e("[for=control-link-area-width]").removeAttribute("disabled");
27292773
helper.e(".control-link-area-width").disabled=false;
27302774
helper.e(".control-link-area-width-match").disabled=false;

0 commit comments

Comments
(0)