Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_admin/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_central/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rab90919accaf93e62b7a529ca6aadc25f164f06c
--- lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision ab90919accaf93e62b7a529ca6aadc25f164f06c)
@@ -91,20 +91,28 @@
 						<c:if test="${not empty rating.averageRating}">
 							<tr>
 								<td>
-									<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+									<lams:Portrait userId="${rating.itemId}"/>
+									<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
 								</td>
+								
 								<td class="rating">
-									<div class="rating-stars-holder text-center center-block">
+									<div class="starability-holder">
 										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
-										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
-											<c:set var="userRating">${rating.userRating}</c:set>
-										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
+										<c:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.userRating}">
 													<fmt:message key="label.not.rated"></fmt:message>
 												</c:when>
 												<c:otherwise>
-													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${userRating}</span></fmt:param></fmt:message>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
 											</fmt:message>
 										</div>
+									</div>
 								</td>
+								
 								<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
 									<td>
 										<c:out value="${rating.comment}" escapeXml="false"/>
@@ -127,140 +137,175 @@
 			</c:when>
 
 			<c:otherwise>
-				<table class="tablesorter" width="100%">
-					<tbody>
-					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
-						<c:if test="${status.first && not empty rating.averageRating}">
-							<tr>
-								<td class="rating">
-									<div class="rating-stars-holder text-center center-block">
-										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
-										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
-										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
-											<fmt:message key="label.avg.rating">
-												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
-												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
-											</fmt:message>
-										</div>
-								</td>
-							</tr>
-						</c:if>
-						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
-							<tr>
-								<td>
-									<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
-								</td>
-							</tr>
-						</c:if>
-					</c:forEach>
-					</tbody>
-				</table>
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 2}">
-		<fmt:message key="label.learning.average.rankings"/>&nbsp;<c:if test="${not currentUserDisplay}"><fmt:message key="label.learning.your.rankings.shown.in.brackets"/></c:if>
-		<ul class="list-group">
-			<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
-				<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
-					<li class="list-group-item"><strong>
-						<c:choose>
-							<c:when test="${empty rating.averageRating}">-</c:when>
-							<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
-						</c:choose>
-						:</strong>
-						&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
-						<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
-						<c:if test="${not currentUserDisplay && not empty rating.userRating}">
-							(${rating.userRating})
-						</c:if>
-					</li>
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.rankings"/>&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.rankings.shown.in.brackets"/>
 				</c:if>
-			</c:forEach>
-		</ul>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item"><strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
+							</c:choose>
+							:</strong>
+							&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+							<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+		</div>
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 3}">
-		<fmt:message key="label.learning.average.marks"/>&nbsp;<c:if test="${not currentUserDisplay}"><fmt:message key="label.learning.your.marks.shown.in.brackets"/></c:if>
-		<ul class="list-group">
-			<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
-				<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
-					<li class="list-group-item"><strong>
-						<c:choose>
-							<c:when test="${empty rating.averageRating}">-</c:when>
-							<c:otherwise>${rating.averageRating}</c:otherwise>
-						</c:choose>
-						:</strong>
-						&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
-						<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
-						<c:if test="${not currentUserDisplay && not empty rating.userRating}">
-							(${rating.userRating})
-						</c:if>
-					</li>
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.marks"/>
+				&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.marks.shown.in.brackets"/>
 				</c:if>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item">
+							<strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise>${rating.averageRating}</c:otherwise>
+							</c:choose>
+							:
+							</strong>
+							
+							&nbsp;
+							<c:if test="${not currentUserDisplay}">
+								<lams:Portrait userId="${rating.itemId}"/>
+							</c:if>
+							<span class="portrait-sm-lineheight">
+								&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;
+							</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+			
+			<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
+				<div class="fst-italic mt-2">
+					<fmt:message key="label.learning.your.justification"/>
+				</div>
+				<lams:out value="${criteriaRatings.justificationComment}" />
+			</c:if>
+		</div>
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.rubrics-table.pivot-view .rubrics-table-header {
 				font-style: normal;
 				text-align: center;
 			}
