Index: lams_tool_preview/web/pages/learning/rubrics.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,38 +1,42 @@
-<style>	
-	.rubrics-user-panel .collapsable-icon-left a {
-		text-decoration: none;
-	}
-	
-	.rubrics-user-panel .collapsable-icon-left a:after {
+<style>
+	.rubrics-user-card .collapsable-icon-left button:after {
 		margin-top: 6px;
 	}
 	
-	.rubrics-table tr:first-child {
+	.rubrics-table .row:first-child {
 		background-color: initial !important;
 	}
 	
-	.rubrics-table th {
-		font-style: normal;
+	.rubrics-table-header {
 		font-weight: bold;
-		}
+	}
 
-	.rubrics-table td:first-child {
+	.rubrics-table .col:first-child {
 		font-weight: bold;
 	}
 	
-	.rubrics-table td:not(:first-child) {
+	.rubrics-table .row:not(.rubrics-table-header) .col:not(:first-child) {
 		cursor: pointer;
 	}
 	
-	.rubrics-table td.bg-success {
+	.rubrics-table .col.text-bg-success {
 		font-weight: bold;
-		font-size: larger;
+		line-height: 40px;
+		margin: -0.5em 0;
 	}
 	
-	.expand-all-button {
+	#expand-all-button {
 		margin-bottom: 15px;
 		float: right;
 	}
+	.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+		color: inherit !important;
+	}
+	
+	.lcard {
+		margin-bottom: 1.25rem;
+	}
+
 </style>
 
 <script>
@@ -68,7 +72,7 @@
         			alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.rating.rubrics.error.rate" /></spring:escapeBody>');
     				return;
     			}
-    			$(cell).addClass('bg-success').siblings('td').removeClass('bg-success');
+    			$(cell).addClass('text-bg-success').siblings('div').removeClass('text-bg-success');
     			
         		if (rubricsRequireRatings) {
 					$('#finishButton').prop('disabled', isRatingMissing());
@@ -80,89 +84,88 @@
     	});
 	}
 
-	function expandAllRubricsUserPanels(){
-		$('.collapse').collapse('show');
+	function expandAllRubricsUserCards(){
+		var isCollapsing = $("#expand-all-button").hasClass("collapsed") ? "show" : "hide";
+		$("#expand-all-button").toggleClass("collapsed");
+		$('.collapse').collapse(isCollapsing);
 	}
 
 	function isRatingMissing() {
 		let criterionTables = $('.rubrics-table');
-		return $('tbody td.bg-success', criterionTables).length !== $('tbody tr', criterionTables).length
+		return $('.col.text-bg-success', criterionTables).length !== $('.row:not(.rubrics-table-header)', criterionTables).length
 			- criterionTables.length;
 	}
 </script>
-<button class="btn btn-secondary expand-all-button" onClick="javascript:expandAllRubricsUserPanels()">
-	<fmt:message key="label.rating.rubrics.expand.all" />
-</button>
+
+<div class="collapsable-icon-left">
+	<button id="expand-all-button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" onClick="javascript:expandAllRubricsUserCards()">
+		<fmt:message key="label.rating.rubrics.expand.all" />
+	</button>
+</div>
 <div class="clearfix"></div>
 
-<div id="rubrics-user-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="rubrics-user-cards" role="tablist" aria-multiselectable="true">
 	<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 	<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
 
 	<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 			
-	    <div class="panel panel-default rubrics-user-panel">
-	       <div class="panel-heading" role="tab" id="heading${ratingDto.itemId}">
-	       	<span class="panel-title collapsable-icon-left">
-	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
-						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-panels"
+	    <div class="card lcard rubrics-user-card mt-2">
+	       <div class="card-header text-bg-secondary" role="tab" id="heading${ratingDto.itemId}">
+	       	<span class="card-title collapsable-icon-left">
+	       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
+						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-cards"
 				>
 					<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
 					&nbsp;
-					<strong>
-						<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
-					</strong>
+					<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
 				</button>
 			</span>
 	       </div>
 	       
-	       <div id="collapse${ratingDto.itemId}" class="panel-collapse collapse" 
-	       	    role="tabpanel" aria-labelledby="heading${ratingDto.itemId}">
-					<table class="table table-hover table-bordered rubrics-table">
-						<tr>
+	       <div id="collapse${ratingDto.itemId}" class="collapse" role="tabpanel" aria-labelledby="heading${ratingDto.itemId}">
+				<div class="ltable rubrics-table mb-0">
+						<div class="row rubrics-table-header m-0">
 							<%-- Each answer column has the same length, all remaining space is take by the question column --%>
-							<th></th>
+							<div class="col"></div>
 							<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
-								<th>
+								<div class="col">
 									(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-								</th>
+								</div>
 								<c:if test="${not columnStatus.last and peerreview.rubricsInBetweenColumns}">
-									<th>
+									<div class="col">
 										<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-									</th>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+						</div>
+						
 						<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 							<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
-							<tr>
-								<td>
+							<div class="row m-0">
+								<div class="col">
 									<c:out value="${criteria.title}" escapeXml="false" />
-								</td>
+								</div>
 								<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-									<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})"
+									<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})" role="button"
 										<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-										<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">
-											class="bg-success"
-										</c:if>
+										class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'
 									>
 										<c:out value="${column.name}" escapeXml="false" />	
-									</td>
+									</div>
 									<c:if test="${not columnOrderId.last and peerreview.rubricsInBetweenColumns}">
-										<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})"
-											<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-												class="bg-success"
-											</c:if>
+										<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})" role="button"
+											class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'
 										>
 											<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-										</td>
+										</div>
 									</c:if>
 								</c:forEach>
-							</tr>
+							</div>
 						</c:forEach>
-					</table>
+				</div>
 			</div>
 		</div>
 		
 	</c:forEach>
-</div>
+</div>
\ No newline at end of file