From 505596bfcf0fe0825352af6cc64c5a71472bc75d Mon Sep 17 00:00:00 2001
From: Olimpia Magliulo <olimpiam@intern-ikts-MacBook-Air.local>
Date: Fri, 8 Dec 2017 11:08:58 +0100
Subject: [PATCH] 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 | 2 +-
modules/preprodwarning/templates/warning.twig | 2 +-
templates/auth_status.twig | 2 +-
templates/error.twig | 23 +++----
templates/metadata-converter.twig | 10 +--
www/assets/css/src/default.css | 62 +++++++++++++++++--
6 files changed, 76 insertions(+), 25 deletions(-)
diff --git a/modules/core/templates/loginuserpass.twig b/modules/core/templates/loginuserpass.twig
index 297a72f6d..b8e948195 100644
--- a/modules/core/templates/loginuserpass.twig
+++ b/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>
diff --git a/modules/preprodwarning/templates/warning.twig b/modules/preprodwarning/templates/warning.twig
index ceb48dd4f..9a86ffb69 100644
--- a/modules/preprodwarning/templates/warning.twig
+++ b/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>
diff --git a/templates/auth_status.twig b/templates/auth_status.twig
index 0077a2aae..2e743b91b 100644
--- a/templates/auth_status.twig
+++ b/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 %}
diff --git a/templates/error.twig b/templates/error.twig
index 418a638db..a87abb68e 100644
--- a/templates/error.twig
+++ b/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>
diff --git a/templates/metadata-converter.twig b/templates/metadata-converter.twig
index 21e470fd3..54f9c7af9 100644
--- a/templates/metadata-converter.twig
+++ b/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>
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 015f4959e..62cf9f824 100644
--- a/www/assets/css/src/default.css
+++ b/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
************************************************************ */
--
GitLab