Incorporate @Macrobb metadata widget and content visual changes.

GitLab issue #378

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

HISTORY.rst

@@ -1,8 +1,9 @@
 2.5.3 (2017-07-XX)
 ==================
 - Fix HTML mark up in window title. GitLab #397.
-- Add support for emailing documents to a recipient list. GitLab #396
-  
+- Add support for emailing documents to a recipient list. GitLab #396.
+- Backport metadata widget changes from @Macrobb. GitLab #378.
+
 2.5.2 (2017-07-08)
 ==================
 - Improve new document creation signal handling.

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

@@ -172,10 +172,12 @@ a i {
     margin-right: 2px;
 }
 
+/* Notifications */
 #toast-container > div {
   opacity: 1;
 }
 
+/* User menu */
 .link-text-span {
     padding-left: 10px;
     padding-right: 20px;
@@ -232,3 +234,18 @@ a i {
       display:block !important;
   }
 }
+
+/* Metadata */
+.metadata-display {
+    display: inline-block;
+    min-width: 200px;
+    padding-right: 10px;
+    width: 49%;
+}
+
+/* Content */
+@media (min-width:1200px) {
+    .container-fluid {
+        width: 95%;
+    }
+}

mayan/apps/appearance/templates/appearance/base.html

@@ -50,7 +50,7 @@
             {% block content_plain %}{% endblock %}
         {% else %}
             <nav class="navbar navbar-default navbar-fixed-top">
-                <div class="container">
+                <div class="container-fluid">
                     <div class="navbar-header">
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                             <span class="sr-only">{% trans 'Toggle navigation' %}</span>
@@ -84,7 +84,7 @@
                 </div>
             </nav>
 
-            <div class="container">
+            <div class="container-fluid">
                 <div class="row">
                     <div class="col-xs-12">
                         {% block messages %}{% endblock %}

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()
+        )
     )