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

Mobile: many fixes to size changes - must still be tested in IE - refs #5658

Browse Source
skala
Yannick Warnier 13 years ago
parent 2c0a417fda
commit 43debfcfe8
2 changed files with 176 additions and 36 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. 12
      main/css/base.css
  2. 200
      main/css/responsive.css

12
main/css/base.css
Unescape View File

@ -253,13 +253,13 @@ form .formw input {
/* end chamilo forms fixes */
#main_content .span3 {
#top_main_content .span3 {
float: right;
}
#main_content .span9 {
#top_main_content .span9 {
float: left;
}
#main_content .span6 {
#top_main_content .span6 {
width: 565px;
}
@ -2020,6 +2020,10 @@ input.maininput:focus {
margin-bottom: 20px;
}
#course_tools .span4 {
width: 250px;
}
.big_icon img {
padding:5px;
-moz-border-radius:10px;
@ -3412,7 +3416,7 @@ a:active{
}
/*#homepage, #hot_courses, #announcements {*/
#main_content section{
#top_main_content section{
margin-left: 5px;
}
.welcome_course li {

200
main/css/responsive.css
Unescape View File

@ -1,12 +1,15 @@
/* media queries responsive */
/* LARGE DESKTOP SCREENS */
@media (min-width: 1210px) {
@media (min-width: 1201px) {
}
@media (max-width: 1200px) {
}
/* Tablet or large-screen phone */
@media (min-width: 980px) and (max-width: 1024px) {
@media (max-width: 1024px) {
/* fixes tabs */
.subnav .nav-tabs > li > a, .subnav .nav-pills > li > a {
padding-left: 6px;
@ -23,6 +26,16 @@
.section-social #top_main_content .span3 {
width: 200px;
}
#top_main_content #hot_courses .span9 .span6 {
width: 330px;
}
/* Space between course tools */
#course_tools .row .span4 {
width: 240px;
}
#course_tools .row .span4 h4 {
font-size: 14px;
}
}
@media (max-width: 979px) {
@ -54,8 +67,8 @@
display:none;
}
.subnav .nav > li > a, .navbar .dropdown-menu a {
color: #ccc;
.subnav .nav > li > a, .navbar .dropdown-menu a, #main .subnav .dropdown-menu li a {
color: #fff;
}
.subnav .nav > li > a:hover,
@ -73,7 +86,10 @@
}
#top_main_content .span9 {
width: 500px;
margin-left: 5px;
}
/* Space between course tools */
#course_tools .row .span4 {
width: 220px;
}
}
@ -82,11 +98,6 @@
#topbar {
display:none;
}
#course_tools .row .span4 h4 {
font-size: 14px;
}
.subnav .dropdown-toggle {
display:none;
}
@ -99,7 +110,7 @@
text-align: center !important;
}
.subnav .nav > li > a, .navbar .dropdown-menu a {
.subnav .nav > li > a, .navbar .dropdown-menu a, #main .subnav .dropdown-menu li a {
color: white;
}
@ -148,7 +159,7 @@
}
.subnav .navbar-inner li a:hover {
background-color: #666;
background-color: #6B8E23;
color: #fff;
}
@ -207,6 +218,14 @@
width: 480px;
margin-left: 5px;
}
/* Space between course tools */
#course_tools .row .span4 {
width: 180px;
float: left;
}
#course_tools .row .span4 h4 {
font-size: 14px;
}
/* Footer fixes */
@ -230,9 +249,58 @@
}
}
/* Intermediary */
@media (max-width: 680px) {
#top_main_content .span9 {
width: 320px;
}
#announcements .bx-prev, #announcements .bx-next {
display: none;
}
}
@media (max-width: 640px) {
.section-mycampus #top_main_content .span3 #user_image_block, .section-mycampus #top_main_content .span3 #profile_block,
.section-mycourses #top_main_content .span3 #user_image_block, .section-mycourses #top_main_content .span3 #profile_block {
margin: 5px;
width: 202px;
float: left;
}
.section-mycampus #top_main_content .span3 #course_block, .section-mycampus #top_main_content .span3 #help_block, .section-mycampus #top_main_content .span3 #skill_block,
.section-mycourses #top_main_content .span3 #course_block, .section-mycourses #top_main_content .span3 #help_block, .section-mycourses #top_main_content .span3 #skill_block {
margin: 5px;
width: 202px;
float: left;
}
.section-mycampus #top_main_content .span3 #help_block {
width: 202px;
float: left;
margin: 5px;
}
#top_main_content .span9 {
width: 540px;
margin-left: 5px;
}
#top_main_content #hot_courses .span9 .thumbnail, .section-mycourses #top_main_content .span9 #main_content .thumbnail {
width: 80px;
float: left;
}
#top_main_content #hot_courses .span9 .well_border, .section-mycourses #top_main_content .span9 #main_content .well {
padding: 8px;
}
#top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
width: 400px;
float: right;
min-height: auto;
}
}
/* Small-screen phones, horizontal */
@media (max-width: 480px) {
body {
padding-left: 6px;
padding-right: 6px;
}
header #header_center, header #header_right, header #header_left {
display:none;
}
@ -260,7 +328,8 @@
/* Brand fix */
.navbar .brand {
font-size: 14px;
margin-top: 2px;
font-size: 18px;
}
.subnav .dropdown-toggle {
@ -314,27 +383,45 @@
#course_tools .row .span4 {
float: left;
height: 150px;
width: 133px;
width: 148px;
}
#course_tools .row .span4 h4 {
font-size: 14px;
font-size: 11px;
}
#course_tools .span12 .page-header {
text-align: center;
}
.subbav .nav > li > a:hover,
.subbav .dropdown-menu a:hover {
background-color: #555;
}
/* Improving the login form */
#top_main_content .span3 #login_block {
width: 280px;
width: 190px;
float: left;
margin-left: 5px;
margin-top: 5px;
}
#top_main_content .span3 #help_block {
width: 100px;
#top_main_content .span3 #login_block #lang_form {
margin-bottom: 4px;
}
#top_main_content .span3 #login_block #formLogin form {
margin-bottom: 8px;
}
#top_main_content .span3 #login_block #formLogin .control-label{
font-weight: bold;
}
#top_main_content .span3 #login_block ul.nav-list {
float: left;
width: 120px;
margin-top: -40px;
}
#top_main_content .span3 #login_block .btn {
float: right;
margin-left: 10px;
margin-right: 10px;
}
/* Improving blocks layout in social network */
.section-social #top_main_content .span3 {
width: 170px;
}
@ -353,31 +440,39 @@
/*min-height: 200px;*/
}
#top_main_content .span9 {
width: 390px;
width: 400px;
margin-left: 5px;
}
/* Improving blocks layout in my courses and homepage */
.section-mycampus #top_main_content.span9 {
float: left;
}
#top_main_content .span9 #announcements .span6 {
width: 320px;
width: 330px;
}
#top_main_content #hot_courses .span9 .thumbnail {
#top_main_content #hot_courses .span9 .thumbnail, .section-mycourses #top_main_content .span9 #main_content .thumbnail {
width: 80px;
float: left;
}
#top_main_content #hot_courses .span9 .well_border {
#top_main_content #hot_courses .span9 .well_border, .section-mycourses #top_main_content .span9 #main_content .well {
padding: 8px;
}
#top_main_content #hot_courses .span9 .span6 {
width: 250px;
#top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
width: 270px;
float: right;
min-height: auto;
}
.section-social #top_main_content .span9, .section-mycourses #top_main_content .span9 {
width: 480px;
margin-left: 5px;
.section-mycourses #top_main_content .span9 #main_content .well .pull-right, .section-mycampus #top_main_content .span9 #hot_courses .pull-right {
display: none;
}
.section-mycampus #top_main_content .span3, .section-mycourses #top_main_content .span3 {
float: left;
width: 100%;
width: auto;
clear: both;
}
.section-social #top_main_content .span9, .section-mycourses #top_main_content .span9 {
width: 480px;
margin-left: 5px;
}
.section-mycampus #top_main_content .span3 #user_image_block, .section-mycampus #top_main_content .span3 #profile_block,
.section-mycourses #top_main_content .span3 #user_image_block, .section-mycourses #top_main_content .span3 #profile_block {
@ -391,11 +486,29 @@
width: 192px;
float: left;
}
.section-mycampus #top_main_content .span3 #help_block {
width: 192px;
float: left;
margin-left: 5px;
}
.section-mycampus #top_main_content #homepage {
margin-top: 20px;
}
.section-mycourses #top_main_content .span9 #main_content {
width: 420px;
}
#top_main_content .page-header h1 {
text-align: center;
}
}
/* Phone, vertical screen */
@media (max-width: 320px) {
body {
padding-left: 3px;
padding-right: 3px;
}
header #header_center, header #header_right, header #header_left {
display:none;
}
@ -403,6 +516,7 @@
margin-top: 1em;
}
.navbar .brand {
margin-top: 2px;
font-size: 14px;
}
#top_main_content .span3 #login_block {
@ -430,12 +544,34 @@
.subnav .navbar-inner .in{
margin-top: 45px
}
#top_main_content .span9 {
width: 290px;
margin: 0;
}
#top_main_content .span3 #login_block {
width: 180px;
width: 190px;
}
#top_main_content .span3 #help_block {
width: 100px;
}
/*
.section-mycourses #top_main_content .span9 #main_content {
width: 290px;
}
*/
#top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
width: 150px;
}
#top_main_content #hot_courses .span9 .span6 .btn {
float: left;
margin-top: 5px;
}
#top_main_content #hot_courses .vote_label_info {
display: none;
}
#course_tools .row .span4 {
width: 120px;
}
}

Write Preview
Loading…
Cancel
Save