Browse Source

improvement of template layout and css structure

Alex Aragón 6 years ago
parent
commit
248d9d9a43

+ 34 - 34
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;

+ 0 - 44
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;

+ 2 - 32
app/Resources/public/css/themes/chamilo/default.css

@@ -5,35 +5,11 @@
  * 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 {
   color: #337AB7;
   text-decoration: none;
@@ -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,

+ 0 - 1
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;

+ 28 - 28
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,29 +35,16 @@
                 {% 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 }}
-                    </li>
+                        <li class="dropdown language">
+                            {{ language_form }}
+                        </li>
                     {% endif %}
                     {% if _u.status != 6 %}
                         <li class="dropdown avatar-user">
@@ -74,11 +74,11 @@
                                 {% endif %}
 
                                 {% if pending_survey_url %}
-                                <li class="user-body">
-                                    <a href="{{ pending_survey_url }}">
-                                        <em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }}
-                                    </a>
-                                </li>
+                                    <li class="user-body">
+                                        <a href="{{ pending_survey_url }}">
+                                            <em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }}
+                                        </a>
+                                    </li>
                                 {% endif %}
 
                                 {% if certificate_url %}
@@ -100,6 +100,6 @@
                     {% endif %}
                 </ul>
             {% endif %}
-        </div>
+        </div><!--/.nav-collapse -->
     </div>
-</nav>
+</nav>

+ 61 - 47
main/template/default/layout/page.tpl

@@ -6,58 +6,72 @@
 <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">
-    {% if displayCookieUsageWarning == true %}
-    <!-- Display Cookies validation -->
-    <div class="toolbar-cookie alert-warning">
-        <form onSubmit="$(this).toggle('slow')" action="" method="post">
-            <input value=1 type="hidden" name="acceptCookies"/>
-            <div class="cookieUsageValidation">
-                {{ "YouAcceptCookies" | get_lang }}
-                <span style="margin-left:20px;" onclick="$(this).next().toggle('slow'); $(this).toggle('slow')">
-                    ({{"More" | get_lang }})
-                </span>
-                <div style="display:none; margin:20px 0;">
-                    {{ "HelpCookieUsageValidation" | get_lang}}
-                </div>
-                <span style="margin-left:20px;" onclick="$(this).parent().parent().submit()">
-                    ({{"Accept" | get_lang }})
-                </span>
+<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>
-        </form>
-    </div>
-    {% endif %}
+            <!-- END TOOLS SHOW COURSE -->
+            {% endif %}
+            {% if displayCookieUsageWarning == true %}
+                <!-- 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"/>
+                        <div class="cookieUsageValidation">
+                            {{ "YouAcceptCookies" | get_lang }}
+                            <span style="margin-left:20px;" onclick="$(this).next().toggle('slow'); $(this).toggle('slow')">
+                                ({{"More" | get_lang }})
+                            </span>
+                            <div style="display:none; margin:20px 0;">
+                                {{ "HelpCookieUsageValidation" | get_lang}}
+                            </div>
+                            <span style="margin-left:20px;" onclick="$(this).parent().parent().submit()">
+                                ({{"Accept" | get_lang }})
+                            </span>
+                        </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 %}
+            </header>
+            <!-- END 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">
-        <div class="container">
-            {% block breadcrumb %}
-                <div id="page-breadcrumb">
-                    {{ breadcrumb }}
+            <!-- START CONTENT -->
+            <section id="cm-content">
+                <div class="container">
+                    {% block breadcrumb %}
+                        {{ breadcrumb }}
+                    {% endblock %}
+                    {% block body %}
+                        {{ content }}
+                    {% endblock %}
                 </div>
-            {% endblock %}
+            </section>
+            <!-- END CONTENT -->
 
-            {% block body %}
-                {{ content }}
-            {% endblock %}
-        </div>
-	</section>
+            <!-- START FOOTER -->
+            <footer class="footer">
+                {% if show_footer == true %}
+                    {% include 'layout/page_footer.tpl'|get_template %}
+                {% endif %}
+            </footer>
+            <!-- END FOOTER -->
 
-    {% if show_footer == true %}
-	    {% include 'layout/page_footer.tpl'|get_template %}
-    {% endif %}
-    </div>
-  </body>
+        </main>
+    <!-- END MAIN -->
+</body>
 </html>

+ 43 - 49
main/template/default/layout/page_footer.tpl

@@ -1,66 +1,60 @@
-<footer id="footer-section" class="sticky-footer bgfooter">
-    <div class="container">
-        <div class="pre-footer">
-            {% if plugin_pre_footer is not null %}
-            <div id="plugin_pre_footer">
-                {{ plugin_pre_footer }}
-            </div>
-            {% endif %}
+<div class="container">
+    {% if plugin_pre_footer is not null %}
+        <div id="plugin_pre_footer">
+            {{ plugin_pre_footer }}
         </div>
-        <div class="sub-footer">
-            <div class="row">
-                <div class="col-md-4">
-                    {% if session_teachers is not null %}
-                    <div class="session-teachers">
-                        {{ session_teachers }}
-                    </div>
-                    {% endif %}
-                    {% if teachers is not null %}
-                    <div class="teachers">
-                        {{ teachers }}
-                    </div>
-                    {% endif %}
-                    {% if plugin_footer_left is not null %}
-                    <div id="plugin_footer_left">
-                        {{ plugin_footer_left }}
-                    </div>
-                    {% endif %}
+    {% endif %}
+    <section class="sub-footer">
+        <div class="row">
+            <div class="col-xs-12 col-md-4">
+                {% if session_teachers is not null %}
+                <div class="session-teachers">
+                    {{ session_teachers }}
                 </div>
-                <div class="col-md-4">
-                    {% if plugin_footer_center is not null %}
+                {% endif %}
+                {% if teachers is not null %}
+                <div class="teachers">
+                    {{ teachers }}
+                </div>
+                {% endif %}
+                {% if plugin_footer_left is not null %}
+                <div id="plugin_footer_left">
+                    {{ plugin_footer_left }}
+                </div>
+                {% endif %}
+            </div>
+            <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">
-                    {% if administrator_name is not null %}
+                {% endif %}
+            </div>
+            <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">
-                                {{ "PoweredByX" |get_lang | format(_s.software_name) }}
-                            </a>&copy; {{ "now"|date("Y") }}
-                        </div>
-                    {% endif %}
-
-                    {% if plugin_footer_right is not null %}
+                {% endif %}
+                {% if _s.software_name is not empty %}
+                    <div class="software-name">
+                        <a href="{{_p.web}}" target="_blank">
+                            {{ "PoweredByX" |get_lang | format(_s.software_name) }}
+                        </a>&copy; {{ "now"|date("Y") }}
+                    </div>
+                {% endif %}
+                {% if plugin_footer_right is not null %}
                     <div id="plugin_footer_right">
                         {{ plugin_footer_right }}
                     </div>
-                    {% endif %}
-                </div>
+                {% endif %}
             </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">

+ 10 - 5
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 %}