Browse Source

Updating css and html programming didactic structure

aragonc 10 years ago
parent
commit
a914c0afd5

+ 15 - 6
main/course_home/course_home.php

@@ -48,6 +48,21 @@ require_once dirname(__FILE__).'/../inc/global.inc.php';
 //unset($_SESSION['lpobject']);
 
 $htmlHeadXtra[] ='<script>
+
+/* option show/hidden thematic-postit */
+
+$(document).ready(function(){
+        $("#thematic-show").click(function(){
+            $(".btn-hidden-thematic").hide();
+            $(".btn-show-thematic").show(); //muestro mediante clase
+        });
+        $("#thematic-hidden").click(function(){
+        $(".btn-show-thematic").hide(); //muestro mediante clase
+        $(".btn-hidden-thematic").show();
+    });
+});
+
+
 $(document).ready(function() {
 	$(".make_visible_and_invisible").attr("href", "javascript:void(0);");
 	$(".make_visible_and_invisible > img").click(function () {
@@ -102,12 +117,6 @@ $(document).ready(function() {
 	});
 });
 
-/* toogle for post-it in course home */
-$(function() {
-	$(".thematic-postit-head").click(function() {
-		$(".thematic-postit-center").slideToggle("fast");
-	});
-});
 
 </script>';
 

+ 0 - 37
main/css/base.css

@@ -1295,39 +1295,6 @@ button.next.disabled {
     text-shadow: gray 3px 3px 2px;
 }
 
-/* THEMATIC ADVANCE */
-.thematic-postit {
-    width:250px;
-    height:auto;
-    overflow:hidden;
-    float:right;
-}
-.thematic-postit-top {
-    background-image: url('../img/postit_top.png');
-    height: 38px;
-
-}
-.thematic-postit-top h3 {
-    margin:20px 5px 10px 20px;
-    padding-top:40px;
-}
-
-.thematic-postit-bottom {
-    background-image: url('../img/postit_bottom.png');
-    height:40px;
-}
-.thematic-postit-center {
-    background-image: url('../img/postit_center.png');
-    height:auto;
-    margin-top: 0px;
-    margin-bottom:-16px;
-    padding: 28px 20px 0;
-}
-
-#titlethematic{
-    text-transform: uppercase;
-}
-
 /* ATTENDANCE */
 
 div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.row div.formw  {
@@ -3698,10 +3665,6 @@ a:active{
     text-shadow: 1px 1px 2px #000000;
 }
 
-#course_tools .row h3 {
-    margin-top:10px;
-}
-
 .td_actions {
     width: 250px;
 }

+ 81 - 0
main/css/chamilo/default.css

@@ -26,6 +26,87 @@ a:active {
     text-decoration: none;
     color : #3757f7;
 }
+/* START COURSE PROGRESS */
+.thematic-postit{
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.thematic-postit .tittle-score{
+  padding-bottom: 5px;
+  font-size: 16px;
+  color: #006699;
+}
+.thematic-postit .topics{
+  font-size: 12px;
+  padding-bottom: 5px;
+  color: #006699;
+}
+.items-progress {
+  border: 1px solid #ccc;
+  padding: 5px;
+  margin-top: 5px;
+  background-color: #FEF4FF;
+}
+.items-progress .date{
+  color: #666;
+  font-size: 11px;
+  display: block;
+}
+.items-progress .title{
+  font-size: 14px;
+  line-height: 18px;
+  display: block;
+}
+.items-progress .time{
+  display: block;
+  padding-top: 5px;
+}
+.info-progress{
+  padding: 10px;
+}
+.score-thematic .score{
+  text-align: right;
+}
+.score-thematic .score, .score-thematic .name-student{
+  color: #FFFFFF;
+}
+.score-thematic .name-student{
+  font-weight: bold;
+  font-size: 16px;
+  padding-bottom: 0px;
+  margin: 0px;
+}
+.score-thematic{
+  color: #FFFFFF;
+}
+.score-thematic p{
+  padding: 0px;
+  margin: 0px;
+}
+.accordion-heading .accordion-toggle {
+  display: inline;
+  padding-bottom: 3px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 3px;
+  float: right;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.accordion-heading .title-accordion{
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.accordion-heading {
+  background:url(images/thematic.png) no-repeat left bottom #55a1d7;
+  color: #006699;
+}
+.collapse.in {
+  height: auto;
+}
+/* END COURSE PROGRESS*/
 .navbar .nav > li > a {
     float: none;
     line-height: 24px;

+ 73 - 6
main/inc/introductionSection.inc.php

@@ -193,7 +193,10 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 
 	if (!empty($thematic_advance_info)) {
 
-		$thematic_advance = get_lang('CourseThematicAdvance').'&nbsp;'.$thematic->get_total_average_of_thematic_advances().'%';
+		/*$thematic_advance = get_lang('CourseThematicAdvance').'&nbsp;'.$thematic->get_total_average_of_thematic_advances().'%';*/
+		$thematic_advance = get_lang('CourseThematicAdvance');
+		$thematicScore = $thematic->get_total_average_of_thematic_advances().'%';
+		$thematicUrl = api_get_path(WEB_CODE_PATH).'course_progress/index.php?action=thematic_details&'.api_get_cidreq();
 		if (api_is_allowed_to_edit(null, true)) {
 			//$thematic_advance = '<a href="'.api_get_path(WEB_CODE_PATH).'course_progress/index.php?action=thematic_details&'.api_get_cidreq().'">'.get_lang('CourseThematicAdvance').'&nbsp;'.$thematic->get_total_average_of_thematic_advances().'%</a>';
 		}
@@ -201,15 +204,71 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 
 		$thematic_advance_info['start_date'] = api_get_local_time($thematic_advance_info['start_date']);
 		$thematic_advance_info['start_date'] = api_format_date($thematic_advance_info['start_date'], DATE_TIME_FORMAT_LONG);
+		$userInfo = $_SESSION['_user'];
 
+		
 		$thematic_description_html = '<div class="thematic-postit">
+									  <div class="row-fluid"><div class="span12">
+			    	                  <div class="accordion" id="progress-bar-course">
+						              		<div class="accordion-group">
+						              		<div class="accordion-heading">
+									  		<div class="title-accordion">
+									  <div class="row-fluid score-thematic">
+									  <div class="span4">';
+		$thematic_description_html.='<div class="span5"><h1 class="score">'.$thematicScore.'</h1></div>
+									 <div class="span7"><h3 class="name-student">'.$userInfo['complete_name'].'</h3><p>'.$thematic_advance.'</p></div></div>';
+		$thematic_description_html.='<div class="span8">
+									 <a id="thematic-show" class="btn btn-small btn-primary accordion-toggle btn-hidden-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course">
+								     '.get_lang('ClickToShowDetails').'
+								     </a>
+								     <a id="thematic-hidden" class="btn btn-small accordion-toggle btn-show-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course" style="display:none;">
+									 '.get_lang('ClickToHideDetails').'
+								     </a>
+								     </div>
+								     </div>
+									</div>	 
+									</div>';
+		$thematic_description_html.='<div class="accordion-body collapse in" id="pross" >
+									<div class="accordion-inner">
+									<div class="row-fluid">
+									<div class="span4">
+										<div class="row-fluid">
+										<div class="span4">
+											<div class="thumbnail">
+												<img src="'.$userInfo['avatar'].'" class="img-polaroid">
+											</div>
+										</div>
+									<div class="span8">
+											<div class="info-progress">
+												<div class="tittle-score">'.$thematic_advance.'&nbsp;'.$thematicScore.'</div>
+													<div class="progress progress-striped">
+	    												<div class="bar" style="width: '.$thematicScore.';"></div>
+	   												</div>
+	   												<a href="'.$thematicUrl.'" class="btn btn-info">'.get_lang('ShowFullCourseAdvance').'</a>
+   												</div>
+											</div>
+										</div>
+									</div>';
+		$thematic_description_html.='<div class="span8">
+										<div class="topics">'.get_lang('NextTopics').'</div>
+										<div class="row-fluid">';
+		$thematic_description_html.='<div class="span5 items-progress">
+										<p class="date">'.$thematic_advance_info['start_date'].'</p>
+										<h3 class="title">'.$thematic_advance_info['content'].'</h3>
+										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info['duration'].' <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>
+									</div>';
+
+
+
+
+		/*$thematic_description_html = '<div class="thematic-postit">
 								  	  <div class="thematic-postit-top"><h3><a class="thematic-postit-head" style="" href="#"> '.$thematic_advance.'</h3></a></div>
 								  	  <div class="thematic-postit-center" style="display:none">';
 		$thematic_description_html .= '<div><strong>'.$thematic_info['title'].'</strong></div>';
 		$thematic_description_html .= '<div style="font-size:8pt;"><strong>'.$thematic_advance_info['start_date'].'</strong></div>';
 		$thematic_description_html .= '<div>'.$thematic_advance_info['content'].'</div>';
 		$thematic_description_html .= '<div>'.get_lang('DurationInHours').' : '.$thematic_advance_info['duration'].'</div>';
-
+*/
 
 		if (!empty($thematic_advance_info2)){
 			$thematic_info2 = $thematic->get_thematic_list($thematic_advance_info2['thematic_id']);
@@ -217,15 +276,23 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 			$thematic_advance_info2['start_date'] = api_get_local_time($thematic_advance_info2['start_date']);
 			$thematic_advance_info2['start_date'] = api_format_date($thematic_advance_info2['start_date'], DATE_TIME_FORMAT_LONG);
 
-			$thematic_description_html .= '<div><strong>'.$thematic_info2['title'].'</strong></div>';
+			$thematic_description_html.='<div class="span5 items-progress">
+										<p class="date">'.$thematic_advance_info2['start_date'].'</p>
+										<h3 class="title">'.$thematic_advance_info2['content'].'</h3>
+										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].' <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>
+									</div>';
+
+
+			/*$thematic_description_html .= '<div><strong>'.$thematic_info2['title'].'</strong></div>';
 			$thematic_description_html .= '<div style="font-size:8pt;"><strong>'.$thematic_advance_info2['start_date'].'</strong></div>';
 			$thematic_description_html .= '<div>'.$thematic_advance_info2['content'].'</div>';
 			$thematic_description_html .= '<div>'.get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].'</div>';
-			$thematic_description_html .= '<br />';
+			$thematic_description_html .= '<br />';*/
 		}
-		$thematic_description_html .= '</div>
+		$thematic_description_html.='</div></div></div></div></div></div></div></div></div></div>';
+		/*$thematic_description_html .= '</div>
 								  <div class="thematic-postit-bottom"></div>
-								  </div>';
+								  </div>';*/
 	}
 }