Improve the styles of all components of the server configuration page…

… (Email Account, SMTP, IMAP and Feeds)

modules/core/handler_modules.php

@@ -736,8 +736,7 @@ public function process() {
                 if ($user && $path && $pass) {
                     $this->user_config->save($user, $pass);
                     $this->session->destroy($this->request);
-                    Hm_Msgs::add('Saved user data on logout');
-                    Hm_Msgs::add('Session destroyed on logout');
+                    Hm_Msgs::add('Saved user data on logout, Session destroyed on logout');
                 }
             }
             else {

modules/core/output_modules.php

@@ -178,24 +178,7 @@ class Hm_Output_login_start extends Hm_Output_Module {
      */
     protected function output() {
         if (!$this->get('router_login_state')) {
-            $css = '<style type="text/css">.mobile .login_form{margin-top:60px;display:block;float:none;width:100%;'.
-                'background-color:#fff;font-size:130%;height:auto;}.logged_out{display:block !important;}.sys_messages'.
-                '{position:fixed;right:20px;top:15px;min-height:30px;display:none;background-color:#fff;color:teal;'.
-                'margin-top:0px;padding:15px;padding-bottom:5px;white-space:nowrap;border:solid 1px #999;border-radius:'.
-                '5px;filter:drop-shadow(4px 4px 4px #ccc);z-index:101;}.g-recaptcha{margin-left:-12px;}.mobile .g-recaptcha{'.
-                'clear:left;margin-left:20px;}.title{font-weight:normal;padding:0px;margin:0px;margin-left:20px;'.
-                'margin-bottom:20px;letter-spacing:-1px;color:#999;}html,body{max-width:100%;min-height:100%;'.
-                'background-color:#fff;}body{background:linear-gradient(180deg,#faf6f5,#faf6f5,#faf6f5,#faf6f5,'.
-                '#fff);font-size:1em;height:100%;color:#333;font-family:Arial;padding:0px;margin:0px;min-width:700px;'.
-                'font-size:100%;}input,option,select{font-size:100%;padding:3px;}textarea,select,input{border:solid '.
-                '1px #ddd;background-color:#fff;color:#333;border-radius:3px;}.screen_reader{position:absolute'.
-                ';top:auto;width:1px;height:1px;overflow:hidden;}.login_form{float:left;font-size:90%;'.
-                'padding-top:60px;height:300px;border-radius:0px 0px 20px 0px;margin:0px;background-color:#f5f5f5;'.
-                'width:300px;padding-left:20px;}.login_form input{clear:both;float:left;padding:4px;margin-left:20px;'.
-                'margin-top:10px;margin-bottom:10px;}#username,#password{width:200px;}.err{color:red !important;}.long_session'.
-                '{float:left;}.long_session input{padding:0px;float:none;}.mobile .long_session{float:left;clear:both;}</style>';
-
-        return '<form class="login_form" method="POST">';
+            return '<form class="login_form" method="POST">';
         }
         else {
             return '<form class="logout_form" method="POST">';
@@ -258,6 +241,7 @@ protected function output() {
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
+                        <input type="hidden" name="hm_page_key" value="'.Hm_Request_Key::generate().'" />
                         <p class="text-wrap">'.$this->trans('Unsaved changes will be lost! Re-enter your password to save and exit.').' <a href="?page=save">'.$this->trans('More info').'</a></p>
                         <input type="text" value="'.$this->html_safe($this->get('username', 'cypht_user')).'" autocomplete="username" style="display: none;"/>
                         <div class="my-3 form-floating">
@@ -333,16 +317,17 @@ protected function output() {
         if (!$this->get('router_login_state') && !empty($msgs)) {
             $logged_out_class = ' logged_out';
         }
-        $res .= '<div class="sys_messages'.$logged_out_class.'">';
+        $res .= '<div class="z-3 position-fixed top-0 end-0 mt-3 me-3 sys_messages'.$logged_out_class.'">';
         if (!empty($msgs)) {
             $res .= implode(',', array_map(function($v) {
                 if (preg_match("/ERR/", $v)) {
-                    return sprintf('<span class="err">%s</span>', $this->trans(substr((string) $v, 3)));
+                    return sprintf('<div class="alert alert-danger alert-dismissible fade show" role="alert"><i class="bi bi-exclamation-triangle me-2"></i><span class="err">%s</span>', $this->trans(substr((string) $v, 3)));
                 }
                 else {
-                    return $this->trans($v);
+                    return sprintf('<div class="alert alert-info alert-dismissible fade show" role="alert"><i class="bi bi-info-circle me-2"></i><span>%s</span>', $this->trans($v));
                 }
             }, $msgs));
+            $res .= '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
         }
         $res .= '</div>';
         return $res;
@@ -373,8 +358,8 @@ protected function output() {
             '<meta name="mobile-web-app-capable" content="yes" />'.
             '<meta name="apple-mobile-web-app-status-bar-style" content="black" />'.
             '<meta name="theme-color" content="#888888" /><meta charset="utf-8" />'.
-            '<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />';
-            '<link href="vendor/twbs/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" type="text/css" />';
+            '<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />'.
+            '<link href="vendor/twbs/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" type="text/css" />'.
             '<script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>';
 
         if ($this->get('router_login_state')) {
@@ -1274,7 +1259,7 @@ protected function output() {
         if (!$this->get('hide_folder_icons')) {
             $res .= '<img class="account_icon" src="'.$this->html_safe(Hm_Image_Sources::$env_closed).'" alt="" width="16" height="16" /> ';
         }
-        $res .= $this->trans('Unread').' kokok</a><span class="total_unread_count badge bg-secondary"></span></li>';
+        $res .= $this->trans('Unread').'</a><span class="total_unread_count badge bg-secondary"></span></li>';
         $res .= '<li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged">';
         if (!$this->get('hide_folder_icons')) {
             $res .= '<img class="account_icon" src="'.$this->html_safe(Hm_Image_Sources::$star).'" alt="" width="16" height="16" /> ';

modules/core/site.css

@@ -36,7 +36,7 @@ td { vertical-align: top; }
 .title { font-weight: normal; padding: 0px; margin: 0px; margin-left: 20px; margin-bottom: 20px; letter-spacing: -1px; color: #999; }
 .date { display: none; position: absolute; top: 15px; right: 20px; color: #888; padding-right: 0px; padding-top: 6px;}
 .mailbox_list_title { display: inline; }
-.sys_messages { position: fixed; right: 20px; top: 15px; min-height: 30px; min-width: 300px; cursor: pointer; display: none; margin-top: 0px; padding: 15px; padding-bottom: 5px; white-space: nowrap; border: solid 1px #999; border-radius: 5px; filter: drop-shadow(4px 4px 4px #ccc); z-index: 101; }
+/* .sys_messages { position: fixed; right: 20px; top: 15px; min-height: 30px; min-width: 300px; cursor: pointer; display: none; margin-top: 0px; padding: 15px; padding-bottom: 5px; white-space: nowrap; border: solid 1px #999; border-radius: 5px; filter: drop-shadow(4px 4px 4px #ccc); z-index: 101; } */
 .logged_out { display: block !important; }
 #theme_setting, #timezone_setting { max-width: 200px; }
 .s_pre { color: #666}
@@ -136,21 +136,21 @@ textarea, select, input, button { border: solid 1px #ddd; background-color: #fff
 .plink:hover, .nlink:hover { color: teal !important; }
 .limit { width: 50px; margin-left: 20px; }
 .settings_subtitle { font-size: 115%; color: #777 !important; letter-spacing: -1px; padding-bottom: 6px !important; padding-left: 30px !important; height: 25px !important; padding-top: 15px !important; }
-.server_section img, .settings_subtitle img { opacity: .4; padding-right: 10px; vertical-align: -1px; }
-.settings_subtitle, .server_section { cursor: pointer; max-height: 50px; margin-top: 0px; color: #777; padding-bottom: 10px; padding-top: 15px; letter-spacing: -1px; font-size: 115%; padding-left: 30px; border-bottom: solid 1px #ede8e6; }
+/* .server_section img, .settings_subtitle img { opacity: .4; padding-right: 10px; vertical-align: -1px; } */
+/* .settings_subtitle, .server_section { cursor: pointer; max-height: 50px; margin-top: 0px; color: #777; padding-bottom: 10px; padding-top: 15px; letter-spacing: -1px; font-size: 115%; padding-left: 30px; border-bottom: solid 1px #ede8e6; } */
 .list_meta { float: right; margin-right: 20px; letter-spacing: 0px; display: inline; color: #666 !important; font-size: 70% !important; margin-top: 2px; font-style: normal; margin-left: 20px; }
 .list_meta b { color: #333 !important; font-weight: normal; padding-left: 5px; padding-right: 5px; vertical-align: 1px; }
 .noscript { position: absolute; z-index: 100; right: 0px; left: 0px; top: 0px; bottom: 0px; background-color: #ede8e6; opacity: 1; padding-top: 100px; text-align: center; }
 .hide_folders { font-size: 0px; float: left; clear: none; margin-top: 10px; margin-left: 23px; }
 .hide_folders img { opacity: .4; }
 .section_caret { opacity: .15; vertical-align: 4px; padding-right: 10px; }
-.server_count { float: right; margin-right: 120px; font-size: 90%; }
+.server_count { float: right; font-size: 90%; }
 .email_setting, .all_setting, .unread_setting, .flagged_setting, .general_setting, .junk_setting, .trash_setting, .drafts_setting { display: none; }
-.configured_server, .add_server { margin-top: 10px; color: #666; background-color: #fff; margin-bottom: 20px; padding: 10px; width: 200px; }
+/* .configured_server, .add_server { margin-top: 10px; color: #666; background-color: #fff; margin-bottom: 20px; padding: 10px; width: 200px; } */
 .message_list { min-height: 600px; background-color: #fff; height: 100%; padding-bottom: 20px; }
-.configured_server { float: left; margin-left: 25px; width: 230px; }
-.add_server { margin-right: 25px; float: left; clear: left; margin-left: 25px; width: 230px; }
-.configured_server input, .add_server input, .add_server select { margin-bottom: 10px; padding: 5px; margin-right: 5px; }
+/* .configured_server { float: left; margin-left: 25px; width: 230px; } */
+/* .add_server { margin-right: 25px; float: left; clear: left; margin-left: 25px; width: 230px; } */
+/* .configured_server input, .add_server input, .add_server select { margin-bottom: 10px; padding: 5px; margin-right: 5px; } */
 .list_sources, .update_search_label_field { z-index: 100; border-left: solid 1px #ede8e6; border-bottom: solid 1px #ede8e6; position: absolute; right: 0px; top: 54px; background-color: #fafafa; font-size: 85%; padding: 30px; padding-top: 10px; display: none;}
 .list_src, .old_search_terms_label, .search_terms_label { color: #666; margin-bottom: 10px; }
 .old_search_terms_label, .search_terms_label { display: block; width: 100%; }
@@ -201,7 +201,7 @@ div.unseen, .unseen .subject { font-weight: 700; }
 .rtl_page .msg_controls { margin-right: 0px !important; padding-right: 5px !important; margin-left: 15px !important; }
 .rtl_page .smtp_save, .rtl_page .smtp_reset, .rtl_page .compose_attach_button, .rtl_page { float: left; }
 .rtl_page .smtp_send { direction: rtl !important; }
-.rtl_page .sys_messages { left: 20px; right: auto; }
+/* .rtl_page .sys_messages { left: 20px; right: auto; } */
 .rtl_page .total_unread_count { margin-right: 10px; margin-left: 0px; }
 .rtl_page .debug_title { right: auto; left: 0; }
 .rtl_page .combined_sort { margin-right: 15px; margin-left: 105px;}
@@ -211,7 +211,7 @@ div.unseen, .unseen .subject { font-weight: 700; }
 
 /* mobile */
 .mobile { font-size: 90%; min-width: 100%; background: none; }
-.mobile .sys_messages { z-index: 1002; }
+/* .mobile .sys_messages { z-index: 1002; } */
 .mobile .account_icon { width: 24px; height: 24px; padding-bottom: 4px; }
 /* .mobile .save_settings { margin-left: 0px !important; } */
 /* .mobile .save_settings_password { margin-right: 10px; } */

modules/core/site.js

@@ -311,22 +311,22 @@ var Hm_Notices = {
         var msg_list = [];
         for (var i in msgs) {
             if (msgs[i].match(/^ERR/)) {
-                msg_list.push('<span class="err">'+msgs[i].substring(3)+'</span>');
+                msg_list.push(msgs[i].substring(3));
             }
             else {
                 msg_list.push(msgs[i]);
             }
         }
         if (!keep) {
-            $('.sys_messages').html(msg_list.join(', '));
+            $('.err').html(msg_list.join(', '));
         }
         else {
-            var existing = $('.sys_messages').html();
+            var existing = $('.err').html();
             if (existing) {
-                $('.sys_messages').append('<br />'+msg_list.join(', '));
+                $('.err').append('<br />'+msg_list.join(', '));
             }
             else {
-                $('.sys_messages').html(msg_list.join(', '));
+                $('.err').html(msg_list.join(', '));
             }
         }
         $('.sys_messages').show();

modules/feeds/modules.php

@@ -533,21 +533,42 @@ protected function output() {
         if ($this->format == 'HTML5') {
             $count = count($this->get('feeds', array()));
             $count = sprintf($this->trans('%d configured'), $count);
-            return '<div class="feed_server_setup"><div data-target=".feeds_section" class="server_section">'.
-                '<img alt="" src="'.Hm_Image_Sources::$rss.'" width="16" height="16" />'.
-                ' '.$this->trans('Feeds').' <div class="server_count">'.$count.'</div></div><div class="feeds_section"><form class="add_server" method="POST">'.
-                '<input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />'.
-                '<div class="subtitle">'.$this->trans('Add an RSS/ATOM Feed').'</div><table>'.
-                '<tr><td><label class="screen_reader" for="new_feed_name">'.$this->trans('Feed name').'</label>'.
-                '<input required type="text" id="new_feed_name" name="new_feed_name" class="txt_fld form-control" value="" placeholder="'.$this->trans('Feed name').'" /></td></tr>'.
-                '<tr><td><label for="new_feed_address" class="screen_reader">'.$this->trans('Site address or feed URL').'</label>'.
-                '<input required type="url" id="new_feed_address" name="new_feed_address" class="txt_fld form-control" placeholder="'.$this->trans('Site address or feed URL').'" value="" /></td></tr>'.
-                '<tr><td><input type="submit" class="btn btn-primary" value="'.$this->trans('Add').'" name="submit_feed" /></td></tr>'.
-                '</table></form>';
+
+            return '<div class="feed_server_setup">
+                        <div data-target=".feeds_section" class="server_section border-bottom cursor-pointer px-1 py-2 mt-4 pe-auto">
+                            <a href="#" class="pe-auto">
+                                <i class="bi bi-rss-fill me-3"></i>
+                                <b> '.$this->trans('Feeds').'</b>
+                            </a> 
+                            <div class="server_count">'.$count.'</div>
+                        </div>
+
+                        <div class="feeds_section px-4 pt-3">
+                            <div class="row">
+                                <div class="col-12 col-lg-4 mb-4">
+                                    <form class="add_server" method="POST">
+                                        <input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />
+
+                                        <div class="subtitle mt-4">'.$this->trans('Add an RSS/ATOM Feed').'</div>
+
+                                        <div class="form-floating mb-3">
+                                            <input required type="text" id="new_feed_name" name="new_feed_name" class="txt_fld form-control" value="" placeholder="'.$this->trans('Feed name').'">
+                                            <label class="" for="new_feed_name">'.$this->trans('Feed name').'</label>
+                                        </div>
+
+                                        <div class="form-floating mb-3">
+                                            <input required type="url" id="new_feed_address" name="new_feed_address" class="txt_fld form-control" placeholder="'.$this->trans('Site address or feed URL').'" value="">
+                                            <label for="new_feed_address" class="">'.$this->trans('Site address or feed URL').'</label>
+                                        </div>
+
+                                        <input type="submit" class="btn btn-primary" value="'.$this->trans('Add').'" name="submit_feed" />
+                                    </form>
+                                </div>';
         }
     }
 }
 
+
 /**
  * @subpackage feeds/output
  */
@@ -556,15 +577,15 @@ protected function output() {
         $res = '';
         if ($this->format == 'HTML5') {
             foreach ($this->get('feeds', array()) as $index => $vals) {
-                $res .= '<div class="configured_server">';
-                $res .= sprintf('<div class="server_title">%s</div><div title="%s" class="server_subtitle">%s</div>',
+                $res .= '<div class="configured_server col-12 col-lg-4"><div class="card card-body">';
+                $res .= sprintf('<div class="server_title"><b>%s</b></div><div title="%s" class="server_subtitle">%s</div>',
                     $this->html_safe($vals['name']), $this->html_safe($vals['server']), $this->html_safe($vals['server']));
-                $res .= '<form class="feed_connect" method="POST">';
+                $res .= '<form class="feed_connect d-flex gap-2" method="POST">';
                 $res .= '<input type="hidden" name="feed_id" value="'.$this->html_safe($index).'" />';
-                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_feed_connect" />';
-                $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="feed_delete" />';
+                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_feed_connect btn btn-outline-secondary btn-sm" />';
+                $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="feed_delete btn btn-outline-danger btn-sm" />';
                 $res .= '<input type="hidden" value="ajax_feed_debug" name="hm_ajax_hook" />';
-                $res .= '</form></div>';
+                $res .= '</form></div></div>';
             }
             $res .= '<br class="clear_float" /></div></div>';
         }

modules/feeds/site.css

@@ -1,6 +1,6 @@
 /* .feeds_section { display: none; } */
 /* .feed_server_setup .content_title { cursor: pointer; } */
 /* .feeds_setting { display: none; } */
-.feeds_section .configured_server, .feeds_section .add_server { height: 140px; }
+/* .feeds_section .configured_server, .feeds_section .add_server { height: 140px; } */
 .feeds_section .add_server { margin-right: 0px; }
 .feeds .source a { color: #666; }