From f641d0315875099b35ca6155ef2755ffbea69702 Mon Sep 17 00:00:00 2001
From: Laurent Giovannoni <laurent.giovannoni@maarch.org>
Date: Fri, 11 May 2012 08:35:10 +0000
Subject: [PATCH] evo: graphic

---
 core/trunk/install/css/footer.css             |   9 -
 core/trunk/install/css/merged_css.css         |  63 ++-
 core/trunk/install/css/section.css            |  55 +--
 core/trunk/install/js/checkCreateDB.js        |   1 +
 core/trunk/install/js/checkDatabaseInfo.js    |   1 +
 core/trunk/install/js/checkLoadDatas.js       |   1 +
 core/trunk/install/js/merged_js.js            | 365 +++++++++---------
 core/trunk/install/js/minHeightOfSection.js   |   6 +-
 core/trunk/install/view/database_view.php     |   7 +-
 core/trunk/install/view/docservers_view.php   |  12 +-
 core/trunk/install/view/includes/footer.php   |   9 +-
 core/trunk/install/view/includes/progress.php |  13 +
 core/trunk/install/view/language_view.php     |  35 +-
 core/trunk/install/view/licence_view.php      |  25 +-
 core/trunk/install/view/password_view.php     |   9 +-
 .../trunk/install/view/prerequisites_view.php |   9 +-
 core/trunk/install/view/principal_view.php    |   8 +-
 core/trunk/install/view/resume_view.php       |  10 +-
 core/trunk/install/view/welcome_view.php      |  10 +-
 19 files changed, 351 insertions(+), 297 deletions(-)
 create mode 100755 core/trunk/install/view/includes/progress.php

diff --git a/core/trunk/install/css/footer.css b/core/trunk/install/css/footer.css
index 6ae095d181b..9486c32233d 100755
--- a/core/trunk/install/css/footer.css
+++ b/core/trunk/install/css/footer.css
@@ -3,12 +3,3 @@
     width: 910px;
     text-align: left;
 }
-
-#fullWrapper #footer #progressWrapper{
-    position: relative;
-    top: 30px;
-    font-family: 'Sonsie One';
-    color: rgba(255, 255, 255, 0.9);
-    font-weight: bold;
-    font-size: 30px;
-}
diff --git a/core/trunk/install/css/merged_css.css b/core/trunk/install/css/merged_css.css
index d06f0eb5d5e..d11cd386ad0 100644
--- a/core/trunk/install/css/merged_css.css
+++ b/core/trunk/install/css/merged_css.css
@@ -242,59 +242,67 @@
 #fullWrapper #section {
 }
 
+#fullWrapper #section .blockWrapper #progressWrapper{
+    font-family: 'Sonsie One';
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: bold;
+    font-size: 30px;
+}
+
 #fullWrapper #section .blockWrapper {
-	width: 910px;
-	background-color: rgba(224, 224, 224, 0.5);
-	text-align: left;
+    width: 910px;
+    background-color: rgba(224, 224, 224, 0.5);
+    text-align: left;
 }
 
 #fullWrapper #section .blockWrapper .titleBlock {
 }
 
 #fullWrapper #section .blockWrapper .titleBlock h2 {
-	font-size: 35px;
-	font-family: 'Contrail One';
-	background-color: rgba(224, 224, 224, 0.8);
-	padding-top: 15px;
-	padding-bottom: 10px;
-	padding-left: 20px;
-	padding-right: 20px;
+    font-size: 35px;
+    font-family: 'Contrail One';
+    background-color: rgba(224, 224, 224, 0.8);
+    padding-top: 15px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock {
 }
 
 #fullWrapper #section .blockWrapper .contentBlock p {
