SAK-41713 Forums: improved the responsiveness of conversations partic…

…ularly for wide content (sakaiproject#6844)
bals1820 · Apr 23, 2019 · 6b4119f · 6b4119f
1 parent 61acc49
commit 6b4119f
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 64 deletions.
diff --git a/library/src/morpheus-master/sass/modules/tool/forums/_forums.scss b/library/src/morpheus-master/sass/modules/tool/forums/_forums.scss
@@ -66,14 +66,19 @@
 	#msgForum{
 		.itemNav{
 			position: absolute;
-			right: 5px;
+			right: 0;				// right-aligned
+
 			@media #{$phone}{
 				position: inherit;
 				&:after{
 					content: " ";
 					clear: both;
 				}
 			}
+
+			> .button:first-child {
+				margin-right: $standard-space;	// space the buttons out
+			}
 		}
 		.specialLink{
 			h1{
@@ -277,4 +282,17 @@
 			align-self: center;
 		}
 	}
+
+	.otherActions{
+		margin-left: $standard-space;	// space between previous group of buttons
+		white-space: nowrap;
+
+		@media #{$phone} {
+			white-space: normal;
+		}
+
+		& > a.button {
+			margin: 0 $standard-space $standard-space 0;
+		}
+	}
 }
diff --git a/msgcntr/messageforums-app/src/webapp/css/msgcntr.css b/msgcntr/messageforums-app/src/webapp/css/msgcntr.css
@@ -153,35 +153,36 @@ a.markAsReadIcon:hover{
 	background: #fff url(../images/silk/email_open.png) 5px 3px no-repeat
 }
 .messagesFlat,.messagesThreaded{
-	width: 98% !important;
-	margin: 1em 0 !important;
-/*	border-spacing: .5em;*/
+	margin: 10px 0;
+	table-layout: fixed;
+	width: 100%;
 }
 .messagesFlat  tbody tr div,.messagesThreaded tbody tr div{
 	border: none
 }
 .messagesFlat tbody tr td div.hierItemBlock,.messagesThreaded tbody tr td div.hierItemBlock{
-	padding: 0 0 0 .5em !important;
+	padding: 0 10px;
 	border-left: 2px solid #cd5 !important;
-	width: 95%;
-	margin: .5em !important;
+	margin: 10px;
 }
 .messagesThreaded tbody tr td{
 	padding-top: 0;
 	padding-bottom: 0;
 }
 .messagesThreaded tbody tr td div.hierItemBlock .textPanel{
 	clear: both;
-    -ms-word-break: break-word;
-     word-break: break-word;
+	overflow-x: auto;
+}
+.messagesFlat div.textPanel {
+	overflow-x: auto;
 }
 .titleBarBorder{
 	/*create an underline under message title + metadata in view body thread view*/
 	background: #fff;
 	margin: 2px 0 0 0;
 }
 .messagesThreaded tbody tr.hierItemBlock td.bogus:first-child{
-	padding: 0 !important;
+	/*first message in thread in visible body view*/
 	border-left: 2px solid #69d;
 	width: 100%;
 }
@@ -192,42 +193,8 @@ a.markAsReadIcon:hover{
 .messagesFlat tbody .title,.messagesThreaded tbody .title{
 	font-weight: bold;
 	font-size: 1.1em;
-}
-.messagesThreaded tbody tr.hierItemBlock td.bogus:first-child .title{
-	font-weight: bold;
-	font-size: 1.2em;
-}
-.messagesThreaded tbody tr.hierItemBlock td.bogus:first-child{
-	/*first message in thread in visible body view*/
-	padding: 0;
-	border-left: 2px solid #69d;
-	width: 100%;
-}
-.messagesThreaded tbody tr.hierItemBlock td.bogus:first-child > div{
-	margin: 0;
-}
-.messagesThreaded tbody tr.hierItemBlock td.bogus:first-child .title{
-	/*message title of first message in thread + body view*/
-	font-weight: bold;
-	font-size: 1.2em;
-}
-.itemToolBar{
-	/*	parent of all links associated with an item in thread + body view*/
-	padding-left: .5em;
-	font-size: .9em;
-}
+}	
 
