Minor - UI improvements

11 years ago · 3a8e36649a
parent f0f631a09e
commit 3a8e36649a
11 changed files with 244 additions and 197 deletions
--- a/src/Chamilo/InstallerBundle/Resources/public/css/install.css
+++ b/src/Chamilo/InstallerBundle/Resources/public/css/install.css
@ -0,0 +1,167 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    /* Margin bottom by footer height */
+    margin-bottom: 60px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 60px;
+    background-color: #f5f5f5;
+}
+
+.container .text-muted {
+    margin: 20px 0;
+}
+
+.wizard-container {
+    padding-bottom: 20px;
+}
+
+.install-form-actions {
+    padding:20px 0px 20px 0px;
+}
+
+/* Wizard nav*/
+
+/*  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;
+}
--- a/src/Chamilo/InstallerBundle/Resources/translations/messages.en.yml
+++ b/src/Chamilo/InstallerBundle/Resources/translations/messages.en.yml
@ -106,5 +106,6 @@ process:
        next:              Next
        install:           Install
        finish:            Launch application
+        continue:          Continue
    operation:             Operation
    status:                Status
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/configure.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/configure.html.twig
@ -31,11 +31,9 @@
                {{ form_rest(form) }}
            </div>

-            <div class="form-actions">
-                <div class="pull-right">
-                    <a href="{{ app.request.basePath }}/install.php" class="btn btn-default back">{{ 'process.button.back'|trans }}</a>
-                    <button class="btn btn-primary button next" type="submit">{{ 'process.button.next'|trans }}</button>
-                </div>
+            <div class="install-form-actions">
+                <a href="{{ app.request.basePath }}/install.php" class="btn btn-default back">{{ 'process.button.back'|trans }}</a>
+                <button class="btn btn-primary button next" type="submit">{{ 'process.button.next'|trans }}</button>
            </div>
        </form>
    </div>
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/final.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/final.html.twig
@ -17,7 +17,7 @@
    <p>{{ 'process.step.final.content'|trans|raw }}</p>
 </div>

-<div class="button-set">
+<div class="install-form-actions">
    <a href="{{ path('home') }}" class="btn btn-success btn-lg" target="_blank">{{ 'process.button.finish'|trans }}</a>
 </div>
 {% endblock %}
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/installation.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/installation.html.twig
@ -60,15 +60,13 @@
            </tbody>
        </table>

-        <div class="button-set">
-            <div class="pull-right">
-                <a href="{{ path('sylius_flow_display', { scenarioAlias: 'chamilo_installer', stepName: 'configure' }) }}" class="btn btn-default back disabled">
-                    <span>{{ 'process.button.back'|trans }}</span>
-                </a>
-                <a href="javascript: void(0)" class="btn btn-primary next primary disabled">
-                    <span>{{ 'process.button.next'|trans }}</span>
-                </a>
-            </div>
+        <div class="install-form-actions">
+            <a href="{{ path('sylius_flow_display', { scenarioAlias: 'chamilo_installer', stepName: 'configure' }) }}" class="btn btn-default back disabled">
+                <span>{{ 'process.button.back'|trans }}</span>
+            </a>
+            <a href="javascript: void(0)" class="btn btn-primary next primary disabled">
+                <span>{{ 'process.button.next'|trans }}</span>
+            </a>
        </div>
    </div>
 {% endblock %}
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/schema.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/schema.html.twig
@ -33,15 +33,13 @@
            </tbody>
        </table>

-        <div class="button-set">
-            <div class="pull-right">
-                <a href="{{ path('sylius_flow_display', { scenarioAlias: 'chamilo_installer', stepName: 'configure' }) }}" class="btn btn-default back disabled">
-                    {{ 'process.button.back'|trans }}
-                </a>
-                <a href="javascript: void(0)" class="btn btn-primary next primary disabled">
-                    {{ 'process.button.next'|trans }}
-                </a>
-            </div>
+        <div class="install-form-actions">
+            <a href="{{ path('sylius_flow_display', { scenarioAlias: 'chamilo_installer', stepName: 'configure' }) }}" class="btn btn-default back disabled">
+                {{ 'process.button.back'|trans }}
+            </a>
+            <a href="javascript: void(0)" class="btn btn-primary next primary disabled">
+                {{ 'process.button.next'|trans }}
+            </a>
        </div>
    </div>
 {% endblock %}
@ -52,8 +50,8 @@
    <script type="text/javascript">
        $(function() {
            ajaxQueue(
-                    [{% for step in steps %}'{{ step}}'{{ loop.last ? '' : ', ' }}{% endfor %}],
-                    '{{ path('sylius_flow_forward', { scenarioAlias: 'chamilo_installer', stepName: 'schema' }) }}'
+                [{% for step in steps %}'{{ step}}'{{ loop.last ? '' : ', ' }}{% endfor %}],
+                '{{ path('sylius_flow_forward', { scenarioAlias: 'chamilo_installer', stepName: 'schema' }) }}'
            );
        });
    </script>
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/setup.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/setup.html.twig
@ -30,13 +30,13 @@
                </div>
            </div>
            {{ form_rest(form) }}
-            <div class="form-actions">
+            <div class="install-form-actions">
                <a href="{{ path('sylius_flow_display', {'scenarioAlias': 'chamilo_installer', 'stepName': 'configure'}) }}" class="btn btn-default btn-lg">
-                    <i class="icon-chevron-left"></i>
+                    <i class="fa fa-chevron-right"></i>
                    {{ 'process.button.back'|trans }}
                </a> &nbsp;
                <button class="btn btn-lg btn-primary" type="submit">
-                    <i class="icon-magic"></i> {{ 'process.button.install'|trans }}
+                    <i class="fa fa-magic"></i> {{ 'process.button.install'|trans }}
                </button>
            </div>
        </form>
--- a/src/Chamilo/InstallerBundle/Resources/views/Process/Step/welcome.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/Process/Step/welcome.html.twig
@ -9,11 +9,13 @@

 {% block content %}

+<div class="well">
 {{ 'process.step.welcome.content'|trans|raw }}
+</div>

-<div class="form-actions">
+<div class="install-form-actions">
    <a href="{{ path('sylius_flow_forward', {'scenarioAlias': 'chamilo_installer', 'stepName': 'welcome'}) }}" class="btn btn-lg btn-primary">
-        {{ 'process.button.install'|trans }} <i class="icon-chevron-right"></i>
+        {{ 'process.button.continue'|trans }} <i class="fa fa-chevron-right"></i>
    </a>
 </div>
 {% endblock %}
--- a/src/Chamilo/InstallerBundle/Resources/views/layout.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/layout.html.twig
@ -12,20 +12,15 @@
    {% block stylesheets %}
    {% endblock %}

-    {#{% stylesheets#}
-    {#"@bootstrap_css" %}#}
-    {#<link rel="stylesheet" href="{{ asset_url }}" />#}
-    {#{% endstylesheets %}#}
-
-    {#{% javascripts "@bootstrap_js" %}#}
-    {#<script src="{{ asset_url }}"></script>#}
-    {#{% endjavascripts %}#}
-
    <link rel="stylesheet" href="{{ asset('bundles/chamiloadmintheme/components/bootstrap/dist/css/bootstrap.css') }}" />
+    <link rel="stylesheet" href="{{ asset('bundles/chamiloadmintheme/components/fontawesome/css/font-awesome.css') }}" />
+    <link rel="stylesheet" href="{{ asset('bundles/chamiloinstaller/css/install.css') }}" />
+
    <script type="text/javascript" src="{{ asset('bundles/chamiloadmintheme/components/jquery/dist/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/chamiloadmintheme/components/bootstrap/dist/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/chamiloadmintheme/components/ajaxQueue/dist/jquery.ajaxQueue.js') }}"></script>

+
    {% block javascript %}
    <script type="text/javascript">

@ -108,6 +103,7 @@
    </script>
    {% endblock javascript %}
 </head>
+
 <body>
    <div class="container">
        <div class="page-header">
@ -118,13 +114,13 @@
    </div>

    {% block bottom %}
-        <footer>
-            <div class="container">
-                <p>
-                    Chamilo
-                </p>
-            </div>
-        </footer>
+    <footer class="footer">
+        <div class="container">
+            <p class="text-muted">
+                Chamilo  {{ "now"|date("Y") }}
+            </p>
+        </div>
+    </footer>
    {% endblock bottom %}
 </body>
 </html>
--- a/src/Chamilo/InstallerBundle/Resources/views/progress.html.twig
+++ b/src/Chamilo/InstallerBundle/Resources/views/progress.html.twig
@ -1,6 +1,6 @@
 {% block progress %}
 {% set step = step is defined ? step|lower : 'welcome' %}
-<div class="row">
+<div class="row wizard-container">
    <div class="col-sm-12">
        <ul class="nav nav-wizard">
            <li{% if step == 'welcome' %} class="active"{% endif %}>
@ -8,169 +8,33 @@
                <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 == '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">3</strong>
+                <strong class="step">2</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">4</strong>
+                <strong class="step">3</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">5</strong>
+                <strong class="step">4</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">6</strong>
+                <strong class="step">5</strong>
                <span>{{ 'process.step.final.header'|trans }}</span>
            </li>
        </ul>
    </div>
 </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 %}
--- a/web/install.php
+++ b/web/install.php
@ -1,5 +1,5 @@
 <?php
-/* For licensing terms, see /chamilo_license.txt */
+/* For licensing terms, see /license.txt */

 if (!isset($_SERVER['HTTP_HOST'])) {
    exit('This script cannot be run from the CLI. Run it from a browser.');
@ -15,6 +15,7 @@ require_once __DIR__ . '/../app/autoload.php';

 // check for installed system
 $paramFile = __DIR__ . '/../app/config/parameters.yml';
+
 if (file_exists($paramFile)) {
    $data = Yaml::parse($paramFile);
    if (is_array($data)
@ -47,10 +48,13 @@ $majorProblems    = $collection->getFailedRequirements();
 $minorProblems    = $collection->getFailedRecommendations();

 $translator->addLoader('yml', new YamlFileLoader());
-$translator->addResource('yml', __DIR__ . '/../app/Resources/translations/install.' . $locale . '.yml', $locale);
+$translator->addResource(
+    'yml',
+    __DIR__ . '/../app/Resources/translations/install.' . $locale . '.yml',
+    $locale
+);

-function iterateRequirements(array $collection)
-{
+function iterateRequirements(array $collection) {
    foreach ($collection as $requirement) :
 ?>
    <tr>
@ -97,9 +101,12 @@ function iterateRequirements(array $collection)
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><?php echo $translator->trans('title'); ?></title>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="bundles/chamiloadmintheme/components/adminlte/css/bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="bundles/chamiloinstaller/css/install.css" />
    <script type="text/javascript" src="bundles/chamiloadmintheme/components/jquery/dist/jquery.min.js"></script>
+
    <script type="text/javascript">
        $(function() {
            $('.progress-bar li:last-child em.fix-bg').width($('.progress-bar li:last-child').width() / 2);
@ -231,6 +238,10 @@ function iterateRequirements(array $collection)
                    </table>
                <?php endforeach; ?>
            </div>
+
+            <hr/ >
+            <br />
+
            <div class="button-set">
                <div class="pull-right">
                    <?php if (count($majorProblems) || count($minorProblems)): ?>
@ -245,6 +256,10 @@ function iterateRequirements(array $collection)
            </div>
        </div>
    </div>
+
+    <hr/ >
+    <br />
+
    <div class="start-box" style="display: none;">
        <div class="fade-box"></div>
        <div class="start-content">
@ -260,5 +275,13 @@ function iterateRequirements(array $collection)
            </div>
        </div>
    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p class="text-muted">
+                Chamilo
+            </p>
+        </div>
+    </footer>
 </body>
 </html>