make bookmark dropdown items better looking

app/templates/components/bookmarks_dropdown.html

@@ -4,7 +4,7 @@
 {% else %}
   {% set bookmark_url = url_for('api.bookmark_thread', thread_id=id) %}
 {% endif %}
-<div class="bookmarks-dropdown" data-bookmark-type="{{type}}" data-receive="saveBookmarks" data-bookmark-endpoint="{{bookmark_url}}" data-originally-contained-in="{{ selected.id if selected else ""}}" data-require-reload={{require_reload | int}}>
+<div class="bookmarks-dropdown" data-bookmark-type="{{type}}" data-receive="saveBookmarks" data-bookmark-endpoint="{{bookmark_url}}" data-originally-contained-in="{{ selected.id if selected else ""}}" data-require-reload={{require_reload | int}} popover=auto>
   <div class="bookmarks-dropdown-header">
     <span>Bookmark collections</span>
     {% if not require_reload %}
@@ -12,9 +12,14 @@
     {% endif %}
   </div>
   <div class="bookmark-dropdown-items-container">
-  {% for collection in collections %}
+  {%- for collection in collections -%}
-    <div class="bookmark-dropdown-item {{ "selected" if selected and (selected.id | int) == (collection.id | int) else ""}}" data-send="selectBookmarkCollection" data-receive="selectBookmarkCollection" data-collection-id="{{collection.id}}">{{collection.name}} ({{ collection.get_posts_count() }}p, {{ collection.get_threads_count() }}t)</div>
+  {%- set pc = collection.get_posts_count() -%}
-  {% endfor %}
+  {%- set tc = collection.get_threads_count() -%}
+    <div class="bookmark-dropdown-item {{ "selected" if selected and (selected.id | int) == (collection.id | int) else ""}}" data-send="selectBookmarkCollection" data-receive="selectBookmarkCollection" data-collection-id="{{collection.id}}">
+    <span class="bookmark-dropdown-item-name">{{collection.name}}</span>
+    <span class="bookmark-dropdown-item-stats"><abbr title="{{ pc }} {{('post' | pluralize(pc))}}">{{ pc }}p</abbr>, <abbr title="{{ tc }} {{('thread' | pluralize(tc))}}">{{ tc }}t</abbr></span>
+    </div>
+  {%- endfor -%}
   </div>
   <span>
     <input type="text" placeholder="Memo" class="bookmark-memo-input" value="{{memo}}"></input>

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;

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;

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;

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()
+      menu.showPopover();
-      if (bRect.left < window.innerWidth - bRect.right) {
+
-        menu.style.right = 'unset';
+      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 {

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;
+  margin: 0;
-  min-width: $bookmarks_dropdown_min_width;
+  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;