SAK-30957 Mobile - padding between default screen elements needs to b…

…e increased (sakaiproject#4291)
s50600822 · Apr 24, 2017 · 165c98b · 165c98b
1 parent 66e2dca
commit 165c98b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git a/chat/chat-tool/tool/src/webapp/css/chat.css b/chat/chat-tool/tool/src/webapp/css/chat.css
@@ -37,6 +37,28 @@ LABEL.chat-date-label {
     margin-left: 0.5em;
     margin-right: 0.5em;
 }
+.viewoptions-grp {
+    width: 224px;
+    display: block;
+    float: left;
+    margin-right: 10px;
+    margin-bottom: 0.5em;
+}
+.msgoptions-grp {
+    width: 360px;
+    display: block;
+    float: left;
+    margin-bottom: 0.5em;
+}
+@media only screen and (max-width: 680px){
+    .msgoptions-grp{
+        width: 100%;
+    }
+    .viewoptions-grp{
+        width: 100%;
+    }
+}
+
 h3 {
    padding-top: 0px;
 }
@@ -46,8 +68,7 @@ h3 {
 .chatListHeadWrapper {
     padding:0px !important;
     margin:0px !important;
-    margin-bottom:0.25em !important;
-    margin-left:0.5em !important;
+    margin-bottom:0.5em !important;
 }
 #chatPresenceWrapper{
    background-image:none;

diff --git a/chat/chat-tool/tool/src/webapp/jsp/room.jsp b/chat/chat-tool/tool/src/webapp/jsp/room.jsp
@@ -32,18 +32,22 @@
          <sakai:view_title value="#{ChatTool.viewingChatRoomText}"/>
            <sakai:instruction_message value="#{ChatTool.datesMessage}" rendered="#{ChatTool.datesMessage ne null}" />
            <h:panelGroup styleClass="chat-block">
-              <h:outputLabel for="viewOptions" value="#{msgs.view}" />
-              <h:selectOneMenu id="viewOptions" value="#{ChatTool.viewOptions}" onchange="this.form.submit();">
-                  <f:selectItem itemValue="1" itemLabel="#{msgs.timeOnly}" />
-                  <f:selectItem itemValue="3" itemLabel="#{msgs.timeAndDate}" />
-                  <f:selectItem itemValue="2" itemLabel="#{msgs.dateOnly}" />
-                  <f:selectItem itemValue="0" itemLabel="#{msgs.neitherDateOrTime}" />
-                  <f:selectItem itemValue="4" itemLabel="#{msgs.uniqueid}" />
-              </h:selectOneMenu> 
-              <h:outputLabel for="messageOptions" value="#{msgs['combox.viewfrom']}" />
-              <h:selectOneMenu id="messageOptions" value="#{ChatTool.messageOptions}" onchange="this.form.submit();">
-                  <f:selectItems value="#{ChatTool.messageOptionsList}" />
-              </h:selectOneMenu>
+              <h:panelGroup styleClass="viewoptions-grp">
+                  <h:outputLabel for="viewOptions" value="#{msgs.view}" />
+                  <h:selectOneMenu id="viewOptions" value="#{ChatTool.viewOptions}" onchange="this.form.submit();">
+                      <f:selectItem itemValue="1" itemLabel="#{msgs.timeOnly}" />
+                      <f:selectItem itemValue="3" itemLabel="#{msgs.timeAndDate}" />
+                      <f:selectItem itemValue="2" itemLabel="#{msgs.dateOnly}" />
+                      <f:selectItem itemValue="0" itemLabel="#{msgs.neitherDateOrTime}" />
+                      <f:selectItem itemValue="4" itemLabel="#{msgs.uniqueid}" />
+                  </h:selectOneMenu> 
+              </h:panelGroup>
+              <h:panelGroup styleClass="msgoptions-grp">
+                  <h:outputLabel for="messageOptions" value="#{msgs['combox.viewfrom']}" />
+                  <h:selectOneMenu id="messageOptions" value="#{ChatTool.messageOptions}" onchange="this.form.submit();">
+                      <f:selectItems value="#{ChatTool.messageOptionsList}" />
+                  </h:selectOneMenu>
+              </h:panelGroup>
            </h:panelGroup>
 	   <div id="chatLeft">
 			<div id="chatListWrapper" class="chatListWrapper">