SAK-48893 Fixing Site Info UI to Align with 22.x design standards (B-…

…5) (sakaiproject#11560)
susowrc · May 15, 2023 · 592f88d · 592f88d
1 parent c929912
commit 592f88d
Show file tree

Hide file tree

Showing 23 changed files with 48 additions and 45 deletions.
diff --git a/library/src/skins/default/src/sass/base/_defaults.scss b/library/src/skins/default/src/sass/base/_defaults.scss
@@ -91,6 +91,15 @@ a{
   }
 }
 
+.dropdown-menu > li > a {
+  text-decoration: none;
+}
+
+.dropdown-menu > li:hover,
+.dropdown-menu > li:focus {
+  background-color: var(--sakai-background-color-4);
+}
+
 input, textarea{
   color: var(--sakai-text-color-1);
   background: var(--sakai-background-color-1);

diff --git a/library/src/skins/default/src/sass/modules/tool/gradebook/_gradebook.scss b/library/src/skins/default/src/sass/modules/tool/gradebook/_gradebook.scss
@@ -1793,12 +1793,4 @@ max-height:100px;
 
 .w_blue .w_content_container {
   max-height: 450px;
-}
-
-.dropdown-menu > li > a {
-  text-decoration: none;
-}
-.dropdown-menu > li:hover,
-.dropdown-menu > li:focus {
-  background-color: var(--button-hover-background);
-}
+}
diff --git a/library/src/skins/default/src/sass/modules/tool/siteinfo/_siteinfo.scss b/library/src/skins/default/src/sass/modules/tool/siteinfo/_siteinfo.scss
@@ -89,6 +89,9 @@
 					width: calc(100% - 35px);
 					display: inline-block;
 					min-width: initial !important;
+					padding: 0;
+					border-top-right-radius: 0;
+					border-bottom-right-radius: 0;
 				}
 
 				.day-of-week {

diff --git a/site-manage/datemanager/tool/src/main/webapp/WEB-INF/templates/index.html b/site-manage/datemanager/tool/src/main/webapp/WEB-INF/templates/index.html
@@ -21,7 +21,7 @@
     <script th:src="@{/js/initDatePicker.js}"></script>
     <meta http-equiv="Content-Style-Type" content="text/css" />
 
-    <div>
+    <div class="page-header border-bottom">
       <h1 th:text="#{page.instructions}">Add/Edit Options in batch</h1>
     </div>
 
@@ -36,8 +36,8 @@ <h1 th:text="#{page.instructions}">Add/Edit Options in batch</h1>
           <span th:text="#{dateshifter.label.after}" th:remove="tag"></span>
         </label>
       </p>
-      <button id="shiftAllDates" th:text="#{dateshifter.all.button}" disabled></button>
-      <button id="shiftVisibleDates" th:text="#{dateshifter.visible.button}" disabled></button>
+      <button class="btn m-2" id="shiftAllDates" th:text="#{dateshifter.all.button}" disabled></button>
+      <button class="btn m-2" id="shiftVisibleDates" th:text="#{dateshifter.visible.button}" disabled></button>
     </div>
 
     <form id="date-manager-form" method="POST">
@@ -51,71 +51,71 @@ <h1 th:text="#{page.instructions}">Add/Edit Options in batch</h1>
       </div>
 
       <div th:if="${assignments != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-assignments" class="collapsed" aria-expanded="false"><span th:text="${assignmentsToolTitle}">Assignments</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${assignments}, toolId='assignments', collapseId='collapse-assignments')"></div>
       </div>
       <div th:if="${assessments != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-assessments" class="collapsed" aria-expanded="false"><span th:text="${assessmentsToolTitle}">Tests & Quizzes</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${assessments}, toolId='assessments', collapseId='collapse-assessments')"></div>
       </div>
       <div th:if="${signupMeetings != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-signup" class="collapsed" aria-expanded="false"><span th:text="${signupMeetingsToolTitle}">Sign up</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${signupMeetings}, toolId='signupMeetings', collapseId='collapse-signup')"></div>
       </div>
       <div th:if="${gradebookItems != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-gradebook" class="collapsed" aria-expanded="false"><span th:text="${gradebookItemsToolTitle}">Gradebook</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${gradebookItems}, toolId='gradebookItems', collapseId='collapse-gradebook')"></div>
       </div>
       <div th:if="${resources != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-resources" class="collapsed" aria-expanded="false"><span th:text="${resourcesToolTitle}">Resources</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${resources}, toolId='resources', collapseId='collapse-resources')"></div>
       </div>
       <div th:if="${calendarEvents != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-calendar" class="collapsed" aria-expanded="false"><span th:text="${calendarEventsToolTitle}">Calendar</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${calendarEvents}, toolId='calendarEvents', collapseId='collapse-calendar')"></div>
       </div>
       <div th:if="${forums != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-forums" class="collapsed" aria-expanded="false"><span th:text="${forumsToolTitle}">Forums</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${forums}, toolId='forums', collapseId='collapse-forums')"></div>
       </div>
       <div th:if="${announcements != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-announcements" class="collapsed" aria-expanded="false"><span th:text="${announcementsToolTitle}">Announcements</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>
         </div>
         <div th:replace="tool_fragment :: tool_fragment(items=${announcements}, toolId='announcements', collapseId='collapse-announcements')"></div>
       </div>
       <div th:if="${lessons != null}" class="card">