-.otherActions{
-	/*parent of all links in the "other actions" link list*/
-	padding: 0 !important;
-	color:#ccc;
-	text-align: left;
-	white-space: nowrap;
-	font-size: .95em;
-}
-.otherActions a{
-
-	}
 .allMessages .messageTitle .firstChild{
 	/*first post in a thread in topic listing (no body)*/
 }
@@ -254,6 +221,10 @@ a.markAsReadIcon:hover{
 	margin-top: 1em;
 	padding:.3em  .5em;
 }
+.singleMessage .textPanel {
+	/* so non-breaking wide message content doesn't stretch the page */
+	overflow-x: auto;
+}
 .singleMessageReply{
 	/*title + metadata block of a single message display*/
 	border:1px solid #ccc;

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfFlatView.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfFlatView.jsp
@@ -129,7 +129,7 @@
 		</div>
 
 		<h:outputText  value="#{msgs.cdfm_no_messages}" rendered="#{empty ForumTool.messages}"   styleClass="instruction" style="display:block" />
-		<div class="table-responsive clear">
+		<div class="clear">
 			<mf:hierDataTable id="expandedThreadedMessages" value="#{ForumTool.messages}" var="message" 
 	   	 		noarrows="true" styleClass="table-hover messagesThreaded" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 				<h:column id="_msg_subject">

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfPendingMessages.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfPendingMessages.jsp
@@ -58,7 +58,7 @@
 	  </div>
 
 	  <h:messages globalOnly="true" infoClass="success" errorClass="alertMessage" rendered="#{! empty facesContext.maximumSeverity}"/>
-	  <div class="table-responsive">
+	  <div>
 		<h:dataTable id="pendingMsgs" value="#{ForumTool.pendingMessages}" width="100%" var="message" 
 				columnClasses="bogus,nopadd" styleClass="table table-hover table-striped table-bordered specialLink" rendered="#{ForumTool.numPendingMessages >0 }" cellpadding="0" cellspacing="0">
 			<h:column>

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfViewThread.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfViewThread.jsp
@@ -151,7 +151,7 @@
         </h:panelGroup>
 		<div id="messNavHolder" style="clear:both;"></div>
 		<%--rjlowe: Expanded View to show the message bodies, but not threaded --%>
-		<div class="table-responsive">
+		<div>
 		<h:dataTable id="expandedMessages" value="#{ForumTool.selectedThread}" var="message" rendered="#{!ForumTool.threaded}"
    	 		styleClass="table table-hover table-striped table-bordered messagesFlat specialLink" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 			<h:column>
@@ -162,7 +162,7 @@
 		</div>
 
 		<%--rjlowe: Expanded View to show the message bodies, threaded --%>
-		<div class="table-responsive">
+		<div>
 		<mf:hierDataTable id="expandedThreadedMessages" value="#{ForumTool.selectedThread}" var="message" rendered="#{ForumTool.threaded}"
    	 		noarrows="true" styleClass="table table-hover table-striped table-bordered messagesThreaded specialLink" border="0" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 			<h:column id="_msg_subject">

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfViewThreadBodyInclude.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/dfViewThreadBodyInclude.jsp
@@ -119,9 +119,7 @@
 		<h:panelGroup rendered="#{!message.deleted}"  >
 				<%--//designNote: panel holds other actions, display toggled above (do some testing - do they show up when they should not? Do I get a 
 						"moderate" link when it is not a moderated context, or when the message is mine?) --%>
-				<h:outputText escape="false" value="<span id=\"#{message.message.id}_advanced_box\" class=\"otherActions\" style=\"margin:2px 0;\">" />
-
-
+				<h:outputText escape="false" value="<span id=\"#{message.message.id}_advanced_box\" class=\"otherActions\">" />
 					<%-- Email --%>
                     <h:panelGroup>
                         <%-- Always show separator, or else we see "Reply Grade" --%>

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/printFriendly.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/printFriendly.jsp
@@ -31,7 +31,7 @@
 
 
 		<%--rjlowe: Expanded View to show the message bodies, threaded --%>
