#7584 Redesign of the installation

matomo-org · May 10, 2015 · 7fa2dc3 · 7fa2dc3
1 parent f46da76
commit 7fa2dc3
Show file tree

Hide file tree

Showing 18 changed files with 383 additions and 468 deletions.
diff --git a/plugins/Installation/javascripts/installation.js b/plugins/Installation/javascripts/installation.js
@@ -1,8 +1,5 @@
 $(function () {
     $('input:first').focus();
-    $('#progressbar').progressbar({
-        value: parseInt($('#progressbar').attr('data-progress'))
-    });
     $('code').click(function () { $(this).select(); });
 
     // Focus the first input field in the form

diff --git a/plugins/Installation/stylesheets/installation.css b/plugins/Installation/stylesheets/installation.css
@@ -1,263 +1,90 @@
-div.both {
-    clear: both;
-}
-
 body {
-    background-color: #fff;
-    text-align: center;
-    font-family: Arial, Georgia, "Times New Roman", Times, serif;
-    font-size: 17px;
-}
-
-p {
-    margin-bottom: 5px;
-    margin-top: 10px;
+    font-size: 14px;
 }
 
-#title {
-    font-size: 50px;
-    color: #284F92;
-    vertical-align: text-bottom;
+/* Header */
+.header {
+    padding: 50px 0 12px;
+    margin-bottom: 40px;
+    border-bottom: solid 1px #ccc;
 }
-
-#subtitle {
-    color: #666;
-    font-size: 27px;
-    padding-left: 20px;
-    vertical-align: sub;
-}
-
-#logo {
-    padding: 20px 30px;
-    padding-bottom: 35px;
-}
-#logo img {
-    height:40px;
+.logo {
+    float: left;
 }
-
-#installationPage #logo {
-    height: auto;
-
+.logo img {
+    max-height: 30px;
 }
-
-h2 {
-    font-size: 24px;
-    font-family: Verdana, sans-serif;
-    color: #0d0d0d;
-    border-bottom: 1px solid #DADADA;
-    padding: 0 0 7px;
-    font-weight: normal;
-    margin-bottom: 15px;
+.logo p {
+    font-size: 12px;
+    color: grey;
 }
-
-h3 {
+.language-selector {
+    float: left;
+    margin-left: 15px;
     margin-top: 10px;
-    font-family: Verdana, sans-serif;
-    color: #0d0d0d;
-    font-weight: normal;
-    font-size: 20px;
-}
-
-
-
-code {
-    font-size: 80%;
-}
-
-.topBarElem {
-    font-family: arial, sans-serif !important;
-    font-size: 13px;
-    line-height: 1.33;
-}
-
-#topRightBar {
-    float: right;
-    margin-top: -60px;
 }
-
-.error {
-    color: red;
-    font-size: 100%;
-    font-weight: bold;
-    border: 2px solid red;
-    width: 550px;
-    padding: 20px;
-    margin-bottom: 10px;
-}
-
-.error img {
-    border: 0;
+.installation-progress {
     float: right;
-    margin: 10px;
-}
-
-.success {
-    color: #26981C;
-    font-size: 130%;
-    font-weight: bold;
-    padding: 10px;
-}
-
-.warn {
-    color: #D7A006;
-    font-weight: bold;
-}
-
-.warning {
-    margin: 10px;
-    color: #ff5502;
-    font-size: 130%;
-    font-weight: bold;
-    padding: 10px 20px 10px 30px;
-    border: 1px solid #ff5502;
-}
-
-.warning ul {
-    list-style: disc;
-}
-
-.success img, .warning img {
-    border: 0;
-    vertical-align: bottom;
-}
-
-/* Cadre general */
-#installationPage {
-    margin: 30px 5px 5px;
-    text-align: left;
-}
-
-#content {
-    font-size: 90%;
-    line-height: 1.4em;
-    width: 860px;
-    border: 1px solid #d9d9d9;
-    box-shadow: 0 1px 1px rgba(204,204,204,0.5);
-    margin: auto;
-    background: #FFFFFF;
-    padding: 0.2em 2em 2em 2em;
-    border-radius: 8px;
-}
-
-/* form errors */
-#adminErrors {
-    color: #FF6E46;
-    font-size: 120%;
+    width: 400px;
 }
-
-/* listing all the steps */
-#generalInstall {
-    float: left;
-    margin-left: 20px;
-    width: 19%;
+.installation-progress h4 {
+    font-size: 10px;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin-bottom: 5px;
 }
-
-#detailInstall {
-    width: 75%;
+.installation-progress h4 small {
     float: right;
+    color: #d4291f;
 }
