New (much more stable) tag layout

yadc/assets/css/base-types.scss

@@ -182,7 +182,7 @@ label {
 }
 
 
-form .tag-input, .tag-input form {
+.tag-input {
     .tag-suggester {
         // width: calc(100% - 50px);
         width: 100%;
@@ -225,39 +225,49 @@ form .tag-input, .tag-input form {
         }
 
         > a {
+            display: flex;
+            justify-content: space-between;
+            overflow: hidden;
+            // align-items: center;
+            align-items: baseline;
+
+            .content {
+                margin: 0 .4em;
+                flex-grow: 1;
+                flex-basis: 100%;
+
+                word-break: break-all;
+                word-wrap: break-word;
+            }
+
+            .tag-right {
+                
+            }
+            .count {
+                font-size: .8em;
+
+                margin-right: .4em;
+            }
+
+
             margin: .2em;
-            // margin: 2px 2px;
             // padding: .4em .75em;
             padding: .35em .6em;
 
-            //text-align: center;
             border-radius: 4px;
             background-color: #121212ff;
 
             cursor: pointer;
             > * { pointer-events: none; }
 
-            > .fa-tag {
-                font-size: .9em;
-                margin-right: 2px;
-            }
-
-            > .count {
-                // display: none;
-                font-size: .8em;
-            }
-
             &:not(:hover) {
-                > span.close {
-                    display: none;
-                }
-                > span.plus {
-                    display: none;
-                }
+                span.close {
+                    // display: none;
+                    opacity: 0;
                 }
-            &:hover {
-                > span.count {
-                    display: none;
+                span.plus {
+                    // display: none;
+                    opacity: 0;
                 }
             }
 

yadc/assets/js/taginput.js

@@ -16,11 +16,15 @@ function create_selection_tag(tagname) { // CLEAR
     tag.dataset.tagname = tagname
 
     tag.insertAdjacentHTML("beforeend", `
+        <span class="tag-icon">
             <span class="fa fa-tag"></span>
-        <span class="name"></span>
+        </span>
+        <span class="content"></span>
+        <span class="tag-right">
             <span class="fa fa-close close"></span>
+        </span>
     `)
-    tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
+    tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
     // tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
     return tag
 }
@@ -32,11 +36,15 @@ function create_suggestion_tag(tagname) { // CLEAR
     tag.dataset.tagname = tagname
 
     tag.insertAdjacentHTML("beforeend", `
+        <span class="tag-icon">
             <span class="fa fa-tag"></span>
-        <span class="name"></span>
+        </span>
+        <span class="content"></span>
+        <span class="tag-right">
             <span class="fa fa-plus plus"></span>
+        </span>
     `)
-    tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
+    tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
     return tag
 }
 

yadc/static/all.js

@@ -73,11 +73,15 @@ function create_selection_tag(tagname) { // CLEAR
     tag.dataset.tagname = tagname
 
     tag.insertAdjacentHTML("beforeend", `
+        <span class="tag-icon">
             <span class="fa fa-tag"></span>
-        <span class="name"></span>
+        </span>
+        <span class="content"></span>
+        <span class="tag-right">
             <span class="fa fa-close close"></span>
+        </span>
     `)
-    tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
+    tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
     // tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
     return tag
 }
@@ -89,11 +93,15 @@ function create_suggestion_tag(tagname) { // CLEAR
     tag.dataset.tagname = tagname
 
     tag.insertAdjacentHTML("beforeend", `
+        <span class="tag-icon">
             <span class="fa fa-tag"></span>
-        <span class="name"></span>
+        </span>
+        <span class="content"></span>
+        <span class="tag-right">
             <span class="fa fa-plus plus"></span>
+        </span>
     `)
-    tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
+    tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
     return tag
 }
 

yadc/templates/layout/base_sidebar_tags.html

@@ -1,7 +1,7 @@
 {% extends 'layout/base_sidebar.html' %}
 
 {% block sidebar %}
-<article class="rating">
+<!-- <article class="rating">
     <h3>Rating</h3>
     <form action="{{ self.search_endpoint() }}" method="get">
         <ul class="rating-input">
@@ -12,13 +12,13 @@
             {% endfor %}
         </ul>
     </form>
-</article>
-<article class="tags tag_input">
+</article> -->
+<article class="tags">
     <h3>Search</h3>
     <div class="tag-input">
         <form action="{% block search_endpoint %}{{ url_for('post.posts') }}{% endblock %}" method="get">
             <div class="tag-suggester" data-inputname="tags">
-                <input type="text" name="tags" autocomplete="off" value="{{ request.args.get('tags', '') }}">
+                <input type="text" name="tags" autocomplete="off" placeholder="Search for tags" value="{{ request.args.get('tags', '') }}">
                 <div class="tag-container suggest-dropdown"></div>
             </div>
             <!-- <input type="submit" value="Search"> -->
@@ -28,11 +28,16 @@
             <div class="tag-container tags-inpage">
                 {% for tag in tags %}
                 <a class="taginpage" data-tagname="{{ tag.content }}" href="{{ tag.endpoint }}">
+                    <span class="tag-icon">
                         <span class="fa fa-tag"></span>
-                    <span class="name">{{ tag.content_deser }}</span>
+                    </span>
+                    <span class="content">{{ tag.content_deser }}</span>
                     <span class="count">{{ tag.count }}</span>
+                    <span class="tag-right">
                         <span class="fa fa-plus plus"></span>
-                    <!-- <span class="post_ids">{{ tag.post_ids }}</span> -->
+                        {#<span class="fa fa-close close"></span>#}
+                    </span>
+                    {#<span class="post_ids">{{ tag.post_ids }}</span>#}
                 </a>
                 {% endfor %}
             </div>