From 7fa2dc3f1d619d74065056ba7f9c983654878097 Mon Sep 17 00:00:00 2001 From: Matthieu Napoli Date: Wed, 29 Apr 2015 14:27:27 +1200 Subject: [PATCH] #7584 Redesign of the installation --- .../Installation/javascripts/installation.js | 3 - .../Installation/stylesheets/installation.css | 293 ++++-------------- plugins/Installation/templates/_allSteps.twig | 11 - .../templates/_systemCheckLegend.twig | 2 +- .../Installation/templates/databaseSetup.twig | 24 +- plugins/Installation/templates/finished.twig | 56 ++-- .../templates/firstWebsiteSetup.twig | 50 +-- plugins/Installation/templates/layout.twig | 81 +++-- .../templates/setupSuperUser.twig | 24 +- .../Installation/templates/systemCheck.twig | 46 +-- .../templates/tablesCreation.twig | 101 +++--- .../Installation/templates/trackingCode.twig | 28 +- plugins/Installation/templates/welcome.twig | 52 ++-- plugins/Morpheus/stylesheets/base.less | 2 + .../Morpheus/stylesheets/general/_forms.less | 5 +- .../Morpheus/stylesheets/less/_variables.less | 2 + .../Morpheus/stylesheets/ui/_list-group.less | 47 +++ .../stylesheets/ui/_progress-bars.less | 24 ++ 18 files changed, 383 insertions(+), 468 deletions(-) delete mode 100644 plugins/Installation/templates/_allSteps.twig create mode 100644 plugins/Morpheus/stylesheets/ui/_list-group.less create mode 100644 plugins/Morpheus/stylesheets/ui/_progress-bars.less diff --git a/plugins/Installation/javascripts/installation.js b/plugins/Installation/javascripts/installation.js index 43abe2cefd1..b63a200f8b0 100644 --- 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 index e8475c2549a..a66fb80fea8 100644 --- 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; -} \ No newline at end of file diff --git a/plugins/Installation/templates/_allSteps.twig b/plugins/Installation/templates/_allSteps.twig deleted file mode 100644 index 7f5f8ba54b2..00000000000 --- a/plugins/Installation/templates/_allSteps.twig +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/plugins/Installation/templates/_systemCheckLegend.twig b/plugins/Installation/templates/_systemCheckLegend.twig index e0b54d17ac1..3d222ab4ba0 100644 --- a/plugins/Installation/templates/_systemCheckLegend.twig +++ b/plugins/Installation/templates/_systemCheckLegend.twig @@ -10,6 +10,6 @@ -

+

{{ 'General_RefreshPage'|translate }} »

diff --git a/plugins/Installation/templates/databaseSetup.twig b/plugins/Installation/templates/databaseSetup.twig index 7fb639537bc..c02e9929ba3 100644 --- a/plugins/Installation/templates/databaseSetup.twig +++ b/plugins/Installation/templates/databaseSetup.twig @@ -1,18 +1,18 @@ {% extends '@Installation/layout.twig' %} {% block content %} -

{{ 'Installation_DatabaseSetup'|translate }}

-{% if errorMessage is defined %} -
- - {{ 'Installation_DatabaseErrorConnect'|translate }}: -
{{ errorMessage|raw }} +

{{ 'Installation_DatabaseSetup'|translate }}

-
-{% endif %} + {% if errorMessage is defined %} +
+ {{ 'Installation_DatabaseErrorConnect'|translate }}: + {{ errorMessage|raw }} +
+ {% endif %} -{% if form_data is defined %} - {% include "genericForm.twig" %} -{% endif %} -{% endblock %} \ No newline at end of file + {% if form_data is defined %} + {% include "genericForm.twig" %} + {% endif %} + +{% endblock %} diff --git a/plugins/Installation/templates/finished.twig b/plugins/Installation/templates/finished.twig index 6e428916fbe..9e1f557103c 100644 --- a/plugins/Installation/templates/finished.twig +++ b/plugins/Installation/templates/finished.twig @@ -2,33 +2,33 @@ {% block content %} -

{{ 'Installation_Congratulations'|translate|raw }}

-{{ 'Installation_CongratulationsHelp'|translate|raw }} -
- -

