[Evaluation tool] Optimize "Error and warning messages" layout

CHANGELOG.rst

@@ -187,6 +187,8 @@ Changed
 
   * Hungarian
 
+* [Evaluation tool] Optimize "Error and warning messages" layout
+
 Fixed
 ~~~~~
 

site/css/main.css

@@ -12,9 +12,10 @@ p.value_explanation {
     padding: 6px 10px;
     border-radius: 5px;
 }
-/* See http://clrs.cc/ */
-.error       { background: #ff851b } /* Orange */
-.warning     { background: #ffdc00 } /* Yellow */
+/* See https://clrs.cc/ */
+.error       { background: #ff851b; padding: 3px; } /* Orange */
+.warning     { background: #ffdc00; padding: 3px; } /* Yellow */
+div.warning_error_message { margin: 5px 0 0 0; padding: 5px; background-color : white; opacity: 0.8; font-family: monospace;}
 span.year    { background: #ff851b } /* Orange */
 span.week    { background: #ffdc00 } /* Yellow */
 span.month   { background: #88ff88 }

site/js/helpers.js

@@ -1,3 +1,5 @@
+/* global $, , default_lat, default_lon, i18next, jQuery, mapCountryToLanguage, opening_hours, OpeningHoursTable, specification_url, YoHoursChecker */
+
 /* Constants {{{ */
 var nominatim_api_url = 'https://nominatim.openstreetmap.org/reverse';
 // var nominatim_api_url = 'https://open.mapquestapi.com/nominatim/v1/reverse.php';
@@ -189,9 +191,10 @@ function Evaluate (offset, reset) {
         var it = oh.getIterator(date);
     } catch (err) {
         crashed = err;
-        show_warnings_or_errors.innerHTML = '<p class="error">' + i18next.t('texts.filter.error') + ':<br />'
-            + '<textarea rows="' + crashed.split('\n').length + 1 + '" style="width: 100%" name="WarnErrors" readonly="readonly">' + crashed
-            + '</textarea></p>';
+        show_warnings_or_errors.innerHTML = `
+            <div class="error"> ${i18next.t('texts.filter.error')}
+                <div class="warning_error_message"> ${crashed} </div>
+            </div>`;
         show_time_table.innerHTML = '';
         show_results.innerHTML    = '';
     }
@@ -331,15 +334,18 @@ function Evaluate (offset, reset) {
 
         var warnings = oh.getWarnings();
         if (warnings.length > 0) {
-            show_warnings_or_errors.innerHTML += '<p class="warning">' + i18next.t('texts.filter.error') + ':<br />'
-                + '<textarea rows="' + (warnings.length + 1)
-                + '" style="width: 100%" name="WarnErrors" readonly="readonly">' + warnings.join('\n')
-                + '</textarea></p>';
+            show_warnings_or_errors.innerHTML += `
+            <div class="warning"> ${i18next.t('texts.filter.error')}
+                <div class="warning_error_message"> ${warnings.join('\n')} </div>
+            </div>`;
         }
 
         if (prettified.length > 255) {
-            show_warnings_or_errors.innerHTML += '<p>' + i18next.t('texts.value to long for osm',
-                { pretLength: prettified.length, valLength: value.length, maxLength: 255 }) + '</p>';
+            show_warnings_or_errors.innerHTML += `
+            <div class="warning"> ${i18next.t('texts.filter.error')}
+                <div class="warning_error_message"> ${i18next.t('texts.value to long for osm',
+                    { pretLength: prettified.length, valLength: value.length, maxLength: 255 })} </div>
+            </div>`;
         }
 
         show_time_table.innerHTML += OpeningHoursTable.drawTableAndComments(oh, it);