-		<div class="table-responsive">
+		<div>
 		<mf:hierDataTable id="expandedThreadedMessages" value="#{ForumTool.pFMessages}" var="message" 
 						noarrows="true" styleClass="table table-hover table-striped table-bordered printTable" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 			<h:column id="_msg_subject">

diff --git a/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/printFriendlyThread.jsp b/msgcntr/messageforums-app/src/webapp/jsp/discussionForum/message/printFriendlyThread.jsp
@@ -33,7 +33,7 @@
 				</h2>	
 
 		<%--rjlowe: Expanded View to show the message bodies, but not threaded --%>
-		<div class="table-responsive">
+		<div>
 		<h:dataTable id="expandedMessages" value="#{ForumTool.PFSelectedThread}" var="message" rendered="#{!ForumTool.threaded}"
 				styleClass="table table-hover table-striped table-bordered printTable" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 			<h:column>
@@ -53,7 +53,7 @@
 		</div>
 
 		<%--rjlowe: Expanded View to show the message bodies, threaded --%>
-		<div class="table-responsive">
+		<div>
 		<mf:hierDataTable id="expandedThreadedMessages" value="#{ForumTool.PFSelectedThread}" var="message" rendered="#{ForumTool.threaded}"
 						noarrows="true" styleClass="table table-hover table-striped table-bordered printTable" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">
 			<h:column id="_msg_subject">

diff --git a/...ms-app/src/webapp/jsp/discussionForum/statistics/dfStatisticsAllAuthoredMsgForOneUser.jsp b/...ms-app/src/webapp/jsp/discussionForum/statistics/dfStatisticsAllAuthoredMsgForOneUser.jsp
@@ -54,7 +54,7 @@
 </script>
 
 <f:view>
-  <sakai:view>
+  <sakai:view toolCssHref="/messageforums-tool/css/msgcntr.css">
   	<h:form id="dfStatisticsForm" rendered="#{ForumTool.instructor}">
   	<!-- discussionForum/statistics/dfStatisticsAllAuthoredMsgForOneUser.jsp-->
   		<script type="text/javascript">
@@ -233,7 +233,7 @@
 						<h:graphicImage value="/images/sortdescending.gif" rendered="#{mfStatisticsBean.forumDateSort3 && !mfStatisticsBean.ascendingForUser3}" alt="#{msgs.stat_forum_date}"/>
 					</h:commandLink>
 			  <f:verbatim></div></f:verbatim>					            
-  			<h:dataTable id="staticAllMessages" value="#{mfStatisticsBean.userAuthoredStatistics2}" var="stat" styleClass="" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
+  			<h:dataTable id="staticAllMessages" value="#{mfStatisticsBean.userAuthoredStatistics2}" var="stat" styleClass="messagesFlat" columnClasses="bogus">	
    				<h:column>
 				<h:panelGroup rendered="#{!stat.msgDeleted}" layout="block"> 
 				<h:panelGroup>

diff --git a/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/dfStatisticsDisplayInThread.jsp b/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/dfStatisticsDisplayInThread.jsp
@@ -6,7 +6,7 @@
 	<jsp:setProperty name="msgs" property="baseName" value="org.sakaiproject.api.app.messagecenter.bundle.Messages"/>
 </jsp:useBean>
 <f:view>
-  <sakai:view>
+  <sakai:view toolCssHref="/messageforums-tool/css/msgcntr.css">
   	<h:form id="dfStatisticsForm" rendered="#{ForumTool.instructor}">
 				<!-- discussionForum/statistics/dfStatisticsDisplayInThread.jsp -->
   	    <script type="text/javascript">includeLatestJQuery("msgcntr");</script>
@@ -64,9 +64,9 @@
 		<h:outputText value="#{ForumTool.selectedTopic.topic.title}" />
 		<f:verbatim></h3></div></f:verbatim>
 