-	padding-top: 15px;
-	padding-bottom: 15px;
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock .previousButton {
-	position: relative;
-	left: 25px;
+    position: relative;
+    left: 25px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock .nextButton {
-	position: relative;
-	right: 25px;
+    position: relative;
+    right: 25px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock form {
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock table {
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock table .voyantPrerequisites {
-	width: 30px;
+    width: 30px;
 }
 
+
 /* footer.css */
 #fullWrapper #footer {
     height: 125px;
@@ -302,15 +310,6 @@
     text-align: left;
 }
 
-#fullWrapper #footer #progressWrapper{
-    position: relative;
-    top: 30px;
-    font-family: 'Sonsie One';
-    color: rgba(255, 255, 255, 0.9);
-    font-weight: bold;
-    font-size: 30px;
-}
-
 
 /* tags.css */
 body {
diff --git a/core/trunk/install/css/section.css b/core/trunk/install/css/section.css
index d1705a2aeea..13e4cae2af6 100755
--- a/core/trunk/install/css/section.css
+++ b/core/trunk/install/css/section.css
@@ -1,55 +1,62 @@
 #fullWrapper #section {
 }
 
+#fullWrapper #section .blockWrapper #progressWrapper{
+    font-family: 'Sonsie One';
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: bold;
+    font-size: 30px;
+}
+
 #fullWrapper #section .blockWrapper {
-	width: 910px;
-	background-color: rgba(224, 224, 224, 0.5);
-	text-align: left;
+    width: 910px;
+    background-color: rgba(224, 224, 224, 0.5);
+    text-align: left;
 }
 
 #fullWrapper #section .blockWrapper .titleBlock {
 }
 
 #fullWrapper #section .blockWrapper .titleBlock h2 {
-	font-size: 35px;
-	font-family: 'Contrail One';
-	background-color: rgba(224, 224, 224, 0.8);
-	padding-top: 15px;
-	padding-bottom: 10px;
-	padding-left: 20px;
-	padding-right: 20px;
+    font-size: 35px;
+    font-family: 'Contrail One';
+    background-color: rgba(224, 224, 224, 0.8);
+    padding-top: 15px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock {
 }
 
 #fullWrapper #section .blockWrapper .contentBlock p {
