tags: css: Minor styling cleanups

- Use CSS based styling instead of styling based on bootstrap classes.

- Add a placeholder for the input box to easily locate it and convey what it
does.

- Drop dead code for '.tag-input .tag'.

- Drop some repeated data- attributes by using DOM navigation.

- Drop redundant styling.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>

plinth/templates/apps.html

@@ -11,29 +11,30 @@
 {% block tags %}
   {% if tags %}
     <div class="container">
-      <div class="dropdown searchable-dropdown mr-2">
+      <div class="dropdown searchable-dropdown">
         <div class="tag-input">
           <div id="selected-tags">
             {% for tag in tags %}
-              <span class="badge badge-light badge-pill tag-badge mr-2 d-flex align-items-center" data-tag="{{ tag }}">
-                  {% trans tag %}
-                  <button class="btn btn-sm btn-light remove-tag" data-tag="{{ tag }}">
-                      <i class="fa fa-times"></i>
-                  </button>
+              <span class="badge badge-light badge-pill tag-badge"
+                    data-tag="{{ tag }}">
+                {% trans tag %}
+                <button class="btn btn-sm btn-light remove-tag">
+                  <i class="fa fa-times"></i>
+                </button>
               </span>
             {% endfor %}
           </div>
           <input id="add-tag-input" type="search" class="form-control dropdown-toggle"
-                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                autocomplete="off">
+                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                 autocomplete="off" placeholder="{% trans "Search with tags" %}">
           <div class="dropdown-menu" aria-labelledby="add-tag-input">
-              <ul class="dropdown-items list-unstyled">
-                  {% for tag in all_tags %}
-                      {% if tag not in tags %}
-                          <li class="dropdown-item" data-value="{{ tag }}">{% trans tag %}</li>
-                      {% endif %}
-                  {% endfor %}
-              </ul>
+            <ul class="dropdown-items list-unstyled">
+              {% for tag in all_tags %}
+                {% if tag not in tags %}
+                  <li class="dropdown-item" data-value="{{ tag }}">{% trans tag %}</li>
+                {% endif %}
+              {% endfor %}
+            </ul>
           </div>
         </div>
       </div>

static/tags.js

@@ -110,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // Remove Tag handler.
     document.querySelectorAll('.remove-tag').forEach(button => {
         button.addEventListener('click', () => {
-            let tag = button.dataset.tag;
+            let tag = button.parentElement.dataset.tag;
             let tags = getTags(tag);
             updatePath(tags);
         });

static/themes/default/css/main.css

@@ -327,34 +327,15 @@ html {
     border: 1px solid #ced4da;
     border-radius: .25rem;
     padding: .375rem .75rem;
-    width: 100%;
     background-color: #fff;
-    margin-bottom: 3rem;
-}
-
-/* Selected Tags */
-.tag-input #selected-tags {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: .5rem;
-}
-
-.tag-input .tag {
-    background-color: #e9ecef; /* Light gray background */
-    border-radius: .25rem;
-    padding: .25rem .5rem;
-    margin-right: .25rem;
-    margin-bottom: .25rem;
-    display: flex;
-    align-items: center;
+    margin-bottom: 2rem;
 }
 
 /* Remove tag button */
 .tag-badge .remove-tag {
-  background-color: #f8f9fa; /* Match the tag's background color */
-  border: none;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
+    background-color: transparent; /* Match the tag's background color */
+    border: none;
+    cursor: pointer;
 }
 
 /* Adjust input field width */