Index: lams_central/.gitignore
===================================================================
diff -u -ra13b927ed895f8e3eeaf559371262665e04ff07a -r9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48
--- lams_central/.gitignore	(.../.gitignore)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
+++ lams_central/.gitignore	(.../.gitignore)	(revision 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48)
@@ -4,7 +4,6 @@
 /web/css/addLesson.css
 /web/css/defaultHTML*.css
 /web/css/jquery.jqGrid.confidence-level-formattter.css
-/web/css/orgGrouping.css
 /web/css/purple*.css
 /web/css/outcome.css
 /web/css/qb-question.css
Index: lams_central/web/css/orgGrouping.css
===================================================================
diff -u
--- lams_central/web/css/orgGrouping.css	(revision 0)
+++ lams_central/web/css/orgGrouping.css	(revision 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48)
@@ -0,0 +1,50 @@
+.grouping:hover {
+	background-color: var(--bs-gray-100);
+}
+
+.list-group-item {
+	cursor: pointer;
+}
+
+#groupMappingDialog table {
+  width: 100%;
+  height: 98%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+#groupMappingDialog td {
+  text-align: center;
+  vertical-align: top;
+}
+
+#groupMappingDialog td.branchMappingLabelCell {
+  height: 15px;
+  font-weight: bold;
+}
+
+#groupMappingDialog td.branchMappingListCell {
+  border: thin solid black;
+  padding: 3px;
+}
+
+#groupMappingDialog td.branchMappingListCell .selected {
+  background-color: var(--bs-blue);
+  color: white;
+}
+
+#groupMappingDialog .branchMappingButton {
+  display: block;
+  margin: auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#groupMappingDialog #branchMappingOKButton {
+  margin-top: 5px;
+}
+
+#groupMappingDialog td.branchMappingListCell div {
+  text-align: left;
+  cursor: pointer;
+}
Fisheye: Tag 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48 refers to a dead (removed) revision in file `lams_central/web/css/orgGrouping.scss'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -ra13b927ed895f8e3eeaf559371262665e04ff07a -r9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48)
@@ -336,17 +336,8 @@
 }
 
 function showOrgGroupingDialog(orgID, activityID) {
-	showDialog("dialogOrgGrouping", {
-		'width' : 460,
-		'height': 460,
-		'title' : LABELS.COURSE_GROUPS_TITLE,
-		'open' : function() {
-			// load contents after opening the dialog
-			$('iframe', this).attr({'src': LAMS_URL + 'organisationGroup/viewGroupings.do?organisationID=' + orgID
-												   + (activityID ? '&activityID=' + activityID : ''),
-													'id' : 'orgGroupingModal'});
-		}
-	}, false, true);
+	window.open(LAMS_URL + 'organisationGroup/viewGroupings.do?organisationID=' + orgID + (activityID ? '&activityID=' + activityID : ''),
+				'_blank');
 }
 
 function showOrgGroupDialog(url) {
Index: lams_central/web/includes/javascript/orgGrouping.js
===================================================================
diff -u -ra13b927ed895f8e3eeaf559371262665e04ff07a -r9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48
--- lams_central/web/includes/javascript/orgGrouping.js	(.../orgGrouping.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
+++ lams_central/web/includes/javascript/orgGrouping.js	(.../orgGrouping.js)	(revision 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48)
@@ -1,6 +1,4 @@
-var gtbDialog = null;
-
-function removeGrouping(groupingId) {
+function removeGrouping(groupingId) {
 	if (!lessonMode && confirm(LABELS.REMOVE_GROUPING_CONFIRM_LABEL)) {
 		//dynamically create a form and submit it
 		var form = $('<form method="post" action="' +  LAMS_URL + 'organisationGroup/removeGrouping.do"></form>');
@@ -42,8 +40,7 @@
 			document.location.href = url + '&activityID=' + groupingActivityId;
 		}
 	} else {
-		// load to dialog
-		window.parent.showOrgGroupDialog(url);
+		document.location.href = url;
 	}
 }
 /**
@@ -55,8 +52,8 @@
 	 * 2) two types of groups: course and branching could easily get mixed
 	 */
 	
-	var groupMappingDialogContents = $('#groupMappingDialogContents').clone().attr('id', null);
-	$('#branchMappingOKButton', groupMappingDialogContents).click(function(){
+	let gtbDialog = $('#groupMappingDialogContents').clone().attr('id', 'groupMappingDialog');
+	$('#branchMappingOKButton', gtbDialog).click(function(){
 		var dialog = $(this).closest('.modal'),
 			groupsToBranches = [];
 	
@@ -96,82 +93,72 @@
 	});
 	
 	// initialise the dialog buttons
-	$('.branchMappingAddButton', groupMappingDialogContents).click(function(){
+	$('.branchMappingAddButton', gtbDialog).click(function(){
 		addGroupMapping();
 	});
-	$('.branchMappingRemoveButton', groupMappingDialogContents).click(function(){
+	$('.branchMappingRemoveButton', gtbDialog).click(function(){
 		removeGroupMapping();
 	});
 
-	// initialise dialog for matching groups to branches in branching activities
-	gtbDialog = showDialog('gtbDialog',{
-		'autoOpen' : false,
-		'modal'  : true,
-		'width'  : 800,
-		'title'  : LABELS.COURSE_GROUPS_TO_BRANCHES_MATCH_DIALOG_TITLE,
-		'open'   : function(){
-			var dialog = $(this),
-				groupsCell = $('.branchMappingFreeItemCell', dialog),
-				branchesCell = $('.branchMappingFreeBranchCell', dialog),
-				groupCell = $('.branchMappingBoundItemCell', dialog),
-				branchCell = $('.branchMappingBoundBranchCell', dialog);
+	let groupsCell = $('.branchMappingFreeItemCell', gtbDialog),
+		branchesCell = $('.branchMappingFreeBranchCell', gtbDialog),
+		groupCell = $('.branchMappingBoundItemCell', gtbDialog),
+		branchCell = $('.branchMappingBoundBranchCell', gtbDialog);
 			
-			// clear out previous entries
-			$('.branchMappingListCell', dialog).empty();
-			
-			// fetch course and branching groups
-			$.ajax({
-				url : LAMS_URL + 'organisationGroup/getGroupsForMapping.do',
-				data : {
-					'groupingId' 		  : groupingId,
-					'activityID' 		  : groupingActivityId
-				},
-				dataType : 'json',
-				success : function(response) {
-					// fill table with course and branching groups
-					$.each(response.groups, function(){
-						var group = this,
-							groupElem = $('<div />').click(selectGroupMappingListItem)
-													.text(group.name).attr('id', group.id);
-						
-						$.each(response.branches, function() {
-							// check if a branching group alread exists with the same name as a course group
-							if (this.name == group.name) {
-								var branchElem = $('<div />').click(selectGroupMappingListItem)
-															 .appendTo(branchCell)
-															 .text(this.name)
-															 .attr('id', this.id)
-															 .data('boundItem', groupElem);
-								groupElem.appendTo(groupCell).data('boundItem', branchElem);
-								groupElem = null;
-								return false;
-							}
-						});
-						
-						if (groupElem) {
-							// no existing mapping was found, make the group available for mapping
-							groupElem.appendTo(groupsCell);
-						}
-					});
-					// fill in branch groups
-					$.each(response.branches, function(){
-						$('<div />').click(selectGroupMappingListItem).appendTo(branchesCell)
-									.text(this.name).attr('id', this.id);
-					});
+	// clear out previous entries
+	$('.branchMappingListCell', gtbDialog).empty();
+	
+	// fetch course and branching groups
+	$.ajax({
+		url : LAMS_URL + 'organisationGroup/getGroupsForMapping.do',
+		data : {
+			'groupingId' 		  : groupingId,
+			'activityID' 		  : groupingActivityId
+		},
+		dataType : 'json',
+		success : function(response) {
+			// fill table with course and branching groups
+			$.each(response.groups, function(){
+				var group = this,
+					groupElem = $('<div />').click(selectGroupMappingListItem)
+											.text(group.name).attr('id', group.id);
+				
+				$.each(response.branches, function() {
+					// check if a branching group alread exists with the same name as a course group
+					if (this.name == group.name) {
+						var branchElem = $('<div />').click(selectGroupMappingListItem)
+													 .appendTo(branchCell)
+													 .text(this.name)
+													 .attr('id', this.id)
+													 .data('boundItem', groupElem);
+						groupElem.appendTo(groupCell).data('boundItem', branchElem);
+						groupElem = null;
+						return false;
+					}
+				});
+				
+				if (groupElem) {
+					// no existing mapping was found, make the group available for mapping
+					groupElem.appendTo(groupsCell);
 				}
 			});
+			// fill in branch groups
+			$.each(response.branches, function(){
+				$('<div />').click(selectGroupMappingListItem).appendTo(branchesCell)
+							.text(this.name).attr('id', this.id);
+			});
 		}
-	}, false);
+	});
+			
 	
-	$('.modal-body', gtbDialog).empty().append(groupMappingDialogContents.show());
 	gtbDialog.modal('show');
 };
 
 /**
  * Make a pair out of selected groups.
  */
 function addGroupMapping(){
-	var dialog = gtbDialog,
+	var dialog = $('#groupMappingDialog'),
 		selectedItem = $('.branchMappingFreeItemCell .selected', dialog),
 		selectedBranch =  $('.branchMappingFreeBranchCell .selected', dialog);
 	
@@ -194,7 +181,7 @@
 }
 
 function removeGroupMapping() {
-	var dialog = gtbDialog,
+	var dialog = $('#groupMappingDialog'),
 		selectedItem = $('.branchMappingBoundItemCell .selected', dialog),
 		selectedBranch =  $('.branchMappingBoundBranchCell .selected', dialog);
 
Index: lams_central/web/orgGrouping.jsp
===================================================================
diff -u -r9dcc3e2d26b504f92d919f53f0d45dd4093a82a2 -r9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48
--- lams_central/web/orgGrouping.jsp	(.../orgGrouping.jsp)	(revision 9dcc3e2d26b504f92d919f53f0d45dd4093a82a2)
+++ lams_central/web/orgGrouping.jsp	(.../orgGrouping.jsp)	(revision 9056bc58b5c132d3cfeb8423e5a5ca8bcb149b48)
@@ -1,21 +1,35 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="lams"><lams:LAMSURL/></c:set>
-
+<c:set var="lessonMode" value="${not empty param.activityID}" />
+<c:set var="groupingMethod" value="${usedForBranching eq true ? 'openGroupMappingDialog' : 'viewGroups'}" />
+<c:set var="title">
+	<c:choose>
+		<c:when test="${lessonMode}">
+			<fmt:message key="index.course.groups.title" />
+		</c:when>
+		<c:otherwise>
+			<fmt:message key="label.course.groups.grouping.title" />
+		</c:otherwise>
+	</c:choose>
+</c:set>
+	
 <lams:html>
 <lams:head>
-	<lams:css/>
-	<link rel="stylesheet" href="${lams}css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
-	<link rel="stylesheet" href="${lams}css/orgGrouping.css" type="text/css" media="screen" />
+	<title><c:out value="${title}" /></title>
+
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/orgGrouping.css" type="text/css" media="screen" />
 	
-	<c:set var="lessonMode" value="${not empty param.activityID}" />
-	<c:set var="groupingMethod" value="${usedForBranching eq true ? 'openGroupMappingDialog' : 'viewGroups'}" />
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	<lams:JSImport src="includes/javascript/dialog5.js" />
+	<lams:JSImport src="includes/javascript/orgGrouping.js" />
 	
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/orgGrouping.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
 	<script type="text/javascript">
 		var groupingActivityId = '${param.activityID}',
 			lessonMode = ${lessonMode},
@@ -38,90 +52,99 @@
 			};
 	</script>
 </lams:head>
-<body>
-
-<div id="titleDiv">
-	<c:choose>
-		<c:when test="${lessonMode}">
-			<fmt:message key="index.course.groups.title" />
-		</c:when>
-		<c:otherwise>
-			<fmt:message key="label.course.groups.grouping.title" />
-		</c:otherwise>
-	</c:choose>
-</div>
-
-<c:forEach var="grouping" items="${groupings}">
-	<%-- In lesson mode do not show groupings with zero groups --%>
-	<c:if test="${not lessonMode or grouping.groupCount > 0}">
-		<div id="grouping-${grouping.groupingId}" class="groupingContainer">
-				<a href="#" class="groupingName" onClick="javascript:${groupingMethod}(${grouping.groupingId})"> <c:out value="${grouping.name}" />
-				</a> <span class="groupCount" title='<fmt:message key="label.course.groups.grouping.count.label" />'>
-					(${grouping.groupCount}) </span>
-			<c:if test="${canEdit and not lessonMode}">
-				<i class="removeGroupingButton fa fa-remove fa-lg" title="<fmt:message key='label.course.groups.remove.tooltip' />"
-				   onClick="javascript:removeGrouping(${grouping.groupingId})" ></i>
-			</c:if>
+<body class="component">
+	<lams:Page5 type="admin" title="${title}">
+		<div class="row">
+			<div class="col-4 offset-4">
+				<ul class="list-group">
+					<c:forEach var="grouping" items="${groupings}">
+						<%-- In lesson mode do not show groupings with zero groups --%>
+						<c:if test="${not lessonMode or grouping.groupCount > 0}">
+							<li id="grouping-${grouping.groupingId}" class="grouping list-group-item fw-bold"
+								onClick="javascript:${groupingMethod}(${grouping.groupingId})">
+								<div class="row">
+									<div class="col-10">
+										<c:out value="${grouping.name}" />
+									</div>
+									<div class="col-1">
+										<span class="badge text-bg-primary" title='<fmt:message key="label.course.groups.grouping.count.tooltip" />'>
+											${grouping.groupCount}
+										</span>
+									</div>
+									<div class="col-1 text-end">
+										<c:if test="${canEdit and not lessonMode}">
+											<i class="removeGroupingButton fa fa-remove fa-lg" title="<fmt:message key='label.course.groups.remove.tooltip' />"
+											   onClick="javascript:removeGrouping(${grouping.groupingId})" ></i>
+										</c:if>
+									</div>
+								</div>
+							</li>
+						</c:if>
+					</c:forEach>
+				</ul>
+			</div>
 		</div>
-	</c:if>
-</c:forEach>
+		<c:if test="${canEdit}">
+			<div class="row mt-3">
+				<div class="col-4 offset-4 text-end">
+					<div class="btn btn-secondary" onClick="javascript:viewGroups()">
+					<i class="fa fa-plus"></i>
+					<span><fmt:message key='label.course.groups.grouping.create' /></span>
+				</div>
+			</div>
+		</c:if>
+</lams:Page5>
 
-<c:if test="${canEdit}">
-		<div id="addGroupingButton" class="btn btn-default" onClick="javascript:viewGroups()">
-		<i class="fa fa-plus"></i>
-		<span><fmt:message key='label.course.groups.grouping.create' /></span>
-	</div>
-</c:if>
-	
 <c:if test="${usedForBranching eq true}">
-	<div id="groupMappingDialogContents" style="display:none">
-		<table>
-			<tr>
-				<td></td>
-				<td></td>
-				<td rowspan="2"></td>
-				<td colspan="2" class="branchMappingLabelCell">
-					<fmt:message key="authoring.fla.page.dialog.mappings" />
-				</td>
-			</tr>
-			<tr>
-				<td class="branchMappingLabelCell branchMappingFreeItemHeaderCell">
-					<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
-				</td>
-				<td class="branchMappingLabelCell branchMappingFreeBranchHeaderCell">
-					<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
-				</td>
-				<td class="branchMappingLabelCell branchMappingBoundItemHeaderCell">
-					<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
-				</td>
-				<td class="branchMappingLabelCell branchMappingBoundBranchHeaderCell">
-					<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
-				</td>
-			</tr>
-			<tr>
-				<td class="branchMappingFreeItemCell branchMappingListCell"></td>
-				<td class="branchMappingFreeBranchCell branchMappingListCell"></td>
-				<td>
-					<button class="btn btn-default branchMappingAddButton branchMappingButton"><i class="fa fa-chevron-right"></i></button>
-					<button class="btn btn-default branchMappingRemoveButton branchMappingButton"><i class="fa fa-chevron-left"></i></button>
-				</td>
-				<td class="branchMappingBoundItemCell branchMappingListCell"></td>
-				<td class="branchMappingBoundBranchCell branchMappingListCell"></td>
-			</tr>
-			<tr>
-				<td colspan="5">
-					<div class="container-fluid">
-						<div class="pull-right btn-group" role="group">
-							<button id="branchMappingOKButton" class="btn btn-default">
-								<i class="fa fa-check"></i> 
-								<span><fmt:message key="authoring.fla.ok.button" /></span>
-							</button>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</table>
-	</div>
+<div id="groupMappingDialogContents" class="modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content">
+    	<div class="modal-body">
+	    	<table>
+				<tr>
+					<td></td>
+					<td></td>
+					<td rowspan="2"></td>
+					<td colspan="2" class="branchMappingLabelCell">
+						<fmt:message key="authoring.fla.page.dialog.mappings" />
+					</td>
+				</tr>
+				<tr>
+					<td class="branchMappingLabelCell branchMappingFreeItemHeaderCell">
+						<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
+					</td>
+					<td class="branchMappingLabelCell branchMappingFreeBranchHeaderCell">
+						<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
+					</td>
+					<td class="branchMappingLabelCell branchMappingBoundItemHeaderCell">
+						<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
+					</td>
+					<td class="branchMappingLabelCell branchMappingBoundBranchHeaderCell">
+						<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
+					</td>
+				</tr>
+				<tr>
+					<td class="branchMappingFreeItemCell branchMappingListCell"></td>
+					<td class="branchMappingFreeBranchCell branchMappingListCell"></td>
+					<td>
+						<button class="btn btn-secondary branchMappingAddButton branchMappingButton"><i class="fa fa-chevron-right"></i></button>
+						<button class="btn btn-secondary branchMappingRemoveButton branchMappingButton"><i class="fa fa-chevron-left"></i></button>
+					</td>
+					<td class="branchMappingBoundItemCell branchMappingListCell"></td>
+					<td class="branchMappingBoundBranchCell branchMappingListCell"></td>
+				</tr>
+			</table>
+    	</div>
+      	<div class="modal-footer">
+			<button id="branchMappingOKButton" class="btn btn-primary">
+				<i class="fa fa-check"></i> 
+				<span><fmt:message key="authoring.fla.ok.button" /></span>
+			</button>
+      	</div>
+    </div>
+  </div>
+</div>
 </c:if>
+
 </body>
 </lams:html>
\ No newline at end of file