fix panel timeline BT#10311

app/Resources/public/css/base.css

@@ -3621,67 +3621,6 @@ a:active{
 .lt-ie7 #announcements_page {
     width:450px !important;
 }
-/* Disabling chat */
-.lt-ie7 #chatmain {
-    display:none;
-}
-
-#my_timeline {
-    margin: 0px auto;
-}
-
-#dates {
-    /* height: 60px; */
-    overflow: hidden;
-    width: 800px;
-}
-
-#dates .selected {
-    font-size: 22px;
-    font-weight: bold;
-    font-color: #E06B04;
-}
-
-#dates li {
-    float: left;
-    font-size: 14px;
-    height: 50px;
-    list-style: none outside none;
-    text-align: center;
-    width: 130px;
-}
-
-#issues {
-    height: 350px;
-    overflow: hidden;
-    width: 800px;
-}
-
-#issues li {
-    float: left;
-    height: 350px;
-    list-style: none outside none;
-    width: 800px;
-}
-
-#issues li h3 {
-    color: #FFCC00;
-    font-size: 48px;
-    margin: 0px;
-    text-shadow: 1px 1px 2px #000000;
-}
-
-#issues li p {
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 22px;
-    margin-right: 70px;
-    text-shadow: 1px 1px 2px #000000;
-}
-
-.td_actions {
-    width: 250px;
-}
 
 /* **** FORUM CATEGORY **** */
 .forum_category {
@@ -6495,3 +6434,125 @@ a.sessionView {
     font-size: 20px;
   }
 }
+#my_timeline {
+    width: 900px;
+    height: 350px;
+    overflow: hidden;
+    margin: 20px auto;
+    position: relative;
+    background: url('../../main/img/timeline/dot.gif') left 45px repeat-x;
+}
+#dates {
+    width: 800px;
+    height: 60px;
+    overflow: hidden;
+}
+#dates li {
+    list-style: none;
+    float: left;
+    width: 100px;
+    height: 50px;
+    font-size: 18px;
+    text-align: center;
+    background: url('../../main/img/timeline/biggerdot.png') center bottom no-repeat;
+}
+#dates a {
+    line-height: 38px;
+    padding-bottom: 10px;
+}
+#dates .selected {
+    font-size: 20px;
+}
+#issues {
+    width: 800px;
+    height: 350px;
+    overflow: hidden;
+}	
+#issues li {
+    width: 800px;
+    height: 350px;
+    list-style: none;
+    float: left;
+}
+#issues li.selected img {
+    -webkit-transform: scale(1.1,1.1);
+    -moz-transform: scale(1.1,1.1);
+    -o-transform: scale(1.1,1.1);
+    -ms-transform: scale(1.1,1.1);
+    transform: scale(1.1,1.1);
+}
+#issues li img {
+    float: left;
+    margin: 10px 30px 10px 50px;
+    background: transparent;
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
+    zoom: 1;
+    -webkit-transition: all 2s ease-in-out;
+    -moz-transition: all 2s ease-in-out;
+    -o-transition: all 2s ease-in-out;
+    -ms-transition: all 2s ease-in-out; 
+    transition: all 2s ease-in-out;
+    -webkit-transform: scale(0.7,0.7);
+    -moz-transform: scale(0.7,0.7);
+    -o-transform: scale(0.7,0.7);
+    -ms-transform: scale(0.7,0.7);
+    transform: scale(0.7,0.7);
+}
+#issues li h1 {
+    color: #ffcc00;
+    font-size: 48px;
+    margin: 20px 0;
+    text-shadow: #000 1px 1px 2px;
+}
+#issues li p {
+    font-size: 14px;
+    margin-right: 70px;
+    font-weight: normal;
+    line-height: 22px;
+    text-shadow: #000 1px 1px 2px;
+}
+#grad_left,
+#grad_right {
+    width: 100px;
+    height: 350px;
+    position: absolute;
+    top: 0;
+}
+#grad_left {
+    left: 0;
+     /* background: url('../../main/img/timeline/grad_left.png') repeat-y; */
+}
+#grad_right {
+    right: 0;
+    /* background: url('../../main/img/timeline/grad_right.png') repeat-y; */
+}
+#next,
+#prev {
+    position: absolute;
+    top: 0;
+    font-size: 70px;
+    top: 170px;
+    width: 22px;
+    height: 38px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    text-indent: -9999px;
+    overflow: hidden;
+}
+#next:hover,
+#prev:hover {
+    background-position: 0 -76px;
+}
+#next {
+    right: 0;
+    background-image: url('../../main/img/timeline/next.png');
+}
+#prev {
+    left: 0;
+    background-image: url('../../main/img/timeline/prev.png');
+}
+#next.disabled,
+#prev.disabled {
+    opacity: 0.2;
+}

