From 90fe38497d128d0f2111a9fbedcae1217608f217 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Wed, 26 Nov 2025 21:02:59 +0300 Subject: [PATCH] make bookmark dropdown items better looking --- .../components/bookmarks_dropdown.html | 13 +++++--- data/static/css/style.css | 17 ++++++++++- data/static/css/theme-otomotone.css | 17 ++++++++++- data/static/css/theme-peachy.css | 17 ++++++++++- data/static/js/bitties/pyrom-bitty.js | 30 +++++++++++++++---- sass/_default.scss | 22 ++++++++++++-- 6 files changed, 101 insertions(+), 15 deletions(-) diff --git a/app/templates/components/bookmarks_dropdown.html b/app/templates/components/bookmarks_dropdown.html index 385bb86..ab67ca9 100644 --- a/app/templates/components/bookmarks_dropdown.html +++ b/app/templates/components/bookmarks_dropdown.html @@ -4,7 +4,7 @@ {% else %} {% set bookmark_url = url_for('api.bookmark_thread', thread_id=id) %} {% endif %} -
+
Bookmark collections {% if not require_reload %} @@ -12,9 +12,14 @@ {% endif %}
- {% for collection in collections %} -
{{collection.name}} ({{ collection.get_posts_count() }}p, {{ collection.get_threads_count() }}t)
- {% endfor %} + {%- for collection in collections -%} + {%- set pc = collection.get_posts_count() -%} + {%- set tc = collection.get_threads_count() -%} +
+ {{collection.name}} + {{ pc }}p, {{ tc }}t +
+ {%- endfor -%}
diff --git a/data/static/css/style.css b/data/static/css/style.css index 2efa0c8..776b051 100644 --- a/data/static/css/style.css +++ b/data/static/css/style.css @@ -1316,14 +1316,17 @@ footer { border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); position: absolute; - right: 0; + margin: 0; min-width: 400px; + max-width: 400px; padding: 10px; z-index: 100; + color: unset; } .bookmark-dropdown-item { display: flex; + justify-content: space-between; padding: 10px 0; margin: 10px 0; cursor: pointer; @@ -1342,6 +1345,7 @@ footer { width: 24px; height: 24px; padding: 0 10px; + flex-shrink: 0; } .bookmark-dropdown-item.selected { background-color: #beb1ce; @@ -1358,6 +1362,17 @@ footer { justify-content: space-between; } +.bookmark-dropdown-item-name { + overflow: hidden; + text-overflow: ellipsis; +} + +.bookmark-dropdown-item-stats { + padding: 0 10px; + flex-shrink: 0; + margin-left: auto; +} + .bookmark-dropdown-items-container { max-height: 300px; overflow: scroll; diff --git a/data/static/css/theme-otomotone.css b/data/static/css/theme-otomotone.css index ced1e0d..f4dac80 100644 --- a/data/static/css/theme-otomotone.css +++ b/data/static/css/theme-otomotone.css @@ -1316,14 +1316,17 @@ footer { border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); position: absolute; - right: 0; + margin: 0; min-width: 400px; + max-width: 400px; padding: 10px; z-index: 100; + color: unset; } .bookmark-dropdown-item { display: flex; + justify-content: space-between; padding: 10px 0; margin: 10px 0; cursor: pointer; @@ -1342,6 +1345,7 @@ footer { width: 24px; height: 24px; padding: 0 10px; + flex-shrink: 0; } .bookmark-dropdown-item.selected { background-color: #8a5584; @@ -1358,6 +1362,17 @@ footer { justify-content: space-between; } +.bookmark-dropdown-item-name { + overflow: hidden; + text-overflow: ellipsis; +} + +.bookmark-dropdown-item-stats { + padding: 0 10px; + flex-shrink: 0; + margin-left: auto; +} + .bookmark-dropdown-items-container { max-height: 300px; overflow: scroll; diff --git a/data/static/css/theme-peachy.css b/data/static/css/theme-peachy.css index c500a34..d64faa2 100644 --- a/data/static/css/theme-peachy.css +++ b/data/static/css/theme-peachy.css @@ -1316,14 +1316,17 @@ footer { border-radius: 16px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); position: absolute; - right: 0; + margin: 0; min-width: 400px; + max-width: 400px; padding: 6px; z-index: 100; + color: unset; } .bookmark-dropdown-item { display: flex; + justify-content: space-between; padding: 6px 0; margin: 6px 0; cursor: pointer; @@ -1342,6 +1345,7 @@ footer { width: 24px; height: 24px; padding: 0 6px; + flex-shrink: 0; } .bookmark-dropdown-item.selected { background-color: #b54444; @@ -1358,6 +1362,17 @@ footer { justify-content: space-between; } +.bookmark-dropdown-item-name { + overflow: hidden; + text-overflow: ellipsis; +} + +.bookmark-dropdown-item-stats { + padding: 0 6px; + flex-shrink: 0; + margin-left: auto; +} + .bookmark-dropdown-items-container { max-height: 300px; overflow: scroll; diff --git a/data/static/js/bitties/pyrom-bitty.js b/data/static/js/bitties/pyrom-bitty.js index 1b4835e..f700561 100644 --- a/data/static/js/bitties/pyrom-bitty.js +++ b/data/static/js/bitties/pyrom-bitty.js @@ -15,19 +15,39 @@ export default class { const frag = res.value; el.appendChild(frag); const menu = el.childNodes[0]; - const bRect = el.getBoundingClientRect() - if (bRect.left < window.innerWidth - bRect.right) { - menu.style.right = 'unset'; + menu.showPopover(); + + const bRect = el.getBoundingClientRect(); + const menuRect = menu.getBoundingClientRect(); + const preferredLeft = bRect.right - menuRect.width; + const preferredRight = bRect.right; + const enoughSpace = preferredLeft >= 0; + const scrollY = window.scrollY || window.pageYOffset; + if (enoughSpace) { + menu.style.left = `${preferredLeft}px`; + } else { + menu.style.left = `${bRect.left}px`; } + menu.style.top = `${bRect.bottom + scrollY}px`; + + menu.addEventListener('beforetoggle', (e) => { + if (e.newState === 'closed') { + // if it's still in the tree, remove it + // the delay is required to make sure its removed instantly when + // clicking the button when the menu is open + setTimeout(() => {menu.remove()}, 100); + }; + }, { once: true }); + } else if (el.childElementCount > 0) { el.removeChild(el.childNodes[0]); } } selectBookmarkCollection(ev, el) { - const clicked = ev.target; + const clicked = ev.sender; - if (clicked === el) { + if (ev.sender === el) { if (clicked.classList.contains('selected')) { clicked.classList.remove('selected'); } else { diff --git a/sass/_default.scss b/sass/_default.scss index 94867d7..ca87303 100644 --- a/sass/_default.scss +++ b/sass/_default.scss @@ -1242,7 +1242,7 @@ $bookmarks_dropdown_background_color: $ACCENT_COLOR !default; $bookmarks_dropdown_border_radius: $DEFAULT_BORDER_RADIUS !default; $bookmarks_dropdown_border: $button_border !default; $bookmarks_dropdown_shadow: 0 0 30px rgba(0, 0, 0, 0.25) !default; -$bookmarks_dropdown_min_width: 400px !default; +$bookmarks_dropdown_width: 400px !default; $bookmarks_dropdown_padding: $MEDIUM_PADDING !default; .bookmarks-dropdown { background-color: $bookmarks_dropdown_background_color; @@ -1250,10 +1250,12 @@ $bookmarks_dropdown_padding: $MEDIUM_PADDING !default; border-radius: $bookmarks_dropdown_border_radius; box-shadow: $bookmarks_dropdown_shadow; position: absolute; - right: 0; - min-width: $bookmarks_dropdown_min_width; + margin: 0; + min-width: $bookmarks_dropdown_width; + max-width: $bookmarks_dropdown_width; padding: $bookmarks_dropdown_padding; z-index: 100; + color: unset; } $bookmark_dropdown_item_padding: $MEDIUM_PADDING 0 !default; @@ -1267,6 +1269,7 @@ $bookmark_dropdown_item_icon_size: 24px !default; $bookmark_dropdown_item_icon_padding: 0 $MEDIUM_PADDING !default; .bookmark-dropdown-item { display: flex; + justify-content: space-between; padding: $bookmark_dropdown_item_padding; margin: $bookmark_dropdown_item_margin; cursor: pointer; @@ -1286,6 +1289,7 @@ $bookmark_dropdown_item_icon_padding: 0 $MEDIUM_PADDING !default; width: $bookmark_dropdown_item_icon_size; height: $bookmark_dropdown_item_icon_size; padding: $bookmark_dropdown_item_icon_padding; + flex-shrink: 0; } &.selected { @@ -1305,6 +1309,18 @@ $bookmark_dropdown_item_icon_padding: 0 $MEDIUM_PADDING !default; justify-content: space-between; } +.bookmark-dropdown-item-name { + overflow: hidden; + text-overflow: ellipsis; +} + +$bookmark_dropdown_item_stats_padding: 0 $MEDIUM_PADDING !default; +.bookmark-dropdown-item-stats { + padding: $bookmark_dropdown_item_stats_padding; + flex-shrink: 0; + margin-left: auto; +} + $bookmark_dropdown_items_container_max_height: 300px !default; .bookmark-dropdown-items-container { max-height: $bookmark_dropdown_items_container_max_height;