review metadata view

Author: allyoucanmap

geonode_mapstore_client/client/themes/geonode/less/_metadata.less

@@ -145,31 +145,15 @@
         font-size: 1.5rem;
         padding: 0.5rem 0.75rem;
     }
-    .gn-metadata-group {
+    .gn-metadata-group:not(.gn-metadata-group-view) {
         max-width: 60ch;
     }
     .field-description {
         font-size: @font-size-sm;
         font-style: italic;
     }
-    .gn-metadata-group-value {
-        padding: 0.5rem 0;
-    }
     .field {
         padding: 0 0.75rem;
-        > label {
-            a {
-                position: absolute;
-                transform: translate(-100%);
-                opacity: 0;
-                padding: 0 0.2rem;
-            }
-            &:hover {
-                a {
-                    opacity: 1;
-                }
-            }
-        }
     }
     .gn-metadata-group > .field-object {
         padding: 0.75rem;
@@ -181,6 +165,35 @@
         font-size: 0.9rem;
         border: none;
     }
+
+    dl {
+        display: grid;
+        grid-template-columns: max-content auto;
+        padding: 0 0.75rem;
+        dt {
+            padding: 0.25rem;
+            text-align: right;
+            grid-column-start: 1;
+            > label {
+                margin: 0;
+                a {
+                    position: absolute;
+                    transform: translate(-100%);
+                    opacity: 0;
+                    padding: 0 0.2rem;
+                }
+                &:hover {
+                    a {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        dd {
+            padding: 0.25rem;
+            grid-column-start: 2;
+        }
+    }
 }
 
 .gn-metadata-page {

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field.html

@@ -0,0 +1,11 @@
+<dt>
+    <label id="{{prefix}}_{{name}}__label" class="control-label" for="{{prefix}}_{{name}}">
+        <a href="#{{prefix}}_{{name}}__label"><i class="fa fa-link"></i></a>
+        {{ property.schema.title|default:name }}
+    </label>
+</dt>
+<dd>
+    <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
+        {% include 'geonode-mapstore-client/snippets/metadata_field_value.html' with name=name property=property %}
+    </div>
+</dd>

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field_value.html

@@ -0,0 +1,18 @@
+{% if property.schema.format == 'date-time' %}
+    {{property.value|date:"DATETIME_FORMAT"}}
+{% elif name == 'tkeywords' %}
+    <ul>
+        {% for t_id, tkeyword in property.value.items %}
+            <li>{{tkeyword.schema.title|default:t_id}}</li>
+            <ul>
+                {%for tkeyword_item in tkeyword.value %}
+                    <li>
+                        {{tkeyword_item.label}}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endfor %}
+    </ul>
+{% else %}
+    {{property.value}}
+{% endif %}

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_fields.html

@@ -1,50 +1,7 @@
-
+<dl>
 {% for name, property in metadata.items %}
-    <div class="form-group field field-{{property.schema.type}}">
-        <label id="{{prefix}}_{{name}}__label" class="control-label" for="{{prefix}}_{{name}}">
-            <a href="#{{prefix}}_{{name}}__label"><i class="fa fa-link"></i></a>
-            {{ property.schema.title|default:name }}
-        </label>
-        {% if property.schema.description %}
-        <p id="{{prefix}}_{{name}}__description" class="field-description">
-            {{property.schema.description}}
-        </p>
-        {% endif %}
-        {% if property.schema.type == 'object' %}
-            <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
-                {%with prefix=""|add:prefix|add:'_'|add:name metadata=property.value template_name="geonode-mapstore-client/snippets/metadata_fields.html" %}
-                   {%include template_name %}
-                {%endwith%}
-            </div>
-        {% elif property.schema.type == 'array' %}
-            <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
-                {% if property.schema.items.type == 'object' %}
-                    <table class="table">
-                        <thead>
-                            {% for entry in property.schema.items.properties %}
-                                <th>{{entry}}</th>
-                            {% endfor %}
-                        </thead>
-                        <tbody>
-                            {% for entry in property.value %}
-                                <tr>
-                                {% for key, val in entry.items %}
-                                    <td>{{val}}</td>
-                                {% endfor %}
-                                </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    {% for entry in property.value %}
-                        {{entry}}
-                    {% endfor %}
-                {% endif %}
-            </div>
-        {% else %}
-            <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
-                {{property.value}}
-            </div>
-        {% endif %}
-    </div>
+    {% block property %}
+        {% include 'geonode-mapstore-client/snippets/metadata_field.html' with prefix=prefix name=name property=property %}
+    {% endblock property %}
 {% endfor %}
+</dl>

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_list.html

@@ -2,11 +2,10 @@
     <div class="gn-metadata">
         <div class="gn-metadata-container">
             <div class="gn-metadata-layout">
-                {% include 'geonode-mapstore-client/snippets/metadata_list.html' with metadata_groups=metadata_groups prefix='metadata' title=resource.title title_id='gn-metadata-title' %}
                 <div class="gn-metadata-groups">
                     <div id="gn-metadata-title" class="gn-metadata-title">Metadata: {{resource.title}}</div>
                     {% for group_key, metadata in metadata_groups.items %}
-                    <div class="gn-metadata-group">
+                    <div class="gn-metadata-group gn-metadata-group-view">
                         <div class="gn-metadata-group-title">{{group_key}}</div>
                         {% include 'geonode-mapstore-client/snippets/metadata_fields.html' with metadata=metadata prefix='metadata' %}
                     </div>

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_view.html

@@ -1,16 +1,15 @@
 
 from django.shortcuts import render
 from django.utils.translation.trans_real import get_language_from_request
-from django.utils import formats
 from dateutil import parser
 
 def _parse_value(value, schema):
     schema_type = schema.get('type')
     format = schema.get('format')
     if schema_type == 'string' and format in ['date-time']:
         if type(value) == str:
-            return formats.date_format(parser.parse(value), "DATETIME_FORMAT")
-        return formats.date_format(value, "DATETIME_FORMAT")
+            return parser.parse(value)
+        return value
     if schema_type == 'string':
         if 'oneOf' in schema:
             for option in schema.get('oneOf'):