+			.rubrics-table.pivot-view .row .col:first-child {
+				font-weight: bold;
+			}
 
 			.column-header-span {
 				font-style: italic;
 			}
+			
+			.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after,
+			.rubrics-row-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+				color: inherit !important;
+			}
+			
+			.rubrics-table .col.text-bg-success {
+				font-weight: bold;
+				line-height: 40px;
+				margin: -0.5em 0;
+			}
 
 			.rubrics-table .rubrics-rating-cell {
 				border-top: none;
 
 			}
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<div class="ltable table-sm rubrics-table standard-view">
+					<div class="row rubrics-table-header">
+						<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+						<div class="col"></div>
 						<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<div class="col text-center"><fmt:message key="label.average" /></div>
+					</div>
+					
 					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- These variables are for counting average rating for the given row --%>
 							<c:set var="rowRateCount" value="0" />
 							<c:set var="rowRateValue" value="0" />
 							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Check if any other learner rated this learner for this 0.5 column --%>
-									<c:set var="rateCount" value="0" />
-									<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
-										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == (columnOrderId.count + 0.5) ? 1 : 0)}" />
-									</c:forEach>
-									<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
-									<c:set var="rowRateValue" value="${rowRateValue + rateCount * (columnOrderId.count + 0.5)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="text-center">
-								<c:choose>
-									<c:when test="${rowRateCount == 0}">
-										-
-									</c:when>
-									<c:otherwise>
-										<fmt:formatNumber value="${rowRateValue / rowRateCount}" type="number" maxFractionDigits="2" />
-									</c:otherwise>
-								</c:choose>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<c:set var="rateCount" value="0" />
-								<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
-									<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == columnOrderId.count? 1 : 0)}" />
-								</c:forEach>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<c:if test="${rateCount > 0}">
 										<%-- learners see just how many rates they got from other learners --%>
 										<div class="rubrics-rating-count">
-											<span class="badge">x&nbsp;${rateCount}</span>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- Check if any other learner rated this learner for this 0.5 column --%>
 									<c:set var="rateCount" value="0" />
 									<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
-										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating  == (columnOrderId.count + 0.5) ? 1 : 0)}" />
+										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == (columnOrderId.count + 0.5) ? 1 : 0)}" />
 									</c:forEach>
+									<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+									<c:set var="rowRateValue" value="${rowRateValue + rateCount * (columnOrderId.count + 0.5)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+										
 										<c:if test="${rateCount > 0}">
 											<%-- learners see just how many rates they got from other learners --%>
 											<div class="rubrics-rating-count">
-												<span class="badge">x&nbsp;${rateCount}</span>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- Cell with average rating --%>
+							<div class="col text-center">
+								<c:choose>
+									<c:when test="${rowRateCount == 0}">
+										-
+									</c:when>
+									<c:otherwise>
+										<fmt:formatNumber value="${rowRateValue / rowRateCount}" type="number" maxFractionDigits="2" />
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</div>
 					</c:forEach>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 					<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
 					<c:set var="columnHeaderCount" value="${fn:length(columnHeaders)}" />
 
 					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
 
-						<div class="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${criteria.ratingCriteriaId}"
-							   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
-								<%-- Criterion "row" --%>
-								<c:out value="${criteria.title}" escapeXml="false" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
+								   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+									<%-- Criterion "row" --%>
+									<c:out value="${criteria.title}" escapeXml="false" />
+								</button>
 							</div>
 
-							<div id="collapse${criteria.ratingCriteriaId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
-								<table class="table table-hover table-bordered rubrics-table pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<div id="collapse${criteria.ratingCriteriaId}" class="collapse"
+								 	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+								<div class="ltable rubrics-table pivot-view">
+									<div class="row rubrics-table-header m-0">
+										<%-- Learner profile pictures and names --%>
+										<div class="col"></div>
 										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</div>
 
