Incorporate @Macrobb metadata widget and content visual changes.

GitLab issue #378

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

mayan/apps/appearance/static/appearance/css/base.css

@@ -171,3 +171,19 @@ a i {
 .tag-container .label {
     margin-right: 2px;
 }
+
+/* Metadata */
+.metadata-display {
+    display: inline-block;
+    min-width: 200px;
+    padding-right: 10px;
+    width: 49%;
+}
+
+/* Content */
+@media (min-width:1200px) {
+    .container {
+        min-width: 1170px;
+        width: 95%;
+    }
+}

mayan/apps/metadata/widgets.py

@@ -1,14 +1,14 @@
 from __future__ import unicode_literals
+from django.utils.html import format_html_join
 
 
 def get_metadata_string(document):
     """
     Return a formated representation of a document's metadata values
     """
-    return ', '.join(
-        [
-            '%s - %s' % (
-                document_metadata.metadata_type, document_metadata.value
-            ) for document_metadata in document.metadata.all()
-        ]
+    return format_html_join(
+        '\n', '<div class="metadata-display"><b>{}: </b><span data-metadata-type="{}" data-pk="{}">{}</span></div>',
+        ((document_metadata.metadata_type,document_metadata.metadata_type_id,document_metadata.id,document_metadata.value)
+            for document_metadata in document.metadata.all()
+        )
     )