From fd8709515cac4f913c5ccee57009355dc58bca81 Mon Sep 17 00:00:00 2001 From: Anousone Phaysomphot Date: Tue, 16 Jun 2020 08:53:49 +0000 Subject: [IMP] digest: improve digest layout and add new digest tips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PURPOSE Review the tips and digest layout design to make sure they have a WOW effect and increase trial conversion/retention. SPECIFICATIONS: LAYOUT Besides changing the tips, a cleaning of digest layout was performed. Emails were reported to look not neat in Outlook and somewhat random in mail.com or gmail.com. Most recent HTML CSS cannot be used to make HTML emails because each email provider renders emails its own way. This means a given email may renders differently in gmail.com and outlook. The layout of the email was composed of several levels of embedded tables which means huge maintenance effort. So it was totally rewritten with divs and CSS, but some properties are not taken into account. A lot of page component improvements were done. It consisted in replacing most of the style attribute in tags with CSS classes and ids. This step is especially useful for tip formatting because before, if a style modification was needed, it had to be performed on each tip individually. SPECIFICATIONS: TIPS “Speed up your workflow with shortcuts” “Click on an avatar to chat with a user” “A calculator in Odoo” “How to ping users in internal notes?” “Knowledge is power” LINKS Task ID-2274264 COM PR: odoo/odoo#53580 ENT PR: odoo/enterprise#1139 X-original-commit: 04aa36da30c107e482935b1673374c9302e4cf6a --- addons/digest/data/digest_data.xml | 571 ++++++++++++++++++++++++------------- 1 file changed, 377 insertions(+), 194 deletions(-) (limited to 'addons/digest/data/digest_data.xml') diff --git a/addons/digest/data/digest_data.xml b/addons/digest/data/digest_data.xml index 30a8316f469..a697d17b43d 100644 --- a/addons/digest/data/digest_data.xml +++ b/addons/digest/data/digest_data.xml @@ -15,35 +15,297 @@ body { margin: 0; padding: 0; + font-family: Arial, Helvetica, Verdana, sans-serif; } - @media only screen and (max-width:650px) { - .d-block{ + #header_background { + background-color: #875a7b; + } + .global_layout { + max-width: 588px; + margin: 0 auto; + border: 1px solid #eeeeee; + border-top: 0; + background-color: #ffffff; + } + .company_name { + display: inline; + vertical-align: middle; + font-weight: bold; + color: #8f8f8f; + } + .title_subtitle { + font-weight: bold; + color: #282f33; + word-break: break-all; + } + .button { + float: right; + background-color: #875a7b; + color: #ffffff; + border-radius: 5px; + } + #button_connect { + text-align: center; + } + .date { + color: #8f8f8f; + } + .tip_title { + margin-top: 0; + font-weight: bold; + } + .tip_content { + margin: 0 auto; + color:#333333; + text-align: justify; + text-justify: inter-word; + } + .illustration_border { + width: 100%; + border: 1px solid grey; + } + .kpi_row_footer { + padding-bottom: 20px; + } + .kpi_header { + overflow: auto; + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #eeeeee; + font-size: 15px; + font-weight: bold; + color: #282f33; + } + #button_open_report { + padding: 5px 10px; + font-size: 12px; + font-weight: normal; + } + .kpi_cell { + float: left; + width: 33%; + text-align: center; + } + .kpi_value { + color: #282f33; + font-weight: bold; + text-decoration: none; + } + .kpi_value_label { + display: inline-block; + margin-bottom: 10px; + color: #888888; + font-size: 12px; + text-transform: uppercase; + } + .kpi_margin { + width: 75px; + padding: 5px 10px; + text-decoration: none; + border-radius: 5px; + } + .positive_kpi_margin { + border: 1px solid #c4ecd7; + background-color: #d5f1e2; + color: #17613a; + } + .negative_kpi_margin { + border: 1px solid #f4cfce; + background-color: #f7dddc; + color: #712b29; + } + .kpi_trick { + clear: both; + } + .download_app { + height: 40px; + margin-bottom: 5px; + display: inline-block; + } + .preference_div { + clear: both; + background-color: #eeeeee; + text-align: center; + } + .preference { + margin-bottom: 15px; + color: #6b6d70; + } + .preference a { + text-decoration: none; + } + .by_odoo { + color: #8f8f8f; + } + .odoo_link { + text-decoration: none; + } + .odoo_link_text { + font-weight: bold; + color: #875a7b; + } + .run_business { + color: #2d2a26; + } + #footer { + background-color: #eeeeee; + color: #8f8f8f; + text-align: center; + } + + @media only screen and (max-width: 650px) { + .d-block { display: block !important; } - .mobile-hide{ - display: none !important; + #header_background { + padding-top: 0px; + } + #header { + padding: 15px 20px; + border: 1px solid #eeeeee; + } + .global_layout { + padding: 20px; + } + .company_name { + font-size: 15px; + } + .title_subtitle { + margin: 5px auto; + } + #button_connect { + padding: 4px 10px; + font-size: 12px; + } + .date { + margin-top: 10px; + font-size: 10px; + } + .tip_title { + font-size: 14px; + } + .tip_content { + margin: 10px auto 0 auto; + font-size: 12px; + line-height: 20px; + } + .illustration_border { + margin-top: 15px; + } + .kpi_value { + font-size: 20px; + } + .kpi_margin { + font-size: 10px; + } + .kpi_margin_margin { + margin-bottom: 5px; + } + .preference_div { + padding: 15px; + } + .preference { + font-size: 12px; } - .mobile-w-75{ - width: 75% !important; + .by_odoo { + font-size: 10px; } - .mobile-w-33{ - width: 33% !important; + .run_business { + margin: 20px auto; + font-size: 12px; } - .font-25{ - font-size: 25px !important; - line-height: 25px !important; + #footer { + font-size: 15px; } - .font-18{ - font-size: 18px !important; - line-height: 25px !important; + #powered { + margin-top: 15px; } - .font-16{ - font-size: 16px !important; - line-height: 25px !important; + .tip_twocol { + overflow: auto; + margin-top: 15px; } - .font-12{ - font-size: 12px !important; - line-height: 20px !important; + .tip_twocol_left { + text-align: left; + } + .tip_twocol_img { + width: 90%; + } + } + + @media only screen and (min-width: 651px) { + #header_background { + padding-top: 70px; + } + #header { + padding: 20px 30px 25px 30px; + border-left: 1px solid #875a7b; + border-right: 1px solid #875a7b; + } + .global_layout { + padding: 25px 30px 30px 30px; + } + .company_name { + font-size: 25px; + } + .title_subtitle { + margin: 10px auto; + } + .button { + padding: 5px 10px; + } + #button_connect { + padding: 6px 10px; + font-size: 15px; + } + .date { + margin-top: 15px; + font-size: 12px; + } + .tip_title { + font-size: 20px; + } + .tip_content { + margin: 15px auto 0 auto; + font-size: 15px; + line-height: 25px; + } + .illustration_border { + margin-top: 20px; + } + .kpi_value { + font-size: 30px; + } + .kpi_margin { + font-size: 12px; + } + .kpi_margin_margin { + margin-bottom: 10px; + } + .preference_div { + padding: 20px; + } + .preference { + font-size: 15px; + } + .by_odoo { + font-size: 12px; + } + .run_business { + margin: 15px auto; + font-size: 18px; + } + #footer { + font-size: 20px; + } + #stock_tip { + overflow: auto; + margin-top: 20px; + } + #stock_div_img { + text-align: center; + } + #stock_img { + width: 70%; } } @@ -56,147 +318,78 @@ @@ -205,20 +398,20 @@ @@ -226,24 +419,14 @@ - + + -- cgit v1.2.3