improvement of template layout and css structure

7 years ago · 248d9d9a43
parent ac9adc6b12
commit 248d9d9a43
8 changed files with 178 additions and 240 deletions
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@ -9,52 +9,58 @@
        yannick.warnier@beeznest.com
    Version: 1.0
 */
+/* Sticky footer styles
+-------------------------------------------------- */
 html {
    position: relative;
    min-height: 100%;
 }
-
 body {
-    margin-bottom: 120px;
-    color: #29303b;
-    line-height: 24px;
+    /* Margin bottom by footer height */
+    margin-bottom: 60px;
 }
-
-p {
-    margin: 0 0 20px;
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 60px;
+    background-color: #f5f5f5;
 }
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */

-.course ul li, .course ol li {
-    margin-bottom: 10px;
+body > .container {
+    padding: 60px 15px 0;
 }
-
-.navbar-nav li {
-    margin-bottom: 0;
+.container .text-muted {
+    margin: 20px 0;
 }

-/* Sticky footer style */
-.sticky-footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 20px;
-    padding-bottom: 20px;
+.footer > .container {
+    padding-right: 15px;
+    padding-left: 15px;
 }

-#content-section {
-    margin-bottom: 230px;
-}
+/*!
+ * IE10 viewport hack for Surface/desktop Windows 8 bug
+ * Copyright 2014-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*
+ * See the Getting Started docs for more information:
+ * http://getbootstrap.com/getting-started/#support-ie10-width
+ */
+@-ms-viewport     { width: device-width; }
+@-o-viewport      { width: device-width; }
+@viewport         { width: device-width; }

-/* End Sticky footer style */
 select {
    width: auto;
 }

-a.thumbnail:hover {
-    border: 1px solid #dddddd;
-    box-shadow: 0 4px 8px #C8C8C8;
-}
-
 /*------------------------------*/
 .admin-block-version {
    font-size: 12px;
@ -6176,12 +6182,6 @@ div#chat-remote-video video {
    transition: all 0.3s ease 0s;
 }

-.hot-courses .grid-courses .items .title {
-    padding: 0;
-    font-weight: bold;
-    margin: 0;
-}
-
 .grid-courses .items .toolbar .info {
    float: left;
    font-size: 12px;
--- a/app/Resources/public/css/editor_content.css
+++ b/app/Resources/public/css/editor_content.css
@ -2,50 +2,6 @@
 Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
 */

-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 300;
-    src: local('Open Sans Light'),
-         local('OpenSans-Light'),
-         url(themes/chamilo/fonts/OpenSans-Light.woff2) format('woff2'),
-         url(themes/chamilo/fonts/OpenSans-Light.woff) format('woff');
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Open Sans'),
-         local('OpenSans'),
-         url(themes/chamilo/fonts/OpenSans.woff2) format('woff2'),
-         url(themes/chamilo/fonts/OpenSans.woff) format('woff');
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 600;
-    src: local('Open Sans Semibold'),
-         local('OpenSans-Semibold'),
-         url(themes/chamilo/fonts/OpenSans-Semibold.woff2) format('woff2'),
-         url(themes/chamilo/fonts/OpenSans-Semibold.woff) format('woff');
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Open Sans Bold'),
-         local('OpenSans-Bold'),
-         url(themes/chamilo/fonts/OpenSans-Bold.woff2) format('woff2'),
-         url(themes/chamilo/fonts/OpenSans-Bold.woff) format('woff');
-}
-
-body {
-    font-family: 'Open Sans', sans-serif;
-}
-
 /* Hack for show Bootstrap alerts in CKEditor' style select */
 .cke_panel_listItem a > :first-child {
    margin-bottom: 0;
--- a/app/Resources/public/css/themes/chamilo/default.css
+++ b/app/Resources/public/css/themes/chamilo/default.css
@ -5,33 +5,9 @@
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Based on Bootstrap v3
 */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/OpenSans-Light.woff2) format('woff2'), url(fonts/OpenSans-Light.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans.woff2) format('woff2'), url(fonts/OpenSans.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/OpenSans-Semibold.woff2) format('woff2'), url(fonts/OpenSans-Semibold.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/OpenSans-Bold.woff2) format('woff2'), url(fonts/OpenSans-Bold.woff) format('woff');
-}
+
 body {
  margin: 0;
-  font-family: 'Open Sans', sans-serif;
 }

 a {
@ -47,11 +23,6 @@ a:focus {
  outline: none;
 }

-.navbar{
-  border-radius: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-}
 .navbar-nav > li{
  margin-bottom: 0;
 }
@ -60,7 +31,6 @@ a:focus {
 }
 .navbar-default {
  background: #337AB7;
-  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }
 .navbar-default .navbar-nav > li > a:focus,
--- a/app/Resources/public/css/themes/chamilo/print.css
+++ b/app/Resources/public/css/themes/chamilo/print.css
@ -10,7 +10,6 @@
   */

 body {
-	font-family: arial, verdana, helvetica, sans-serif;
 	font-size: 12px;
 	color: #000;
 	margin: 0;
--- a/main/template/default/layout/menu.tpl
+++ b/main/template/default/layout/menu.tpl
@ -1,9 +1,22 @@
-<nav id="menubar" class="navbar navbar-default">
+<!-- Fixed navbar -->
+{% if _u.logged == 1 %}
+    <script>
+        $(document).ready(function () {
+            $.get('{{ _p.web_main }}inc/ajax/message.ajax.php?a=get_count_message', function(data) {
+                if (data === '0') {
+                    $("#count_message_li").addClass('hidden');
+                } else {
+                    $("#count_message_li").removeClass('hidden');
+                    $("#count_message").append(data);
+                }
+            });
+        });
+    </script>
+{% endif %}
+<nav class="navbar navbar-default">
    <div class="container">
-        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuone"
-                    aria-expanded="false">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
@ -11,7 +24,7 @@
            </button>
            <a class="navbar-brand" href="{{ _p.web }}">{{ _s.site_name }}</a>
        </div>
-        <div class="collapse navbar-collapse" id="menuone">
+        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                {% for item in menu %}
                    <li class="{{ item.key }} {{ item.current }}">
@ -22,25 +35,12 @@
                {% endfor %}
            </ul>
            {% if _u.logged == 1 %}
-                <script>
-                    $(document).ready(function () {
-                        $.get('{{ _p.web_main }}inc/ajax/message.ajax.php?a=get_count_message', function(data) {
-                            if (data === '0') {
-                                $("#count_message_li").addClass('hidden');
-                            } else {
-                                $("#count_message_li").removeClass('hidden');
-                                $("#count_message").append(data);
-                            }
-                        });
-                    });
-                </script>
                <ul class="nav navbar-nav navbar-right">
                    <li id="count_message_li" class="hidden">
                        <a href="{{ message_url }}">
                            <span id="count_message" class="badge badge-warning"></span>
                        </a>
                    </li>
-
                    {% if language_form %}
                        <li class="dropdown language">
                            {{ language_form }}
@ -100,6 +100,6 @@
                    {% endif %}
                </ul>
            {% endif %}
-        </div>
+        </div><!--/.nav-collapse -->
    </div>
 </nav>
--- a/main/template/default/layout/page.tpl
+++ b/main/template/default/layout/page.tpl
@ -6,14 +6,22 @@
 <html lang="{{ document_language }}" class="no-js"> <!--<![endif]-->
 <head>
 {% block head %}
-{% include 'layout/head.tpl'|get_template %}
+    {% include 'layout/head.tpl'|get_template %}
 {% endblock %}
 </head>
-<body dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}">
-<noscript>{{ "NoJavascript"|get_lang }}</noscript>
-<div class="wrap">
+<body>
+    <!-- START MAIN -->
+    <main id="main" dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}">
+    <noscript>{{ "NoJavascript"|get_lang }}</noscript>
+            {% if show_course_shortcut is not null %}
+            <!-- TOOLS SHOW COURSE -->
+            <div id="cm-tools" class="nav-tools">
+                {{ show_course_shortcut }}
+            </div>
+            <!-- END TOOLS SHOW COURSE -->
+            {% endif %}
            {% if displayCookieUsageWarning == true %}
