From bef577237d2c5b55a1e0999cbd62617963c38ebc Mon Sep 17 00:00:00 2001
From: kunaljaykam <kunaljaykam@gmail.com>
Date: Thu, 16 May 2024 20:15:59 +0530
Subject: [PATCH] SAK-48398 Samigo: Question text layouts are inconsistent

---
 .../src/sass/modules/tool/samigo/_samigo.scss | 10 +++
 .../jsf/author/item/calculatedQuestion.jsp    | 44 +++++-----
 .../webapp/jsf/author/item/itemHeadings.jsp   | 80 ++++++++++---------
 .../webapp/jsf/author/item/multipleChoice.jsp | 40 +++++-----
 .../src/webapp/jsf/questionpool/editPool.jsp  | 38 ++++-----
 5 files changed, 115 insertions(+), 97 deletions(-)

diff --git a/library/src/skins/default/src/sass/modules/tool/samigo/_samigo.scss b/library/src/skins/default/src/sass/modules/tool/samigo/_samigo.scss
index b2316e7f09ae..1dad476d7936 100644
--- a/library/src/skins/default/src/sass/modules/tool/samigo/_samigo.scss
+++ b/library/src/skins/default/src/sass/modules/tool/samigo/_samigo.scss
@@ -599,3 +599,13 @@ table.table-bordered.dataTable {
     background:#fff;
     padding:0 10px;
 }
+
+label {
+	font-weight: bold;
+}
+
+.samigo-breadcrumb {
+	background-color: var(--sakai-background-color-2);
+	border-radius: 4px;
+	padding: 8px 15px;
+}
\ No newline at end of file
diff --git a/samigo/samigo-app/src/webapp/jsf/author/item/calculatedQuestion.jsp b/samigo/samigo-app/src/webapp/jsf/author/item/calculatedQuestion.jsp
index 94411579b30e..399328c0c583 100644
--- a/samigo/samigo-app/src/webapp/jsf/author/item/calculatedQuestion.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/author/item/calculatedQuestion.jsp
@@ -125,8 +125,8 @@ confirmation dialog
 	</div>
 
 	<!-- 1 POINTS -->
-	<div class="form-group row">
-		<h:outputLabel for="answerptr" value="#{authorMessages.answer_point_value}" styleClass="col-md-2 form-control-label"/>
+	<div class="mb-3 row">
+		<h:outputLabel for="answerptr" value="#{authorMessages.answer_point_value}" styleClass="col-md-2 form-label"/>
 		<div class="col-md-2">
 			<h:inputText id="answerptr" label="#{authorMessages.pt}" value="#{itemauthor.currentItem.itemScore}" 
 							required="true" disabled="#{author.isEditPoolFlow}" styleClass="form-control">
@@ -136,8 +136,8 @@ confirmation dialog
 	  	</div>
 	</div>
 
-	<div class="form-group row">
-		<h:outputLabel for="itemScore" value="#{authorMessages.answer_point_value_display}" styleClass="col-md-2 form-control-label"/>
+	<div class="mb-3 row">
+		<h:outputLabel for="itemScore" value="#{authorMessages.answer_point_value_display}" styleClass="col-md-2 form-label"/>
 		<div class="col-md-5 samigo-inline-radio">
 			<h:selectOneRadio value="#{itemauthor.currentItem.itemScoreDisplayFlag}" id="itemScore">
 				<f:selectItem itemValue="true" itemLabel="#{authorMessages.yes}" />
@@ -497,9 +497,9 @@ confirmation dialog
     <%@ include file="/jsf/author/item/timed.jsp" %>
 
     <!-- 6 PART -->
-	<h:panelGroup styleClass="form-group row" layout="block"
+	<h:panelGroup styleClass="mb-3 row" layout="block"
 					rendered="#{itemauthor.target == 'assessment' && !author.isEditPoolFlow}">		
-		<h:outputLabel for="assignToPart" value="#{authorMessages.assign_to_p}" styleClass="col-md-2 form-control-label"/>
+		<h:outputLabel for="assignToPart" value="#{authorMessages.assign_to_p}" styleClass="col-md-2 form-label"/>
 		<div class="col-md-10">
 	  		<h:selectOneMenu id="assignToPart" value="#{itemauthor.currentItem.selectedSection}">
 	    		<f:selectItems  value="#{itemauthor.sectionSelectList}" />
@@ -508,9 +508,9 @@ confirmation dialog
 	</h:panelGroup>
 
     <!-- 7 POOL -->
-	<h:panelGroup styleClass="form-group row" layout="block"
+	<h:panelGroup styleClass="mb-3 row" layout="block"
 			rendered="#{itemauthor.target == 'assessment' && author.isEditPendingAssessmentFlow}">
