Merge pull request #22 from twig/fix-label-overflow

fix category label overflow
twig · Apr 25, 2020 · 0db024d · 0db024d
2 parents 655a47a + 23748d1
commit 0db024d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,8 @@ If all you want is a working copy of the v0.380 code, then take a look at https:
 
 ## Improvements
 
+- labels on the left panel truncate when too long but maintain torrent count
+
 Added support for modern tooling such as:
 
 - [yarn](https://yarnpkg.com/)

diff --git a/dist/index.html b/dist/index.html
@@ -1615,43 +1615,43 @@ <h4 id="dlgDelete-caption">
     </div>
     <!-- Toolbar */ --><!-- /* Category/Label List -->
     <div id="mainCatList">
-      <div class="fll">
+      <div>
         <ul id="mainCatList-categories">
           <li id="cat_all">
-            <span class="icon"></span><span id="OV_CAT_ALL"></span>&nbsp;(<span
-              id="cat_all_c"
-              >0</span
+            <span class="icon"></span
+            ><span id="OV_CAT_ALL" class="flex-label"></span>(<span id="cat_all_c">0</span
             >)
           </li>
           <li id="cat_dls">
-            <span class="icon"></span><span id="OV_CAT_DL"></span>&nbsp;(<span
-              id="cat_dls_c"
-              >0</span
+            <span class="icon"></span
+            ><span id="OV_CAT_DL" class="flex-label"></span>(<span id="cat_dls_c">0</span
             >)
           </li>
           <li id="cat_com">
-            <span class="icon"></span><span id="OV_CAT_COMPL"></span>&nbsp;(<span
-              id="cat_com_c"
+            <span class="icon"></span
+            ><span id="OV_CAT_COMPL" class="flex-label"></span>(<span id="cat_com_c"
               >0</span
             >)
           </li>
           <li id="cat_act">
-            <span class="icon"></span><span id="OV_CAT_ACTIVE"></span>&nbsp;(<span
-              id="cat_act_c"
+            <span class="icon"></span
+            ><span id="OV_CAT_ACTIVE" class="flex-label"></span>(<span id="cat_act_c"
               >0</span
             >)
           </li>
           <li id="cat_iac">
-            <span class="icon"></span><span id="OV_CAT_INACTIVE"></span>&nbsp;(<span
-              id="cat_iac_c"
+            <span class="icon"></span
+            ><span id="OV_CAT_INACTIVE" class="flex-label"></span>(<span id="cat_iac_c"
               >0</span
             >)
           </li>
         </ul>
         <hr />
         <ul id="mainCatList-labels">
           <li id="cat_nlb">
-            <span id="OV_CAT_NOLABEL"></span>&nbsp;(<span id="cat_nlb_c">0</span>)
+            <span id="OV_CAT_NOLABEL" class="flex-label"></span>(<span id="cat_nlb_c"
+              >0</span
+            >)
           </li>
         </ul>
       </div>

diff --git a/src/css/main.scss b/src/css/main.scss
@@ -481,14 +481,10 @@ ul.folder-tabs.icon li a > span > span {
   border: 1px solid #868686;
   float: left;
   margin: 0 3px 0 0;
-  overflow: auto;
+  overflow-y: auto;
   position: relative;
 }
 
-#mainCatList > div {
-  min-width: 100%;
-}
-
 #mainCatList ul {
   list-style: none;
   white-space: nowrap;
@@ -522,6 +518,18 @@ ul.folder-tabs.icon li a > span > span {
   top: 50%;
 }
 
+#mainCatList {
+  ul > li {
+    display: flex;
+
+    .flex-label {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-right: 4px;
+    }
+  }
+}
+
 #cat_all .icon {
   background-position: 0 -176px !important;
 }

diff --git a/src/js/webui.js b/src/js/webui.js
@@ -1582,7 +1582,14 @@ function getraptor() {
         } else {
           labelList.grab(
             new Element("li", { id: labelId })
-              .appendText(label + " (")
+              .grab(
+                new Element("span", {
+                  class: "flex-label",
+                  text: label,
+                  title: label
+                })
+              )
+              .appendText(" (")
               .grab(new Element("span", { class: "count", text: count }))
               .appendText(")")
           );