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

@ -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;

@ -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,

@ -10,7 +10,6 @@
*/
body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
color: #000;
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">
<!-- 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>

@ -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>

@ -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">

@ -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 %}

Loading…
Cancel
Save