chg: style changes

Author: righel

frontend/src/components/attributes/AttributesIndex.vue

@@ -64,12 +64,12 @@ function handleAttributesUpdated(event) {
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th style="width: 30%" scope="col">value</th>
-                    <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">tags</th>
-                    <th style="width: 10%" scope="col">type</th>
-                    <th style="width: 10%" scope="col" class="d-none d-sm-table-cell">timestamp</th>
-                    <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">distribution</th>
-                    <th style="width: 20%" scope="col" class="text-end">actions</th>
+                    <th scope="col">value</th>
+                    <th style="width: 400px;" scope="col" class="d-none d-sm-table-cell">tags</th>
+                    <th scope="col">type</th>
+                    <th scope="col" class="d-none d-sm-table-cell">timestamp</th>
+                    <th scope="col" class="d-none d-sm-table-cell">distribution</th>
+                    <th scope="col" class="text-end">actions</th>
                 </tr>
             </thead>
             <tbody>

frontend/src/components/objects/ObjectAttributesList.vue

@@ -42,12 +42,12 @@ function handleAttributeEnriched(attribute_id) {
     <table class="table table-striped">
         <thead>
             <tr>
-                <th style="width: 30%" scope="col">value</th>
-                <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">tags</th>
-                <th style="width: 10%" scope="col">type</th>
-                <th style="width: 10%" scope="col" class="d-none d-sm-table-cell">timestamp</th>
-                <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">distribution</th>
-                <th style="width: 20%" scope="col" class="text-end">actions</th>
+                <th scope="col">value</th>
+                <th style="width: 400px" scope="col" class="d-none d-sm-table-cell">tags</th>
+                <th scope="col">type</th>
+                <th scope="col" class="d-none d-sm-table-cell">timestamp</th>
+                <th scope="col" class="d-none d-sm-table-cell">distribution</th>
+                <th scope="col" class="text-end">actions</th>
             </tr>
         </thead>
         <tbody>

frontend/src/components/tags/TagsSelect.vue

@@ -68,18 +68,19 @@ onMounted(() => {
         },
         render: {
             option: function (data, escape) {
-                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + '" title="' + escape(data.name) + '">' +
+                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + ';" title="' + escape(data.name) + '">' +
                     escape(data.name) +
                     '</span>';
             },
             item: function (data, escape) {
-                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + '" title="' + escape(data.name) + '">' +
+                return '<span class="badge mx-1 tag" style="display:block; color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + ';" title="' + escape(data.name) + '"><span class="tag-label">' +
                     escape(data.name) +
-                    '</span>';
+                    '<span/></span>';
             }
         },
         onLoad() {
-            selectElement.value.tomselect.setValue(props.selectedTags.map(tag => tag.name), true);
+            let tags = props.selectedTags ? props.selectedTags.map(tag => tag.name) : [];
+            selectElement.value.tomselect.setValue(tags, true);
             initialising = false;
         },
         onItemRemove: function (tag) {
@@ -97,7 +98,6 @@ onMounted(() => {
             if (initialising) {
                 return;
             }
-            console.log(item);
             if (props.modelClass == "event") {
                 eventsStore.tag(props.model.id, tag);
                 return;
@@ -113,6 +113,8 @@ onMounted(() => {
 
 </script>
 
+<style></style>
+
 <template>
     <select ref="selectElement" multiple>
     </select>