main/auth/my_progress.php

@@ -15,7 +15,7 @@ $nameTools = get_lang('MyProgress');
 
 api_block_anonymous_users();
 
-$htmlHeadXtra[] = api_get_js('jquery.timelinr-0.9.5.js');
+$htmlHeadXtra[] = api_get_js('jquery.timelinr-0.9.54.js');
 $htmlHeadXtra[] = "
 <script language='javascript'>
 $(function() {
@@ -24,6 +24,7 @@ $(function() {
         autoPlayPause: 2000
     })
 });
+
 </script>";
 
 $user_id = api_get_user_id();
@@ -55,10 +56,8 @@ if (!empty($course_user_list)) {
         $course_image = '<img src="'.$course_info['course_image'].'">';
         $dates .= '<li><a href="#'.$login.'">'.api_get_utc_datetime($login).'</a></li>';
         $issues .= '<li id ="'.$login.'">
-                        <div class="row">
-                            <div class="col-md-12"><div class="thumbnail">'.$course_image.'</div>
-                        </div>
-                        <div class="col-md-3">'.sprintf(
+                        <div class="img-course">'.$course_image.'</div>
+                        <div class="text-course">'.sprintf(
                             get_lang('YouHaveEnteredTheCourseXInY'),
                             $courseInfo['code'],
                             api_convert_and_format_date($login, DATE_FORMAT_LONG)
@@ -75,20 +74,19 @@ if (!empty($dates)) {
     if (!empty($content)) {
         $content .= '';
     }
-    $content .= '<div class="row"><div class="col-md-12">'.Display::page_subheader(get_lang('Timeline'));
-    $content .= '<div id="my_timeline">';
     
-    $actionsLeft = '<a href="#" id="prev">' . Display::return_icon('previous.png',  get_lang('Previous'), null, ICON_SIZE_MEDIUM) . '</a>';
-    $actionsRight = '<a href="#" id="next">' . Display::return_icon('next.png',  get_lang('Next'), null, ICON_SIZE_MEDIUM) . '</a>';
-    $content .= Display::toolbarAction('toolbar-linetime',array(0 => $actionsLeft, 1 => $actionsRight), 2, true);
+    $content .= Display::page_subheader(get_lang('Timeline'));
+    $content .= '<div class="row">';
+    $content .= '<div class="col-md-12">';
+    $content .= '<div id="my_timeline">';
+    $content .= '<ul id="dates">' . $dates . '</ul>';
+    $content .= '<ul id="issues">' . $issues . '</ul>';
+    $content .= '<div id="grad_left"></div>';
+    $content .= '<div id="grad_right"></div>';
+    $content .= '<a href="#" id="prev">' . Display::return_icon('previous.png',  get_lang('Previous'), null, ICON_SIZE_MEDIUM) . '</a>';
+    $content .= '<a href="#" id="next">' . Display::return_icon('next.png',  get_lang('Next'), null, ICON_SIZE_MEDIUM) . '</a>';
+    $content .= '</div></div>';
     
-    $content .= '<ul id="dates">
-        '.$dates.'
-    </ul>
-    <ul id="issues">
-        '.$issues.'
-    </ul>
-    </div></div>';
 }
 
 $message = null;