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

[bug] fix dropdown being cut off the bottom of page

Browse Source
This commit is contained in:
zombieFox 2019-11-17 13:33:13 +00:00
parent 67d55a8e58
commit 1bcaa0406a
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/form.css
View File

@ -1383,8 +1383,6 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
padding: 0.5em 0; padding: 0.5em 0;
position: absolute; position: absolute;
top: calc(100% + calc(var(--layout-line-width) * 2));
left: 0;
width: 100%; width: 100%;
min-width: 12em; min-width: 12em;
box-shadow: var(--layout-shadow-large); box-shadow: var(--layout-shadow-large);
@ -1393,6 +1391,22 @@ input[type="range"]:disabled::-moz-range-progress {
display: none; display: none;
} }
.form-dropdown-menu-left {
right: 0;
}
.form-dropdown-menu-right {
left: 0;
}
.form-dropdown-menu-top {
bottom: calc(100% + calc(var(--layout-line-width) * 2));
}
.form-dropdown-menu-bottom {
top: calc(100% + calc(var(--layout-line-width) * 2));
}
.form-dropdown-open .form-dropdown-menu { .form-dropdown-open .form-dropdown-menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

44
src/js/dropdown.js
View File

@ -78,39 +78,47 @@ var dropdown = (function() {
render.offset = function() { render.offset = function() {
var formDropdownMenu = _currentFormDropdown.querySelector(".form-dropdown-menu"); var formDropdownMenu = _currentFormDropdown.querySelector(".form-dropdown-menu");
var box = formDropdownMenu.getBoundingClientRect(); if (state.get().dropdown) {
if (box.left + box.width > window.innerWidth) { var box = formDropdownMenu.getBoundingClientRect();
formDropdownMenu.style.right = "0"; if (box.right > window.innerWidth) {
formDropdownMenu.style.left = "inherit"; helper.addClass(formDropdownMenu, "form-dropdown-menu-left");
} else {
helper.addClass(formDropdownMenu, "form-dropdown-menu-right");
};
if (box.bottom > window.innerHeight) {
helper.addClass(formDropdownMenu, "form-dropdown-menu-top");
} else {
helper.addClass(formDropdownMenu, "form-dropdown-menu-bottom");
};
} else { } else {
formDropdownMenu.removeAttribute("style"); helper.removeClass(formDropdownMenu, "form-dropdown-menu-left");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-right");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-top");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-bottom");
}; };
}; };
render.toggle = function() { render.toggle = function() {
if (_currentFormDropdown.classList.contains("form-dropdown-open")) { if (state.get().dropdown) {
mod.close(); render.open();
helper.removeClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.remove();
render.offset();
_currentFormDropdown = null;
} else { } else {
mod.open(); render.close();
_currentFormDropdown = _currentFormDropdown;
helper.addClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.add(_currentFormDropdown);
render.offset();
}; };
}; };
render.close = function() { render.close = function() {
mod.close();
helper.removeClass(_currentFormDropdown, "form-dropdown-open"); helper.removeClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.remove();
render.offset(); render.offset();
documentEvent.remove();
_currentFormDropdown = null; _currentFormDropdown = null;
}; };
render.open = function() {
helper.addClass(_currentFormDropdown, "form-dropdown-open");
render.offset();
documentEvent.add();
};
var close = function() { var close = function() {
mod.close(); mod.close();
render.close(); render.close();