Made the metadata table look pretty

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index bb2a2cbd120b4c82933b860a2774bb4e2685bb15..df0e850b2e1e19570995094c68a24aea35d64159 100644 (file)
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -610,6 +610,24 @@ a img.media_image {
   cursor: zoom-in;
 }
 
+table.metadata_info {
+  font-size:85%;
+  margin-left:10px;
+}
+
+table.metadata_info tr.highlight {
+  color:#f7f7f7;
+}
+
+table.metadata_info th {
+  font-weight: bold;
+  border-spacing: 10px;
+  text-align: left;
+}
+table.metadata_info td {
+  padding: 4px 8px;
+}
+
 /* icons */
 
 img.media_icon {

diff --git a/mediagoblin/templates/mediagoblin/utils/metadata_table.html b/mediagoblin/templates/mediagoblin/utils/metadata_table.html
index b4c37dbd7eff1d084770d006905c14b5f9bad581..edbee2c2d1c30b14a48b2fc8a156f8f5f7229592 100644 (file)
--- a/mediagoblin/templates/mediagoblin/utils/metadata_table.html
+++ b/mediagoblin/templates/mediagoblin/utils/metadata_table.html
@@ -20,10 +20,12 @@
   {%- set metadata=media_entry.media_metadata %}
   {%- set metadata_context=metadata['@context'] %}
   {%- if metadata %}
-      <table context="{{ metadata_context }}">
-        {%- for key, value in metadata.iteritems() if not key=='@context' %}
-            <tr>
-              <td>{{ format_predicate(key) }}</td>
+      <h3>{% trans %}Metadata Information{% endtrans %}</h3>
+      <table context="{{ metadata_context }}" class="metadata_info">
+        {%- for key, value in metadata.iteritems() if (
+            not key=='@context' and value) %}
+            <tr {% if loop.index%2 == 1 %}class="highlight"{% endif %}>
+              <th>{{ format_predicate(key) }}</th>
               <td property="{{ key }}" typeof="{{ value }}">
                 {{ value }}</td>
             </tr>