← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 8469: Create a dynamic design form which works well with many resolution of screen ( Person dashboard ).

 

------------------------------------------------------------
revno: 8469
committer: Tran Chau <tran.hispvietnam@xxxxxxxxx>
branch nick: dhis2
timestamp: Thu 2012-10-11 10:29:05 +0700
message:
  Create a dynamic design form which works well with many resolution of screen ( Person dashboard ).
modified:
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm	2012-10-09 03:53:11 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm	2012-10-11 03:29:05 +0000
@@ -4,213 +4,206 @@
  &raquo; <a href="javascript:dashboardHistoryToggle();" >$i18n.getString( 'history' )</a>
 </h3>
 
-<table>
+<table class='mainPageTable'>
 	<tr>
-		<td valign='top'>
-			<table>
-				<tr>
-					<td>
-						<div class="link-area">
-							<table width='100%'>
-								<tr><th>
-									$i18n.getString("demographics")
-									<a href="javascript:showUpdatePatientForm( '$patient.id', true );"><span class='bold'>&laquo;$i18n.getString("edit_profile")&raquo;</span></a>
-									#if( $auth.hasAccess( "dhis-web-caseentry", "getPatientLocation" ) )
-									<a href="javascript:getPatientLocation( '$patient.id', true );"><span class='bold'> &laquo;$i18n.getString("change_location")&raquo;</span></a>
-									#end
-								</th></tr>
-							</table>
-							<div class="contentProviderTable">
-								<table width='100%'>
-									<tr>
-										<td>$i18n.getString("full_name")</td>
-										<td>$!patient.getFullName()</td>
-									</tr>
-									<tr>
-										<td>$i18n.getString("location")</td>
-										<td>$!patient.organisationUnit.name</td>
-									</tr>
-									<tr>
-										<td>$i18n.getString("gender")</td>
-										<td>$i18n.getString($!patient.gender)</td>
-									</tr>
-									<tr>
-										<td>$i18n.getString("date_of_birth")</td>
-										<td>$format.formatDate( $!patient.birthDate) $!patient.getAge()</td>
-									</tr>
-									<tr>
-										<td>$i18n.getString("phone_number")</td>
-										<td>
-											#if($!patient.phoneNumber && $!patient.phoneNumber!='')
-												$!patient.phoneNumber
-											#else
-												[$i18n.getString('none')]
-											#end
-										</td>
-									</tr>
-									<tr>
-										<td>$i18n.getString("health_worker")</td>
-										<td>
-											#if($!patient.healthWorker )
-												$!patient.healthWorker.name
-											#else
-												[$i18n.getString('none')]
-											#end
-										</td>
-									</tr>
-									#foreach( $identifier in $identifiers )
-									<tr>
-										#if($!identifier.identifierType)
-											<td>$identifier.identifierType.name</td>
-										#else
-											<td>$i18n.getString("system_identifier")</td>
-										#end
-										<td>$identifier.identifier</td>
-									</tr>
-									#end
-									#foreach( $attributeValue in $attributeValues )
-									<tr>
-										<td>$attributeValue.patientAttribute.name</td>
-										<td>
-											#if($attributeValue.patientAttribute.valueType=='YES/NO')
-												#if($attributeValue.value=='true')
-													$i18n.getString("yes")
-												#else
-													$i18n.getString("no")
-												#end
-											#elseif($attributeValue.patientAttribute.valueType=='DATE')
-												$format.formatDate( $attributeValue.value )
-											#else
-												$attributeValue.value
-											#end	
-										</td>
-									</tr>
-									#end
-								</table>
-							</div>
-						</div>
-					</td>
-					<td>
-						<div class="link-area" style='height:120px;'>
-							<table width='100%'>
-								<tr><th>
-										$i18n.getString("active_programs")
-										<a href='javascript:showProgramEnrollmentForm( "$patient.id" )'><span class='bold'>&laquo;$i18n.getString("enroll_program")&raquo;</span></a>
-									</th>
-								</tr>
-							</table>
-							<div class="contentProviderTable" style='height:76px;'>
-								<table width='100%' id='activeTB' name='activeTB'>
-									#foreach( $programInstance in $activeProgramInstances )
-										#set($programStageInstanceId = '')
-										#if($programInstance.program.type==2)
-											#foreach( $programStageInstance in $programInstance.programStageInstances)
-												#set($programStageInstanceId = $programStageInstance.id)
-											#end
-										#end
-										
-										#set($flag = 'false')
-										#foreach( $programStageInstance in $programInstance.programStageInstances )
-											#set( $status = $programStageInstance.getEventStatus() )
-											#if( $status!=1 && $status!=5 && $flag=='false')
-												<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
-													programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
-													onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' >
-													<td id='td_$programInstance.id'>
-														<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
-													</td>
-												</tr>
-												#if($programInstance.program.type==1)
-												<tr>
-													<td id='tr2_$programInstance.id' onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' style='cursor:pointer;'>
-														<a>>> $programStageInstance.programStage.name ($format.formatDate($programStageInstance.dueDate))</a>
-													</td>
-												</tr>
-												#end
-											#set($flag = 'true')
-											#end
-										#end
-										#if($flag=='false')
-										<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
-											programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
-											onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", false)' >
-											<td id='td_$programInstance.id'>
-												<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
-											</td>
-										</tr>
-										#end
-									#end
-									#foreach($program in $singlePrograms)
-										<tr id='tr_$program.id' name='tr_$program.id' style='cursor:pointer;'
-											onclick='javascript:saveSingleEnrollment("$patient.id","$program.id")' >
-											<td>
-												<a><span id='infor_$program.id'></span></a>
-												<script>
-													var infor = "$program.name" + " (" + getCurrentDate() + ")";
-													setInnerHTML("infor_$program.id", infor);
-												</script>
-											</td>
-										</tr>
-										<tr style='cursor:pointer;'>
-											<td id='tr2_$programInstance.id'></td>
-										</tr>
-									#end
-								</table>
-							</div>
-						</div>
-						
-						<div class="link-area" style='height:50px;'>
-							<table width='100%'>
-								<tr><th>$i18n.getString("completed_programs")</th></tr>
-								<tr>
-									<td>
-										<select id="completedList" name="completedList" onchange="javascript:loadActiveProgramStageRecords(this.value);" style="width:100%">
-											<option value="">[$i18n.getString("please_select")]</option>
-											#foreach($programInstance in $completedProgramInstances)
-												#set($programStageInstanceId = '')
-												#if($programInstance.program.type==2)
-													#foreach( $programStageInstance in $programInstance.programStageInstances)
-														#set($programStageInstanceId = $programStageInstance.id)
-													#end
-												#end
-												<option value="$programInstance.id" type='$programInstance.program.type'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</option>
-											#end
-										</select>
-									</td>
-								</tr>
-							</table>
-						</div>
-					</td>
-					<td>
-						<div class="link-area">
-							<table width='100%'>
-								<tr><th>
-									$i18n.getString("relationships")
-									<a href="javascript:setFieldValue( 'isShowPatientList', 'false' ); showRelationshipList( '$patient.id' );"><span class='bold'>&laquo;$i18n.getString("management")&raquo;</span></a>
-									<a href="javascript:showAddRelationshipPatient( '$patient.id', false );"><span class='bold'> &laquo;$i18n.getString("add_new_patient")&raquo;</span></a>
-									</th></tr>
-							</table>
-							<div class="contentProviderTable">
-								<table width='100%'>
-									#foreach( $rel in $relationship )
-										#if($rel.patientA.id==$patient.id)
-											<tr onclick="showPatientDashboardForm($rel.patientB.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
-												<td><a href='#'>$rel.relationshipType.bIsToA</a></td>
-												<td><a href='#'>$rel.patientB.getFullName()</a></td>
-											</tr>
-										#else
-											<tr onclick="showPatientDashboardForm($rel.patientA.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
-												<td><a href='#'>$rel.relationshipType.aIsToB</a></td>
-												<td><a href='#'>$rel.patientA.getFullName()</a></td>
-											</tr>
-										#end
-									#end
-								</table>
-							</div>
-						</div>
-					</td>
-				</tr>
-			</table>
+		<td width='33%'>
+			<div class="link-area">
+				<table width='100%'>
+					<tr><th>$i18n.getString("demographics")</th></tr>
+					<tr><th>
+						<a href="javascript:showUpdatePatientForm( '$patient.id', true );"><span class='bold'>&laquo;$i18n.getString("edit_profile")&raquo;</span></a>
+						#if( $auth.hasAccess( "dhis-web-caseentry", "getPatientLocation" ) )
+						<a href="javascript:getPatientLocation( '$patient.id', true );"><span class='bold'> &laquo;$i18n.getString("change_location")&raquo;</span></a>
+						#end
+					</th></tr>
+				</table>
+				<div class="contentProviderTable">
+					<table width='100%'>
+						<tr>
+							<td>$i18n.getString("full_name")</td>
+							<td>$!patient.getFullName()</td>
+						</tr>
+						<tr>
+							<td>$i18n.getString("location")</td>
+							<td>$!patient.organisationUnit.name</td>
+						</tr>
+						<tr>
+							<td>$i18n.getString("gender")</td>
+							<td>$i18n.getString($!patient.gender)</td>
+						</tr>
+						<tr>
+							<td>$i18n.getString("date_of_birth")</td>
+							<td>$format.formatDate( $!patient.birthDate) $!patient.getAge()</td>
+						</tr>
+						<tr>
+							<td>$i18n.getString("phone_number")</td>
+							<td>
+								#if($!patient.phoneNumber && $!patient.phoneNumber!='')
+									$!patient.phoneNumber
+								#else
+									[$i18n.getString('none')]
+								#end
+							</td>
+						</tr>
+						<tr>
+							<td>$i18n.getString("health_worker")</td>
+							<td>
+								#if($!patient.healthWorker )
+									$!patient.healthWorker.name
+								#else
+									[$i18n.getString('none')]
+								#end
+							</td>
+						</tr>
+						#foreach( $identifier in $identifiers )
+						<tr>
+							#if($!identifier.identifierType)
+								<td>$identifier.identifierType.name</td>
+							#else
+								<td>$i18n.getString("system_identifier")</td>
+							#end
+							<td>$identifier.identifier</td>
+						</tr>
+						#end
+						#foreach( $attributeValue in $attributeValues )
+						<tr>
+							<td>$attributeValue.patientAttribute.name</td>
+							<td>
+								#if($attributeValue.patientAttribute.valueType=='YES/NO')
+									#if($attributeValue.value=='true')
+										$i18n.getString("yes")
+									#else
+										$i18n.getString("no")
+									#end
+								#elseif($attributeValue.patientAttribute.valueType=='DATE')
+									$format.formatDate( $attributeValue.value )
+								#else
+									$attributeValue.value
+								#end	
+							</td>
+						</tr>
+						#end
+					</table>
+				</div>
+			</div>
+		</td>
+		<td width='33%'>
+			<div class="link-area" style='height:120px;'>
+				<table width='100%'>
+					<tr><th>$i18n.getString("active_programs")</th></tr>
+					<tr><th>
+							<a href='javascript:showProgramEnrollmentForm( "$patient.id" )'><span class='bold'>&laquo;$i18n.getString("enroll_program")&raquo;</span></a>
+					</th></tr>
+				</table>
+				<div class="contentProviderTable" style='height:76px;'>
+					<table width='100%' id='activeTB' name='activeTB'>
+						#foreach( $programInstance in $activeProgramInstances )
+							#set($programStageInstanceId = '')
+							#if($programInstance.program.type==2)
+								#foreach( $programStageInstance in $programInstance.programStageInstances)
+									#set($programStageInstanceId = $programStageInstance.id)
+								#end
+							#end
+							
+							#set($flag = 'false')
+							#foreach( $programStageInstance in $programInstance.programStageInstances )
+								#set( $status = $programStageInstance.getEventStatus() )
+								#if( $status!=1 && $status!=5 && $flag=='false')
+									<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
+										programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
+										onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' >
+										<td id='td_$programInstance.id'>
+											<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
+										</td>
+									</tr>
+									#if($programInstance.program.type==1)
+									<tr>
+										<td id='tr2_$programInstance.id' onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' style='cursor:pointer;'>
+											<a>>> $programStageInstance.programStage.name ($format.formatDate($programStageInstance.dueDate))</a>
+										</td>
+									</tr>
+									#end
+								#set($flag = 'true')
+								#end
+							#end
+							#if($flag=='false')
+							<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
+								programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
+								onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", false)' >
+								<td id='td_$programInstance.id'>
+									<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
+								</td>
+							</tr>
+							#end
+						#end
+						#foreach($program in $singlePrograms)
+							<tr id='tr_$program.id' name='tr_$program.id' style='cursor:pointer;'
+								onclick='javascript:saveSingleEnrollment("$patient.id","$program.id")' >
+								<td>
+									<a><span id='infor_$program.id'></span></a>
+									<script>
+										var infor = "$program.name" + " (" + getCurrentDate() + ")";
+										setInnerHTML("infor_$program.id", infor);
+									</script>
+								</td>
+							</tr>
+							<tr style='cursor:pointer;'>
+								<td id='tr2_$programInstance.id'></td>
+							</tr>
+						#end
+					</table>
+				</div>
+			</div>
+			
+			<div class="link-area" style='height:50px;'>
+				<table width='100%'>
+					<tr><th>$i18n.getString("completed_programs")</th></tr>
+					<tr>
+						<td>
+							<select id="completedList" name="completedList" onchange="javascript:loadActiveProgramStageRecords(this.value);" style="width:100%">
+								<option value="">[$i18n.getString("please_select")]</option>
+								#foreach($programInstance in $completedProgramInstances)
+									#set($programStageInstanceId = '')
+									#if($programInstance.program.type==2)
+										#foreach( $programStageInstance in $programInstance.programStageInstances)
+											#set($programStageInstanceId = $programStageInstance.id)
+										#end
+									#end
+									<option value="$programInstance.id" type='$programInstance.program.type'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</option>
+								#end
+							</select>
+						</td>
+					</tr>
+				</table>
+			</div>
+		</td>
+		<td width='33%'>
+			<div class="link-area">
+				<table width='100%'>
+					<tr><th>$i18n.getString("relationships")</th></tr>
+					<tr><th>
+						<a href="javascript:setFieldValue( 'isShowPatientList', 'false' ); showRelationshipList( '$patient.id' );"><span class='bold'>&laquo;$i18n.getString("management")&raquo;</span></a>
+						<a href="javascript:showAddRelationshipPatient( '$patient.id', false );"><span class='bold'> &laquo;$i18n.getString("add_new_patient")&raquo;</span></a>
+					</th></tr>
+				</table>
+				<div class="contentProviderTable">
+					<table width='100%'>
+						#foreach( $rel in $relationship )
+							#if($rel.patientA.id==$patient.id)
+								<tr onclick="showPatientDashboardForm($rel.patientB.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
+									<td><a href='#'>$rel.relationshipType.bIsToA</a></td>
+									<td><a href='#'>$rel.patientB.getFullName()</a></td>
+								</tr>
+							#else
+								<tr onclick="showPatientDashboardForm($rel.patientA.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
+									<td><a href='#'>$rel.relationshipType.aIsToB</a></td>
+									<td><a href='#'>$rel.patientA.getFullName()</a></td>
+								</tr>
+							#end
+						#end
+					</table>
+				</div>
+			</div>
 		</td>
 	</tr>
 </table>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-10-06 14:34:31 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-10-11 03:29:05 +0000
@@ -196,7 +196,7 @@
   padding-left:1px;
   padding-bottom:0px;
   height:120px;
-  width:350px;
+  width:100%;
   overflow:hidden;
   position:relative;
 }
@@ -209,7 +209,7 @@
   padding-left:1px;
   padding-bottom:0px;
   height:172px;
-  width:350px;
+  width:100%;
   overflow:hidden;
   position:relative;
 }
@@ -217,7 +217,7 @@
 .contentProviderTable
 {
   height: 122px;
-  width: 350px;
+  width: 100%;
   overflow-y: auto;
   overflow-x:hidden;
 }