Merge pull request #1694 from pom2ter/search-tweaks

fix(frontend): css adjustments to search and actions buttons

Author: kroky

modules/advanced_search/modules.php

@@ -261,14 +261,14 @@ protected function output() {
             $this->targets().
             $this->times().
             $this->other().
-            '<div class="submit_section px-5"><input type="button" class="btn btn-primary" id="adv_search" value="'.$this->trans('Search').'" />'.
+            '<div class="submit_section px-3 mb-3"><input type="button" class="btn btn-primary" id="adv_search" value="'.$this->trans('Search').'" />'.
             ' <input class="btn btn-light border" type="button" class="adv_reset" value="'.$this->trans('Reset').'" />';
     }
 
     protected function targets() {
-        return '<div data-target=".targets_section" class="settings_subtitle cursor-pointer px-3 py-2 "><i class="bi bi-file-earmark-fill me-2"></i>'.$this->trans('Targets').
+        return '<div data-target=".targets_section" class="settings_subtitle cursor-pointer px-3 py-2 mt-3"><i class="bi bi-file-earmark-fill me-2"></i>'.$this->trans('Targets').
             '<span class="target_count">'.sprintf($this->trans('targets: %d'), 0).'</span></div>'.
-            '<div class="targets_section mx-5 py-4"><div class="col-lg-6 col-12" id="adv_target"><table class="adv_targets table table-borderless"><tr><th>'.
+            '<div class="targets_section mx-5 py-1"><div class="col-lg-6 col-12" id="adv_target"><table class="adv_targets table table-borderless"><tr><th>'.
             '<input type="radio" value="TEXT" id="adv_msg" class="target_radio form-check-input" checked="checked" '.
             'name="target_type" /><label class="form-check-label ms-2" for="adv_msg">'.$this->trans('Entire message').'</label></th>'.
             '<th><input type="radio" class="target_radio form-check-input" value="BODY" name="target_type" id="adv_body" '.
@@ -286,7 +286,7 @@ protected function terms() {
         return '<div data-target=".terms_section" class="settings_subtitle cursor-pointer px-3 py-2 mt-3">'.
             '<i class="bi bi-search me-2"></i>'.$this->trans('Terms').
             '<span class="term_count">'.sprintf($this->trans('terms: %d'), 0).'</span></div>'.
-            '<div class="terms_section mx-5 py-4">'.
+            '<div class="terms_section mx-5 py-1">'.
             '<div class="d-flex align-items-center"><span id="adv_term_not" class="adv_term_nots"><input type="checkbox" class="form-check-input" value="not" id="adv_term_not" /> !</span>'.
             '<input class="adv_terms form-control w-auto" id="adv_term" type="text" /><i class="bi bi-plus-circle new_term cursor-pointer ms-3"></i></div></div>';
     }
@@ -296,25 +296,25 @@ protected function times() {
         $from_date = date("Y-m-d", $from_time);
         $to_time = strtotime("+1 day", time());
         $to_date = date("Y-m-d", $to_time);
-        return '<div data-target=".time_section" class="settings_subtitle cursor-pointer px-3 py-2 "><i class="bi bi-calendar3-week-fill me-2"></i>'.$this->trans('Time').
+        return '<div data-target=".time_section" class="settings_subtitle cursor-pointer px-3 py-2 mt-3"><i class="bi bi-calendar3-week-fill me-2"></i>'.$this->trans('Time').
             '<span class="time_count">'.sprintf($this->trans('time ranges: %d'), 0).'</span></div>'.
-            '<div class="time_section mx-5 py-4"><span id="adv_time" class="adv_times d-flex align-items-center gap-2">'.$this->trans('From').
+            '<div class="time_section mx-5 py-1"><span id="adv_time" class="adv_times d-flex align-items-center gap-2">'.$this->trans('From').
             ' <input class="adv_time_fld_from form-control w-auto" type="date" value="'.$this->html_safe($from_date).
             '" /> '.$this->trans('To').' <input class="adv_time_fld_to form-control w-auto" type="date" value="'.
             $this->html_safe($to_date).'" /></span><i class="bi bi-plus-circle new_time cursor-pointer"></i></div>';
     }
 
     protected function sources() {
-        return '<div data-target=".source_section" class="settings_subtitle cursor-pointer px-3 py-2 "><i class="bi bi-folder-fill me-2"></i>'.$this->trans('Sources').
+        return '<div data-target=".source_section" class="settings_subtitle cursor-pointer px-3 py-2 mt-3"><i class="bi bi-folder-fill me-2"></i>'.$this->trans('Sources').
             '<span class="source_count">'.sprintf($this->trans('sources: %d'), 0).'</span></div>'.
-            '<div class="source_section mx-5 py-4">'.$this->trans('IMAP').' <i class="bi bi-plus-circle adv_folder_select cursor-pointer"></i><br /><div '.
+            '<div class="source_section mx-5 py-1">'.$this->trans('IMAP').' <i class="bi bi-plus-circle adv_folder_select cursor-pointer"></i><br /><div '.
             'class="adv_folder_list"></div><div class="adv_source_list"></div></div>';
     }
 
     protected function other() {
-        return '<div data-target=".other_section" class="settings_subtitle cursor-pointer px-3 py-2 "><i class="bi bi-gear-fill me-2"></i>'.$this->trans('Other').
+        return '<div data-target=".other_section" class="settings_subtitle cursor-pointer px-3 py-2 mt-3"><i class="bi bi-gear-fill me-2"></i>'.$this->trans('Other').
             '<span class="other_count">'.sprintf($this->trans('other settings: %d'), 0).'</span></div>'.
-            '<div class="other_section mx-5 py-4"><div class="col-lg-6 col-12"><table class="table table-borderless"><tr><th>'.$this->trans('Character set').'</th><td><select class="charset form-select w-auto">'.
+            '<div class="other_section mx-5 py-1 mb-3"><div class="col-lg-6 col-12"><table class="table table-borderless"><tr><th>'.$this->trans('Character set').'</th><td><select class="charset form-select w-auto">'.
             '<option value="">'.$this->trans('Default').'</option><option value="UTF-8">UTF-8</option>'.
             '<option value="ASCII">ASCII</option></select></td></tr><tr><th>'.$this->trans('Results per source').'</th>'.
             '<td><input type="number" value="100" class="adv_source_limit form-control" /></td></tr><tr><th>'.$this->trans('Flags').'</th><td>'.

modules/core/message_list_functions.php

@@ -429,7 +429,7 @@ function message_controls($output_mod) {
     $res = '<a class="toggle_link" href="#"><i class="bi bi-check-square-fill"></i></a>'.
         '<div class="msg_controls fs-6 d-none gap-1 align-items-center">'.
             '<div class="dropdown on_mobile">'.
-                '<button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="coreMsgControlDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions</button>'.
+                '<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" id="coreMsgControlDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions</button>'.
                 '<ul class="dropdown-menu" aria-labelledby="coreMsgControlDropdown">';
     foreach ($controls as $control) {
         $res .= '<li><a class="dropdown-item msg_'.$control.' core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="'.$control.'">'.$output_mod->trans(ucfirst($control)).'</a></li>';

modules/core/site.css

@@ -989,7 +989,8 @@ div.unseen,
   max-height: 35rem;
   align-items: center;
   flex-wrap: wrap;
-  gap: 2rem;
+}
+.mobile .content_title:not(.search_result_title) {
   border-top: none;
 }
 .mobile .list_meta,
@@ -1021,7 +1022,6 @@ div.unseen,
 .mobile .msg_text {
   white-space: nowrap !important;
   width: 100%;
-  max-width: 768px !important;
   word-break: break-all;
   word-wrap: break-word;
   font-size: 100%;
@@ -1030,12 +1030,10 @@ div.unseen,
 .mobile .msg_controls {
   z-index: 1000;
   position: fixed;
-  right: 0px;
-  height: 54px;
+  height: 50px;
   font-size: 115%;
   padding-left: 5px;
-  padding-top: 5px;
-  top: 1px;
+  top: 0px;
   left: 60px !important;
 }
 @media (orientation: landscape) {
@@ -1068,7 +1066,7 @@ div.unseen,
 }
 .mobile .msg_text_inner {
   font-size: 120%;
-  padding: 5px !important;
+  padding: 10px !important;
 }
 .mobile .list_meta {
   display: none;
@@ -1084,15 +1082,12 @@ div.unseen,
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.mobile .search_form {
-  margin-top: 20px !important;
-}
 .mobile .search_form select,
 .mobile .search_form button,
 .mobile .search_form input {
   margin-left: 0px !important;
   margin: 0px;
-  margin-top: 5px;
+  margin-top: 2px;
 }
 .mobile .search_form > form {
   flex-wrap: wrap;
@@ -1118,7 +1113,6 @@ div.unseen,
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100vh;
 }
 .mobile .unsaved_reminder {
   display: none;
@@ -1627,6 +1621,10 @@ pre.msg_source {
   word-break: break-word;
 }
 
+.msg_text .col-md-2 {
+  font-weight: bold;
+}
+
 /* Mobile responsive overrides for Bootstrap classes */
 @media (max-width: 768px) {
   .small_header {
@@ -1642,12 +1640,6 @@ pre.msg_source {
     flex-wrap: wrap;
   }
 
-  .small_header .col-md-2 {
-    font-weight: bold;
-    white-space: nowrap;
-    width: fit-content !important;
-  }
-
   .long_header .col-md-2 {
     font-weight: bold;
   }
@@ -1670,4 +1662,8 @@ pre.msg_source {
   .mobile .message_list .list_controls.on_mobile {
     position: absolute; top: 12px; right: 15px;
   }
+  .mobile .small_header .col-md-2 {
+    font-weight: bold; white-space: nowrap; width: fit-content !important;
+  }
+  .mobile .small_header:nth-child(-n+3) { padding-bottom: 6px !important; }
 }

modules/imap/output_modules.php

@@ -815,8 +815,8 @@ protected function output() {
         if ($this->get('move_copy_controls', false)) {
             $res = '<span class="ctr_divider"></span> <div class="d-flex align-items-start gap-1 dropdown"><a class="imap_move disabled_input btn btn-sm btn-secondary no_mobile" href="#" data-action="copy" data-bs-toggle="dropdown">'.$this->trans('Copy').'</a>';
             $res .= '<a class="imap_move disabled_input btn btn-sm btn-secondary no_mobile" data-bs-toggle="dropdown" href="#" data-action="move">'.$this->trans('Move').'</a>';
-            $res .= '<a class="imap_move disabled_input btn btn-outline-success btn-sm on_mobile" href="#" data-action="copy">'.$this->trans('Copy').'</a>';
-            $res .= '<a class="imap_move disabled_input btn btn-outline-success btn-sm on_mobile" href="#" data-action="move">'.$this->trans('Move').'</a>';
+            $res .= '<a class="imap_move disabled_input text-decoration-none btn btn-outline-secondary btn-sm on_mobile" href="#" data-action="copy">'.$this->trans('Copy').'</a>';
+            $res .= '<a class="imap_move disabled_input text-decoration-none btn btn-outline-secondary btn-sm on_mobile" href="#" data-action="move">'.$this->trans('Move').'</a>';
             $res .= '<div class="move_to_location dropdown-menu" data-bs-auto-close="outside"></div>';
             $res .= '<input type="hidden" class="move_to_type" value="" />';
             $res .= '<input type="hidden" class="move_to_string1" value="'.$this->trans('Move to ...').'" />';

modules/imap/site.css

@@ -75,9 +75,7 @@
 .msg_text_inner {
   min-height: 300px;
   font-family: monospace;
-  width: 90%;
   padding: 30px;
-  padding-left: 40px;
 }
 
 .mobile .msg_text_inner {