improvement of template layout and css structure

pull/2629/head
Alex Aragón 7 years ago
parent ac9adc6b12
commit 248d9d9a43
  1. 68
      app/Resources/public/css/base.css
  2. 44
      app/Resources/public/css/editor_content.css
  3. 34
      app/Resources/public/css/themes/chamilo/default.css
  4. 1
      app/Resources/public/css/themes/chamilo/print.css
  5. 56
      main/template/default/layout/menu.tpl
  6. 108
      main/template/default/layout/page.tpl
  7. 92
      main/template/default/layout/page_footer.tpl
  8. 15
      main/template/default/layout/page_header.tpl

@ -9,52 +9,58 @@
yannick.warnier@beeznest.com yannick.warnier@beeznest.com
Version: 1.0 Version: 1.0
*/ */
/* Sticky footer styles
-------------------------------------------------- */
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
body { body {
margin-bottom: 120px; /* Margin bottom by footer height */
color: #29303b; margin-bottom: 60px;
line-height: 24px;
} }
.footer {
p { position: absolute;
margin: 0 0 20px; 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 { body > .container {
margin-bottom: 10px; padding: 60px 15px 0;
} }
.container .text-muted {
.navbar-nav li { margin: 20px 0;
margin-bottom: 0;
} }
/* Sticky footer style */ .footer > .container {
.sticky-footer { padding-right: 15px;
position: absolute; padding-left: 15px;
bottom: 0;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
} }
#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 { select {
width: auto; width: auto;
} }
a.thumbnail:hover {
border: 1px solid #dddddd;
box-shadow: 0 4px 8px #C8C8C8;
}
/*------------------------------*/ /*------------------------------*/
.admin-block-version { .admin-block-version {
font-size: 12px; font-size: 12px;
@ -6176,12 +6182,6 @@ div#chat-remote-video video {
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
} }
.hot-courses .grid-courses .items .title {
padding: 0;
font-weight: bold;
margin: 0;
}
.grid-courses .items .toolbar .info { .grid-courses .items .toolbar .info {
float: left; float: left;
font-size: 12px; font-size: 12px;

@ -2,50 +2,6 @@
Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages. 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 */ /* Hack for show Bootstrap alerts in CKEditor' style select */
.cke_panel_listItem a > :first-child { .cke_panel_listItem a > :first-child {
margin-bottom: 0; margin-bottom: 0;

@ -5,35 +5,11 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Based on Bootstrap v3 * 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 { body {
margin: 0; margin: 0;
font-family: 'Open Sans', sans-serif;
} }
a { a {
color: #337AB7; color: #337AB7;
text-decoration: none; text-decoration: none;
@ -47,11 +23,6 @@ a:focus {
outline: none; outline: none;
} }
.navbar{
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.navbar-nav > li{ .navbar-nav > li{
margin-bottom: 0; margin-bottom: 0;
} }
@ -60,7 +31,6 @@ a:focus {
} }
.navbar-default { .navbar-default {
background: #337AB7; 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); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
} }
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:focus,

@ -10,7 +10,6 @@
*/ */
body { body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px; font-size: 12px;
color: #000; color: #000;
margin: 0; margin: 0;

@ -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"> <div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuone" <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -11,7 +24,7 @@
</button> </button>
<a class="navbar-brand" href="{{ _p.web }}">{{ _s.site_name }}</a> <a class="navbar-brand" href="{{ _p.web }}">{{ _s.site_name }}</a>
</div> </div>
<div class="collapse navbar-collapse" id="menuone"> <div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
{% for item in menu %} {% for item in menu %}
<li class="{{ item.key }} {{ item.current }}"> <li class="{{ item.key }} {{ item.current }}">
@ -22,29 +35,16 @@
{% endfor %} {% endfor %}
</ul> </ul>
{% if _u.logged == 1 %} {% 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"> <ul class="nav navbar-nav navbar-right">
<li id="count_message_li" class="hidden"> <li id="count_message_li" class="hidden">
<a href="{{ message_url }}"> <a href="{{ message_url }}">
<span id="count_message" class="badge badge-warning"></span> <span id="count_message" class="badge badge-warning"></span>
</a> </a>
</li> </li>
{% if language_form %} {% if language_form %}
<li class="dropdown language"> <li class="dropdown language">
{{ language_form }} {{ language_form }}
</li> </li>
{% endif %} {% endif %}
{% if _u.status != 6 %} {% if _u.status != 6 %}
<li class="dropdown avatar-user"> <li class="dropdown avatar-user">
@ -74,11 +74,11 @@
{% endif %} {% endif %}
{% if pending_survey_url %} {% if pending_survey_url %}
<li class="user-body"> <li class="user-body">
<a href="{{ pending_survey_url }}"> <a href="{{ pending_survey_url }}">
<em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }} <em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }}
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if certificate_url %} {% if certificate_url %}
@ -100,6 +100,6 @@
{% endif %} {% endif %}
</ul> </ul>
{% endif %} {% endif %}
</div> </div><!--/.nav-collapse -->
</div> </div>
</nav> </nav>

@ -6,58 +6,72 @@
<html lang="{{ document_language }}" class="no-js"> <!--<![endif]--> <html lang="{{ document_language }}" class="no-js"> <!--<![endif]-->
<head> <head>
{% block head %} {% block head %}
{% include 'layout/head.tpl'|get_template %} {% include 'layout/head.tpl'|get_template %}
{% endblock %} {% endblock %}
</head> </head>
<body dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}"> <body>
<noscript>{{ "NoJavascript"|get_lang }}</noscript> <!-- START MAIN -->
<div class="wrap"> <main id="main" dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}">
{% if displayCookieUsageWarning == true %} <noscript>{{ "NoJavascript"|get_lang }}</noscript>
<!-- Display Cookies validation --> {% if show_course_shortcut is not null %}
<div class="toolbar-cookie alert-warning"> <!-- TOOLS SHOW COURSE -->
<form onSubmit="$(this).toggle('slow')" action="" method="post"> <div id="cm-tools" class="nav-tools">
<input value=1 type="hidden" name="acceptCookies"/> {{ show_course_shortcut }}
<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> </div>
</form> <!-- END TOOLS SHOW COURSE -->
</div> {% endif %}
{% 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 %} <!-- START CONTENT -->
{% include 'layout/page_header.tpl'|get_template %} <section id="cm-content">
{% endif %} <div class="container">
{% if show_course_shortcut is not null %} {% block breadcrumb %}
<div class="nav-tools"> {{ breadcrumb }}
{{ show_course_shortcut }} {% endblock %}
</div> {% block body %}
{% endif %} {{ content }}
<section id="content-section"> {% endblock %}
<div class="container">
{% block breadcrumb %}
<div id="page-breadcrumb">
{{ breadcrumb }}
</div> </div>
{% endblock %} </section>
<!-- END CONTENT -->
{% block body %} <!-- START FOOTER -->
{{ content }} <footer class="footer">
{% endblock %} {% if show_footer == true %}
</div> {% include 'layout/page_footer.tpl'|get_template %}
</section> {% endif %}
</footer>
<!-- END FOOTER -->
{% if show_footer == true %} </main>
{% include 'layout/page_footer.tpl'|get_template %} <!-- END MAIN -->
{% endif %} </body>
</div>
</body>
</html> </html>

