Browse Source

Fix responsive design for LP view - refs #7972

Angel Fernando Quiroz Campos 9 years ago
parent
commit
f3148957c5

+ 0 - 18
app/Resources/public/css/base.css

@@ -5758,9 +5758,6 @@ a.sessionView {
 .sidebar-scorm{
   width: 16.66666667%;
 }
-.content-scorm{
-  width: 83.33333333%;
-}
 #learning_path_right_zone{
     width: 68%;
 }
@@ -5769,9 +5766,6 @@ a.sessionView {
   .sidebar-scorm{
     width: 25.66666667%;
   }
-.content-scorm{
-    width: 76.33333333%;
-  }
   .total{
   width: 100%;
   }
@@ -5806,8 +5800,6 @@ a.sessionView {
 /* Landscape phones and down */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   #learning_path_breadcrumb_zone {
-    display: none;
-    visibility: hidden;
   }
   #learning_path_main{
     margin-top: 5px;
@@ -5818,9 +5810,6 @@ a.sessionView {
   .sidebar-scorm{
     width: 100%;
   }
-  .content-scorm{
-    visibility: hidden;
-  }
   .total{
     width: 100%;
     visibility: visible;
@@ -5886,19 +5875,12 @@ a.sessionView {
   }
 }
 @media (min-width : 480px) and (max-width: 767px) {
-  #learning_path_breadcrumb_zone {
-    display: none;
-    visibility: hidden;
-  }
   #touch-button{
     top: 5px;
   }
   .sidebar-scorm{
     width: 100%;
   }
-  .content-scorm{
-    visibility: hidden;
-  }
   #control-bottom.well{
     padding: 10px;
   }

+ 94 - 46
app/Resources/public/css/scorm.css

@@ -369,58 +369,99 @@ See https://support.chamilo.org/issues/6976
 
 
 /* Extra small devices (mobiles, 767px and down) */
+#learning_path_main {
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+}
 
+#learning_path_left_zone,
+#learning_path_right_zone {
+    bottom: 0;
+    box-sizing: content-box;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition-property: left width;
+    transition-duration: 0.5s;
+}
 
-/* Small devices (tablets, 768px and up) */
-@media (min-width: 768px) {
-    
+#learning_path_left_zone .lp-view-zone-container,
+#learning_path_right_zone .lp-view-zone-container {
+    bottom: 0;
+    left: 0;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
-/* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+#learning_path_toc {
+    bottom: 5px;
+    left: 5px;
+    overflow: auto;
+    position: absolute;
+    right: 5px;
+    top: 100%;
+    transition-property: top;
+    transition-duration: 0.1s;
+}
+
+#learning_path_right_zone {
+    left: 100%;
+    width: 100%;
+}
+
+#lp_navigation_elem {
+    position: absolute;
+    right: 5px;
+    top: 40px;
+    width: 70%;
+}
+
+#learning_path_right_zone .lp-view-tabs .tab-content {
+    bottom: 5px;
+    left: 5px;
+    position: absolute;
+    right: 5px;
+    top: 95px;
+}
+#learning_path_right_zone .tab-pane{
+    height: 100%;
+    position: relative;
+}
+#learning_path_right_zone .tab-pane iframe {
+    border: 0 none;
+    height: 100%;
+    width: 100%;
+}
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) {
     #learning_path_main {
-        height: 100%;
-        margin: 0;
-        position: relative;
+        
     }
 
     #learning_path_left_zone {
-        bottom: 0;
-        box-sizing: content-box;
-        left: 0;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 350px;
+        width: 250px;
     }
 
     #learning_path_right_zone {
-        bottom: 0;
-        box-sizing: content-box;
-        left: 350px;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: calc(100% - 350px);
+        left: 250px;
+        width: calc(100% - 250px);
     }
 
     #learning_path_main.lp-view-include-breadcrumb #learning_path_left_zone,
     #learning_path_main.lp-view-include-breadcrumb #learning_path_right_zone {
         top: 40px;
     }
-
     #learning_path_left_zone .lp-view-zone-container,
     #learning_path_right_zone .lp-view-zone-container {
-        bottom: 0;
-        left: 0;
         padding: 10px;
-        position: absolute;
-        right: 0;
-        top: 0;
     }
     #learning_path_left_zone .lp-view-zone-container {
         padding-right: 5px;
@@ -432,39 +473,46 @@ See https://support.chamilo.org/issues/6976
     #learning_path_toc {
         bottom: 10px;
         left: 10px;
-        overflow: auto;
-        position: absolute;
         right: 5px;
-        top: 100%;
-        transition-property: top;
-        transition-duration: 0.1s;
     }
 
     #lp_navigation_elem {
-        position: absolute;
         right: 10px;
         top: 45px;
         width: 75%;
     }
+
     #learning_path_right_zone .lp-view-tabs .tab-content {
         bottom: 10px;
-        left: 5px;
-        position: absolute;
         right: 10px;
         top: 100px;
     }
     #learning_path_right_zone .tab-pane{
-        height: 100%;
-        position: relative;
     }
     #learning_path_right_zone .tab-pane iframe {
-        border: 0 none;
-        height: 100%;
-        width: 100%;
+    }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+    #learning_path_left_zone {
+        width: 300px;
+    }
+
+    #learning_path_right_zone {
+        left: 300px;
+        width: calc(100% - 300px);
     }
 }
 
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
-    
+    #learning_path_left_zone {
+        width: 350px;
+    }
+
+    #learning_path_right_zone {
+        left: 350px;
+        width: calc(100% - 350px);
+    }
 }

+ 4 - 4
main/template/default/learnpath/view.tpl

@@ -1,6 +1,6 @@
 <div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }}">
     {% if is_allowed_to_edit %}
-        <div id="learning_path_breadcrumb_zone">
+        <div id="learning_path_breadcrumb_zone" class="hidden-xs">
             {{ breadcrumb }}
         </div>
     {% endif %}
@@ -48,7 +48,7 @@
                                     <!--- gamification -->    
                                     <div id="scorm-gamification">
                                         <div class="row">
-                                            <div class="col-xs-8">
+                                            <div class="col-xs-6">
                                                 {% if gamification_stars > 0 %}
                                                     {% for i in 1..gamification_stars %}
                                                         <em class="fa fa-star level"></em>
@@ -61,7 +61,7 @@
                                                     {% endfor %}
                                                 {% endif %}
                                             </div>
-                                            <div class="col-xs-4 text-right">
+                                            <div class="col-xs-6 text-right">
                                                 {{ "XPoints"|get_lang|format(gamification_points) }}
                                             </div>
                                         </div>
@@ -104,7 +104,7 @@
                 <div class="lp-view-zone-container">
                     <div id="lp_navigation_elem" class="navegation-bar pull-right text-right">
                         <a href="{{ button_home_url }}" class="btn btn-link" target="_self" onclick="javascript: window.parent.API.save_asset();">
-                            <em class="fa fa-home fa-2x"></em> {{ button_home_text }}
+                            <em class="fa fa-home fa-2x"></em> <span class="hidden-xs hidden-sm">{{ button_home_text }}</span>
                         </a>
                         {{ navigation_bar }}
                     </div>