Apply purecss to metadata-converter

- Change input type=file: style it like a label and add js function.

- Missing translations
- Converted metadata needs to be updated as well.

templates/metadata-converter.twig

 {% set pagetitle = 'Metadata parser'|trans %}
 {% extends "base.twig" %}
 
-    {%  set i=1 %}
+{%  set i=1 %}
 {% block content %}
     <h2>{{ pagetitle }}</h2>
-    <form method="post" enctype="multipart/form-data">
+    <form method="post" class="pure-form" enctype="multipart/form-data">
         <p> {% trans 'XML metadata' %}</p>
-        <p>
-         <textarea name="xmldata" rows="20" style="width:100%">{{ xmldata }}</textarea>
-        </p>
-        <p>
-            {{ 'or select a file:'|trans }}
-
-            <input type="file" name="xmlfile" />
-        </p>
-        <p>
-            <button type="submit" class="btn">{% trans %}Parse{% endtrans %}</button>
-        </p>
+        <div class="pure-control-group">
+            <textarea name="xmldata" rows="20" class="textarea">{{ xmldata }}</textarea>
+        </div>
+        <br>
+        <div class="center">
+            <div class="pure-button-group" role="group">
+                <label class="pure-button"><i class="fa fa-folder-open"> </i> Select a file...
+                    <input type="file" name="xmlfile" class="hidden" multiple>
+                </label>
+                <label id="show-file" class="pure-button show-files" disabled>No file selected.</label>
+            </div>
+            <br>
+            <button class="pure-button pure-input-1-3">{{ 'Parse'|trans }}</button>
+        </div>
     </form>
 
-    {% if output %}
-
+    {% if output -%}
+    <br>
     <h2>{{ 'Converted metadata'|trans }}</h2>
-
-
-        {% for type, text in output if text %}
-
+        {% for type, text in output if text -%}
+    <div class="inline"></div>
     <h3> {{ type }}</h3>
     <div class="metadatabox">
         <button data-clipboard-target="#metadata{{ loop.index }}" id="btn{{loop.index }}" class="btn topright clipboard-btn" onclick="metadata({{ loop.index }})" >
@@ -39,4 +40,3 @@
     {% endif -%}
 {% endblock content -%}
 
-

www/assets/css/src/default.css

@@ -149,6 +149,23 @@ input[type="file"]{
 .pure-select{
     float: right;
 }
+.pure-button-group .pure-button:first-child {
+    border: solid 1px #E6E6E6;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+ }
+.pure-button-group .pure-button:last-child {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+.pure-button-group .pure-button.show-files{
+    background-color: transparent;
+    border: solid 1px #ADADAD;
+    border-right: solid 1px #ADADAD;
+}
+
 /* SELECTIZE */
 .selectize-input, .selectize-dropdown, .selectize-input.dropdown-active{
     -webkit-border-radius: 0;

www/assets/js/src/script.js

@@ -45,7 +45,31 @@ function metadata(index) {
     console.log();
 }
 
+// Attach the `fileselect` event to all file inputs on the page
+$(document).on('change', ':file', function() {
+    var input = $(this),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label]);
+});
+
 $(document).ready(function() {
     $('.language-menu').selectize();
     $('#organization').selectize();
+
+    // Watch for custom `fileselect` event
+    $(':file').on('fileselect', function(event, numFiles, label) {
+
+        var input = $(this).parents('.pure-button-group').find(':text'),
+            log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+        if( input.length ) {
+            input.val(log);
+        } else {
+            if( log ) {
+                document.getElementById('show-file').innerHTML = log;
+            }
+        };
+    });
+
 });