-        <div class="card text-center bg-light">
+        <div class="card-header">
           <h4 class="card-title">
             <a data-bs-toggle="collapse" data-parent="#accordion" href="#collapse-lessons" class="collapsed" aria-expanded="false"><span th:text="${lessonsToolTitle}">Lessons</span><span class="allocatedSpinPlaceholder"></span></a>
           </h4>

diff --git a/site-manage/pageorder/tool/src/webapp/content/css/PageList.css b/site-manage/pageorder/tool/src/webapp/content/css/PageList.css
@@ -84,8 +84,7 @@ li.sortable_hover
 }
 .item_control.del-link
 {
-	color: var(--errorBanner-color);
-	background: var(--errorBanner-bgcolor);
+	color: var(--errorBanner-color) !important;
 }
 .item_control_box .dropdown-menu>li>a
 {

diff --git a/site-manage/pageorder/tool/src/webapp/content/templates/PageList.html b/site-manage/pageorder/tool/src/webapp/content/templates/PageList.html
@@ -16,7 +16,7 @@
  	<div id="page-order-body" class="portletBody">
 		<a href="#" rsf:id="redirect">go back</a>
 		<div rsf:id="content:">
-			<div>
+			<div class="page-header">
 				<h1 rsf:id="msg=page_title">page_title</h1>
 			</div>
 			<div class="alertMessageContainer">

diff --git a/site-manage/site-group-manager/src/main/webapp/WEB-INF/templates/index.html b/site-manage/site-group-manager/src/main/webapp/WEB-INF/templates/index.html
@@ -5,7 +5,7 @@
   <div th:replace="fragments/common :: jQuery" />
   <div class="portletBody">
     <div id="menu" th:include="fragments/menus :: main (index)" />
-    <div><h1 th:text="#{index.header.grouplist}"></h1></div>
+    <div class="page-header"><h1 th:text="#{index.header.grouplist}"></h1></div>
     <div class="sak-banner-info" th:if="${groupList.isEmpty()}" th:text="#{index.warning.groupempty}">No groups in this site.</div>
     <div class="instruction" th:if="${anyGroupLocked}"><span class="si si-locked" aria-hidden="true"></span> - <span aria-hidden="true" th:text="#{index.table.grouplocked.info}"></span></div>
     <form th:if="${!groupList.isEmpty()}" id="group-manager-form" action="#" th:action="@{/removeGroups}" th:object="${mainForm}" method="post">

diff --git a/site-manage/site-group-manager/src/main/webapp/WEB-INF/templates/joinable_set.html b/site-manage/site-group-manager/src/main/webapp/WEB-INF/templates/joinable_set.html
@@ -55,7 +55,7 @@ <h1 th:if="${joinableSetForm.joinableSetId != null}" th:text="#{joinableset.head
               <div th:if="${joinableSetForm.joinableSetId != null}" class="mb-2">
                 <div id="accordion">
                   <div class="card">
-                    <div class="card text-center bg-light">
+                    <div class="card-header">
                       <h4 class="card-title">
                         <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#groupCollapsible" th:text="|#{joinableset.current.groups} (${joinableSetGroups.size()})|">Current Groups:</a>
                       </h4>
@@ -67,7 +67,7 @@ <h4 class="card-title">
                     </div>
                   </div>
                   <div class="card">
-                    <div class="card text-center bg-light">
+                    <div class="card-header">
                       <h4 class="card-title">
                         <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#additionalGroupsCollapsible" th:text="#{joinableset.additional.groups}">Generate Additional Groups</a>
                       </h4>
@@ -96,7 +96,7 @@ <h4 class="card-title">
                     </div>
                   </div>
                   <div class="card">
-                    <div class="card text-center bg-light">
+                    <div class="card-header">
                       <h4 class="card-title">
                         <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#notJoinedUsersCollapsible" th:text="|#{joinableset.unjoined.users} (${notJoinedUserList.size()})|">Users who have not yet joined a group in this set</a>
                       </h4>

diff --git a/site-manage/site-manage-link-helper/src/webapp/vm/sakai_link.vm b/site-manage/site-manage-link-helper/src/webapp/vm/sakai_link.vm
@@ -1,6 +1,6 @@
 #javascript("/library/js/spinner.js")
 <div class="portletBody">
-    <div>
+    <div class="page-header">
         <h1>$tlang.getString('title')</h1>
     </div>
 #if ($alertMessage)

diff --git a/site-manage/site-manage-participant-helper/src/webapp/content/templates/Add.html b/site-manage/site-manage-participant-helper/src/webapp/content/templates/Add.html
@@ -15,7 +15,7 @@
 <div id="participant-body" class="portletBody">
 	<div rsf:id="content:">
 		<!-- instruction for adding participant to course sites  -->
-		<div>
+		<div class="page-header">
 			<h1 rsf:id="msg=java.addp">Add Participant</h1>
 		</div>
 		<p>

diff --git a/site-manage/site-manage-participant-helper/src/webapp/content/templates/SameRole.html b/site-manage/site-manage-participant-helper/src/webapp/content/templates/SameRole.html
@@ -48,9 +48,9 @@ <h4 rsf:id="msg=addsame.participants"></h4>
 				<table class="table table-bordered table-hover table-striped" summary="">
 					<tr rsf:id="user-row:">
 						<td>
-							<h5 rsf:id="user-label">
+							<h6 rsf:id="user-label">
 								user
-							</h5>
+							</h6>
 						</td>
 					</tr>
 				</table>

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-editToolGroupFeatures.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-editToolGroupFeatures.vm
@@ -6,7 +6,7 @@
 <div class="portletBody">
     #if($menu)#toolbar($menu)#end
     ## header for manage tools page
-    <div>
+    <div class="page-header">
         <h1>$tlang.getString("java.edittools")</h1>
     </div>
 

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-newSiteCourse.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-newSiteCourse.vm
@@ -2,7 +2,7 @@
 <div class="portletBody container-fluid">
 	#if($menu)#toolbar($menu)#end
 ## header for edit class roster's editing course/section info
-	<div>
+	<div class="page-header">
 		#if (!$!site)
 			<h1>$tlang.getString("nscourse.creating")</h1>
 			<p class="step">

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editAccess.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editAccess.vm
@@ -146,7 +146,7 @@
 	#if($menu)#toolbar($menu)#end
 
     ##  header for manage access page
-	<div>
+	<div class="page-header">
 		#if (!$!site)
 			<h1>$tlang.getString("ediacc.other.setsitacc")</h1>
 		#else

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editClass.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editClass.vm
@@ -4,7 +4,7 @@
 	#if($menu)#toolbar($menu)#end
 
 	## header for edit class roster(s) page
-	<div>
+	<div class="page-header">
 		<h1>$tlang.getString("java.editc")</h1>
 	</div>
 

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editInfo.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-editInfo.vm
@@ -3,7 +3,7 @@
 <div class="portletBody container-fluid">
 	#if($menu)#toolbar($menu)#end
 	## header for edit site information page
-	<div>
+	<div class="page-header">
 		<h1>$tlang.getString("java.editsite")</h1>
 	</div>
 	<form name="classInformationForm" id="classInformationForm" method="post" action="#toolForm("SiteAction")">

diff --git a/...-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importMigrate.vm b/...-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importMigrate.vm
@@ -16,7 +16,7 @@
 			</p>
 			<div id="sitesAccordion">
 				<div class="card">
-					<div class="card text-center bg-light">
+					<div class="card-header">
 						<h4 class="card-title">
 							#set ($sitesSize = $sites.size() - 1)
 							<a data-bs-toggle="collapse" data-bs-parent="#sitesAccordion" href="#mysites">$tlang.getString("sitinfimp.mysites") ($sitesSize)</a>
@@ -42,7 +42,7 @@
 
 			#if ($!hiddenSites && $hiddenSites.size() > 0)
 				<div class="card">
-					<div class="card text-center bg-light">
+					<div class="card-header">
 						<h4 class="card-title">
 							<a data-bs-toggle="collapse" data-bs-parent="#sitesAccordion" href="#hiddenSites">$tlang.getString("sitinfimp.hiddensites") ($hiddenSites.size())</a>
 						</h4>

diff --git a/...nage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importMtrlMaster.vm b/...nage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importMtrlMaster.vm
@@ -2,7 +2,7 @@
 <div class="portletBody">
 	#if($menu)#toolbar($menu)#end
 	## header for import from archived page
-	<div>
+	<div class="page-header">
 		<h1>$tlang.getString("java.importFile")</h1>
 	</div>
 

diff --git a/...anage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importSelection.vm b/...anage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-importSelection.vm
@@ -2,7 +2,7 @@
 <div class="portletBody">
 	#if($menu)#toolbar($menu)#end
 	##header for import from site page
-	<div>
+	<div class="page-header">
 		<h1>$tlang.getString("java.import")</h1>
 	</div>
 

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-list.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-list.vm
@@ -33,7 +33,7 @@
 	<div id="group-modal"></div>
 	#if($menu)#toolbar($menu)#end
 	## header for site info page
-	<div>
+	<div class="page-header">
 		<h1>$tlang.getString("sinfo.other")</h1>
 	</div>
 

diff --git a/...manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-manageOverview.vm b/...manage/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-manageOverview.vm
@@ -3,7 +3,7 @@
         <input type="hidden" name="back" value="$!back" />
         <input type="hidden" name="eventSubmit_doManage_overview_option" value="x" />
         <input type="hidden" name="option" value="cancel" />
-        <div>
+        <div class="page-header">
             <h1>$tlang.getString("manover.header") <span class="highlight">$!site.Title</span></h1>
             <p class="instruction"> $tlang.getString("manover.instr") </p>
         </div>

diff --git a/...ge/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-manageParticipants.vm b/...ge/site-manage-tool/tool/src/webapp/vm/sitesetup/chef_site-siteInfo-manageParticipants.vm
@@ -9,7 +9,7 @@
     #if($menu)#toolbar($menu)#end
 
     ## header for manage participants page
-    <div>
+    <div class="page-header">
         <h1>$tlang.getString("java.manageParticipants")</h1>
     </div>
     <div class="participantsHeader">

diff --git a/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/toolGroupMultipleDisplay.vm b/site-manage/site-manage-tool/tool/src/webapp/vm/sitesetup/toolGroupMultipleDisplay.vm
@@ -66,7 +66,7 @@
 
 <div id="toolHolderWW" class="container-fluid">
   <div class="row">
-    <div id="toolHolderW" class="col-md-8">
+    <div id="toolHolderW d-flex" class="col-md-8">
         <div id="collExpContainer">
             <a id="expandAll" href="#">$tlang.getString("feat.expand.all")</a>
             <a id="contractAll" style="display:none" href="#">$tlang.getString("feat.collapse.all")</a>