-  		<mf:hierDataTable id="allMessagesForOneTopic" value="#{ForumTool.messages}" var="msgDecorateBean" noarrows="true" styleClass="table table-hover table-striped table-bordered" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
+  		<mf:hierDataTable id="allMessagesForOneTopic" value="#{ForumTool.messages}" var="msgDecorateBean" noarrows="true" styleClass="table table-hover table-striped table-bordered messagesThreaded" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
    			<h:column id="_msg_subject" >
-   			<h:panelGroup rendered="#{ForumTool.selectedMsgId!=msgDecorateBean.message.id}" style="display:block;padding:0 5px;">
+   			<h:panelGroup layout="block" rendered="#{ForumTool.selectedMsgId!=msgDecorateBean.message.id}" styleClass="hierItemBlock">
 				<f:verbatim><p style="border-bottom:1px solid #ccc;padding-bottom:5px;height:100%;overflow:hidden;font-size:110% !important;color:#000;font-weight:bold"></f:verbatim>
 					<h:panelGroup rendered="#{!msgDecorateBean.message.deleted}">
 						<h:outputText value="#{msgDecorateBean.message.title} - " />
@@ -100,7 +100,7 @@
 			<%-- the message the user wanted to see in the thread context --%>
 			<h:panelGroup rendered="#{ForumTool.selectedMsgId==msgDecorateBean.message.id}">
 				<f:verbatim><a name="boldMsg"></a></f:verbatim>
-				<f:verbatim><div style="border:1px solid #fc6;background:#ffe;padding:0 5px"></f:verbatim>
+				<f:verbatim><div class="hierItemBlock" style="border:1px solid #fc6;background:#ffe;padding:0 5px"></f:verbatim>
 					<f:verbatim>
 	  					<span id="messageBody" class="messageBody" style="display: none" class="messageBody">
 	  				</f:verbatim>

diff --git a/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyAllAuthoredMsg.jsp b/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyAllAuthoredMsg.jsp
@@ -37,7 +37,7 @@
 			       <h:outputText value="#{msgs.stat_authored}" />
 			    <f:verbatim></h3></div></f:verbatim>
 
-  		<div class="table-responsive">
+  		<div>
   		<h:dataTable id="staticAllMessages" value="#{mfStatisticsBean.userAuthoredStatistics2}" var="stat" styleClass="table table-hover table-striped table-bordered" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
    			<h:column>
 				<h:panelGroup rendered="#{!stat.msgDeleted}" layout="block">

diff --git a/...sageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyDisplayInThread.jsp b/...sageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyDisplayInThread.jsp
@@ -40,7 +40,7 @@
 			<h:outputText value=" " /><h:outputText value=" / " /><h:outputText value=" " />
 			<h:outputText value="#{ForumTool.selectedTopic.topic.title}" />
 	    <f:verbatim></h3></div></f:verbatim>
-		<div class="table-responsive">      
+		<div>
   		<mf:hierDataTable id="allMessagesForOneTopic" value="#{ForumTool.messages}" var="msgDecorateBean" noarrows="true" styleClass="table table-hover table-striped table-bordered" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
    			<h:column id="_msg_subject">
 	   			<h:panelGroup rendered="#{ForumTool.selectedMsgId!=msgDecorateBean.message.id}">

diff --git a/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyFullTextForOne.jsp b/...ssageforums-app/src/webapp/jsp/discussionForum/statistics/printFriendlyFullTextForOne.jsp
@@ -40,7 +40,7 @@
 			       <h:outputText value="#{mfStatisticsBean.selectedMsgSubject}" />
 			    <f:verbatim></h3></div></f:verbatim>
 
-  		<div class="table-responsive">
+  		<div>
   		<h:dataTable id="subjectBody" value="#{mfStatisticsBean.userSubjectMsgBody}" var="stat" styleClass="table table-hover table-striped table-bordered" cellpadding="0" cellspacing="0" width="100%" columnClasses="bogus">	
    			<h:column>
    			<h:panelGroup rendered="#{!stat.msgDeleted}" layout="block">