From 7cc76e767ec19aa15daa623f0cc5e18e9a940c35 Mon Sep 17 00:00:00 2001 From: aragonc Date: Thu, 19 Mar 2015 19:21:58 -0500 Subject: [PATCH 01/11] effects and update scorm items presentation CT#7339 --- main/css/base.css | 133 ++++++++++++++---- main/img/icons/48/hidden-touch-left.png | Bin 0 -> 746 bytes main/img/icons/48/show-touch-right.png | Bin 0 -> 708 bytes .../inc/lib/javascript/jquery.lp_minipanel.js | 102 ++++++-------- main/newscorm/learnpath.class.php | 8 +- main/newscorm/lp_view.php | 19 +-- 6 files changed, 158 insertions(+), 104 deletions(-) create mode 100644 main/img/icons/48/hidden-touch-left.png create mode 100644 main/img/icons/48/show-touch-right.png diff --git a/main/css/base.css b/main/css/base.css index 39cd7166f9..5655d5646d 100755 --- a/main/css/base.css +++ b/main/css/base.css @@ -3333,7 +3333,7 @@ form .formw .freeze { } /* for section */ .scorm_item_section.scorm_completed{ - background:url("../img/icon_completed_section.png")no-repeat 280px center #606c88; + background:url("../img/icon_completed_section.png")no-repeat 98% center #606c88; padding-right: 1.5em; } .scorm_item_section{ @@ -3370,10 +3370,10 @@ form .formw .freeze { } /* items scorm*/ .scorm_item_normal.scorm_completed { - background:url("../img/icon_completed.png") no-repeat 280px center; + background:url("../img/icon_completed.png") no-repeat 98% center; } .scorm_item_normal.scorm_failed{ - background:url("../img/icon_failed.png") no-repeat 280px center; + background:url("../img/icon_failed.png") no-repeat 98% center; } .scorm_item_normal .scorm_item_level_0{ padding-left: .5em; @@ -5362,19 +5362,6 @@ i.size-32.icon-new-work{ /* LP SCORM */ /* Default LP left column values */ -#learning_path_left_zone { - float:left; - width:315px; - height:100%; - padding-left: 8px; - padding-right: 4px; -} - -#learning_path_left_zone #header { - font-size:14px; -} - - #author_image { border: 1px solid #CCCCCC; float: left; @@ -5555,24 +5542,78 @@ ul.holder li.bit-box a.closebutton{ visibility: hidden; display: none; } -/* Bar toggle scorm */ -.scorm-toggle{ - background-color: #ddd4b0 !important; - margin-left: 10px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - display: block; - cursor: pointer; +.sidebar-scorm, +.content-scorm{ + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; +} +.sidebar-scorm, +.content-scorm{ + float: left; } -.scorm-toggle.arrow-right{ - background: url("../img/arrow-right.png") no-repeat center center; +.total{ + width: 100%; } -.scorm-toggle.arrow-left{ - background: url("../img/arrow-left.png") no-repeat center center; +#touch-button{ + text-decoration: none; + position: fixed; + top: 40px; + left: -5px; + overflow: hidden; + width: 51px; + height: 51px; + border: none; + text-indent: 100%; + opacity: 50; + z-index: 2; +} +.hidden-touch{ + background: url("../img/icons/48/hidden-touch-left.png")center center no-repeat; +} +.show-touch{ + background: url("../img/icons/48/show-touch-right.png")center center no-repeat; +} +.inner_lp_toc{ + overflow-y:scroll; +} +.scorm-heading{ + font-size: 16px; + font-weight: bold; + padding: 10px; } /* CSS Responsive */ -@media (max-width: 480px) { +@media (min-width: 1025px) and (max-width: 1200px) { +.sidebar-scorm{ + width: 16.66666667%; +} +.content-scorm{ + width: 83.33333333%; +} + +} +@media (min-width: 1024px) { + .sidebar-scorm{ + width: 25.66666667%; + } +.content-scorm{ + width: 74.33333333%; + } + .total{ + width: 100%; + } +} +/* Portrait tablet to landscape and desktop - Escritorio pequeño o Tablet */ +@media (min-width: 768px) and (max-width: 979px) { + +} +/* Landscape phone to portrait tablet - Tablet o Smartphone Horizontal */ +@media (max-width: 767px) { + +} +/* Landscape phones and down - Solo Smartphone*/ +@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #learning_path_breadcrumb_zone { display: none; visibility: hidden; @@ -5580,4 +5621,36 @@ ul.holder li.bit-box a.closebutton{ #learning_path_main{ margin-top: 5px; } + #touch-button{ + top: 5px; + } + .sidebar-scorm{ + width: 100%; + } + .content-scorm{ + visibility: hidden; + } + .total{ + width: 100%; + visibility: visible; + } +} +@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; + } + .total{ + width: 100%; + visibility: visible; + } } \ No newline at end of file diff --git a/main/img/icons/48/hidden-touch-left.png b/main/img/icons/48/hidden-touch-left.png new file mode 100644 index 0000000000000000000000000000000000000000..7edc4a7e2a9601c487bdcce2356a4c4556571fac GIT binary patch literal 746 zcmV zi}{`ZF#jL(zL{@^wGWM)S$Ft3C;(%yW87Uh9(6_@4PJN;02;tj#R}__U5*aJsKo{b zZx3g#UmkeOW!KpZC5M^gtGqv(&9*5i0065M)>1B)cPT3X0IutDr3C;W6p)Sb0-7ig ztJiSjWH)+tH-j^_<%O2lH*hug7E^^HDK8YbbgUB>k9PVl=7l|`fv#I)q^$4=?T9z{ zF65Qg#waT3TNQK^cU1|hJ8(OU!|yQRBQ}SekSLI0=DDg z{=}TGQd`OYKLfQ+C?Ff*5I4snxOX~*L#<5#trCAQl$*i$+z(P-D3D2Y;B41k-^Hlx zPsDNO)Dd*td`8L(kI?q0?z@y%60rz5Taz>3y7a72fV$RJlZpH?IV+rjC+`-pQYs@E z;3_dXnriJBDmIjken9^7&_@mTU8n(_2jHj!13~4uM%FaDHM41ZOPMaQVm|tFOsvu z^D*|ZfYjX=fvytNZvlX~N=y}sQkFUj%D)Ff0ojBCvQbu`j==&H7D(#$JY&pJQXr|@ zlYOQ&qwD&j)@zh<_BJi}pFf*qr{?@lHaKgX^VxJd{arh3vNxQ&^yNb`mQ{gmyDOPY cCJz9A0rG6AVcXf$!2kdN07*qoM6N<$f}7by7ytkO literal 0 HcmV?d00001 diff --git a/main/img/icons/48/show-touch-right.png b/main/img/icons/48/show-touch-right.png new file mode 100644 index 0000000000000000000000000000000000000000..fd07aaf4f559db92ed0e4fe894bec70745e40e30 GIT binary patch literal 708 zcmV;#0z3VQP)l8?RNVG06ZMWeb9Bi;B+%qbX~`OzyI89Hq}O>@s&7T=pIbd46RnH zPrY6*?n(gwI3AA?(=?;56##(i^-5eV002(`r*XZ2hZf*@9@T0UsZR%`v4qGmCE0IWqIqUijPzAQztsOo7VYAsV zXQ>+)4u>FwK$0X&rC2cx1B1bUIZqY1TrTMM`<6;QlJ~!Xx6V_*X{aL>1OfGW9kMKg z*l>OSJtbzd8B?ArP%IXa&1NkZV?~lA)M_;p3T&V0)JGZ!1T2@jm0&Q)oOS&Mr~<5K z?f+!GUNdK@8yJtrI2;bPo)VMEggH+Y0D$>?es`fq^ZqyR)_Dpz4Ryq^SPZRJ%hpq( z)9GL|8ZqUmjq>?C5{ZN@<~+5P&*!sL=pOujKXaBUaJ^nFmAQvoev>M& zTrO>wSS%LIS?Y+V(<#d3GUD;LrBbYzrpf#*05F~snx;8&)Un|D_rO!YX`TX3<5~ei z$O&+ -function toggle_minipanel() { - +function minipanel(){ // Construct mini panel var panel = $('#lp_navigation_elem div:first').clone(); @@ -17,77 +15,59 @@ function toggle_minipanel() { $('#learning_path_main').append(panel); $('#learning_path_main #control tr').after(''); - $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html()); - $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5'); - $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5'); - $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5'); - $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5'); - $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5'); - $('#learning_path_main #control tr:eq(1) #progress_text').remove(); - $('#learning_path_main #control tr:eq(1) div').css('width',''); + $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html()); + $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5'); + $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5'); + $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5'); + $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5'); + $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5'); + $('#learning_path_main #control tr:eq(1) #progress_text').remove(); + $('#learning_path_main #control tr:eq(1) div').css('width',''); $('#learning_path_main #control .buttons').attr('text-align','center'); $('#content_id').css({ height: $('#content_id').height() - ($('#control').height() + 10) }); $('#learning_path_main #control .buttons img').click(function(){ $('#learning_path_main #control tr:eq(1)').remove(); - toggle_minipanel(); + minipanel(); }); - // Hiding navigation left zone - $('#learning_path_left_zone').hide(50); - $('#learning_path_right_zone').css('margin-left','10px'); - $('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE'); -} -function hiddenPanel(){ - $("#learning_path_left_zone").addClass('demo'); } -var left_width_mini = 20; // (relative) hide_bar position - -$(document).ready(function() { - - var left_width = $('#learning_path_left_zone').width(); - - //Adding div to hide panel - $('#learning_path_right_zone').before('
'); - //$('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"}); - +$(document).ready(function(){ - $("#hider_bar").click(function(){ - $("#learning_path_left_zone").css('display:none;'); - }); + $('#touch-button').click(function(){ - //Adding effects to hide bar - /* $('#hide_bar table').hover(function () { - if ($('#hide_bar').position().left >= left_width) - $(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888'); - else if($('#hide_bar').position().left <= left_width_mini) - $(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888'); - },function (){ - if($('#hide_bar').position().left >= left_width) - $(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE'); - else if($('#hide_bar').position().left <= left_width_mini) - $(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE'); + $('#learning_path_left_zone').toggle("slow",function(){ + $('#learning_path_right_zone').toggleClass('total'); + $(function(){ + $('#learning_path_right_zone').slideToggle(300); + minipanel(); + }); } - ); - */ - var original = $('#content_id').height(); - - // Adding functionality + ); + $(this).toggleClass('show-touch'); + $('#learning_path_right_zone').slideToggle(300); + }); + //effects items scorm content + $('.scorm_item_normal').click(function(){ + $('#learning_path_right_zone').fadeOut(300); + setTimeout(function(){ + $('#learning_path_right_zone').fadeIn(300); + },300); - /*$('#hide_bar table').toggle(function(){ - if ($('#hide_bar').position().left >= left_width) { - toggle_minipanel(); - } - }, - function() { - // Show navigation left zone - $('#learning_path_left_zone').show(50); - $('#learning_path_right_zone').css('marginLeft', left_width + 25 + 'px'); - /* $('#hide_bar table').css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE'); - $('#learning_path_main #control').remove(); - $('#content_id').css({ height: original}); - }); */ + }); + $('.scorm-previous').click(function(){ + $('#learning_path_right_zone').fadeOut(300); + setTimeout(function(){ + $('#learning_path_right_zone').fadeIn(300); + },300); + }); + $('.scorm-next').click(function(){ + $('#learning_path_right_zone').fadeOut(300); + setTimeout(function(){ + $('#learning_path_right_zone').fadeIn(300); + },300); + }); }); diff --git a/main/newscorm/learnpath.class.php b/main/newscorm/learnpath.class.php index 5ab5464d84..84b000a5dd 100755 --- a/main/newscorm/learnpath.class.php +++ b/main/newscorm/learnpath.class.php @@ -1910,8 +1910,8 @@ class learnpath $navbar = '
- - . + + .
'; @@ -1919,8 +1919,8 @@ class learnpath $navbar = '
- - + +
'; } return $navbar; diff --git a/main/newscorm/lp_view.php b/main/newscorm/lp_view.php index fa56d42782..e06480d3de 100755 --- a/main/newscorm/lp_view.php +++ b/main/newscorm/lp_view.php @@ -372,7 +372,11 @@ if ($is_allowed_to_edit) { echo ''; echo ''; } - echo '
'; + /* button hiden left zone */ + echo ''; + /* Fin left zone */ + echo '
'; + echo ' - -
@@ -462,10 +463,10 @@ if ($is_allowed_to_edit) {
- - + -
+
-
+