diff --git a/main/css/base.css b/main/css/base.css index 92b39883e4..2913a7dd48 100644 --- a/main/css/base.css +++ b/main/css/base.css @@ -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 { diff --git a/main/css/responsive.css b/main/css/responsive.css index c4a1de2d98..9aa2b350d9 100644 --- a/main/css/responsive.css +++ b/main/css/responsive.css @@ -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; + } }