[Legacy] Inbound Email Mobile Styling Fixes

public/legacy/modules/InboundEmail/EditView.html

@@ -71,8 +71,8 @@
 	<div class="inbound-emailbtn">
 		<table width="100%" cellpadding="0" cellspacing="0" border="0">
 			<tr>
-				<td align="right" width="20%" NOWRAP style="padding-right: 1em;"><span class="required">{APP.LBL_REQUIRED_SYMBOL}</span> {APP.NTC_REQUIRED}</td>
+				<td class="mandatory"align="right" width="20%" NOWRAP style="padding-right: 1em;"><span class="required">{APP.LBL_REQUIRED_SYMBOL}</span> {APP.NTC_REQUIRED}</td>
-				<td>
+				<td class="action-btn">
 					<input title="{APP.LBL_SAVE_BUTTON_TITLE}" accessKey="{APP.LBL_SAVE_BUTTON_KEY}" class="button" onclick="this.form.action.value='Save'; {CHOOSER_SCRIPT} this.form.return_id.value='{RETURN_ID}'; return checkformdata()" type="submit" name="button" id="button" value="  {APP.LBL_SAVE_BUTTON_LABEL}  " {IE_DISABLED}>
 					<input title="{APP.LBL_CANCEL_BUTTON_TITLE}" accessKey="{APP.LBL_CANCEL_BUTTON_KEY}" class="button" id="emailCancel" onclick="this.form.action.value='{RETURN_ACTION}'; this.form.module.value='{RETURN_MODULE}'; this.form.record.value='{RETURN_ID}'; if(this.form.record.value == '' && this.form.origin_id.value != '') this.form.record.value=this.form.origin_id.value;" type="submit" name="button" value="  {APP.LBL_CANCEL_BUTTON_LABEL}  ">
 					<input title="{MOD.LBL_TEST_BUTTON_TITLE}"
@@ -92,7 +92,7 @@
 		      <th align="left" scope="row" colspan="4"><h4>{MOD.LBL_BASIC}</h4></th>
 		</tr>
 		<tr>
-		<td>&nbsp;</td>
+		<td class="mobile-hide">&nbsp;</td>
 		<td style="vertical-align:bottom;"><a href="javascript:void(0);" id="prefill_gmail_defaults_link" onclick="javascript:prefillGmailDefaults();">{APP.LBL_EMAIL_ACCOUNTS_GMAIL_DEFAULTS}</a>&nbsp;</td>
 		</tr>
 		<tr>
@@ -164,9 +164,9 @@
 				<input type="button" id="trashFolderButton" class="button" onclick='javascript:getFoldersListForInboundAccount("InboundEmail", "ShowInboundFoldersList", "Popup", 400, 300, this.form.server_url.value, this.form.protocol.value, this.form.port.value, this.form.email_user.value, Rot13.write(this.form.email_password.value), this.form.trashFolder.value, this.form.ssl.checked, this.form.personal.value, "trash", "EditView");' value="{MOD.LBL_SELECT}">
 		</tr>
 		<tr id="sentFolderRow">
-			<td valign="top" scope="row">
+			<td class="mobile-hide" valign="top" scope="row">
 				<span>&nbsp;</span></td>
-			<td valign="top"  width="35%" class="border-right"><span>
+			<td class="mobile-hide" valign="top"  width="35%" class="border-right"><span>
 				&nbsp;</span></td>
 			<td valign="top" scope="row" width="15%" NOWRAP>
 				<span>{MOD.LBL_SENT_FOLDER}:</span></td>
@@ -184,8 +184,8 @@
 				<th align="left" scope="row" colspan="4"><h4>{EMAIL_OPTIONS}</h4></th>
 			</tr>
 			<tr>
-			<td valign="top" scope="row" width="15%"></td>
+				<td class="mobile-hide" valign="top" scope="row" width="15%"></td>
-			<td valign="top" scope="row" width="35%"></td>
+				<td class="mobile-hide" valign="top" scope="row" width="35%"></td>
 				<td valign="top" scope="row">
 					<span>{MOD.LBL_FROM_NAME}:<span class="required">{APP.LBL_REQUIRED_SYMBOL}</span>&nbsp;</span></td>
 				<td valign="top"  width="35%">
@@ -195,7 +195,7 @@
 				<td valign="top" scope="row" width="15%" NOWRAP>
 					<span><span style="{AUTO_IMPORT_STYLE}">{MOD.LBL_ENABLE_AUTO_IMPORT}:&nbsp;{TIPS.LBL_ASSIGN_TO_GROUP_FOLDER_DESC}</span></span>&nbsp;
 				</td>	
