[Legacy] Inbound Email Mobile Styling Fixes

This commit is contained in:
balumahendran 2022-04-20 14:04:02 +05:30 committed by Clemente Raposo
parent 2feffbadab
commit 91db98eed0
5 changed files with 319 additions and 167 deletions

View file

@ -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>
<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 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 valign="top" scope="row" width="35%"></td>
<td class="mobile-hide" valign="top" scope="row" width="15%"></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>

View file

@ -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';
//

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}