Css optimisation

- Change metadatabox to a general code-box, code-box-content and code-box-title
- Change xmlarea to text-area
- Update templates that where using old classes

modules/cron/templates/croninfo-result.twig

@@ -7,7 +7,7 @@
 {{ 'Here are the result for the cron job execution:'|trans }}
 </p>
 
-<div class="metadatabox metadata-code">
+<div class="code-box code-box-content">
 <h2>{{ 'Cron report'|trans }}</h2>
 
 <code>

modules/cron/templates/croninfo.twig

@@ -6,7 +6,7 @@
     <p>{{ 'Cron is a way to run things regularly on unix systems.'|trans }}<br /><br /></p>
     <p>{{ 'Here is a suggestion for a crontab file:'|trans }}<br /><br /></p>
 
-    <div class="metadatabox metadata-code">
+    <div class="code-box code-box-content">
         <code>
         {% for url in urls %}
                 # {{ 'Run cron:'|trans }} [{{ url.tag }}]<br />

templates/error.twig

@@ -33,16 +33,15 @@
     </div>
 
     {# print out exception only if the exception is available #}
-    {% if showerrors %}
+    {% if showerrors -%}
         <h2>{{'{errors:debuginfo_header}' | trans}}</h2>
         <p>{{'{errors:debuginfo_text}' | trans}}</p>
-
-        {# TODO: Update class #}
-        <div class="metadatabox">
-            <pre>{{ error.exceptionMsg }}</pre>
-            <pre>{{ error.exceptionTrace }}</pre>
+        <div class="code-box code-box-content">
+            <pre>{{ error.exceptionMsg }}<br>
+                {{ error.exceptionTrace }}
+            </pre>
         </div>
-    {% endif %}
+    {%- endif %}
 
     {# Add error report submit section if we have a valid technical contact. 'errorreportaddress' will only be set if
        the technical contact email address has been set. #}
@@ -56,8 +55,9 @@
             <p>
                 <textarea class="metadatabox" name="text" rows="6" cols="50">{{ '{errors:report_explain}' | trans }}</textarea>
             </p>
+
+            <textarea class="text-area edge" name="text" rows="6" cols="50">{{ '{errors:report_explain}' | trans }}</textarea>
         </form>
-        <p>
             <input type="hidden" name="reportId" value="{{ error.reportId }}" />
             <button type="submit" name="send" class="btn">{{ '{errors:report_submit}' | trans }}</button>
         </p>

templates/metadata-converter.twig

@@ -7,7 +7,7 @@
     <form method="post" class="pure-form" enctype="multipart/form-data">
         <h3> {% trans 'XML metadata' %}</h3>
         <div class="pure-control-group">
-            <textarea name="xmldata" rows="20" class="xmlarea edge">{{ xmldata }}</textarea>
+            <textarea name="xmldata" rows="20" class="text-area edge">{{ xmldata }}</textarea>
         </div>
         <br>
         <div class="center">
@@ -26,16 +26,16 @@
     <br>
     <h2>{{ 'Converted metadata'|trans }}</h2>
         {% for type, text in output if text -%}
-    <div class="metadatabox">
-        <div class="metadata-type">
+    <div class="code-box">
+        <div class="code-box-title">
             <h3> {{ type }}</h3>
-            <button data-clipboard-target="#metadata{{ loop.index }}" id="btn{{loop.index }}" class="pure-button right clipboard-btn" onclick="metadata({{ loop.index }})" >
+            <button data-clipboard-target="#metadata{{ loop.index }}" id="btn{{ loop.index }}" class="pure-button right clipboard-btn">
                 <i class="fa fa-copy"></i>
             </button>
         </div>
-        <div class="metadata-code">
+        <div class="code-box-content">
             <pre id="metadata{{ loop.index }}">
-                {%- spaceless %}{{ text }}{% endspaceless %}
+                {%- spaceless %}{{ text }}{% endspaceless -%}
             </pre>
         </div>
     </div>

www/assets/css/src/default.css

@@ -123,10 +123,12 @@ CONTENT
 }
 
 .message-box {
+    background-color: #f4f4f4;
+    border-left-color: #444444;
     border-left-style: solid;
     border-left-width: 0.3125rem;
     box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
-    margin: 0 0 1rem 0;
+    margin: 1rem 0;
     padding: 1.3rem;
     position: relative;
 }
@@ -149,28 +151,19 @@ CONTENT
 .pure-menu-item:last-child {
     border-bottom: none;
 }
-.metadatabox{
+.code-box{
     border:1px solid #ccc;
 }
+.code-box-content{
+    font-size: 1em;
+    line-height: 1.15;
+    padding: 0.5em 1em;
+}
 .metadata-type{
     border-bottom: 1px solid #ccc;
     background-color: #e0e0e0;
     padding: 0.5em 0 0.5em 0.5em;
 }
-.metadata-code{
-    font-size: 1em;
-    line-height: 1.15;
-    padding-top: 0.5em;
-}
-.clipboard-btn{
-    position: absolute;
-    right:0;
-    height: inherit;
-    margin-top: -2em;
-    margin-right: 4px;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-}
 
 /* ***********************************************************
 FOOTER
@@ -208,7 +201,7 @@ FOOTER
 /* ***********************************************************
 FORMS
 ************************************************************ */
-.xmlarea{
+.text-area{
     margin-top: .5em;
     width:100%;
     font-size: 0.9em;
@@ -237,38 +230,19 @@ input[type="file"]{
 }
 
 /* PURE */
-.pure-button {
-     border-radius: 0;
- }
+.pure-button,
 .pure-form input.edge,
-.pure-form textarea.edge{
+.pure-form textarea.edge {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
-}
+ }
 .pure-form-aligned .pure-controls{
      margin: 0 0 0 11em;
  }
 .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;
-    overflow: hidden;
-}
 
 /* SELECTIZE */
 .selectize-input,
@@ -300,19 +274,16 @@ div .item{
     vertical-align: middle;
 }
 
-
 /* ***********************************************************
 IMAGES
 ************************************************************ */
 .fa {
     font-family: FontAwesome !important;
 }
-.fa-folder-open{
+span.fa, i.fa {
     padding: 0 0.5em;
 }
-#clipboard-btn{
-    margin-right: 0.5em;
-}
+
 /* ***********************************************************
 TABLES
 ************************************************************ */