-    <!-- Display Cookies validation -->
+                <!-- START DISPLAY COOKIES VALIDATION -->
                <div class="toolbar-cookie alert-warning">
                    <form onSubmit="$(this).toggle('slow')" action="" method="post">
                        <input value=1 type="hidden" name="acceptCookies"/>
@ -31,33 +39,39 @@
                        </div>
                    </form>
                </div>
+                <!-- END DISPLAY COOKIES VALIDATION -->
            {% endif %}

+            <!-- START HEADER -->
+            <header id="cm-header">
                {% if show_header == true %}
                    {% include 'layout/page_header.tpl'|get_template %}
                {% endif %}
-    {% if show_course_shortcut is not null %}
-        <div class="nav-tools">
-            {{ show_course_shortcut }}
-        </div>
-    {% endif %}
-	<section id="content-section">
+            </header>
+            <!-- END HEADER -->
+
+            <!-- START CONTENT -->
+            <section id="cm-content">
                <div class="container">
                    {% block breadcrumb %}
-                <div id="page-breadcrumb">
                        {{ breadcrumb }}
-                </div>
                    {% endblock %}
-
                    {% block body %}
                        {{ content }}
                    {% endblock %}
                </div>
            </section>
+            <!-- END CONTENT -->

+            <!-- START FOOTER -->
+            <footer class="footer">
                {% if show_footer == true %}
                    {% include 'layout/page_footer.tpl'|get_template %}
                {% endif %}