-			<td valign="top"  width="15%" NOWRAP>
+				<td valign="top"  width="15%">
 			 		<input class="checkboxmar"name='is_auto_import' style="{AUTO_IMPORT_STYLE}" id='is_auto_import' onclick="showWarningsIfChaningAutoImport();"tabindex='45' type='checkbox' {IS_AUTO_IMPORT}>
 				</td>	
 				<td valign="top" scope="row" width="15%" NOWRAP>
@@ -219,7 +219,7 @@
 				<td valign="top" scope="row">
 					<span>{MOD.LBL_DISTRIBUTION_METHOD}:&nbsp;</span></td>
 				<td valign="top"  width="35%"><span>
-				<select id='distrib_method' name='distrib_method' tabindex='241'>{DISTRIBUTION_METHOD}</select>&nbsp;&nbsp;
+					<select id='distrib_method' name='distrib_method' tabindex='241'>{DISTRIBUTION_METHOD}</select>
 	
 					<span id="distribution_user">
 					<input type="text" name="distribution_user_name" class="sqsEnabled" tabindex="0" id="distribution_user_name" size="" value="{distribution_user_name}" title='' autocomplete="off"  	 >
@@ -262,9 +262,9 @@
 					&nbsp;&nbsp;
 	
 					{DISTRIBUTION_OPTIONS}</span></td>
-			<td valign="top" scope="row">
+				<td class="mobile-hide" valign="top" scope="row">
 					<span>&nbsp;</span></td>
-			<td valign="top"  width="35%"><span>
+				<td class="mobile-hide" valign="top"  width="35%"><span>
 					&nbsp;</span></td>
 			</tr>
 			<tr id="createCaseRow1" style="{CREATE_CASE_ROW_STYLE}">
@@ -279,9 +279,9 @@
 				</td>
 			</tr>
 			<tr>
-			<td valign="top" scope="row">
+				<td class="mobile-hide" valign="top" scope="row">
 					<span>&nbsp;</span></td>
-			<td valign="top"  width="35%"><span>
+				<td class="mobile-hide" valign="top"  width="35%"><span>
 					&nbsp;</span></td>
 				<td valign="top" scope="row" width="15%" NOWRAP>
 					{MOD.LBL_REPLY_TO_ADDR}:&nbsp;
@@ -291,9 +291,9 @@
 				</td>
 			</tr>
 			<tr style="MAILBOX_TYPE_STYLE">
-			<td valign="top" scope="row">
+				<td class="mobile-hide" valign="top" scope="row">
 					<span>&nbsp;</span></td>
-			<td valign="top"  width="35%"><span>
+				<td class="mobile-hide" valign="top"  width="35%"><span>
 					&nbsp;</span></td>
 				<td valign="top" scope="row" width="15%" >
 				 <slot style="{MAILBOX_TYPE_STYLE}">{MOD.LBL_ALLOW_OUTBOUND_GROUP_USAGE}:&nbsp;{TIPS.LBL_ALLOW_OUTBOUND_GROUP_USAGE_DESC}</span>
@@ -328,9 +328,9 @@
 					<span>{MOD.LBL_MARK_READ}:</span></td>
 				<td valign="top"  width='30%'>
 					<select name='leaveMessagesOnMailServer' tabindex='253'>{LEAVEMESSAGESONMAILSERVER}</select></td>
-			<td valign="top" scope="row">
+				<td class="mobile-hide" valign="top" scope="row">
 					<span>&nbsp;</span></td>
-			<td valign="top"  width="35%"><span>
+				<td class="mobile-hide" valign="top"  width="35%"><span>
 					&nbsp;</span></td>
 			</tr>
 		</table>

public/legacy/themes/suite8/css/Dawn/style.scss

@@ -192,4 +192,5 @@
 @import '../suitep-base/outboundemail-mobile.scss';
 @import '../suitep-base/importvcard.scss';
 @import '../suitep-base/campaign-mobile.scss';
+@import '../suitep-base/inboundemail-mobile.scss';
 //

public/legacy/themes/suite8/css/suitep-base/editview.scss

@@ -5525,17 +5525,14 @@ div.content div.pagecontent form#EditView div.edit.view table tbody tr td span i
 }
 
 div.content div.pagecontent form#EditView div.edit.view table tbody tr td span input[type="button"]#subscribeFolderButton.button {
-  width: 18%;
   min-width: 71px;
 }
 
 div.content div.pagecontent form#EditView div.edit.view table tbody tr td span input[type="button"]#trashFolderButton.button {
-  width: 18%;
   min-width: 71px;
 }
 
 div.content div.pagecontent form#EditView div.edit.view table tbody tr td span input[type="button"]#sentFolderButton.button {
-  width: 18%;
   min-width: 71px;
 }
 

public/legacy/themes/suite8/css/suitep-base/inbound-email.scss

