Updating installation views.

src/ChamiloLMS/InstallerBundle/Resources/translations/messages.en.yml

@@ -1,3 +1,5 @@
+title: Chamilo Application installation
+
 flashes:
     installed: Chamilo has been successfully installed.
 form:
@@ -50,8 +52,8 @@ form:
 process:
     step:
         welcome:
-            content: <p>Welcome to Chamilo installer.</p>
-            header: Welcome <small>Chamilo installer</small>
+            header: Welcome!
+            content: <p>Welcome to the installer.</p>
         check:
             header: System requirements check
         configure:

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/configure.html.twig

@@ -1,7 +1,6 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
-
 {% set step = 'configure' %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
 
 {% block title %}
     {% autoescape false %}

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/final.html.twig

@@ -1,7 +1,6 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
-
 {% set step = 'final' %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
 
 {% block title %}
     {% autoescape false %}

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/installation.html.twig

@@ -1,8 +1,7 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
-
 {#{% set step, platformSteps = 'administration', ['navigation', 'js-routing', 'localization', 'assets', 'assetic', 'translation', 'requirejs'] %}#}
 {% set step, platformSteps = 'administration', [ 'assets', 'assetic'] %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
 
 {% if loadFixtures %}
     {% set platformSteps = ['fixtures']|merge(platformSteps) %}

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/schema.html.twig

@@ -1,8 +1,7 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
-
 {#{% set step, steps = 'schema', ['cache', 'schema-drop', 'clear-config', 'clear-extend', 'schema-update', 'workflows', 'processes', 'fixtures'] %}#}
 {% set step, steps = 'schema', ['cache', 'schema-drop', 'schema-update', 'fixtures'] %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
 
 {% block title %}
     {% autoescape false %}

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/setup.html.twig

@@ -1,6 +1,7 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-
 {% set step = 'setup' %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
+
 {% block title %}
     {% autoescape false %}
     {{ 'process.step.setup.header'|trans }} - {{ parent() }}

src/ChamiloLMS/InstallerBundle/Resources/views/Process/Step/welcome.html.twig

@@ -1,20 +1,20 @@
 {% extends 'ChamiloLMSInstallerBundle::layout.html.twig' %}
-{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
-
-{% block content %}
-
 {% set step = 'welcome' %}
+{% use 'ChamiloLMSInstallerBundle::progress.html.twig' %}
 {% block title %}
     {% autoescape false %}
-    {{ 'process.step.setup.header'|trans }} - {{ parent() }}
+    {{ 'process.step.welcome.header'|trans }} - {{ parent() }}
     {% endautoescape %}
 {% endblock %}
 
+{% block content %}
+
+
 {{ 'process.step.welcome.content'|trans|raw }}
 
 <div class="form-actions">
     <a href="{{ path('sylius_flow_forward', {'scenarioAlias': 'chamilo_installer', 'stepName': 'welcome'}) }}" class="btn btn-lg btn-primary">
-        {{ 'process.step.check.button.install'|trans }} <i class="icon-chevron-right"></i>
+        {{ 'process.button.install'|trans }} <i class="icon-chevron-right"></i>
     </a>
 </div>
 {% endblock %}

src/ChamiloLMS/InstallerBundle/Resources/views/progress.html.twig

@@ -1,32 +1,174 @@
 {% block progress %}
-{% set step = step is defined ? step|lower : 'configure' %}
-<div class="progress-bar">
-    <ul>
-        <li{% if step == 'check' %} class="active"{% endif %}>
+{% set step = step is defined ? step|lower : 'welcome' %}
+<div class="container">
+    <ul class="nav nav-wizard">
+        <li{% if step == 'welcome' %} class="active"{% endif %}>
             <em class="fix-bg">&nbsp;</em>
             <strong class="step">1</strong>
+            <span>{{ 'process.step.welcome.header'|trans }}</span>
+        </li>
+        <li{% if step == 'check' %} class="active"{% endif %}>
+            <em class="fix-bg">&nbsp;</em>
+            <strong class="step">2</strong>
             <span>{{ 'process.step.check.header'|trans }}</span>
         </li>
         <li{% if step == 'configure' %} class="active"{% endif %}>
             <em class="fix-bg">&nbsp;</em>
-            <strong class="step">2</strong>
+            <strong class="step">3</strong>
             <span>{{ 'process.step.configure.header'|trans }}</span>
         </li>
         <li{% if step == 'schema' %} class="active"{% endif %}>
             <em class="fix-bg">&nbsp;</em>
-            <strong class="step">3</strong>
+            <strong class="step">4</strong>
             <span>{{ 'process.step.schema.header'|trans }}</span>
         </li>
         <li{% if step == 'setup' %} class="active"{% endif %}>
             <em class="fix-bg">&nbsp;</em>
-            <strong class="step">4</strong>
+            <strong class="step">5</strong>
             <span>{{ 'process.step.setup.header'|trans }}</span>
         </li>
         <li{% if step == 'final' %} class="active"{% endif %}>
             <em class="fix-bg">&nbsp;</em>
-            <strong class="step">5</strong>
+            <strong class="step">6</strong>
             <span>{{ 'process.step.final.header'|trans }}</span>
         </li>
     </ul>
 </div>
+
+<style>
+    /*  https://github.com/LeadDyno/bootstrap-nav-wizard/blob/master/dist/bootstrap-nav-wizard.css
+        http://leaddyno.github.io/bootstrap-nav-wizard/
+     */
+    ul.nav-wizard {
+        background-color: #f9f9f9;
+        border: 1px solid #d4d4d4;
+        -webkit-border-radius: 6px;
+        -moz-border-radius: 6px;
+        border-radius: 6px;
+        *zoom: 1;
+        position: relative;
+        overflow: hidden;
+    }
+    ul.nav-wizard:before {
+        display: block;
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        top: 46px;
+        height: 47px;
+        border-top: 1px solid #d4d4d4;
+        border-bottom: 1px solid #d4d4d4;
+        z-index: 11;
+        content: " ";
+    }
+    ul.nav-wizard:after {
+        display: block;
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        top: 138px;
+        height: 47px;
+        border-top: 1px solid #d4d4d4;
+        border-bottom: 1px solid #d4d4d4;
+        z-index: 11;
+        content: " ";
+    }
+    ul.nav-wizard li {
+        position: relative;
+        float: left;
+        height: 46px;
+        display: inline-block;
+        text-align: middle;
+        padding: 0 20px 0 30px;
+        margin: 0;
+        font-size: 16px;
+        line-height: 46px;
+    }
+    ul.nav-wizard li a {
+        color: #468847;
+        padding: 0;
+    }
+    ul.nav-wizard li a:hover {
+        background-color: transparent;
+    }
+    ul.nav-wizard li:before {
+        position: absolute;
+        display: block;
+        border: 24px solid transparent;
+        border-left: 16px solid #d4d4d4;
+        border-right: 0;
+        top: -1px;
+        z-index: 10;
+        content: '';
+        right: -16px;
+    }
+    ul.nav-wizard li:after {
+        position: absolute;
+        display: block;
+        border: 24px solid transparent;
+        border-left: 16px solid #f9f9f9;
+        border-right: 0;
+        top: -1px;
+        z-index: 10;
+        content: '';
+        right: -15px;
+    }
+    ul.nav-wizard li.active {
+        color: #3a87ad;
+        background: #d9edf7;
+    }
+    ul.nav-wizard li.active:after {
+        border-left: 16px solid #d9edf7;
+    }
+    ul.nav-wizard li.active a,
+    ul.nav-wizard li.active a:active,
+    ul.nav-wizard li.active a:visited,
+    ul.nav-wizard li.active a:focus {
+        color: #3a87ad;
+        background: #d9edf7;
+    }
+    ul.nav-wizard .active ~ li {
+        color: #999999;
+        background: #ededed;
+    }
+    ul.nav-wizard .active ~ li:after {
+        border-left: 16px solid #ededed;
+    }
+    ul.nav-wizard .active ~ li a,
+    ul.nav-wizard .active ~ li a:active,
+    ul.nav-wizard .active ~ li a:visited,
+    ul.nav-wizard .active ~ li a:focus {
+        color: #999999;
+        background: #ededed;
+    }
+    ul.nav-wizard.nav-wizard-backnav li:hover {
+        color: #468847;
+        background: #f6fbfd;
+    }
+    ul.nav-wizard.nav-wizard-backnav li:hover:after {
+        border-left: 16px solid #f6fbfd;
+    }
+    ul.nav-wizard.nav-wizard-backnav li:hover a,
+    ul.nav-wizard.nav-wizard-backnav li:hover a:active,
+    ul.nav-wizard.nav-wizard-backnav li:hover a:visited,
+    ul.nav-wizard.nav-wizard-backnav li:hover a:focus {
+        color: #468847;
+        background: #f6fbfd;
+    }
+    ul.nav-wizard.nav-wizard-backnav .active ~ li {
+        color: #999999;
+        background: #ededed;
+    }
+    ul.nav-wizard.nav-wizard-backnav .active ~ li:after {
+        border-left: 16px solid #ededed;
+    }
+    ul.nav-wizard.nav-wizard-backnav .active ~ li a,
+    ul.nav-wizard.nav-wizard-backnav .active ~ li a:active,
+    ul.nav-wizard.nav-wizard-backnav .active ~ li a:visited,
+    ul.nav-wizard.nav-wizard-backnav .active ~ li a:focus {
+        color: #999999;
+        background: #ededed;
+    }
+</style>
+
 {% endblock %}