prettier tags in table

templates/_form_macros.html.tera

@@ -104,7 +104,7 @@
 		let hiden_field = document.querySelector('#field-{{field.key}}');
 
 		let onchange = () => {
-			let values = taggle.tag.values.join(" ");
+			let values = taggle.tag.values.join(",");
 			hiden_field.setAttribute("value", values);
 		};
 

templates/index.html.tera

@@ -28,17 +28,27 @@
 					<a href="/delete/{{card.id}}" onclick="return confirm('Delete card?')">Delete</a>
 				</td>
 			{%- for field in card.fields %}
-				<td>
 				{%- if field.kind == "bool" -%}
+				<td>
 					{% if field.checked %}
 						✔
 					{% else %}
 						✘
 					{% endif %}
-				{%- else -%}
-					{{ field.value }}
-				{%- endif -%}
 				</td>
+
+				{%- elif field.kind == "tags" or field.kind == "free_tags" -%}
+				<td class="tags">
+					{% for tag in field.tags %}
+						<span class="tag">{{ tag }}</span>
+					{% endfor %}
+				</td>
+
+				{%- else -%}
+				<td>
+					{{ field.value }}
+				</td>
+				{%- endif -%}
 			{%- endfor %}
 			</tr>
 		{% endfor %}

templates/static/style.css

@@ -143,6 +143,18 @@ textarea:focus,
 	border-bottom: 2px solid silver;
 }
 
+.cards-table td.tags {
+	padding: .25rem;
+}
+
+.cards-table .tag {
+	background: #E2E1DF;
+	font-size: 90%;
+	padding: 0.25rem .45rem;
+	border-radius: 3px;
+	display: inline-block;
+}
+
 .paginate {
 	margin: 1rem auto;
 	width: 300px;
@@ -182,3 +194,4 @@ textarea:focus,
 	color: gray;
 	background: transparent;
 }
+