-
-#generalInstall ul {
-    list-style-type: decimal;
-}
-
-li.futureStep {
-    color: #d3d3d3;
-}
-
-li.actualStep {
-    font-weight: bold;
-}
-
-li.pastStep {
-    color: #008000;
+.installation-progress .progress {
+    margin-bottom: 0;
 }
 
-p.nextStep a {
-    text-decoration: none;
+/* Content */
+h2 {
+    font-size: 25px;
+    font-weight: normal;
+    margin-bottom: 15px;
 }
-
-td {
-    background-color: #f2f2f2;
-    border-top-color: #FFF;
-    color: #444;
-    padding: 0.5em 0.5em 0.5em 0.8em;
+h3 {
+    font-size: 18px;
+    font-weight: normal;
+    margin-top: 25px;
+    margin-bottom: 15px;
 }
-
-.submit {
-    text-align: center;
-    cursor: pointer;
-    margin-top: 10px;
+.content p {
+    color: #858585;
+    margin-bottom: 10px;
 }
-
-.submit input {
-    margin-top: 15px;
-    background: transparent url(../../../plugins/Morpheus/images/background-submit.png) repeat scroll 0;
-    font-size: 1.4em;
-    border-color: #CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
-    border-style: double;
-    border-width: 3px;
-    color: #333333;
-    padding: 0.15em;
+p.next-step {
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
-
-input {
-    font-size: 18px;
-    border-color: #CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
-    border-width: 1px;
-    color: #3A2B16;
-    padding: 0.15em;
+p.next-step:first-child {
+    margin-top: 0;
 }
 
-#systemCheckLegend {
-    border: 1px solid #A5A5A5;
-    padding: 20px;
-    color: #727272;
-    margin-top: 30px;
+table {
+    margin: 20px 0;
+    width: 100%;
 }
-
-#systemCheckLegend img {
-    padding-right: 10px;
-    vertical-align: middle;
-
+th, td {
+    border-top: 1px solid #cccccc;
+    padding: 8px;
 }
-
-.reuseTables .error {
-    margin: 10px 0px;
+tr:nth-of-type(odd) {
+    background-color: #FAFAFA;
 }
 
-.reuseTables .warning {
-    color: #ff5502;
-    font-size: 100%;
-    font-weight: bold;
+/* Form classes that we can't change */
+.warning {
     padding: 20px;
-    border: 2px solid #ff5502;
-    width: 550px;
-    margin: 10px 0px;
-}
-
-.reuseTables .warning img {
-    border: 0;
-    float: right;
+    border-radius: 2px;
     margin: 10px;
+    color: #E0645D;
+    border: 1px solid #D4291F;
 }
-
-.reuseTables ul {
-    padding-left: 16px;
-    list-style: disc;
-}
-
-.infos img, .infosServer img {
-    padding-right: 10px;
-    vertical-align: middle;
-}
-
-.err {
-    color: red;
-    font-weight: bold;
+.warning img {
+    vertical-align: bottom;
 }
-
-#feedback {
-    margin-bottom:30px;
-    display: inline-block;
-}
diff --git a/plugins/Installation/templates/_allSteps.twig b/plugins/Installation/templates/_allSteps.twig
diff --git a/plugins/Installation/templates/_systemCheckLegend.twig b/plugins/Installation/templates/_systemCheckLegend.twig
@@ -10,6 +10,6 @@
     </span>
 </div>
 
-<p class="nextStep">
+<p class="next-step">
     <a href="{{ url }}">{{ 'General_RefreshPage'|translate }} &raquo;</a>
 </p>
diff --git a/plugins/Installation/templates/databaseSetup.twig b/plugins/Installation/templates/databaseSetup.twig
@@ -1,18 +1,18 @@
 {% extends '@Installation/layout.twig' %}
 
 {% block content %}
-<h2>{{ 'Installation_DatabaseSetup'|translate }}</h2>
 
-{% if errorMessage is defined %}
-    <div class="error">
-        <img src="plugins/Morpheus/images/error_medium.png"/>
-        {{ 'Installation_DatabaseErrorConnect'|translate }}:
-        <br/>{{ errorMessage|raw }}
+    <h2>{{ 'Installation_DatabaseSetup'|translate }}</h2>
 
-    </div>
-{% endif %}
+    {% if errorMessage is defined %}
+        <div class="alert alert-danger">
+            {{ 'Installation_DatabaseErrorConnect'|translate }}:
+            {{ errorMessage|raw }}
+        </div>
+    {% endif %}
 
-{% if form_data is defined %}
-    {% include "genericForm.twig" %}
-{% endif %}
-{% endblock %}
+    {% if form_data is defined %}
+        {% include "genericForm.twig" %}
+    {% endif %}
+
+{% endblock %}