-		<h:outputLabel for="assignToPool" value="#{authorMessages.assign_to_question_p}" styleClass="col-md-2 form-control-label"/>
+		<h:outputLabel for="assignToPool" value="#{authorMessages.assign_to_question_p}" styleClass="col-md-2 form-label"/>
 		<div class="col-md-10">
 	  		<h:selectOneMenu id="assignToPool" value="#{itemauthor.currentItem.selectedPool}">
 	    		<f:selectItem itemValue="" itemLabel="#{authorMessages.select_a_pool_name}" />
@@ -521,11 +521,11 @@ confirmation dialog
 
 	<!-- 8 FEEDBACK -->
 	<h:panelGroup rendered="#{itemauthor.target == 'questionpool' || (itemauthor.target != 'questionpool' && (author.isEditPendingAssessmentFlow && assessmentSettings.feedbackAuthoring ne '2') || (!author.isEditPendingAssessmentFlow && publishedSettings.feedbackAuthoring ne '2'))}">
-		<div class="form-group row">
-			<h:outputLabel value="#{authorMessages.correct_incorrect_an}" styleClass="col-md-12 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel value="#{authorMessages.correct_incorrect_an}" styleClass="col-md-12 form-label"/>
 		</div>
-		<div class="form-group row">
-			<h:outputLabel for="questionFeedbackCorrect_textinput" value="#{authorMessages.correct_answer_opti}" styleClass="col-md-2 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel for="questionFeedbackCorrect_textinput" value="#{authorMessages.correct_answer_opti}" styleClass="col-md-2 form-label"/>
 			<!-- WYSIWYG -->
 			<div class="col-md-10">
 				<h:panelGrid>
@@ -535,8 +535,8 @@ confirmation dialog
 				</h:panelGrid>
 			</div>
 		</div>
-		<div class="form-group row">
-			<h:outputLabel for="questionFeedbackIncorrect_textinput" value="#{authorMessages.incorrect_answer_op}" styleClass="col-md-2 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel for="questionFeedbackIncorrect_textinput" value="#{authorMessages.incorrect_answer_op}" styleClass="col-md-2 form-label"/>
 			<!-- WYSIWYG -->
 			<div class="col-md-10">
 				<h:panelGrid>
@@ -550,23 +550,23 @@ confirmation dialog
 
 	<!-- METADATA -->
 	<h:panelGroup rendered="#{itemauthor.showMetadata == 'true'}" styleClass="longtext">
-		<div class="form-group row">
-			<h:outputLabel value="Metadata" styleClass="col-md-12 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel value="Metadata" styleClass="col-md-12 form-label"/>
 		</div>
-		<div class="form-group row">
-			<h:outputLabel for="obj" value="#{authorMessages.objective}" styleClass="col-md-2 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel for="obj" value="#{authorMessages.objective}" styleClass="col-md-2 form-label"/>
 			<div class="col-md-5">
 				<h:inputText size="30" id="obj" value="#{itemauthor.currentItem.objective}" styleClass="form-control"/>
 			</div>
 		</div>
-		<div class="form-group row">
-			<h:outputLabel for="keyword" value="#{authorMessages.keyword}" styleClass="col-md-2 form-control-label"/>
+		<div class="mb-3 row">
+			<h:outputLabel for="keyword" value="#{authorMessages.keyword}" styleClass="col-md-2 form-label"/>
 			<div class="col-md-5">
 				<h:inputText size="30" id="keyword" value="#{itemauthor.currentItem.keyword}" styleClass="form-control"/>
 			</div>
 		</div>
-		<div  class="form-group row">
-			<h:outputLabel for="rubric" value="#{authorMessages.rubric_colon}" styleClass="col-md-2 form-control-label"/>
+		<div  class="mb-3 row">
+			<h:outputLabel for="rubric" value="#{authorMessages.rubric_colon}" styleClass="col-md-2 form-label"/>
 			<div class="col-md-5">
 				<h:inputText size="30" id="rubric" value="#{itemauthor.currentItem.rubric}" styleClass="form-control" />
 			</div>
