mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2025-12-23 21:47:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Display sidebar dropdowns above if no space below (#8335)

Browse Source 
Closes https://github.com/FreshRSS/FreshRSS/issues/7801
This commit is contained in:
Inverle
2025-12-21 14:02:27 +01:00
committed by GitHub
parent af1e5cb9bc
commit f387abe2c4
3 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
p/scripts/main.js
View File

@@ -1083,7 +1083,7 @@ function init_column_categories() {
a = ev.target.closest('.tree-folder-items > .feed .dropdown-toggle');
if (a) {
const div = a.parentElement;
const dropdownMenu = div.querySelector('.dropdown-menu');
let dropdownMenu = div.querySelector('.dropdown-menu');
if (!dropdownMenu) {
loadJs('extra.js');
@@ -1095,6 +1095,8 @@ function init_column_categories() {
const template = document.getElementById(templateId)
.innerHTML.replace(/------/g, id).replace('http://example.net/', feed_web);
div.insertAdjacentHTML('beforeend', template);
dropdownMenu = div.querySelector('.dropdown-menu');
dropdownMenu.style.opacity = '0%'; // Hide initially to prevent dropdown flashing
if (feed_web == '') {
const website = div.querySelector('.item.link.website');
if (website) {
@@ -1106,6 +1108,27 @@ function init_column_categories() {
b.disabled = false;
}
}
window.addEventListener('hashchange', () => {
const dropdownBottom = dropdownMenu.getBoundingClientRect().bottom;
const toggleHeight = a.getBoundingClientRect().height;
// If there is no space to display the dropdown below, display it above
if (dropdownBottom > window.innerHeight) {
dropdownMenu.style.bottom = `${toggleHeight + 2}px`;
dropdownMenu.classList.add('arrow-bottom');
}
dropdownMenu.style.opacity = '';
// Wait for dropdown to be closed so it can be removed
// Dropdown visibility is based on CSS :target
window.addEventListener('hashchange', () => {
dropdownMenu.nextElementSibling.remove(); // dropdown close
dropdownMenu.remove();
}, { once: true });
}, { once: true });
return true;
}

5
p/themes/base-theme/frss.css
View File

@@ -829,6 +829,11 @@ input[type="checkbox"]:focus-visible {
transform: rotate(45deg);
}
.dropdown-menu.arrow-bottom::after {
top: unset;
transform: rotate(225deg);
}
.horizontal-list.bottom .dropdown-menu::after {
left: 0.5rem;
right: auto;

5
p/themes/base-theme/frss.rtl.css
View File

@@ -829,6 +829,11 @@ input[type="checkbox"]:focus-visible {
transform: rotate(-45deg);
}
.dropdown-menu.arrow-bottom::after {
top: unset;
transform: rotate(-225deg);
}
.horizontal-list.bottom .dropdown-menu::after {
right: 0.5rem;
left: auto;