-									<tbody>
 									<c:forEach items="${columnHeaders}" varStatus="columnStatus">
 										<c:set var="columnHeader" value="${columnHeaders[columnHeaderCount - columnStatus.count]}" />
-										<tr>
-											<td>
+										<div class="row align-items-center m-0">
+											<div class="col">
 													<%-- Criterion "column" --%>
 												<span class="column-header-span"><c:out value="${columnHeader}" escapeXml="false"/></span><br>
 													<%-- Criterion "cell" --%>
 												<c:out value="${criteria.rubricsColumns[columnHeaderCount - columnStatus.count].name}" escapeXml="false" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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 == (columnHeaderCount - columnStatus.index)}">
-															class="bg-success"
-														</c:if>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'>
+													${columnHeaderCount - columnStatus.index}
+												</div>
 											</c:forEach>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-											<tr>
-												<td>
+											<div class="row align-items-center m-0">
+												<div class="col">
 													<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-												</td>
+												</div>
 												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'>
+														${columnHeaderCount - columnStatus.index - 0.5}
+													</div>
 												</c:forEach>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<div id="rubrics-user-cards-${criteriaGroupId}" 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="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
-							   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
-							   data-parent="#rubrics-users-panels-${criteriaGroupId}">
-								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
-								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   data-parent="#rubrics-users-panels-${criteriaGroupId}">
+									<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+									&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+								</button>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="collapse"
+									 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+								<div class="ltable rubrics-table mb-0 standard-view">
+									<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 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
-													<%-- 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>
-												>
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div 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 rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<div 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>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_central/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rab90919accaf93e62b7a529ca6aadc25f164f06c
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision ab90919accaf93e62b7a529ca6aadc25f164f06c)
@@ -378,10 +378,6 @@
        <path>/WEB-INF/tags/StyledRating.tag</path>
    	</tag-file>
    	<tag-file>
-       <name>StyledRating5</name>
-       <path>/WEB-INF/tags/StyledRating5.tag</path>
-   	</tag-file>
-   	<tag-file>
        <name>Switch</name>
        <path>/WEB-INF/tags/Switch.tag</path>
    	</tag-file>
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_gradebook/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_learning/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_monitoring/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_assessment/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_chat/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_daco/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_doku/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_forum/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_gmap/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_images/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_imscc/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_lamc/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_laqa/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_larsrc/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_leader/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_mindmap/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_nb/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_notebook/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_pixlr/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_preview/web/pages/learning/results.jsp
===================================================================
diff -u -r169520b6cf03e63865f09db66f593677b1c5580b -rab90919accaf93e62b7a529ca6aadc25f164f06c
--- lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision 169520b6cf03e63865f09db66f593677b1c5580b)
+++ lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision ab90919accaf93e62b7a529ca6aadc25f164f06c)
@@ -99,7 +99,7 @@
 					</div>
 				</c:if>
 				
-				<lams:StyledRating5 criteriaRatings="${criteriaRatings}" showJustification="true" alwaysShowAverage="false"
+				<lams:StyledRating criteriaRatings="${criteriaRatings}" showJustification="true" alwaysShowAverage="false"
 					   currentUserDisplay="false" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}"
 					   rubricsPivotView="${peerreview.rubricsView eq 2}" />
 			</div>
@@ -126,7 +126,7 @@
 					</c:if>
 					
 					<div class="card-body">
-			 		<lams:StyledRating5 criteriaRatings="${criteriaRatings}" showJustification="false" alwaysShowAverage="true"
+			 		<lams:StyledRating criteriaRatings="${criteriaRatings}" showJustification="false" alwaysShowAverage="true"
 			 						   currentUserDisplay="true" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}" />
 			 		</div>
 			 		</div>
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_sbmt/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_scribe/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_survey/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_task/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_vote/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_whiteboard/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_wiki/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_tool_zoom/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag ab90919accaf93e62b7a529ca6aadc25f164f06c refers to a dead (removed) revision in file `lams_www/web/WEB-INF/tags/StyledRating5.tag'.
Fisheye: No comparison available.  Pass `N' to diff?