diff --git a/samigo/samigo-app/src/webapp/jsf/author/item/itemHeadings.jsp b/samigo/samigo-app/src/webapp/jsf/author/item/itemHeadings.jsp
index bf39fbacc1e7..fdf3d114a6da 100755
--- a/samigo/samigo-app/src/webapp/jsf/author/item/itemHeadings.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/author/item/itemHeadings.jsp
@@ -120,44 +120,48 @@ function displayEMIHelp(){
 <br/>
 
 <!-- breadcrumb-->
-<ol class="breadcrumb">
-  <h:panelGroup rendered="#{itemauthor.target == 'assessment'}" >
-    <li>
-      <h:commandLink title="#{authorMessages.t_assessment}" action="author" immediate="true">
-        <h:outputText value="#{authorMessages.global_nav_assessmt}" />
-      </h:commandLink>
-    </li>
-    <li>
-      <h:commandLink title="#{authorMessages.t_question}" action="editAssessment" immediate="true" >
-        <h:outputText value="#{authorMessages.qs}#{authorMessages.column} #{assessmentBean.title}" escape="false"/>
-      </h:commandLink>
-    </li>
-    <li>
-      <h:outputText value="#{authorMessages.q} #{itemauthor.itemNo}" />
-    </li>
-  </h:panelGroup>
-  <h:panelGroup rendered="#{itemauthor.target == 'questionpool'}">
-    <li>
-      <h:outputText value="#{authorMessages.global_nav_pools}" />
-    </li>
-    <samigo:dataLine value="#{questionpool.currentPool.parentPoolsArray}" var="parent" separator="" first="0" rows="100" >
-      <h:column>
-        <li>
-          <h:commandLink action="#{questionpool.editPool}" immediate="true">
-            <h:outputText value="#{parent.displayName}" escape="false"/>
-            <f:param name="qpid" value="#{parent.questionPoolId}"/>
-          </h:commandLink>
-        </li>
-      </h:column>
-    </samigo:dataLine>
-    <li>
-      <h:commandLink action="#{questionpool.editPool}" immediate="true">
-        <h:outputText value="#{questionpool.currentPool.displayName}"/>
-        <f:param name="qpid" value="#{questionpool.currentPool.id}"/>
-      </h:commandLink>
-    </li>
-  </h:panelGroup>
-</ol>
+<!-- breadcrumb -->
+<nav class="samigo-breadcrumb" aria-label="breadcrumb">
+  <ol class="breadcrumb m-0">
+    <h:panelGroup rendered="#{itemauthor.target == 'assessment'}">
+      <li class="breadcrumb-item">
+        <h:commandLink title="#{authorMessages.t_assessment}" action="author" immediate="true">
+          <h:outputText value="#{authorMessages.global_nav_assessmt}" />
+        </h:commandLink>
+      </li>
+      <li class="breadcrumb-item">
+        <h:commandLink title="#{authorMessages.t_question}" action="editAssessment" immediate="true">
+          <h:outputText value="#{authorMessages.qs}#{authorMessages.column} #{assessmentBean.title}" escape="false"/>
+        </h:commandLink>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <h:outputText value="#{authorMessages.q} #{itemauthor.itemNo}" />
+      </li>
+    </h:panelGroup>
+    <h:panelGroup rendered="#{itemauthor.target == 'questionpool'}">
+      <li class="breadcrumb-item">
+        <h:outputText value="#{authorMessages.global_nav_pools}" />
+      </li>
+      <samigo:dataLine value="#{questionpool.currentPool.parentPoolsArray}" var="parent" separator="" first="0" rows="100">
+        <h:column>
+          <li class="breadcrumb-item">
+            <h:commandLink action="#{questionpool.editPool}" immediate="true">
+              <h:outputText value="#{parent.displayName}" escape="false"/>
+              <f:param name="qpid" value="#{parent.questionPoolId}"/>
+            </h:commandLink>
+          </li>
+        </h:column>
+      </samigo:dataLine>
+      <li class="breadcrumb-item active" aria-current="page">
+        <h:commandLink action="#{questionpool.editPool}" immediate="true">
+          <h:outputText value="#{questionpool.currentPool.displayName}"/>
+          <f:param name="qpid" value="#{questionpool.currentPool.id}"/>
+        </h:commandLink>
+      </li>
+    </h:panelGroup>
+  </ol>
+</nav>
+
 
 <div class="page-header">
   <h1>
diff --git a/samigo/samigo-app/src/webapp/jsf/author/item/multipleChoice.jsp b/samigo/samigo-app/src/webapp/jsf/author/item/multipleChoice.jsp
index a50e07d7f2e8..734f242d5cf9 100755
--- a/samigo/samigo-app/src/webapp/jsf/author/item/multipleChoice.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/author/item/multipleChoice.jsp
@@ -240,24 +240,26 @@
 
 
   <!-- 2 TEXT -->
-  <h:outputLabel for="questionItemText_textinput" value="#{authorMessages.q_text}" styleClass="col-md-2 form-control-label"/>
-   <div class="form-group row ">
-       <div class="col-md-8 row">
-       <div class="col-md-12">
-            <a id="multiple_show_editor" onclick="javascript:show_multiple_text(this);" href="#">
-                 <h:outputText id="text" value="#{authorMessages.show_editors}"/> 
-            </a>
-       </div>
-       <div class="col-md-12">
-          <!-- WYSIWYG -->
-          <h:panelGrid>
-              <samigo:wysiwyg identity="questionItemText" rows="140" value="#{itemauthor.currentItem.itemText}" hasToggle="plain" mode="author">
-                  <f:validateLength maximum="60000"/>
-              </samigo:wysiwyg>
-          </h:panelGrid>
-       </div>
-       </div>
-   </div>
+  <div class="form-group d-inline-flex">
+    <h:outputLabel for="questionItemText_textinput" value="#{authorMessages.q_text}" styleClass="col-md-2 form-control-label"/>
+
+        <div class="col-md-8 mx-5">
+            <!-- Rich-Text Editor Label -->
+            <div class="d-flex justify-content-end mb-1">
+              <a id="multiple_show_editor" class="toggle_link" onclick="javascript:show_multiple_text(this);" href="#">
+                <h:outputText id="text" value="#{authorMessages.show_editor}"/> 
+              </a>
+            </div>
+            <!-- WYSIWYG Editor -->
+            <div>
+                <h:panelGroup layout="block" styleClass="w-100 d-flex justify-content-end">
+                    <samigo:wysiwyg identity="questionItemText" rows="140" value="#{itemauthor.currentItem.itemText}" hasToggle="plain" mode="author">
+                        <f:validateLength maximum="60000"/>
+                    </samigo:wysiwyg>
+                </h:panelGroup>
+            </div>
+        </div>
+  </div>
 
   <!-- 2a ATTACHMENTS -->
   <%@ include file="/jsf/author/item/attachment.jsp" %>
@@ -266,7 +268,7 @@
   <h:dataTable id="mcchoices" styleClass="table" value="#{itemauthor.currentItem.multipleChoiceAnswers}" var="answer" headerClass="navView longtext">
     <h:column>
       <h:panelGrid columns="2" border="0">
-        <h:panelGroup styleClass="answer-group">
+        <h:panelGroup styleClass="answer-group d-table-cell pe-4">
           <div class="correct-answer">
             <h:outputText value="#{authorMessages.correct_answer}"  />
           </div>
diff --git a/samigo/samigo-app/src/webapp/jsf/questionpool/editPool.jsp b/samigo/samigo-app/src/webapp/jsf/questionpool/editPool.jsp
index 5e563ef277e2..b78d38a7dd48 100644
--- a/samigo/samigo-app/src/webapp/jsf/questionpool/editPool.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/questionpool/editPool.jsp
@@ -83,24 +83,26 @@ function textCounter(field, maxlimit) {
 
 <br />
 <h:panelGroup rendered="#{questionpool.currentPool.showParentPools}">
-  <ol class="breadcrumb">
-    <li>
-      <h:outputText value="#{authorMessages.global_nav_pools}" />
-    </li>
-    <samigo:dataLine value="#{questionpool.currentPool.parentPoolsArray}" var="parent" separator="" first="0" rows="100" >
-      <h:column>
-        <li>
-          <h:commandLink action="#{questionpool.editPool}" immediate="true">
-            <h:outputText value="#{parent.displayName}" escape="false"/>
-            <f:param name="qpid" value="#{parent.questionPoolId}"/>
-          </h:commandLink>
-        </li>
-      </h:column>
-    </samigo:dataLine>
-    <li>
-      <h:outputText value="#{questionpool.currentPool.displayName}"/>
-    </li>
-  </ol>
+  <nav class="samigo-breadcrumb" aria-label="breadcrumb">
+    <ol class="breadcrumb m-0">
+      <li class="breadcrumb-item">
+        <h:outputText value="#{authorMessages.global_nav_pools}" />
+      </li>
+      <samigo:dataLine value="#{questionpool.currentPool.parentPoolsArray}" var="parent" separator="" first="0" rows="100">
+        <h:column>
+          <li class="breadcrumb-item">
+            <h:commandLink action="#{questionpool.editPool}" immediate="true">
+              <h:outputText value="#{parent.displayName}" escape="false"/>
+              <f:param name="qpid" value="#{parent.questionPoolId}"/>
+            </h:commandLink>
+          </li>
+        </h:column>
+      </samigo:dataLine>
+      <li class="breadcrumb-item active" aria-current="page">
+        <h:outputText value="#{questionpool.currentPool.displayName}"/>
+      </li>
+    </ol>
+  </nav>
 </h:panelGroup>
 <div class="page-header">
   <h1>