CSS optimisation: buttons

- Add class pure-button-red instead of overwriting primary
- Create a group of 2 button-elements where one is hollow, useful
to show input-files or error-ids.
- Update templates accordingly

modules/core/templates/loginuserpass.twig

@@ -94,7 +94,7 @@
 
             </div> <!-- form-align-->
             <br><br>
-            <button class="pure-button pure-button-primary pure-input-1-2 pure-input-sm-1-1 right" type="submit" onclick="this.value='{{ 'Processing...'|trans }}';" tabindex="6">
+            <button class="pure-button pure-button-red pure-input-1-2 pure-input-sm-1-1 right" type="submit" onclick="this.value='{{ 'Processing...'|trans }}';" tabindex="6">
                 {{ 'Login'|trans }}
             </button>
 

modules/preprodwarning/templates/warning.twig

@@ -10,7 +10,7 @@
         <input type="hidden" name="{{ name }}" value="{{ value }}" />
 {% endfor %}
 <p>
-        <input type="submit" name="yes" class="pure-button pure-button-primary" value="{{'Yes, I know I am accessing a pre-production system'|trans}}" />
+        <input type="submit" name="yes" class="pure-button pure-button-red" value="{{'Yes, I know I am accessing a pre-production system'|trans}}" />
 
 </p>
 

templates/auth_status.twig

@@ -78,7 +78,7 @@
 
 {% if logouturl %}
     <div class="center">
-        <a class="pure-button pure-button-primary" href="{{ logouturl }}">{{ 'Logout'|trans }}</a>
+        <a class="pure-button pure-button-red" href="{{ logouturl }}">{{ 'Logout'|trans }}</a>
     </div>
 {% endif %}
 {% endblock %}

templates/error.twig

@@ -16,17 +16,15 @@
        Some exceptions set 'includeTemplate' to the name of a template to include.
        e.g. "core:no_state.tpl.php". The format is "<module>:<template name>"
     #}
-    {% if includeTemplate %}
+    {% if includeTemplate -%}
         {% include(includeTemplate) %}
-    {% endif %}
+    {%- endif %}
 
-    {# TODO: Update class #}
-    <div class="metadatabox">
+    <div class="message-box">
         <p>{{ '{errors:report_trackid}' | trans }}</p>
-        {# TODO: Update class #}
-        <div class="">
-            <pre id="trackid">{{ error.trackId }}</pre>
-            <button data-clipboard-target="#trackid" id="btntrackid" class="pure-button left clipboard-btn">
+        <div class="pure-button-group two-elements" role="group">
+            <label class="pure-button hollow" disabled><pre id="trackid">{{ error.trackId }}</pre></label>
+            <button data-clipboard-target="#trackid" id="btntrackid" class="pure-button clipboard-btn">
                 <i class="fa fa-copy"></i>
             </button>
         </div>
@@ -45,15 +43,12 @@
 
     {# 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. #}
-    {% if errorReportAddress %}
+    {% if errorReportAddress -%}
         <h2>{{ '{errors:report_header}' | trans }}</h2>
-        <form action="{{ errorReportAddress }}" method="post">
+        <form action="{{ errorReportAddress }}" class="pure-form" method="post">
             <p>{{ '{errors:report_text}' | trans }}</p>
             <p>{{ '{errors:report_email}' | trans }}
-                <input type="email" name="email" value="{{ email }}" />
-            </p>
-            <p>
-                <textarea class="metadatabox" name="text" rows="6" cols="50">{{ '{errors:report_explain}' | trans }}</textarea>
+                <input type="email" name="email" class="edge" value="{{ email }}" />
             </p>
 
             <textarea class="text-area edge" name="text" rows="6" cols="50">{{ '{errors:report_explain}' | trans }}</textarea>

templates/metadata-converter.twig

@@ -11,14 +11,16 @@
         </div>
         <br>
         <div class="center">
-            <div class="pure-button-group" role="group">
-                <label class="pure-button"><span class="fa fa-folder-open"> </span>Select a file...
+            <div class="pure-button-group two-elements" role="group">
+                <label class="pure-button">
+                    <span class="fa fa-folder-open"></span>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>
+                {#needs translation#}
+                <label id="show-file" class="pure-button hollow show-files" disabled>No file selected.</label>
             </div>
             <br>
-            <button class="pure-button pure-button-primary pure-input-1-3">{{ 'Parse'|trans }}</button>
+            <button class="pure-button pure-button-red pure-input-1-3">{{ 'Parse'|trans }}</button>
         </div>
     </form>
 

www/assets/css/src/default.css

@@ -65,14 +65,68 @@ a:hover{
 .overflow {
     overflow: hidden;
 }
-.pure-button-primary,
-a.pure-button-primary {
+ul{
+    padding-left: 1.5em;
+}
+/* ***********************************************************
+BUTTONS
+************************************************************ */
+.code-box-title .clipboard-btn {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    position: absolute;
+    right:0;
+    height: inherit;
+    margin-top: -2em;
+    margin-right: 4px;
+}
+.pure-button-red,
+a.pure-button-red {
     background-color: rgb(219, 1, 0);
     color: #fff;
 }
-ul{
-    padding-left: 1.5em;
+
+.pure-button.hollow {
+    background-color: #FFFFFF;
+    color: #6f6f6f;
+    border: solid 1px #E6E6E6;
+}
+.pure-button.hollow:hover {
+    background-image: none;
+}
+.pure-button.hollow[disabled]{
+    cursor: auto;
+    opacity: initial;
+    pointer-events: auto;
+    -webkit-user-drag: auto;
+    -webkit-user-select: auto;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
+.pure-button-group .pure-button:first-child,
+.pure-button-group .pure-button:last-child {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.pure-button-group.two-elements .pure-button {
+    margin: 0;
+    line-height: unset;
+    border: 1px solid #E6E6E6;
+}
+.pure-button-group.two-elements .pure-button:first-child {
+    border-right: none;
+}
+.pure-button-group.two-elements .pure-button:last-child {
+    border-right: 1px solid #E6E6E6;
 }
+.pure-button-group .pure-button.show-files{
+    max-width: 450px;
+    overflow: hidden;
+}
+
 /* ***********************************************************
 HEADER
 ************************************************************ */