@@ -2,6 +2,19 @@
 
 div.content div.pagecontent form#EditView div.edit.view.inboundemail table tbody tr td {
     padding: 0.3em 0.8em 1em 2em;
+    @media (min-width:767px) and (max-width:1070px) {
+      display: block;
+      width: 100%;
+      border-right: none;
+      .view-module-InboundEmail {
+        .mobile-hide {
+          display: none;
+        }
+      }
+    }   
+    input[type="text"] {
+      width: 99%;
+    } 
 }
 
 div.content div.pagecontent form#EditView div.edit.view.inboundemail table tbody tr td select {
@@ -42,13 +55,16 @@ div.inboundemail {
   
   .header-inbound-title {
     margin-bottom: 0.5em;
+    font-size: 1.8em;
+    text-transform: capitalize;
+    border-bottom: 1px solid $border-bottom-lightgrey;
   }
   
   .inbound-emailbtn {
     margin-bottom: 1em;
     position: absolute;
     right: 0;
-    top: 6.2rem;
+    margin-top: -4em;
     display: flex;
   }
 
@@ -137,3 +153,8 @@ table.inboundmacro {
   }
 }
 
+.view-module-InboundEmail {
+  #distrib_method {
+    margin-bottom: 1em;    
+  }    
+}

public/legacy/themes/suite8/css/suitep-base/inboundemail-mobile.scss

@@ -0,0 +1,133 @@
+@media (max-width: 768px) {
+    .view-module-InboundEmail {
+        .header-inbound-title {
+            margin-bottom: 2.5em;
+        }
+        .inbound-emailbtn {
+            .mandatory {
+                position: absolute;
+                top: -2.5em;
+                right: 6em;
+                font-size: 12px;
+            }            
+        }        
+        .inboundemail {
+            th {
+                h4 {
+                    border-bottom: 1px solid $border-bottom-lightgrey !important;
+                    padding-bottom: 0.8em;
+                }
+            }
+            input:not([type]) {
+                width: 100%;
+            }
+            input[name="email_num_autoreplies_24_hours"] {
+                width: 100% !important;
+            }
+            input[type="text"] {
+                width: 100% !important;
+            }
+            input[type="password"] {
+                width: 100% !important;
+            }
+            input[name="reply_to_name"],input[name="reply_to_addr"],
+            input[name="from_addr"],input[name="from_name"] {
+                width: 100% !important;
+            }
+            slot {
+                line-height: normal;
+            }
+            table {
+                padding-bottom: 1.5em;
+                tr {
+                    td {
+                        span {
+                            input[type="text"] {
+                                width: 100%;
+                            }
+                            width: 100% !important;
+                        }
+                        select {
+                            min-width: 99%;
+                        }
+                    }
+                }
+            }
+            h4 {
+                margin-top: 0;
+                padding-left: 0;
+                padding-bottom: 0;
+            }
+            #subscribeFolderButton,#trashFolderButton,#sentFolderButton {
+                margin-top: 1em;
+                margin-left: 0;
+            }
+            #create_case_template_id {
+                margin-bottom: 0.8em;
+            }
+            #template_id {
+                margin-bottom: 0.8em;
+            }            
+        }
+        .mobile-hide {
+            display: none;
+        }        
+    }
+    div.content div.pagecontent form#EditView div.edit.view.inboundemail table tbody tr td {
+        padding: 0.3em 0.8em 0.5em 0.5em;
+        border: none;
+        line-height: 2em;
+        clear: both;
+        height: initial;
+        width: 100%;
+    }
+    div.content div.pagecontent form#EditView div.edit.view table tbody tr td span {
+        float: none;
+        display: inline;
+    }    
+}   
+
+@media (min-width:767px) and (max-width:1070px) {
+    .view-module-InboundEmail {
+        .mobile-hide {
+            display: none !important; 
+        }
+        input[name="reply_to_name"],input[name="reply_to_addr"],
+        input[name="from_addr"],input[name="from_name"] {
+            width: 99% !important;
+        }
+        input[name="filter_domain"] {
+            width: 99%;
+        }
+        input[name="email_num_autoreplies_24_hours"] {
+            width: 99% !important;
+        }
+        input[name="email_password"] {
+            width: 99%;
+        }
+        input[name="mailbox"],input[name="trashFolder"],input[name="sentFolder"] {
+            width: 99% !important;
+            margin-bottom: 0.5em;
+        }
+        .checkboxmar {
+            margin-top:0;
+        }
+        input[name="port"] {
+            width: 99%;
+        }
+        select {
+            min-width: 99%;
+        }
+    }
+}
+
+@media (max-width: 750px) {
+    .view-module-InboundEmail {
+        div.inboundemail .checkboxmar {
+            margin-top: -2em;
+        }
+        .view {
+            overflow: hidden;
+        }
+    }    
+}