Explorar o código

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

Yannick Warnier %!s(int64=12) %!d(string=hai) anos
pai
achega
43debfcfe8
Modificáronse 2 ficheiros con 176 adicións e 36 borrados
  1. 8 4
      main/css/base.css
  2. 168 32
      main/css/responsive.css

+ 8 - 4
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 {

+ 168 - 32
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;
+    }
 }