-    </div>
-  </body>
+            </footer>
+            <!-- END FOOTER -->
+
+        </main>
+    <!-- END MAIN -->
+</body>
 </html>
--- a/main/template/default/layout/page_footer.tpl
+++ b/main/template/default/layout/page_footer.tpl
@ -1,15 +1,12 @@
-<footer id="footer-section" class="sticky-footer bgfooter">
-    <div class="container">
-        <div class="pre-footer">
+<div class="container">
    {% if plugin_pre_footer is not null %}
        <div id="plugin_pre_footer">
            {{ plugin_pre_footer }}
        </div>
    {% endif %}
-        </div>
-        <div class="sub-footer">
+    <section class="sub-footer">
        <div class="row">
-                <div class="col-md-4">
+            <div class="col-xs-12 col-md-4">
                {% if session_teachers is not null %}
                <div class="session-teachers">
                    {{ session_teachers }}
@ -26,20 +23,19 @@
                </div>
                {% endif %}
            </div>
-                <div class="col-md-4">
+            <div class="col-xs-12 col-md-4">
                {% if plugin_footer_center is not null %}
                    <div id="plugin_footer_center">
                        {{ plugin_footer_center }}
                    </div>
                {% endif %}
            </div>
-                <div class="col-md-4 text-right">
+            <div class="col-xs-12 col-md-4 text-right">
                {% if administrator_name is not null %}
                    <div class="administrator-name">
                        {{ administrator_name }}
                    </div>
                {% endif %}
-
                {% if _s.software_name is not empty %}
                    <div class="software-name">
                        <a href="{{_p.web}}" target="_blank">
@ -47,7 +43,6 @@
                        </a>&copy; {{ "now"|date("Y") }}
                    </div>
                {% endif %}
-
                {% if plugin_footer_right is not null %}
                    <div id="plugin_footer_right">
                        {{ plugin_footer_right }}
@ -55,12 +50,11 @@
                {% endif %}
            </div>
        </div>
-        </div>
-        <div class="extra-footer">
+        {% if footer_extra_content  %}
            {{ footer_extra_content }}
-        </div>
-    </div>
-</footer>
+        {% endif %}
+    </section>
+</div>

 {# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #}
 <div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">
--- a/main/template/default/layout/page_header.tpl
+++ b/main/template/default/layout/page_header.tpl
@ -5,16 +5,19 @@
 {% block topbar %}
    {% include 'layout/topbar.tpl'|get_template %}
 {% endblock %}
-<div class="extra-header">{{ header_extra_content }}</div>
-<header id="header-section" class="header-movil">
+
+{% if header_extra_content is not null %}
+    {{ header_extra_content }}
+{% endif %}
+
    <div class="container">
        <div class="row">
-            <div class="col-md-3">
+            <div class="col-xs-12 col-md-3">
                <div class="logo">
                    {{ logo }}
                </div>
            </div>
-            <div class="col-md-9">
+            <div class="col-xs-12 col-md-9">
                <div class="row">
                    <div class="col-sm-4">
                        {% if plugin_header_left is not null %}
@ -48,8 +51,10 @@
            </div>
        </div>
    </div>
-</header>
+
+
 {% block menu %}
    {% include 'layout/menu.tpl'|get_template %}
 {% endblock %}
+
 {% include 'layout/course_navigation.tpl'|get_template %}