From f73ac284e5a49f9c6238eb8fb82f714df3de92fa Mon Sep 17 00:00:00 2001 From: Kristian Feldsam Date: Fri, 9 Jul 2021 08:21:09 +0200 Subject: [PATCH] [Web] Improve responsive design (#4171) Complete styling for mobile devices Signed-off-by: Kristian Feldsam --- data/web/admin.php | 171 +- data/web/css/build/014-responsive.css | 241 +++ data/web/css/site/quarantine.css | 2 +- data/web/debug.php | 101 +- data/web/edit.php | 114 +- data/web/inc/ajax/dns_diagnostics.php | 2 +- data/web/index.php | 19 +- .../web/js/build/013-bootstrap-tabcollapse.js | 239 +++ data/web/js/build/014-mailcow.js | 24 + data/web/js/site/admin.js | 52 +- data/web/js/site/mailbox.js | 79 +- data/web/js/site/user.js | 14 +- data/web/mailbox.php | 88 +- data/web/modals/admin.php | 12 +- data/web/modals/footer.php | 50 +- data/web/modals/mailbox.php | 42 +- data/web/modals/user.php | 19 +- data/web/quarantine.php | 11 +- data/web/user.php | 1593 +++++++++-------- 19 files changed, 1733 insertions(+), 1140 deletions(-) create mode 100644 data/web/css/build/014-responsive.css create mode 100644 data/web/js/build/013-bootstrap-tabcollapse.js diff --git a/data/web/admin.php b/data/web/admin.php index 19c78022..0afa4f8b 100644 --- a/data/web/admin.php +++ b/data/web/admin.php @@ -12,7 +12,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC ?>
-
@@ -516,9 +524,10 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- - - + + + +
Get('LICENSE_STATUS_CAC ?>
- - + + +
@@ -634,12 +644,12 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
-
- + @@ -664,7 +674,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC - + @@ -710,7 +720,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC - + @@ -727,14 +737,15 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC @@ -750,7 +761,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC - + @@ -801,12 +812,15 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- - + + +
-
-

+ + + +

@@ -820,9 +834,9 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC foreach ($f2b_data['regex'] as $regex_id => $regex_val) { ?> - - - + + + Get('LICENSE_STATUS_CAC ?>

- - - + + +

-
+
+

Get('LICENSE_STATUS_CAC -
+
@@ -972,7 +987,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- + @@ -1014,7 +1029,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC @@ -1163,9 +1178,9 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC foreach ($row as $key => $val) { ?> - - - + + + Get('LICENSE_STATUS_CAC foreach ($MAILCOW_APPS as $app) { ?> - - + +  

- - + + +

@@ -1225,7 +1241,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC - + @@ -1266,7 +1282,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- +
@@ -1357,7 +1373,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- +
@@ -1379,23 +1395,24 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
- - + +
diff --git a/data/web/css/build/014-responsive.css b/data/web/css/build/014-responsive.css new file mode 100644 index 00000000..a2085676 --- /dev/null +++ b/data/web/css/build/014-responsive.css @@ -0,0 +1,241 @@ +.space20 { + margin-bottom: 20px; +} + +.btn-xs-lg>.lang-sm:after { + margin-left: 4px; +} + +.bootstrap-select { + max-width: 350px; +} + + +@media (max-width: 767px) { + .xs-show { + display: block !important; + } + + .js-tabcollapse-panel-group .panel{ + border: none; + box-shadow: none; + } + + .js-tabcollapse-panel-group .panel-body { + padding: 10px 0; + } + + .js-tabcollapse-panel-group .js-tabcollapse-panel-body .panel-body { + padding: 0; + } + + .js-tabcollapse-panel-body .panel-heading { + display: none; + } + + .js-tabcollapse-panel-body .well, + .panel-body .form-inline.well { + border: none; + padding: 0; + margin: 0; + box-shadow: none; + background-color: #fff; + } + + .js-tabcollapse-panel-heading { + display: block; + height: 37px; + line-height: 37px; + text-indent: 15px; + } + .js-tabcollapse-panel-heading:hover { + text-decoration: none; + } + .js-tabcollapse-panel-heading { + position: relative; + } + .js-tabcollapse-panel-heading:after { + content: ''; + display: block; + position: absolute; + top: 17px; + right: 17px; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-bottom: 4px dashed; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + } + .js-tabcollapse-panel-heading.collapsed:after { + border-bottom: none; + border-top: 4px dashed; + } + + .recent-login-success { + margin-top: 10px !important; + } + .pull-xs-right { + float: right !important; + } + .pull-xs-right .dropdown-menu { + right: 0; + left: auto; + } + .text-xs-left { + text-align: left; + } + .text-xs-bold { + font-weight: bold; + } + .text-xs-bold .small { + font-weight: normal; + text-align: justify; + } + .help-block { + text-align: justify; + } + .btn.visible-xs-block { + width: 100%; + float: none; + white-space: normal; + } + .btn-group.footable-actions .btn.btn-xs-half, + .btn.visible-xs-block.btn-xs-half { + width: 50%; + float: left; + } + .btn-group.footable-actions .btn.btn-xs-third, + .btn.visible-xs-block.btn-xs-third { + width: 33.33%; + float: left; + } + .btn-group.footable-actions .btn.btn-xs-quart, + .btn.visible-xs-block.btn-xs-quart { + width: 25%; + float: left; + } + .btn.visible-xs-block.btn-sm, + .btn-xs-lg { + padding: 15px 16px 13px; + line-height: 15px; + } + .input-xs-lg { + height: 47px; + padding: 13px 16px; + } + .btn-group:not(.input-group-btn) { + display: block; + } + .mass-actions-user .btn-group { + float: none; + } + div[class^='mass-actions'] .dropdown-menu, + .panel-xs-lg .dropdown-menu, + .dropdown-menu.login { + width: 100%; + } + div[class^='mass-actions'] .btn-group .dropdown-menu { + top: 50%; + } + div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu, + div.mass-actions-quarantine .btn-group .dropdown-menu, + .panel-xs-lg .dropdown-menu { + top: 100%; + } + div[class^='mass-actions'] .dropdown-menu>li>a, + .panel-xs-lg .dropdown-menu>li>a, + .dropdown-menu.login>li>a { + padding: 8px 20px; + } + div[class^='mass-actions'] .dropdown-header { + font-size: 14px; + font-weight: bold; + } + .space20 { + margin-bottom: 10px; + } + .top100 { + top: 100% !important; + } + .top33 { + top: 33% !important; + } + .footable-filtering .form { + width: 65%; + } + .btn-xs-lg>.lang-sm:after { + top: 1px; + } + table.footable>tfoot>tr.footable-paging>td { + text-align: left; + } + .footable-first-visible { + min-width: 55px; + } + table>tbody>tr>td>span.footable-toggle { + font-size: 24px; + margin-right: 14px !important; + } + table>tbody>tr>td>span.footable-toggle + input { + position: absolute; + left: 38px; + } + .pagination { + margin-bottom: 5px; + } + tr.footable-filtering>th>form { + width: 270px; + } + .mass-actions-mailbox { + padding: 0; + } + .panel-xs-lg .panel-heading { + height: 66px; + line-height: 47px; + } + .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 100%; + } + .btn-group:not(.bootstrap-select) { + width: auto !important; + } + .bootstrap-select { + max-width: 100%; + } + .img-responsive { + margin: 0 auto; + } + .recent-login-success { + font-size: 16px; + } + .btn-group.footable-actions { + position: absolute; + width: 90vw !important; + left: 0; + height: 36px; + margin-top: -8px; + } + .btn-group.footable-actions .btn { + padding: 10px 16px 7px; + line-height: 15px; + display: block; + width: 100%; + } + .btn-group.footable-actions:after { + content: ""; + display: block; + clear: both; + } + .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { + margin-right: 14px; + white-space: normal; + } +} + +@media (max-width: 350px) { + .mailcow-logo img { + max-width: 250px; + } +} diff --git a/data/web/css/site/quarantine.css b/data/web/css/site/quarantine.css index 0d25537c..36346965 100644 --- a/data/web/css/site/quarantine.css +++ b/data/web/css/site/quarantine.css @@ -35,7 +35,7 @@ .mass-actions-quarantine { user-select: none; - padding: 10px 0 10px 10px; + padding: 10px; } .inputMissingAttr { diff --git a/data/web/debug.php b/data/web/debug.php index 8013b57d..087f717a 100644 --- a/data/web/debug.php +++ b/data/web/debug.php @@ -130,9 +130,10 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ? $started = '?'; } ?> - ( ), -
+
+ ( ) +
-
+
Postfix
- - - + + +
@@ -160,12 +161,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
mailcow UI
- - - + + +
@@ -177,12 +178,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
SASL
- - - + + +
@@ -194,12 +195,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Dovecot
- - - + + +
@@ -211,12 +212,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
SOGo
- - - + + +
@@ -228,12 +229,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Netfilter
- - - + + +
@@ -245,12 +246,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Rspamd history
- - - + + +
@@ -267,12 +268,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Autodiscover
- - - + + +
@@ -284,12 +285,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Watchdog
- - - + + +
@@ -301,12 +302,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
ACME
- - - + + +
@@ -318,12 +319,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
API
- - - + + +
@@ -335,12 +336,12 @@ $clamd_status = (preg_match("/^([yY][eE][sS]|[yY])+$/", $_ENV["SKIP_CLAMD"])) ?
-
+
Ratelimits
- - - + + +
diff --git a/data/web/edit.php b/data/web/edit.php index 57871bed..bc1b6469 100644 --- a/data/web/edit.php +++ b/data/web/edit.php @@ -82,7 +82,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -157,7 +157,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -180,7 +180,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -237,7 +237,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -259,7 +259,7 @@ if (isset($_SESSION['mailcow_cc_role'])) { $rlyhosts = relayhost('get'); if (!empty($result)) { ?> -
- +
@@ -373,10 +373,10 @@ if (isset($_SESSION['mailcow_cc_role'])) { ?>
-
+

Domain: (._domainkey)

-
+
@@ -399,7 +399,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -408,13 +408,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {

-
-
- - -
-
-
+
@@ -425,17 +419,18 @@ if (isset($_SESSION['mailcow_cc_role'])) {
+
+
+ + +
+
+

-
-
- - -
-
- +
@@ -446,6 +441,12 @@ if (isset($_SESSION['mailcow_cc_role'])) {
+
+
+ + +
+
@@ -471,7 +472,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -522,7 +523,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -568,7 +569,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -587,7 +588,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +

-
+

Domain: (._domainkey)

-
+
@@ -709,7 +710,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- @@ -719,6 +720,7 @@ if (isset($_SESSION['mailcow_cc_role'])) { ?> +

 

@@ -726,30 +728,31 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- - - - +

@@ -758,24 +761,25 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- - - +

@@ -784,18 +788,19 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- - +
@@ -865,7 +870,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -940,9 +945,10 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- - - + + +
+
@@ -966,7 +972,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +

@@ -991,7 +997,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1035,7 +1041,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1096,7 +1102,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1156,7 +1162,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1202,7 +1208,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1251,7 +1257,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1312,7 +1318,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1480,7 +1486,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1531,7 +1537,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
@@ -1579,7 +1585,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
- +
diff --git a/data/web/inc/ajax/dns_diagnostics.php b/data/web/inc/ajax/dns_diagnostics.php index db565a2a..2d2eda7f 100644 --- a/data/web/inc/ajax/dns_diagnostics.php +++ b/data/web/inc/ajax/dns_diagnostics.php @@ -436,7 +436,7 @@ if (isset($_SESSION['mailcow_cc_role']) && ($_SESSION['mailcow_cc_role'] == "adm } ?> - .txt' type='text/csv'>Download + .txt' type='text/csv'>Download -add('/web/js/site/user.js'); -$js_minifier->add('/web/js/site/pwgen.js'); -require_once $_SERVER['DOCUMENT_ROOT'] . '/inc/footer.inc.php'; -} -else { - header('Location: /'); - exit(); -} -?> + "get_friendly_names")); + $username = $_SESSION['mailcow_cc_username']; + +?> +
+ +

+
+
+
+
+
+

[]

+ + +
+
+
+ + +
+
+ +
+
+
+
+ +
+
+ +
+ +
+
+

+
+
+
+
:
+
+
+ + + + + + + + + + + +
ID
+ + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
:
+
+
-
+
+
+
+ +
+
+
+ "get_friendly_names")); + + $clientconfigstr = "host=" . urlencode($mailcow_hostname) . "&email=" . urlencode($username) . "&name=" . urlencode($mailboxdata['name']) . "&ui=" . urlencode(strtok($_SERVER['HTTP_HOST'], ':')) . "&port=" . urlencode($autodiscover_config['caldav']['port']); + if ($autodiscover_config['useEASforOutlook'] == 'yes') + $clientconfigstr .= "&outlookEAS=1"; + if (file_exists('thunderbird-plugins/version.csv')) { + $fh = fopen('thunderbird-plugins/version.csv', 'r'); + if ($fh) { + while (($row = fgetcsv($fh, 1000, ';')) !== FALSE) { + if ($row[0] == 'sogo-connector@inverse.ca') { + $clientconfigstr .= "&connector=" . urlencode($row[1]); + } + } + fclose($fh); + } + } +?> +
+ + + +
+ +
+ +
+
+
+
+ +
+ +
+ + + +
+
+
+ +
+
:
+
+
+
+ % +
+
+

/

+
+

+
+
+
+ +
+
+

+
+
+
+
+ : +
+
+
+ + + + + + + + + + + +
ID
+ ' : NULL; ?> + +
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
:
+
+
-
+
+
+
+
+
+
:
+
+

IMAP, SMTP

+

+ +

IMAP, SMTP, Cal/CardDAV

+

+ +
+
+
+
+
+ +
+ +

[]

+

[]

+
+ + +
+ + + + +
+
+
+
+
+ +
+
+
+
+ +
+
: +

+
+
+ '; + } + else { + foreach (array_filter($user_get_alias_details['direct_aliases']) as $direct_alias => $direct_alias_meta) { + (!empty($direct_alias_meta['public_comment'])) ? + printf('%s — %s
', $direct_alias, $direct_alias_meta['public_comment']) : + printf('%s
', $direct_alias); + } + } + ?> +
+
+
+
+
: +

+
+
+ '; + } + else { + foreach (array_filter($user_get_alias_details['shared_aliases']) as $shared_alias => $shared_alias_meta) { + (!empty($shared_alias_meta['public_comment'])) ? + printf('%s — %s
', $shared_alias, $shared_alias_meta['public_comment']) : + printf('%s
', $shared_alias); + } + } + ?> +
+
+
+
+
:
+
+

' : $user_get_alias_details['aliases_also_send_as'] ;?>

+
+
+
+
:
+
+

' : '' ;?>

+
+
+
+
:
+
+

' : '' ;?>

+
+
+
+
+
+ +
+
+
+
+ +
+
:
+
+
+ + + +
+
+

+

+
+
+ +
+
:
+
+
+ + +
+
+

+
+
+ +
+
:
+
+
+ + + + +
+
+

+
+
+
+
:
+
+
+ + + +
+
+

+
+
+ +
+
+
:
+
+ +

+
+
+
+
:
+
+ +

+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+ , 1 + +
+
+
+
+ +
+

+
+
+
+
+ +
    +
  • +
  • +
  • +
+
+
+
+ + +
+
+
+
+
+

+

+
+
+ + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+

+

+
+
+ + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + +
+
+
+ +
+
+
+
+ +
+

+
+
+
+
+
+
+ + + +
+
+
+ +
+
+
+
+ +
+
+ + + +
+
+

+
+
+

+

: {SUBJECT}, {SENDER}

+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+
+
+ + + +
+
+
+
+ + +
+ +
+
+ +
+
+
+
+
+
+
+ + +
+ +
+
+
+
+ +
+
+
+
+ + +add('/web/js/site/user.js'); +$js_minifier->add('/web/js/site/pwgen.js'); +require_once $_SERVER['DOCUMENT_ROOT'] . '/inc/footer.inc.php'; +} +else { + header('Location: /'); + exit(); +} +?>