Merge pull request #1778 from pom2ter/mobile-tweaks-3

fix(frontend): mobile tweaks to the user and site settings

Author: kroky

modules/core/site.css

@@ -290,14 +290,15 @@ td {
 .server_content,
 .profile_content,
 .user_settings {
+  position: relative;
   display: table;
   table-layout: fixed;
   width: 100%;
   min-height: 500px;
   background: #fff;
   height: 100%;
   margin-right: 20px;
-  padding-bottom: 40px;
+  padding-bottom: 20px;
 }
 .user_settings table {
   table-layout: fixed;
@@ -312,12 +313,13 @@ td {
   color: var(--bs-body-color);
 }
 .reset_factory_button {
+  position: absolute;
+  bottom: 40px;
+  right: 10px;
+  margin-right: 37px;
   cursor: pointer;
   color: #666;
   font-size: 100%;
-  padding: 10px !important;
-  float: right !important;
-  margin-right: 20px;
 }
 .disabled_link {
   pointer-events: none;
@@ -1270,7 +1272,7 @@ div.unseen,
   right: 0px;
   display: none;
   padding: 0px 5px 5px 10px;
-  background-color: #fff;
+  background-color: var(--bs-body-bg);
 }
 .mobile #list_controls_menu.show {
   display: flex;
@@ -1313,7 +1315,7 @@ div.unseen,
   position: absolute;
   right: 0px;
   top: 54px;
-  background-color: #fafafa;
+  background-color: var(--bs-body-bg);
   font-size: 85%;
   padding: 15px 20px;
   display: none;
@@ -1355,16 +1357,6 @@ div.unseen,
 .on_mobile {
   display: none;
 }
-.mobile .no_mobile {
-  display: none !important;
-}
-.mobile .on_mobile {
-  display: block !important;
-}
-.mobile .move_to_location {
-  right: 0;
-}
-
 .server_title {
   font-size: 110%;
   margin-bottom: 0px;
@@ -1426,7 +1418,7 @@ div.unseen,
   text-align: left;
   top: 0;
   padding: 10px 0 10px 18px;
-  background: #fff;
+  background: var(--bs-body-bg);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
 }
@@ -1570,11 +1562,6 @@ a[disabled] {
   color: var(--bs-white);
 }
 
-.mobile .search_content .p-3 {
-  flex: 1 1 auto;
-  overflow: auto;
-}
-
 .search_content .refresh_link {
   display: none;
 }
@@ -1627,11 +1614,6 @@ a[disabled] {
   white-space: nowrap;
 }
 
-.mobile .folders {
-  margin-top: 1rem;
-  margin-left: 1rem !important;
-}
-
 pre.msg_source {
   white-space: pre-wrap;
   word-break: break-word;
@@ -1646,6 +1628,17 @@ pre.msg_source {
   border-color: var(--bs-primary);
 }
 
+.mobile .no_mobile { display: none !important; }
+.mobile .on_mobile { display: block !important; }
+.mobile .move_to_location { right: 0; }
+.mobile .search_content .p-3 { flex: 1 1 auto; overflow: auto; }
+.mobile .search_form { padding-left: 0; }
+.mobile .folders { margin-top: 1rem; margin-left: 1rem !important; }
+.mobile .server_section { overflow: hidden; }
+.mobile .add_server .txt_fld { width: 100%; }
+.mobile .user_settings table td { padding: 5px 10px; }
+.mobile .reset_factory_button { margin-right: 1rem; }
+
 /* Mobile responsive overrides for Bootstrap classes */
 @media (max-width: 767.98px) {
   .small_header {

modules/imap/output_modules.php

@@ -493,7 +493,7 @@ protected function output() {
                 $pass_value = '';
             }
             $res .= '<div class="' . mb_strtolower($type) . '_server mb-3">';
-            $res .= '<form class="imap_connect" method="POST">';
+            $res .= '<form class="imap_connect" method="POST"><div class="row">';
             $res .= '<input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />';
             $res .= '<input type="hidden" name="imap_server_id" class="imap_server_id" value="'.$this->html_safe($server_id).'" />';
             $res .= '<div class="row m-0 p-0 credentials-container"><div class="col-xl-2 col-lg-2 col-md-6 overflow-auto" >';
@@ -546,7 +546,7 @@ protected function output() {
             $res .= '<input type="submit" '.(!$hidden ? 'style="display: none;" ' : '').'value="'.$this->trans('Unhide').'" class="unhide_imap_connection btn btn-outline-secondary btn-sm me-2 mt-3" />';
 
             $res .= '<input type="hidden" value="ajax_imap_debug" name="hm_ajax_hook" />';
-            $res .= '</div></div></div></form>';
+            $res .= '</div></div></div></form></div>';
         }
         $res .= '';
         return $res;
@@ -1549,7 +1549,7 @@ protected function output() {
                 $pass_value = '';
             }
             $res .= '<div class="ews_server mt-3 mb-3">';
-            $res .= '<form class="imap_connect" method="POST">';
+            $res .= '<form class="imap_connect" method="POST"><div class="row">';
             $res .= '<input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />';
             $res .= '<input type="hidden" name="imap_server_id" class="imap_server_id" value="'.$this->html_safe($server_id).'" />';
             $res .= '<div class="row m-0 p-0 credentials-container"><div class="col-xl-2 col-lg-2 col-md-6">';
@@ -1591,7 +1591,7 @@ protected function output() {
             $res .= '<input type="submit" '.(!$hidden ? 'style="display: none;" ' : '').'value="'.$this->trans('Unhide').'" class="unhide_imap_connection btn btn-outline-secondary btn-sm me-2" />';
 
             $res .= '<input type="hidden" value="ajax_imap_debug" name="hm_ajax_hook" />';
-            $res .= '</div></div></div></form>';
+            $res .= '</div></div></div></form></div>';
         }
 
         $res .= '