@ -1,66 +1,60 @@
<footer id="footer-section" class="sticky-footer bgfooter"> <div class="container">
<div class="container"> {% if plugin_pre_footer is not null %}
<div class="pre-footer"> <div id="plugin_pre_footer">
{% if plugin_pre_footer is not null %} {{ plugin_pre_footer }}
<div id="plugin_pre_footer">
{{ plugin_pre_footer }}
</div>
{% endif %}
</div> </div>
<div class="sub-footer"> {% endif %}
<div class="row"> <section class="sub-footer">
<div class="col-md-4"> <div class="row">
{% if session_teachers is not null %} <div class="col-xs-12 col-md-4">
<div class="session-teachers"> {% if session_teachers is not null %}
{{ session_teachers }} <div class="session-teachers">
</div> {{ session_teachers }}
{% 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>
<div class="col-md-4"> {% endif %}
{% if plugin_footer_center is not null %} {% 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"> <div id="plugin_footer_center">
{{ plugin_footer_center }} {{ plugin_footer_center }}
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="col-md-4 text-right"> <div class="col-xs-12 col-md-4 text-right">
{% if administrator_name is not null %} {% if administrator_name is not null %}
<div class="administrator-name"> <div class="administrator-name">
{{ administrator_name }} {{ administrator_name }}
</div> </div>
{% endif %} {% endif %}
{% if _s.software_name is not empty %}
{% if _s.software_name is not empty %} <div class="software-name">
<div class="software-name"> <a href="{{_p.web}}" target="_blank">
<a href="{{_p.web}}" target="_blank"> {{ "PoweredByX" |get_lang | format(_s.software_name) }}
{{ "PoweredByX" |get_lang | format(_s.software_name) }} </a>&copy; {{ "now"|date("Y") }}
</a>&copy; {{ "now"|date("Y") }} </div>
</div> {% endif %}
{% endif %} {% if plugin_footer_right is not null %}
{% if plugin_footer_right is not null %}
<div id="plugin_footer_right"> <div id="plugin_footer_right">
{{ plugin_footer_right }} {{ plugin_footer_right }}
</div> </div>
{% endif %} {% endif %}
</div>
</div> </div>
</div> </div>
<div class="extra-footer"> {% if footer_extra_content %}
{{ footer_extra_content }} {{ footer_extra_content }}
</div> {% endif %}
</div> </section>
</footer> </div>
{# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #} {# 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"> <div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">

@ -5,16 +5,19 @@
{% block topbar %} {% block topbar %}
{% include 'layout/topbar.tpl'|get_template %} {% include 'layout/topbar.tpl'|get_template %}
{% endblock %} {% 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="container">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-xs-12 col-md-3">
<div class="logo"> <div class="logo">
{{ logo }} {{ logo }}
</div> </div>
</div> </div>
<div class="col-md-9"> <div class="col-xs-12 col-md-9">
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
{% if plugin_header_left is not null %} {% if plugin_header_left is not null %}
@ -48,8 +51,10 @@
</div> </div>
</div> </div>
</div> </div>
</header>
{% block menu %} {% block menu %}
{% include 'layout/menu.tpl'|get_template %} {% include 'layout/menu.tpl'|get_template %}
{% endblock %} {% endblock %}
{% include 'layout/course_navigation.tpl'|get_template %} {% include 'layout/course_navigation.tpl'|get_template %}

Loading…
Cancel
Save