-	padding-top: 15px;
-	padding-bottom: 15px;
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock .previousButton {
-	position: relative;
-	left: 25px;
+    position: relative;
+    left: 25px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock .nextButton {
-	position: relative;
-	right: 25px;
+    position: relative;
+    right: 25px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock form {
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock table {
-	padding-left: 15px;
-	padding-right: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #fullWrapper #section .blockWrapper .contentBlock table .voyantPrerequisites {
-	width: 30px;
-}
\ No newline at end of file
+    width: 30px;
+}
diff --git a/core/trunk/install/js/checkCreateDB.js b/core/trunk/install/js/checkCreateDB.js
index 26c4cfc663b..908ddece3c1 100644
--- a/core/trunk/install/js/checkCreateDB.js
+++ b/core/trunk/install/js/checkCreateDB.js
@@ -16,6 +16,7 @@ function checkCreateDB(
             $('#ajaxReturn_createDB_ko').html('Choisissez un nom pour la base de donnée');
             return;
         }
+        $('.wait').css('display','block');
         $('#ajaxReturn_createDB_ko').html('');
 
         ajaxDB(
diff --git a/core/trunk/install/js/checkDatabaseInfo.js b/core/trunk/install/js/checkDatabaseInfo.js
index fe0c1d92891..2a3b413853c 100644
--- a/core/trunk/install/js/checkDatabaseInfo.js
+++ b/core/trunk/install/js/checkDatabaseInfo.js
@@ -32,6 +32,7 @@ function checkDatabaseInfo(
             $('#ajaxReturn_testConnect_ko').html('au moins un champ mal rempli');
             return;
         }
+        $('.wait').css('display','block');
         $('#ajaxReturn_testConnect_ko').html('');
 
         ajaxDB(
diff --git a/core/trunk/install/js/checkLoadDatas.js b/core/trunk/install/js/checkLoadDatas.js
index f6cfa354d79..f96d32c12df 100644
--- a/core/trunk/install/js/checkLoadDatas.js
+++ b/core/trunk/install/js/checkLoadDatas.js
@@ -16,6 +16,7 @@ function checkLoadDatas(
             $('#ajaxReturn_loadDatas_ko').html('Sélécionner le fichier de datas à importer');
             return;
         }
+        $('.wait').css('display','block');
         $('#ajaxReturn_loadDatas_ok').html('');
 
         ajaxDB(
diff --git a/core/trunk/install/js/merged_js.js b/core/trunk/install/js/merged_js.js
index 78a91c8b22f..6974c6343ac 100755
--- a/core/trunk/install/js/merged_js.js
+++ b/core/trunk/install/js/merged_js.js
@@ -63,69 +63,73 @@ function ajax(
 }
 
 
-/* ajaxDB.js */
-function ajaxDB(
-    url,
-    parameters,
-    divRetour,
-    top
+/* heightOfLicenceOverflow.js */
+function heightOfLicenceOverflow()
+{
+    $(document).ready(function() {
+        var heightOfSection = $('#section').css('minHeight')
+        var substringMax = heightOfSection.length - 2;
+        var heightOfSection = heightOfSection.substring(0, substringMax);
+
+        var newHeightOfLicenceOverflow = heightOfSection - 350;
+
+        if ($('#licenceOverflow').height() > 0) {
+            $('#licenceOverflow').height(newHeightOfLicenceOverflow+'px');
+        }
+    });
+}
+
+
+/* goTo.js */
+function goTo(
+    link
 )
 {
-    var ajaxUrl  = url;
+    $(document).ready(function() {
+        window.top.location.href=link;
+    })
+}
 
-    var parametersTemp = parameters.split('|');
 
-    var strAjaxParameters = '{';
-    for (cpt=0; cpt<parametersTemp.length; cpt++) {
-        strAjaxParameters += parametersTemp[cpt];
-        strAjaxParameters += ":";
-        strAjaxParameters += "'";
-        cpt++;
-        parametersTemp[cpt] = parametersTemp[cpt].replace(/\\/gi, '/');
-        strAjaxParameters += parametersTemp[cpt];
-        strAjaxParameters += "'";
-        if (cpt < parametersTemp.length) {
-            strAjaxParameters += ", ";
+/* createDocservers.js */
+function createDocservers(
+    docserverRoot
+)
+{
+    $(document).ready(function() {
+        var oneIsEmpty = false;
+        if (docserverRoot.length < 1) {
+            var oneIsEmpty = true;
         }
-    }
-    strAjaxParameters += "ajax:'true'";
-    strAjaxParameters += ", div:'"+divRetour+"'";
-    strAjaxParameters += '}'
-    var ajaxParameters = eval('(' + strAjaxParameters + ')');
 
-    /**********/
+        if (oneIsEmpty) {
+            $('#ajaxReturn_createDocservers_ko').html('Vous devez choisir l\'emplacement racine de vos docservers');
+            return;
+        }
+        $('#ajaxReturn_createDocservers_ko').html('');
 
-    if (top == 'true') {
-        var retour_ok = window.top.$('#'+divRetour+'_ok');
-        var retour_ko = window.top.$('#'+divRetour+'_ko');
-    } else {
-        var retour_ok = $('#'+divRetour+'_ok');
-        var retour_ko = $('#'+divRetour+'_ko');
-    }
+        ajaxDB(
+            'docservers',
+              'docserverRoot|'+docserverRoot,
+            'ajaxReturn_createDocservers',
+            'false'
+        );
 
-    /**********/
+    });
+}
 
-    $(document).ready( function() {
-        $.getJSON('ajax.php?script='+ajaxUrl, ajaxParameters, function(data){
-            if (data.status == 1) {
-                retour_ok.html(data.text);
-                retour_ko.html('');
-                slide(divRetour);
-                $('.'+divRetour).slideToggle('slow');
-                if ($('.wait')) {
-                    $('.wait').css('display','none');
-                }
 
-            } else {
-                retour_ko.html(data.text);
-                if ($('.wait')) {
-                    $('.wait').css('display','none');
-                }
-                if ($('#ajaxReturn_createDocservers_button')) {
-                    $('#ajaxReturn_createDocservers_button').css('display', 'block');
-                }
-            }
-        });
+/* checkForm.js */
+function checkLanguage(
+    value
+)
+{
+    $(document).ready(function() {
+        if (value != 'default') {
+            $('#returnCheckLanguage').css("display","none");
+        } else {
+            $('#returnCheckLanguage').css("display","block");
+        }
     });
 }
 
@@ -149,6 +153,7 @@ function checkCreateDB(
             $('#ajaxReturn_createDB_ko').html('Choisissez un nom pour la base de donnée');
             return;
         }
+        $('.wait').css('display','block');
         $('#ajaxReturn_createDB_ko').html('');
 
         ajaxDB(
@@ -162,55 +167,17 @@ function checkCreateDB(
 }
 
 
-/* checkDatabaseInfo.js */
-function checkDatabaseInfo(
-    databaseserver,
-    databaseserverport,
-    databaseuser,
-    databasepassword,
-    databasetype,
-    action
+/* checkLanguage.js */
+function checkLanguage(
+    value
 )
 {
     $(document).ready(function() {
-        var oneIsEmpty = false;
-        if (databaseserver.length < 1) {
-            var oneIsEmpty = true;
-        }
-        if (databaseserverport.length < 1) {
-            var oneIsEmpty = true;
-        }
-        if (databaseuser.length < 1) {
-            var oneIsEmpty = true;
-        }
-        if (databasepassword.length < 1) {
-            var oneIsEmpty = true;
-        }
-        if (databasetype.length < 1) {
-            var oneIsEmpty = true;
-        }
-        if (action.length < 1) {
-            var oneIsEmpty = true;
-        }
-
-        if (oneIsEmpty) {
-            $('#ajaxReturn_testConnect_ko').html('au moins un champ mal rempli');
-            return;
+        if (value != 'default') {
+            $('#returnCheckLanguage').css("display","block");
+        } else {
+            $('#returnCheckLanguage').css("display","none");
         }
-        $('#ajaxReturn_testConnect_ko').html('');
-
-        ajaxDB(
-            'database',
-              'databaseserver|'+databaseserver
-              +'|databaseserverport|'+databaseserverport
-              +'|databaseuser|'+databaseuser
-              +'|databasepassword|'+databasepassword
-              +'|databasetype|'+databasetype
-              +'|action|'+action,
-            'ajaxReturn_testConnect',
-            'false'
-        );
-
     });
 }
 
@@ -237,33 +204,14 @@ function checkDataDB(
 }
 
 
-/* checkForm.js */
-function checkLanguage(
-    value
-)
-{
-    $(document).ready(function() {
-        if (value != 'default') {
-            $('#returnCheckLanguage').css("display","none");
-        } else {
-            $('#returnCheckLanguage').css("display","block");
-        }
-    });
-}
-
-
-/* checkLanguage.js */
-function checkLanguage(
-    value
+/* slide.js */
+function slide(
+    idDiv
 )
 {
     $(document).ready(function() {
-        if (value != 'default') {
-            $('#returnCheckLanguage').css("display","block");
-        } else {
-            $('#returnCheckLanguage').css("display","none");
-        }
-    });
+        $('#'+idDiv).slideToggle('slow');
+    })
 }
 
 
@@ -280,15 +228,31 @@ function checkLicence()
 }
 
 
-/* checkLoadDatas.js */
-function checkLoadDatas(
-    dataFilename,
+/* checkDatabaseInfo.js */
+function checkDatabaseInfo(
+    databaseserver,
+    databaseserverport,
+    databaseuser,
+    databasepassword,
+    databasetype,
     action
 )
 {
     $(document).ready(function() {
         var oneIsEmpty = false;
-        if (dataFilename.length < 1) {
+        if (databaseserver.length < 1) {
+            var oneIsEmpty = true;
+        }
+        if (databaseserverport.length < 1) {
+            var oneIsEmpty = true;
+        }
+        if (databaseuser.length < 1) {
+            var oneIsEmpty = true;
+        }
+        if (databasepassword.length < 1) {
+            var oneIsEmpty = true;
+        }
+        if (databasetype.length < 1) {
             var oneIsEmpty = true;
         }
         if (action.length < 1) {
@@ -296,74 +260,91 @@ function checkLoadDatas(
         }
 
         if (oneIsEmpty) {
-            $('#ajaxReturn_loadDatas_ko').html('Sélécionner le fichier de datas à importer');
+            $('#ajaxReturn_testConnect_ko').html('au moins un champ mal rempli');
             return;
         }
-        $('#ajaxReturn_loadDatas_ok').html('');
+        $('.wait').css('display','block');
+        $('#ajaxReturn_testConnect_ko').html('');
 
         ajaxDB(
             'database',
-              'dataFilename|'+dataFilename
+              'databaseserver|'+databaseserver
+              +'|databaseserverport|'+databaseserverport
+              +'|databaseuser|'+databaseuser
+              +'|databasepassword|'+databasepassword
+              +'|databasetype|'+databasetype
               +'|action|'+action,
-            'ajaxReturn_loadDatas',
+            'ajaxReturn_testConnect',
             'false'
         );
+
     });
 }
 
 
-/* createDocservers.js */
-function createDocservers(
-    docserverRoot
+/* ajaxDB.js */
+function ajaxDB(
+    url,
+    parameters,
+    divRetour,
+    top
 )
 {
-    $(document).ready(function() {
-        var oneIsEmpty = false;
-        if (docserverRoot.length < 1) {
-            var oneIsEmpty = true;
-        }
-
-        if (oneIsEmpty) {
-            $('#ajaxReturn_createDocservers_ko').html('Vous devez choisir l\'emplacement racine de vos docservers');
-            return;
-        }
-        $('#ajaxReturn_createDocservers_ko').html('');
-
-        ajaxDB(
-            'docservers',
-              'docserverRoot|'+docserverRoot,
-            'ajaxReturn_createDocservers',
-            'false'
-        );
+    var ajaxUrl  = url;
 
-    });
-}
+    var parametersTemp = parameters.split('|');
 
+    var strAjaxParameters = '{';
+    for (cpt=0; cpt<parametersTemp.length; cpt++) {
+        strAjaxParameters += parametersTemp[cpt];
+        strAjaxParameters += ":";
+        strAjaxParameters += "'";
+        cpt++;
+        parametersTemp[cpt] = parametersTemp[cpt].replace(/\\/gi, '/');
+        strAjaxParameters += parametersTemp[cpt];
+        strAjaxParameters += "'";
+        if (cpt < parametersTemp.length) {
+            strAjaxParameters += ", ";
+        }
+    }
+    strAjaxParameters += "ajax:'true'";
+    strAjaxParameters += ", div:'"+divRetour+"'";
+    strAjaxParameters += '}'
+    var ajaxParameters = eval('(' + strAjaxParameters + ')');
 
-/* goTo.js */
-function goTo(
-    link
-)
-{
-    $(document).ready(function() {
-        window.top.location.href=link;
-    })
-}
+    /**********/
 
+    if (top == 'true') {
+        var retour_ok = window.top.$('#'+divRetour+'_ok');
+        var retour_ko = window.top.$('#'+divRetour+'_ko');
+    } else {
+        var retour_ok = $('#'+divRetour+'_ok');
+        var retour_ko = $('#'+divRetour+'_ko');
+    }
 
-/* heightOfLicenceOverflow.js */
-function heightOfLicenceOverflow()
-{
-    $(document).ready(function() {
-        var heightOfSection = $('#section').css('minHeight')
-        var substringMax = heightOfSection.length - 2;
-        var heightOfSection = heightOfSection.substring(0, substringMax);
+    /**********/
 
-        var newHeightOfLicenceOverflow = heightOfSection - 350;
+    $(document).ready( function() {
+        $.getJSON('ajax.php?script='+ajaxUrl, ajaxParameters, function(data){
+            if (data.status == 1) {
+                retour_ok.html(data.text);
+                retour_ko.html('');
+                slide(divRetour);
+                $('.'+divRetour).slideToggle('slow');
+                if ($('.wait')) {
+                    $('.wait').css('display','none');
+                }
 
-        if ($('#licenceOverflow').height() > 0) {
-            $('#licenceOverflow').height(newHeightOfLicenceOverflow+'px');
-        }
+            } else {
+                retour_ko.html(data.text);
+                if ($('.wait')) {
+                    $('.wait').css('display','none');
+                }
+                if ($('#ajaxReturn_createDocservers_button')) {
+                    $('#ajaxReturn_createDocservers_button').css('display', 'block');
+                }
+            }
+        });
     });
 }
 
@@ -375,8 +356,10 @@ function minHeightOfSection()
         var heightOfNavigator = window.innerHeight;
 
         var heightOfHeader = 120;
-        var heightOfFooter = 125;
-        var nbLine         = 2 * 1;
+        //var heightOfFooter = 125;
+        var heightOfFooter = 0;
+        //var nbLine         = 2 * 1;
+        var nbLine         = 1;
 
         var minHeightOfSection = (heightOfNavigator - (heightOfHeader + heightOfFooter +  nbLine));
 
@@ -385,14 +368,36 @@ function minHeightOfSection()
 }
 
 
-/* slide.js */
-function slide(
-    idDiv
+/* checkLoadDatas.js */
+function checkLoadDatas(
+    dataFilename,
+    action
 )
 {
     $(document).ready(function() {
-        $('#'+idDiv).slideToggle('slow');
-    })
+        var oneIsEmpty = false;
+        if (dataFilename.length < 1) {
+            var oneIsEmpty = true;
+        }
+        if (action.length < 1) {
+            var oneIsEmpty = true;
+        }
+
+        if (oneIsEmpty) {
+            $('#ajaxReturn_loadDatas_ko').html('Sélécionner le fichier de datas à importer');
+            return;
+        }
+        $('.wait').css('display','block');
+        $('#ajaxReturn_loadDatas_ok').html('');
+
+        ajaxDB(
+            'database',
+              'dataFilename|'+dataFilename
+              +'|action|'+action,
+            'ajaxReturn_loadDatas',
+            'false'
+        );
+    });
 }
 
 
diff --git a/core/trunk/install/js/minHeightOfSection.js b/core/trunk/install/js/minHeightOfSection.js
index ad3f67cef81..a8dcb725e7d 100755
--- a/core/trunk/install/js/minHeightOfSection.js
+++ b/core/trunk/install/js/minHeightOfSection.js
@@ -4,8 +4,10 @@ function minHeightOfSection()
         var heightOfNavigator = window.innerHeight;
 
         var heightOfHeader = 120;
-        var heightOfFooter = 125;
-        var nbLine         = 2 * 1;
+        //var heightOfFooter = 125;
+        var heightOfFooter = 0;
+        //var nbLine         = 2 * 1;
+        var nbLine         = 1;
 
         var minHeightOfSection = (heightOfNavigator - (heightOfHeader + heightOfFooter +  nbLine));
 
diff --git a/core/trunk/install/view/database_view.php b/core/trunk/install/view/database_view.php
index f74022eab7a..c76b9b138c1 100755
--- a/core/trunk/install/view/database_view.php
+++ b/core/trunk/install/view/database_view.php
@@ -17,7 +17,7 @@
                                 :
                             </td>
                             <td>
-                                <input type="text" id="databaseserver" name="databaseserver"/>
+                                <input type="text" id="databaseserver" name="databaseserver" value="localhost"/>
                             </td>
                         </tr>
                         <tr>
@@ -28,7 +28,7 @@
                                 :
                             </td>
                             <td>
-                                <input type="text" id="databaseserverport" name="databaseserverport"/>
+                                <input type="text" id="databaseserverport" name="databaseserverport" value="5432"/>
                             </td>
                         </tr>
                         <tr>
@@ -77,7 +77,6 @@
                                   type="button"
                                   value="tester"
                                   onClick="
-                                    $('.wait').css('display','block');
                                     checkDatabaseInfo(
                                       $('#databaseserver').val(),
                                       $('#databaseserverport').val(),
@@ -218,7 +217,7 @@
         <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
-                    <a href="#" onClick="goTo('index.php?step=prerequisites');">
+                    <a href="#" onClick="goTo('index.php?step=prerequisites');" style="display: none;">
                         <?php echo _PREVIOUS; ?>
                     </a>
                 </div>
diff --git a/core/trunk/install/view/docservers_view.php b/core/trunk/install/view/docservers_view.php
index c856c098b7e..1fced2b58cd 100755
--- a/core/trunk/install/view/docservers_view.php
+++ b/core/trunk/install/view/docservers_view.php
@@ -35,8 +35,13 @@
             </form>
             <br />
             <div id="ajaxReturn_createDocservers_ko"></div>
-            <br />
-            <br />
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="docservers">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=database');" style="display:none;">
@@ -50,7 +55,8 @@
                 </div>
             </div>
             <br />
+            <br />
         </p>
     </div>
-    <br />
 </div>
+
diff --git a/core/trunk/install/view/includes/footer.php b/core/trunk/install/view/includes/footer.php
index 5e22e2e83ee..8b137891791 100755
--- a/core/trunk/install/view/includes/footer.php
+++ b/core/trunk/install/view/includes/footer.php
@@ -1,8 +1 @@
-<div id="progressWrapper">
-    <?php
-        echo $Class_Install->getProgress(
-            $stepNb,
-            $stepNbTotal
-        );
-    ?>
-</div>
+
diff --git a/core/trunk/install/view/includes/progress.php b/core/trunk/install/view/includes/progress.php
new file mode 100755
index 00000000000..7d4638718cd
--- /dev/null
+++ b/core/trunk/install/view/includes/progress.php
@@ -0,0 +1,13 @@
+<div class="blockWrapper" style="background-color: rgba(255, 255, 255, 1);">
+    <div class="contentBlock">
+        <div id="progressWrapper">
+            <?php
+                echo $Class_Install->getProgress(
+                    $stepNb,
+                    $stepNbTotal
+                );
+            ?>
+        </div>
+    </div>
+</div>
+<br />
diff --git a/core/trunk/install/view/language_view.php b/core/trunk/install/view/language_view.php
index c65431e19ca..ff110122772 100755
--- a/core/trunk/install/view/language_view.php
+++ b/core/trunk/install/view/language_view.php
@@ -19,22 +19,27 @@
                         }
                     ?>
                 </select>
-                <br />
-                <br />
-                <div id="buttons">
-                    <div style="float: left;" class="previousButton">
-                    </div>
-                    <div style="float: right;" class="nextButton" id="next">
-                        <span id="returnCheckLanguage" style="display: none;">
-                            <a href="#" onClick="$('form').submit();">
-                                <?php echo _NEXT; ?>
-                            </a>
-                        </span>
-                    </div>
-                </div>
-                <br />
-                <br />
             </form>
         </p>
     </div>
 </div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="chooseLanguage">
+        <p>
+            <div id="buttons">
+                <div style="float: left;" class="previousButton">
+                </div>
+                <div style="float: right;" class="nextButton" id="next">
+                    <span id="returnCheckLanguage" style="display: none;">
+                        <a href="#" onClick="$('form').submit();">
+                            <?php echo _NEXT; ?>
+                        </a>
+                    </span>
+                </div>
+            </div>
+            <br />
+            <br />
+        </p>
+    </div>
+</div>
diff --git a/core/trunk/install/view/licence_view.php b/core/trunk/install/view/licence_view.php
index 28a80d3f673..94369bd8c07 100755
--- a/core/trunk/install/view/licence_view.php
+++ b/core/trunk/install/view/licence_view.php
@@ -1,4 +1,3 @@
-
 <div class="blockWrapper">
     <div class="titleBlock">
         <h2 onClick="slide('licence');" style="cursor: pointer;">
@@ -13,19 +12,27 @@
                     <?php echo $txtLicence; ?>
                     <br />
                 </div>
-                <br />
-                <hr />
-                <br />
+            </div>
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="licence">
+        <p>
+            <div align="center">
                 <input type="checkbox" id="checkboxLicence" onChange="checkLicence();"/>
                 <label for="checkboxLicence">
                     <?php echo _OK_WITH_LICENCE; ?>
                 </label>
-                <br />
-                <br />
-                <hr />
             </div>
-            <br />
-            <br />
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="licence">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=welcome');">
diff --git a/core/trunk/install/view/password_view.php b/core/trunk/install/view/password_view.php
index 1d6f0dd5fef..a369e8b9747 100755
--- a/core/trunk/install/view/password_view.php
+++ b/core/trunk/install/view/password_view.php
@@ -6,8 +6,13 @@
     </div>
     <div class="contentBlock" id="password">
         <p>
-            <br />
-            <br />
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="password">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=docservers');" style="display:none;">
diff --git a/core/trunk/install/view/prerequisites_view.php b/core/trunk/install/view/prerequisites_view.php
index d5f3b861ce0..f4f633d1db7 100755
--- a/core/trunk/install/view/prerequisites_view.php
+++ b/core/trunk/install/view/prerequisites_view.php
@@ -177,8 +177,13 @@
                     </td>
                 </tr>
             </table>
-            <br />
-            <br />
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="prerequisites">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=licence');">
diff --git a/core/trunk/install/view/principal_view.php b/core/trunk/install/view/principal_view.php
index 45696f5426f..420c4fedad3 100755
--- a/core/trunk/install/view/principal_view.php
+++ b/core/trunk/install/view/principal_view.php
@@ -16,14 +16,16 @@
                 </header>
                 <div class="line"></div>
                 <section id="section">
+                    <br />
+                    <?php include('install/view/includes/progress.php'); ?>
                     <br />
                     <?php include('install/view/'.$view.'_view.php'); ?>
                     <br />
                 </section>
-                <div class="line"></div>
-                <footer id="footer">
+                <!-- <div class="line"></div> -->
+                <!-- <footer id="footer">
                     <?php include('install/view/includes/footer.php'); ?>
-                </footer>
+                </footer> -->
             </div>
         </div>
     </body>
diff --git a/core/trunk/install/view/resume_view.php b/core/trunk/install/view/resume_view.php
index 6946e8e5925..b26594aa747 100755
--- a/core/trunk/install/view/resume_view.php
+++ b/core/trunk/install/view/resume_view.php
@@ -6,8 +6,14 @@
     </div>
     <div class="contentBlock" id="resume">
         <p>
-            <br />
-            <br />
+
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="resume">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=password');">
diff --git a/core/trunk/install/view/welcome_view.php b/core/trunk/install/view/welcome_view.php
index 5c930ee09f3..0842e22a0ed 100755
--- a/core/trunk/install/view/welcome_view.php
+++ b/core/trunk/install/view/welcome_view.php
@@ -17,8 +17,13 @@
                 ICI LE WELCOME TEXT<br />
                 ICI LE WELCOME TEXT<br />
             </div>
-            <br />
-            <br />
+        </p>
+    </div>
+</div>
+<br />
+<div class="blockWrapper">
+    <div class="contentBlock" id="welcome">
+        <p>
             <div id="buttons">
                 <div style="float: left;" class="previousButton" id="previous">
                     <a href="#" onClick="goTo('index.php?step=language');">
@@ -36,3 +41,4 @@
         </p>
     </div>
 </div>
+
-- 
GitLab