{{ 'Installation_WelcomeToCommunity'|translate }}

-

- {{ 'Installation_CollaborativeProject'|translate }} -

-

- {{ 'Installation_GetInvolved'|translate('','')|raw }} - {{ 'General_HelpTranslatePiwik'|translate("","<\/a>")|raw }} -

-

{{ 'Installation_WeHopeYouWillEnjoyPiwik'|translate }}

-

{{ 'Installation_HappyAnalysing'|translate }}

-
- -

{{ 'Installation_DefaultSettings'|translate }}

-

{{ 'Installation_DefaultSettingsHelp'|translate }}

-{% if errorMessage is defined %} -
- - {{ 'General_Error'|translate }}: -
- {{ errorMessage|raw }} -
-{% endif %} -{% if form_data is defined %} - {% include "genericForm.twig" %} -{% endif %} +

{{ 'Installation_Congratulations'|translate|raw }}

+ + {{ 'Installation_CongratulationsHelp'|translate|raw }} + +

{{ 'Installation_WelcomeToCommunity'|translate }}

+

+ {{ 'Installation_CollaborativeProject'|translate }} +

+

+ {{ 'Installation_GetInvolved'|translate('','')|raw }} + {{ 'General_HelpTranslatePiwik'|translate("","<\/a>")|raw }} +

+

{{ 'Installation_WeHopeYouWillEnjoyPiwik'|translate }}

+

{{ 'Installation_HappyAnalysing'|translate }}

+ +

{{ 'Installation_DefaultSettings'|translate }}

+

{{ 'Installation_DefaultSettingsHelp'|translate }}

+ + {% if errorMessage is defined %} +
+ {{ 'General_Error'|translate }}: +
- {{ errorMessage|raw }} +
+ {% endif %} + + {% if form_data is defined %} + {% include "genericForm.twig" %} + {% endif %} {% endblock %} diff --git a/plugins/Installation/templates/firstWebsiteSetup.twig b/plugins/Installation/templates/firstWebsiteSetup.twig index 24352cbb693..1d647082bb6 100644 --- a/plugins/Installation/templates/firstWebsiteSetup.twig +++ b/plugins/Installation/templates/firstWebsiteSetup.twig @@ -1,27 +1,29 @@ {% extends '@Installation/layout.twig' %} {% block content %} -{% if displayGeneralSetupSuccess is defined %} - - {{ 'Installation_SuperUserSetupSuccess'|translate }} - - -{% endif %} - -

{{ 'Installation_SetupWebsite'|translate }}

-

{{ 'Installation_SiteSetup'|translate }}

-{% if errorMessage is defined %} -
- - {{ 'Installation_SetupWebsiteError'|translate }}: -
- {{ errorMessage|raw }} - -
-{% endif %} - -{% if form_data is defined %} - {% include "genericForm.twig" %} -{% endif %} -
-

{{ 'Installation_SiteSetupFootnote'|translate }}

-{% endblock %} \ No newline at end of file + +

{{ 'Installation_SetupWebsite'|translate }}

+ + {% if displayGeneralSetupSuccess is defined %} +
+ {{ 'Installation_SuperUserSetupSuccess'|translate }} +
+ {% endif %} + +

{{ 'Installation_SiteSetup'|translate }}

+ + {% if errorMessage is defined %} +
+ {{ 'Installation_SetupWebsiteError'|translate }}: +
- {{ errorMessage|raw }} +
+ {% endif %} + + {% if form_data is defined %} + {% include "genericForm.twig" %} + {% endif %} +
+ +

{{ 'Installation_SiteSetupFootnote'|translate }}

+ +{% endblock %} diff --git a/plugins/Installation/templates/layout.twig b/plugins/Installation/templates/layout.twig index 43f469efbf5..4c4d044625a 100644 --- a/plugins/Installation/templates/layout.twig +++ b/plugins/Installation/templates/layout.twig @@ -3,9 +3,16 @@ Piwik › {{ 'Installation_Installation'|translate }} + + + {% if 'General_LayoutDirection'|translate =='rtl' %} + + {% endif %} + + @@ -21,57 +28,71 @@ - - - {% if 'General_LayoutDirection'|translate =='rtl' %} - - {% endif %} -
-
-