Improve newui metadata converter

- Make textarea and code-box monospace (might be subjective)
- Jump to converted data after form submit
- Make file upload label work

Closes: #1094

modules/admin/templates/metadata_converter.twig

@@ -7,20 +7,19 @@
     {%- include "@admin/includes/menu.twig" %}
 
     <h2>{{ pagetitle }}</h2>
-    <form method="post" class="pure-form" enctype="multipart/form-data">
+    <form method="post" class="pure-form" enctype="multipart/form-data" action="#converted">
         <h3> {% trans 'XML metadata' %}</h3>
         <div class="pure-control-group">
-            <textarea name="xmldata" rows="20" class="text-area edge">{{ xmldata }}</textarea>
+            <textarea name="xmldata" rows="20" class="text-area edge xmldata">{{ xmldata }}</textarea>
         </div>
         <br>
         <div class="center">
             <div class="pure-button-group two-elements" role="group">
                 <label class="pure-button">
                     <span class="fa fa-folder-open"></span>{{ 'or select a file:'|trans }}
-                    <input type="file" name="xmlfile" class="hidden" multiple>
+                    <input type="file" name="xmlfile" class="hidden" id="file-input">
                 </label>
-                {#needs translation#}
-                <label id="show-file" class="pure-button hollow show-files" disabled>No file selected.</label>
+                <label id="show-file" class="pure-button hollow show-files" disabled>{{ 'No file selected.'|trans }}</label>
             </div>
             <br>
             <button class="pure-button pure-button-red pure-input-1-3">{{ 'Parse'|trans }}</button>
@@ -29,7 +28,7 @@
 
     {% if output -%}
     <br>
-    <h2>{{ 'Converted metadata'|trans }}</h2>
+    <h2 id="converted">{{ 'Converted metadata'|trans }}</h2>
         {% for type, text in output if text -%}
 {# spaceless is to work around a clipboard.js bug that would add extra whitespace #}
 {% spaceless %}
@@ -50,4 +49,15 @@
         {%- endfor -%}
     {% endif -%}
 {% endblock content -%}
-
+{% block postload %}
+<script>
+    $('body').on('change', '#file-input', function () {
+        var files = this.files;
+        var fileNames = [];
+        for (var i = 0; i < files.length; i++) {
+            fileNames.push(files.item(i).name);
+        }
+        $('#show-file').html(fileNames.join(", "));
+    });
+</script>
+{% endblock postload %}

src/css/default.scss

@@ -115,6 +115,9 @@ pre, code, kbd, samp, tt {
   //background-color: rgba(0, 0, 0, .1);
   padding: 0 .2rem;
 }
+.xmldata {
+  font-family: monospace;
+}
 
 /************************************************************
  * BUTTONS
@@ -469,6 +472,7 @@ CONTENT
   width: 100%;
   height: 100%;
   white-space: pre-wrap;
+  font-family: monospace;
   &::selection {
     color: black;
     background: $lighYellow;

templates/metadata-converter.twig

@@ -4,17 +4,17 @@
 {% set i=1 %}
 {% block content %}
     <h1>{{ pagetitle }}</h1>
-    <form method="post" class="pure-form" enctype="multipart/form-data">
+    <form method="post" class="pure-form" enctype="multipart/form-data" action="#converted">
         <h3>{% trans 'XML metadata' %}</h3>
         <div class="pure-control-group">
-            <textarea name="xmldata" rows="20" class="text-area edge">{{ xmldata }}</textarea>
+            <textarea name="xmldata" rows="20" class="text-area edge xmldata">{{ xmldata }}</textarea>
         </div>
         <br>
         <div class="center">
             <div class="pure-button-group two-elements" role="group">
                 <label class="pure-button">
                     <span class="fa fa-folder-open"></span>{{ 'or select a file:'|trans }}
-                    <input type="file" name="xmlfile" class="hidden" multiple>
+                    <input type="file" name="xmlfile" class="hidden" id="file-input">
                 </label>
                 <label id="show-file" class="pure-button hollow show-files" disabled>{{ 'No file selected.'|trans }}</label>
             </div>
@@ -25,7 +25,7 @@
 
     {% if output -%}
     <br>
-    <h2>{{ 'Converted metadata'|trans }}</h2>
+    <h2 id="converted">{{ 'Converted metadata'|trans }}</h2>
         {% for type, text in output if text -%}
 {# spaceless is to work around a clipboard.js bug that would add extra whitespace #}
 {% spaceless %}
@@ -46,4 +46,15 @@
         {%- endfor -%}
     {% endif -%}
 {% endblock content -%}
-
+{% block postload %}
+<script>
+    $('body').on('change', '#file-input', function () {
+        var files = this.files;
+        var fileNames = [];
+        for (var i = 0; i < files.length; i++) {
+            fileNames.push(files.item(i).name);
+        }
+        $('#show-file').html(fileNames.join(", "));
+    });
+</script>
+{% endblock postload %}