Index: lams_tool_laqa/web/monitoring/SummaryContent.jsp
===================================================================
diff -u -r154d89ad4f8062f0f04705c56c8d232e7d855c7a -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision 154d89ad4f8062f0f04705c56c8d232e7d855c7a)
+++ lams_tool_laqa/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,97 +1,87 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<h1><c:out value="${content.title}" escapeXml="true"/></h1>
-
-<div class="instructions space-top">
-	<c:out value="${content.instructions}" escapeXml="false"/>
+<div class="panel">
+	<h4>
+	    <c:out value="${content.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${content.instructions}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty listAllGroupsDTO}">
+		<lams:Alert type="info" close="false">
+			<fmt:message key="error.noLearnerActivity" />
+		</lams:Alert>
+	</c:if>
+	
+	<c:if test="${content.useSelectLeaderToolOuput && not empty listAllGroupsDTO}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="label.info.use.select.leader.outputs" />
+		</lams:Alert>
+	</c:if>
 </div>
 
-<c:if test="${empty listAllGroupsDTO}">
-	<div align="center">
-		<b> <fmt:message key="error.noLearnerActivity"/> </b>
-	</div>
-</c:if>
 
-<c:if test="${content.useSelectLeaderToolOuput && not empty listAllGroupsDTO}">
-	<div class="info">
-		<fmt:message key="label.info.use.select.leader.outputs" />
-	</div>
-</c:if>
 
-<c:forEach var="groupDto" items="${listAllGroupsDTO}">
-			  	 		
-	<c:if test="${isGroupedActivity}">
-		<h1 class="group-name-title">
-			<fmt:message key="group.label" />: <c:out value="${groupDto.sessionName}"/>
-		</h1>
-	</c:if>
 
+<c:forEach var="groupDto" items="${listAllGroupsDTO}" varStatus="status">
+			  
+	<c:if test="${isGroupedActivity}">	
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${sessionDto.sessionID}">
+        	<span class="panel-title collapsable-icon-left">
+        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${groupDto.sessionId}" 
+					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${groupDto.sessionId}" >
+			<fmt:message key="group.label" />:	<c:out value="${groupDto.sessionName}" /></a>
+			</span>
+        </div>
+        
+        <div id="collapse${groupDto.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel"
+        	 aria-labelledby="heading${groupDto.sessionId}">
+	</c:if>	 
+	
 	<c:if test="${content.reflect}"> 			
-		<p class="float-right">
-		<c:set var="viewReflectionsURL"><lams:WebAppURL/>/monitoring/Reflections.jsp?toolSessionID=${groupDto.sessionId}</c:set>
-		<html:link href="javascript:launchPopup('${viewReflectionsURL}')" styleClass="button">
-			<fmt:message key="label.notebook.entries" />
-		</html:link>
-		</p>
+		<div style="margin-bottom: 20px">
+			<c:set var="viewReflectionsURL"><lams:WebAppURL/>/monitoring/Reflections.jsp?toolSessionID=${groupDto.sessionId}</c:set>
+			<html:button property="viewAllMarks" onclick="javascript:launchPopup('${viewReflectionsURL}')"
+						 styleClass="btn btn-default loffset5 voffset10" >
+				<fmt:message key="label.notebook.entries" />
+			</html:button>
+		</div>
 	</c:if>
-			  	
+				  	
 	<c:forEach var="question" items="${questionDTOs}">
-		
-		<div class="tablesorter-container">
-		<div class="question-title">
-			<c:out value="${question.question}" escapeXml="false"/>
-		</div>	
-		
-		<table class="tablesorter" data-question-uid="${question.uid}" data-session-id="${groupDto.sessionId}">
-		
-			<thead>
-				<tr>
-					<th title="<fmt:message key='label.sort.by.answer'/>" >
-						<fmt:message key="label.learning.answer" />
-					</th>
-					
-					<c:if test="${content.allowRateAnswers}">
-						<th title="<fmt:message key='label.sort.by.rating'/>" width="130px">
-							<fmt:message key="label.learning.rating" />
-						</th>
-					</c:if>
-					
-					<c:if test="${isCommentsEnabled}">
-						<th>
-							<fmt:message key="label.comment" />
-						</th>
-					</c:if>
-				</tr>
-			</thead>
-			
-			<tbody>
-			</tbody>
-		</table>
-		
-		<!-- pager -->
-		<div class="pager">
-			<form>
-				<img class="tablesorter-first"/>
-				<img class="tablesorter-prev"/>
-				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<img class="tablesorter-next"/>
-				<img class="tablesorter-last"/>
-				<select class="pagesize">
-					<option selected="selected" value="10">10</option>
-					<option value="20">20</option>
-					<option value="30">30</option>
-					<option value="40">40</option>
-					<option value="50">50</option>
-					<option value="100">100</option>
-				</select>
-			</form>
+		<div class="panel panel-default"">
+			<div class="panel-heading">
+				<c:out value="${question.question}" escapeXml="false"/>
+			</div>
+			<div class="loffset5">
+				<lams:TSTable numColumns="${content.allowRateAnswers ? (isCommentsEnabled ? 3 : 2) : (isCommentsEnabled ? 2 : 1)}"
+							  dataId="data-session-id='${groupDto.sessionId}' data-question-uid='${question.uid}'">
+						<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer"/></th>
+						<c:if test="${content.allowRateAnswers}">
+							<th title="<fmt:message key='label.sort.by.rating'/>" width="130px">
+								<fmt:message key="label.learning.rating" />
+							</th>
+						</c:if>
+						<c:if test="${isCommentsEnabled}">
+							<th>
+								<fmt:message key="label.comment" />
+							</th>
+						</c:if>
+				</lams:TSTable>
+			</div>
 		</div>
-		</div>
-		
 	</c:forEach>
 	
+	<c:if test="${isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
+		
 </c:forEach>
 		
 <%@include file="AdvanceOptions.jsp"%>
 
-<%@include file="dateRestriction.jsp"%>
+<%@include file="dateRestriction.jsp"%>
\ No newline at end of file