From de4343ae0c959f8db6b20e25bd09d759d7f89349 Mon Sep 17 00:00:00 2001
From: Maz Ameli <maz@metabase.com>
Date: Fri, 2 Mar 2018 09:26:50 -0600
Subject: [PATCH] Style changes for larger pulse/alert tables
---
src/metabase/email/_footer_pulse.mustache | 11 ++++
src/metabase/email/_header.mustache | 2 +-
src/metabase/email/pulse.mustache | 4 +-
src/metabase/pulse/render.clj | 67 +++++++++++++++++------
4 files changed, 63 insertions(+), 21 deletions(-)
create mode 100644 src/metabase/email/_footer_pulse.mustache
diff --git a/src/metabase/email/_footer_pulse.mustache b/src/metabase/email/_footer_pulse.mustache
new file mode 100644
index 00000000000..725cae61054
--- /dev/null
+++ b/src/metabase/email/_footer_pulse.mustache
@@ -0,0 +1,11 @@
+ </div>
+ {{#quotation}}
+ <div style="padding-top: 2em; padding-bottom: 1em; text-align: left; color: #CCCCCC; font-size: small;">"{{quotation}}"<br/>- {{quotationAuthor}}</div>
+ {{/quotation}}
+ {{#logoFooter}}
+ <div style="padding-bottom: 2em; padding-top: 1em; text-align: left;">
+ <img width="32" height="40" src="http://static.metabase.com/email_logo.png"/>
+ </div>
+ {{/logoFooter}}
+</body>
+</html>
diff --git a/src/metabase/email/_header.mustache b/src/metabase/email/_header.mustache
index 9541f783cac..85c926ad42a 100644
--- a/src/metabase/email/_header.mustache
+++ b/src/metabase/email/_header.mustache
@@ -14,4 +14,4 @@
<img width="47" height="60" src="http://static.metabase.com/email_logo.png"/>
</div>
{{/logoHeader}}
- <div class="container" style="margin: 0 auto; padding: 0 0 2em 0; max-width: 500px; font-size: 16px; line-height: 24px; color: #616D75;">
+ <div class="container" style="margin: 0; padding: 0 0 2em 0; max-width: 100%; font-size: 16px; line-height: 24px; color: #616D75;">
diff --git a/src/metabase/email/pulse.mustache b/src/metabase/email/pulse.mustache
index d2f5e05cc7a..e024ababd09 100644
--- a/src/metabase/email/pulse.mustache
+++ b/src/metabase/email/pulse.mustache
@@ -1,8 +1,8 @@
{{> metabase/email/_header}}
{{#pulseName}}
- <h1 style="{{sectionStyle}} margin: 16px; color: {{colorGrey4}};">
+ <h1 style="{{sectionStyle}} margin: 16px; color: {{color-brand}};">
{{pulseName}}
</h1>
{{/pulseName}}
{{{pulse}}}
-{{> metabase/email/_footer}}
+{{> metabase/email/_footer_pulse}}
diff --git a/src/metabase/pulse/render.clj b/src/metabase/pulse/render.clj
index 1952d1d8b52..d9bbd926f1a 100644
--- a/src/metabase/pulse/render.clj
+++ b/src/metabase/pulse/render.clj
@@ -44,14 +44,17 @@
(def ^:private ^:const sparkline-pad 8)
;;; ## STYLES
-(def ^:private ^:const color-brand "rgb(45,134,212)")
-(def ^:private ^:const color-purple "rgb(135,93,175)")
-(def ^:private ^:const color-gold "#F9D45C")
-(def ^:private ^:const color-error "#EF8C8C")
-(def ^:private ^:const color-gray-1 "rgb(248,248,248)")
-(def ^:private ^:const color-gray-2 "rgb(189,193,191)")
-(def ^:private ^:const color-gray-3 "rgb(124,131,129)")
+(def ^:private ^:const color-brand "rgb(45,134,212)")
+(def ^:private ^:const color-purple "rgb(135,93,175)")
+(def ^:private ^:const color-gold "#F9D45C")
+(def ^:private ^:const color-error "#EF8C8C")
+(def ^:private ^:const color-gray-1 "rgb(248,248,248)")
+(def ^:private ^:const color-gray-2 "rgb(189,193,191)")
+(def ^:private ^:const color-gray-3 "rgb(124,131,129)")
(def ^:const color-gray-4 "A ~25% Gray color." "rgb(57,67,64)")
+(def ^:private ^:const color-dark-gray "#616D75")
+(def ^:private ^:const color-row-border "#EDF0F1")
+
(def ^:private ^:const font-style {:font-family "Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif"})
(def ^:const section-style
@@ -70,19 +73,47 @@
:color color-brand}))
(def ^:private ^:const bar-th-style
- (merge font-style {:font-size :10px
- :font-weight 400
- :color color-gray-4
- :border-bottom (str "4px solid " color-gray-1)
- :padding-top :0px
- :padding-bottom :10px}))
+ (merge font-style {:font-size :14.22px
+ :font-weight 700
+ :color color-gray-4
+ :border-bottom (str "1px solid " color-row-border)
+ :padding-top :20px
+ :padding-bottom :5px}))
+
+;; TO-DO for @senior: apply this style to headings of numeric columns
+(def ^:private ^:const bar-th-numeric-style
+ (merge font-style {:text-align :right
+ :font-size :14.22px
+ :font-weight 700
+ :color color-gray-4
+ :border-bottom (str "1px solid " color-row-border)
+ :padding-top :20px
+ :padding-bottom :5px}))
(def ^:private ^:const bar-td-style
- (merge font-style {:font-size :16px
- :font-weight 400
- :text-align :left
- :padding-right :1em
- :padding-top :8px}))
+ (merge font-style {:font-size :14.22px
+ :font-weight 400
+ :color color-dark-gray
+ :text-align :left
+ :padding-right :1em
+ :padding-top :2px
+ :padding-bottom :1px
+ :max-width :500px
+ :overflow :hidden
+ :text-overflow :ellipsis
+ :border-bottom (str "1px solid " color-row-border)}))
+
+;; TO-DO for @senior: apply this style to numeric cells
+(def ^:private ^:const bar-td-style-numeric
+ (merge font-style {:font-size :14.22px
+ :font-weight 400
+ :color color-dark-gray
+ :text-align :right
+ :padding-right :1em
+ :padding-top :2px
+ :padding-bottom :1px
+ :font-family "Courier, Monospace"
+ :border-bottom (str "1px solid " color-row-border)}))
(def ^:private RenderedPulseCard
"Schema used for functions that operate on pulse card contents and their attachments"
--
GitLab