extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 12:31:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding scroll past end control

Browse Source
This commit is contained in:
zombieFox 2019-01-04 18:23:24 +00:00
parent 03c81b7af3
commit 465e5e92fe
5 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/container.css
View File

@ -35,9 +35,10 @@
.is-layout-wide .container { .is-layout-wide .container {
width: 70vw; width: 70vw;
} }
.is-layout-thin .container {
width: 30vw; .is-layout-thin .container {
} width: 30vw;
}
} }
@media (min-width: 1600px) {} @media (min-width: 1600px) {}

7
css/link.css
View File

@ -1,9 +1,13 @@
.link { .link {
margin-bottom: 50vh; margin-bottom: 2em;
width: 100vw; width: 100vw;
z-index: 1; z-index: 1;
} }
.is-scroll-past-end .link {
margin-bottom: 60vh;
}
.link-area { .link-area {
width: 100%; width: 100%;
display: grid; display: grid;
@ -27,7 +31,6 @@
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.link-item { .link-item {
width: 100%; width: 100%;
height: var(--link-height); height: var(--link-height);

7
index.html
View File

@ -241,6 +241,13 @@
<label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label> <label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label>
</div> </div>
</div> </div>
<div class="menu-item">
<h1 class="menu-header">Page</h1>
<div class="checkbox-wrap">
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
<label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

16
js/control.js
View File

@ -67,10 +67,15 @@ var control = (function() {
view[state.get().link.style](); view[state.get().link.style]();
}; };
var _layout = function() { var _layout = function() {
helper.removeClass(html, "is-layout-fludi"); helper.removeClass(html, "is-layout-fluid");
helper.removeClass(html, "is-layout-wide"); helper.removeClass(html, "is-layout-wide");
helper.removeClass(html, "is-layout-thin"); helper.removeClass(html, "is-layout-thin");
helper.addClass(html, "is-layout-" + state.get().layout.container); helper.addClass(html, "is-layout-" + state.get().layout.container);
if (state.get().layout.scrollPastEnd) {
helper.addClass(html, "is-scroll-past-end");
} else {
helper.removeClass(html, "is-scroll-past-end");
};
}; };
var _editAdd = function() { var _editAdd = function() {
if (state.get().header.editAdd.active) { if (state.get().header.editAdd.active) {
@ -344,6 +349,14 @@ var control = (function() {
data.save(); data.save();
}, false); }, false);
}); });
helper.e(".control-layout-scroll-past-end").addEventListener("change", function() {
state.change({
path: "layout.scrollPastEnd",
value: this.checked
});
render();
data.save();
}, false);
}; };
var update = function() { var update = function() {
@ -366,6 +379,7 @@ var control = (function() {
helper.e(".control-header-accent-active").checked = state.get().header.accent.active; helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true; helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
helper.e(".control-layout-container-" + state.get().layout.container).checked = true; helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd;
}; };
var init = function() { var init = function() {

1
js/state.js
View File

@ -52,6 +52,7 @@ var state = (function() {
layout: { layout: {
alignment: "left", alignment: "left",
container: "wide", container: "wide",
scrollPastEnd: true,
theme: { theme: {
r: 0, r: 0,
g: 255, g: 255,