Skip to content

Commit

Permalink
[UX] servers page : make servers page to be responsive on mobile (#1005
Browse files Browse the repository at this point in the history 
)

* [UX] servers page : make servers page to be responsive on mobile
* Arranged mobile servers to look good
---------

Co-authored-by: Josaphat Imani <[email protected]>
  • Loading branch information
@Bienvenumoringa @josaphatim
Bienvenumoringa and josaphatim authored Jun 11, 2024
1 parent de6f4c8 commit 82d32d4
Show file tree
Hide file tree
Showing 4 changed files with 591 additions and 211 deletions.
97 changes: 77 additions & 20 deletions modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ body {
.pop3_server_setup,
.configured_server,
.content_title,
.list_controls
.add_server {
.list_controls .add_server {
background-color: var(--bs-body-bg) !important;
color: var(--bs-body-color) !important;
}
Expand Down Expand Up @@ -363,7 +362,7 @@ button {
line-height: 1.25em;
}
.settings_subtitle {
color: var(--bs-link-color)!important;
color: var(--bs-link-color) !important;
}
.folder_list {
background-color: #fff;
Expand Down Expand Up @@ -447,7 +446,12 @@ button {
padding-left: 25px;
margin-top: 0px;
margin-right: -15px;
background: linear-gradient(180deg,var(--bs-body-bg), var(--bs-body-bg), var(--bs-secondary-bg)) !important;
background: linear-gradient(
180deg,
var(--bs-body-bg),
var(--bs-body-bg),
var(--bs-secondary-bg)
) !important;
border-bottom: solid 1px var(--bs-secondary-bg);
border-top: solid 1px var(--bs-secondary-bg);
padding-top: 10px;
Expand All @@ -460,7 +464,12 @@ button {
}
.content_title {
margin-top: 0px;
background: linear-gradient(180deg,var(--bs-body-bg), var(--bs-body-bg), var(--bs-secondary-bg)) !important;
background: linear-gradient(
180deg,
var(--bs-body-bg),
var(--bs-body-bg),
var(--bs-secondary-bg)
) !important;
border-bottom: solid 1px var(--bs-secondary-bg);
border-top: solid 1px var(--bs-secondary-bg);
padding-bottom: 10px;
Expand Down Expand Up @@ -967,7 +976,8 @@ div.unseen,
max-height: 35rem;
align-items: center;
}
.mobile .list_meta, .mobile .search_form {
.mobile .list_meta,
.mobile .search_form {
flex-flow: row wrap;
}
.mobile .account_icon {
Expand Down Expand Up @@ -1279,7 +1289,9 @@ div.unseen,
.cursor-pointer {
cursor: pointer !important;
}
.list_sources, .update_search_label_field, .list_actions {
.list_sources,
.update_search_label_field,
.list_actions {
z-index: 100;
border-left: solid 1px #ede8e6;
border-bottom: solid 1px #ede8e6;
Expand All @@ -1292,21 +1304,66 @@ div.unseen,
display: none;
}

.step_config-title {display: flex;align-items: center;gap: 10px;}
.step_config-title > span {font-size: small;}

.step_config-title {
display: flex;
align-items: center;
gap: 10px;
}
.step_config-title > span {
font-size: small;
}

.step_config {transition: transform 0.5s;display: none;}
.current_config_step {display: block;}
.step_config-smtp_imap_port_bloc {display: flex; font-size: 10px;}
.server_config_section { display: none; }
.hide {display: none;}
.step-container .invalid-feedback { display: block; }
.step_config {
transition: transform 0.5s;
display: none;
}
.current_config_step {
display: block;
}
.step_config-smtp_imap_port_bloc {
display: flex;
font-size: 10px;
}
.server_config_section {
display: none;
}
.hide {
display: none;
}
.step-container .invalid-feedback {
display: block;
}

.settings_table .form-select {
display: inline-block;
}
.on_mobile {display: none;}
.mobile .no_mobile {display: none !important;}
.mobile .on_mobile {display: block !important;}
.mobile .move_to_location {right: 0;}
.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;
color: #666;
}
.server_subtitle {
font-size: x-small;
color: teal;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile .credentials-container > div:not(:last-child) {
margin-bottom: 10px !important;
}
.mobile .credentials-container .form-floating {
margin-bottom: 7px;
}
19 changes: 10 additions & 9 deletions modules/imap/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,28 +460,29 @@ protected function output() {
$disabled = '';
$pass_value = '';
}
$res .= '<div class="' . strtolower($type) . '_server">';
$res .= '<form class="imap_connect" method="POST">';
$res .= '<div class="' . strtolower($type) . '_server mb-3">';
$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"><div class="col-sm-2">';
$res .= '<div class="row m-0 p-0 credentials-container"><div class="col-xl-2 col-lg-2 col-md-6">';
$res .= sprintf('
<div class="text-muted"><strong>%s</strong></div>
<div class="server_subtitle">%s/%d %s</div>',
$this->html_safe($vals['name']), $this->html_safe($vals['server']), $this->html_safe($vals['port']),
$vals['tls'] ? 'TLS' : '' );
$res .= '</div><div class="col-sm-2">';

$res .= '</div> <div class="col-xl-7 col-lg-7 col-md-9"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 ">';

// IMAP Username
$res .= '<div class="form-floating">';
$res .= '<input '.$disabled.' id="imap_user_'.$server_id.'" class="form-control credentials" type="text" name="imap_user" value="'.$this->html_safe($user_pc).'" placeholder="'.$this->trans('Username').'">';
$res .= '<label for="imap_user_'.$server_id.'">'.$this->trans('IMAP username').'</label></div>';
$res .= '</div><div class="col-sm-2">';
$res .= '</div><div class="col-xl-4 col-lg-4 col-md-6">';
// IMAP Password
$res .= '<div class="form-floating">';
$res .= '<input '.$disabled.' id="imap_pass_'.$server_id.'" class="form-control credentials imap_password" type="password" name="imap_pass" value="'.$pass_value.'" placeholder="'.$pass_pc.'">';
$res .= '<label for="imap_pass_'.$server_id.'">'.$this->trans('IMAP password').'</label></div>';
$res .= '</div><div class="col-sm-2">';
$res .= '</div><div class="col-xl-4 col-lg-4 col-md-6">';

// Sieve Host (Conditional)

Expand All @@ -491,7 +492,7 @@ protected function output() {
$res .= '<input '.$disabled.' id="imap_sieve_host_'.$server_id.'" class="form-control credentials imap_sieve_host_input" type="text" name="imap_sieve_host" value="'.$default_value.'" placeholder="Sieve Host">';
$res .= '<label for="imap_sieve_host_'.$server_id.'">'.$this->trans('Sieve Host').'</label></div>';
}
$res .= '</div><div class="col-sm-4 text-end">';
$res .= '</div></div></div><div class="col-xl-3 col-lg-3 d-flex justify-content-start align-items-center">';

// Buttons
if (!isset($vals['user']) || !$vals['user']) {
Expand All @@ -509,7 +510,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></form></div>';
$res .= '</div></div></div></form></div>';
}
$res .= '';
return $res;
Expand Down Expand Up @@ -656,7 +657,7 @@ protected function output() {
$res .= '<input type="hidden" name="imap_server_id" class="imap_server_id" value="'.$this->html_safe($server_id).'" />';

// JMAP Username
$res .= '<div class="form-floating">';
$res .= '<div class="form-floating mb-2">';
$res .= '<input '.$disabled.' id="imap_user_'.$server_id.'" class="form-control credentials" type="text" name="imap_user" value="'.$this->html_safe($user_pc).'" placeholder="'.$this->trans('Username').'">';
$res .= '<label for="imap_user_'.$server_id.'">'.$this->trans('JMAP username').'</label></div>';

Expand Down
Loading

0 comments on commit 82d32d4

Please sign in to comment.