chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

menu sidebar images sprite resolucion escritorio y tablet

Browse Source
1.9.x
Alex Aragon 12 years ago
parent d71d47c0a6
commit 72f22ccab0
5 changed files with 216 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 188
      main/css/chamilo/default.css
  2. BIN
      main/css/chamilo/images/sprite-icon.png
  3. 61
      main/css/responsive.css
  4. 16
      main/inc/lib/social.lib.php
  5. 3
      main/template/default/layout/layout_2_col.tpl

188
main/css/chamilo/default.css
Unescape View File

@ -84,8 +84,8 @@ a:active {
.nav-list > li > a {
font-size: 14px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
/* padding-left: 15px;
padding-right: 15px;*/
padding-top: 6px;
}
.controls .btn{
@ -246,6 +246,14 @@ a:active {
text-indent: -9000px;
z-index: 1;
}
/*ICON INBOX*/
.home-icon{
background:url(images/);
}
/* END ICON INBOX */
/*CSS SLIDER ANUNCIOS*/
.pagerslide h2{
@ -312,7 +320,7 @@ a:active {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
margin-bottom: 20px;
min-height: 20px;
padding: 19px;
padding: 20px 10px;
}
.sidebar-nav img{
-webkit-border-radius: 10px;
@ -323,7 +331,7 @@ a:active {
font-size: 26px;
font-weight: bold;
color: #0191C7;
padding-bottom: 10px;
padding-bottom: 8px;
}
#homepage .row .span9 p,#homepage .row .span9 ol {
color: #6E6E6E;
@ -523,53 +531,88 @@ button.arrowl, input.arrowl {
.portal {
background-image:url(images/portal.png);
}
/*+++++++++++++++++++++++++++++++++
RESPONSIVE CSS
+++++++++++++++++++++++++++++++++*/
.navbar .brand {
float: left;
font-size: 16px;
font-weight: 200;
line-height: 20px;
padding-bottom: 12px;
padding-top: 8px;
}
@media (min-width: 481px) and (max-width: 800px) {
/*CSS ICON BLOCK USER*/
.inbox-social{
background: url("images/inbox.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 0;
padding-left: 40px;
}
.inbox-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -43px;
}
.new-message-social{
background: url("images/new.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -75px;
padding-left: 40px;
}
.new-message-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -108px;
padding-left: 40px;
}
.invitations-social{
background: url("images/invitation.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -148px;
padding-left: 40px;
}
.invitations-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -191px;
padding-left: 40px;
}
.profile-social{
background: url("images/perfil.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -236px;
padding-left: 40px;
}
.profile-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -278px;
padding-left: 40px;
}
.add-course{
background: url("images/course.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -320px;
padding-left: 40px;
}
.add-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -363px;
padding-left: 40px;
}
.order-course{
background: url("images/sprite-icon.png") no-repeat 0 -408px;
padding-left: 40px;
}
.order-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -451px;
padding-left: 40px;
}
.history-course{
background: url("images/history.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -489px;
padding-left: 40px;
}
.history-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -532px;
padding-left: 40px;
}
.list-course{
background: url("images/list-course.png") no-repeat left center;
background: url("images/sprite-icon.png") no-repeat 0 -575px;
padding-left: 40px;
}
.order-course{
background: url("images/order-course.png") no-repeat left center;
.list-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -618px;
padding-left: 40px;
}
/*+++++++++++++++++++++++++++++++++
RESPONSIVE CSS
+++++++++++++++++++++++++++++++++*/
.navbar .brand {
float: left;
font-size: 16px;
font-weight: 200;
line-height: 20px;
padding-bottom: 12px;
padding-top: 8px;
}
@media (min-width: 481px) and (max-width: 800px) {
.sidebar-nav h4 {
color: #037FB2;
font-size: 18px;
@ -590,12 +633,101 @@ RESPONSIVE CSS
@media (max-width: 600px) {
#main_content .course-box .row .span7 .row .span6 {
float: left;
width: 615px;
/*width: 615px;*/
padding-left: 10px;
}
#main_content .course-box .row .span7 .row .span6 h3 {
font-size: 16px;
width: 500px;
/*width: 500px;*/
}
}
@media (min-width: 801px){
.nav-list > li > a {
font-size: 13px;
padding-bottom: 6px;
padding-top: 6px;
}
/*CSS ICON BLOCK USER*/
.inbox-social{
background: url("images/sprite-icon.png") no-repeat 0 0;
padding-left: 30px;
background-size: 25px auto;
}
.inbox-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -36px;
background-size: 25px auto;
}
.new-message-social{
background: url("images/sprite-icon.png") no-repeat 0 -65px;
padding-left: 30px;
background-size: 25px auto;
}
.new-message-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -93px;
padding-left: 30px;
background-size: 25px auto;
}
.invitations-social{
background: url("images/sprite-icon.png") no-repeat 0 -127px;
padding-left: 30px;
background-size: 25px auto;
}
.invitations-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -163px;
padding-left: 30px;
background-size: 25px auto;
}
.profile-social{
background: url("images/sprite-icon.png") no-repeat 0 -198px;
padding-left: 30px;
background-size: 25px auto;
}
.profile-social:hover{
background: url("images/sprite-icon.png") no-repeat 0 -233px;
padding-left: 30px;
background-size: 25px auto;
}
.add-course{
background: url("images/sprite-icon.png") no-repeat 0 -267px;
padding-left: 30px;
background-size: 25px auto;
}
.add-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -303px;
padding-left: 30px;
background-size: 25px auto;
}
.order-course{
background: url("images/sprite-icon.png") no-repeat 0 -339px;
padding-left: 30px;
background-size: 25px auto;
}
.order-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -375px;
padding-left: 30px;
background-size: 25px auto;
}
.history-course{
background: url("images/sprite-icon.png") no-repeat 0 -410px;
padding-left: 30px;
background-size: 25px auto;
}
.history-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -446px;
padding-left: 30px;
background-size: 25px auto;
}
.list-course{
background: url("images/sprite-icon.png") no-repeat 0 -480px;
padding-left: 30px;
background-size: 25px auto;
}
.list-course:hover{
background: url("images/sprite-icon.png") no-repeat 0 -516px;
padding-left: 30px;
background-size: 25px auto;
}
}
/*+++++++++++++++++++++++++++++++++

BIN
main/css/chamilo/images/sprite-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

61
main/css/responsive.css
Unescape View File

@ -122,9 +122,22 @@ The more frequent ones have been marked with *
}
@media (min-width: 321px) and (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
}
header #header_center, header #header_right, header #header_left {
display:none;
}
#top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
clear: both;
display: block;
width: auto;
}
#profile_block .nav-list li, #course_block .nav-list li {
padding-bottom: 3px;
padding-top: 3px;
}
.navbar {
margin-top: 0em;
}
@ -144,6 +157,25 @@ The more frequent ones have been marked with *
#chatmain {
display:none;
}
#top_main_content .menu-column #profile_block{
float: none;
clear: both;
width: 250px;
margin-left: 10px;
background: none;
border:none;
box-shadow: none;
}
#top_main_content .menu-column #course_block{
float: none;
clear: both;
width: 250px;
margin-left: 10px;
background: none;
border:none;
box-shadow: none;
}
/* No topbar */
#topbar {
@ -261,17 +293,18 @@ The more frequent ones have been marked with *
display: none;
}
.section-mycampus #homepage {
width: 400px;
width: auto;
}
.section-mycampus #hot_courses {
width: 400px;
}
.section-mycourses #top_main_content {
margin-right: 15px;
margin-right: 0px;
}
.section-mycourses #main_content {
margin-right: 15px;
width: 400px;
width: 100%
;
}
.section-mycourses .course-box .course-box-actions {
display: none;
@ -352,8 +385,8 @@ The more frequent ones have been marked with *
#top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
clear: both;
display: inline-block;
width: 96%;
display: block;
width: auto;
}
#top_main_content .menu-column .well{
padding: 15px;
@ -375,7 +408,7 @@ The more frequent ones have been marked with *
}
#login_block #formLogin, #login_block #lang_form, #notice_block .homepage_notice {
color: #666666;
font-size: 16px;
font-size: 14px;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 15px;
@ -549,9 +582,7 @@ The more frequent ones have been marked with *
-moz-border-radius: 10px;
border-radius: 10px;
border: 3px solid #FFFFFF;
-webkit-box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.71);
-moz-box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.71);
box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.71);
box-shadow: none;
}
}
@ -566,9 +597,7 @@ The more frequent ones have been marked with *
visibility: hidden;
}
#top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
clear: both;
display: inline-block;
width: 94%;
/*width: 94%;*/
}
footer {
padding-top: 2em;
@ -579,8 +608,8 @@ The more frequent ones have been marked with *
padding-right: 1em;
}
#top_main_content .span9 {
float: left;
width: 570px;
width: 100%;
clear: both;
}
.section-mycampus #hot_courses .page-header {
width: 565px;
@ -593,13 +622,15 @@ The more frequent ones have been marked with *
background-image: none;
float: left;
margin-right: 10px;
border: none;
box-shadow: none;
}
#top_main_content .menu-column .block_user_info {
float: left;
width: 280px;
}
.section-mycampus .hot-course-box, .section-mycourses .course-box {
width: 94%;
width: auto;
}
.course-box-thumbnail-box{
float: left;

16
main/inc/lib/social.lib.php
Unescape View File

@ -643,29 +643,29 @@ class SocialManager extends UserManager
$html .= '<div class="well sidebar-nav"><ul class="nav nav-list">';
$active = $show == 'home' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/home.php">'.Display::return_icon('home.png', get_lang('Home'), array()).get_lang('Home').'</a></li>';
$html .= '<li class="home-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/home.php">'.Display::return_icon('home.png', get_lang('Home'), array()).get_lang('Home').'</a></li>';
$active = $show == 'messages' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/messages/inbox.php?f=social">'.Display::return_icon('instant_message.png', get_lang('Messages'), array()).get_lang('Messages').$count_unread_message.'</a></li>';
$html .= '<li class="messages-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/messages/inbox.php?f=social">'.Display::return_icon('instant_message.png', get_lang('Messages'), array()).get_lang('Messages').$count_unread_message.'</a></li>';
//Invitations
$active = $show == 'invitations' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/invitations.php">'.Display::return_icon('invitation.png', get_lang('Invitations'), array()).get_lang('Invitations').$total_invitations.'</a></li>';
$html .= '<li class="invitations-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/invitations.php">'.Display::return_icon('invitation.png', get_lang('Invitations'), array()).get_lang('Invitations').$total_invitations.'</a></li>';
//Shared profile and groups
$active = $show == 'shared_profile' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php">'.Display::return_icon('my_shared_profile.png', get_lang('ViewMySharedProfile'), array()).get_lang('ViewMySharedProfile').'</a></li>';
$html .= '<li class="shared-profile-icon'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php">'.Display::return_icon('my_shared_profile.png', get_lang('ViewMySharedProfile'), array()).get_lang('ViewMySharedProfile').'</a></li>';
$active = $show == 'friends' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/friends.php">'.Display::return_icon('friend.png', get_lang('Friends'), array()).get_lang('Friends').'</a></li>';
$html .= '<li class="friends-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/friends.php">'.Display::return_icon('friend.png', get_lang('Friends'), array()).get_lang('Friends').'</a></li>';
$active = $show == 'browse_groups' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/groups.php">'.Display::return_icon('group_s.png', get_lang('SocialGroups'), array()).get_lang('SocialGroups').'</a></li>';
$html .= '<li class="browse-groups-icon'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/groups.php">'.Display::return_icon('group_s.png', get_lang('SocialGroups'), array()).get_lang('SocialGroups').'</a></li>';
//Search users
$active = $show == 'search' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/search.php">'.Display::return_icon('zoom.png', get_lang('Search'), array()).get_lang('Search').'</a></li>';
$html .= '<li class="search-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/search.php">'.Display::return_icon('zoom.png', get_lang('Search'), array()).get_lang('Search').'</a></li>';
//My files
$active = $show == 'myfiles' ? 'active' : null;
$html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/myfiles.php">'.Display::return_icon('briefcase.png', get_lang('MyFiles'), array(), 16).get_lang('MyFiles').'</span></a></li>';
$html .= '<li class="myfiles-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/myfiles.php">'.Display::return_icon('briefcase.png', get_lang('MyFiles'), array(), 16).get_lang('MyFiles').'</span></a></li>';
$html .='</ul>
</div>';
}

3
main/template/default/layout/layout_2_col.tpl
Unescape View File

@ -37,6 +37,7 @@
{# Course block - teacher #}
{{ teacher_block }}
</div>
<div class="user_notification">
{# Notice #}
{{ notice_block }}
@ -51,7 +52,7 @@
{# Search (xapian) #}
{{ search_block }}
</div>
{# Classes #}
{{ classes_block }}

Write Preview
Loading…
Cancel
Save