From 708c5b28c04b952807a85cf51e8fcfded90d73c0 Mon Sep 17 00:00:00 2001 From: Kevin Coleman Date: Sun, 31 Mar 2019 13:08:24 -0700 Subject: [PATCH 1/3] Updating emails --- dist/templates/css/app.css | 76 +++++++++++-------- dist/templates/event.html | 2 +- dist/templates/generic.html | 2 +- dist/templates/index.html | 2 +- dist/templates/post.html | 2 +- dist/transform/transform.js | 2 +- package-lock.json | 57 +++++++++++++- src/templates/assets/scss/_settings.scss | 2 +- .../assets/scss/template/_event.scss | 14 +--- .../assets/scss/template/_footer.scss | 2 +- .../assets/scss/template/_template.scss | 34 +++++++-- .../data-prod/{content.json => generic.json} | 0 src/templates/layouts/default.html | 2 +- src/templates/pages/event.html | 44 +++++------ src/transform/transform.ts | 2 +- 15 files changed, 158 insertions(+), 85 deletions(-) rename src/templates/data-prod/{content.json => generic.json} (100%) diff --git a/dist/templates/css/app.css b/dist/templates/css/app.css index e41d212..c850314 100644 --- a/dist/templates/css/app.css +++ b/dist/templates/css/app.css @@ -25,7 +25,7 @@ img { center { width: 100%; - min-width: 580px; } + min-width: 540px; } a img { border: none; } @@ -62,7 +62,7 @@ table.body { table.container { background: #fefefe; - width: 580px; + width: 540px; margin: 0 auto; Margin: 0 auto; text-align: inherit; } @@ -96,7 +96,7 @@ th.columns table:not(.button) { width: 100%; } th.large-6 { - width: 274px; + width: 254px; padding-left: 8px; padding-right: 8px; } @@ -110,7 +110,7 @@ th.large-6.last { width: 50%; } th.large-12 { - width: 564px; + width: 524px; padding-left: 8px; padding-right: 8px; } @@ -121,7 +121,7 @@ th.large-12.last { padding-right: 16px; } th.large-12 center { - min-width: 532px; } + min-width: 492px; } td.expander, th.expander { @@ -133,6 +133,7 @@ h1.text-center, p.text-center { text-align: center; } +h6.text-right, p.text-right { text-align: right; } @@ -152,6 +153,7 @@ th.float-center { body, table.body, h1, +h6, p, td, th, @@ -165,7 +167,8 @@ a { text-align: left; line-height: 1.75; } -h1 { +h1, +h6 { color: inherit; word-wrap: normal; font-family: Avenir, Helvetica, Arial, sans-serif; @@ -176,6 +179,9 @@ h1 { h1 { font-size: 34px; } +h6 { + font-size: 18px; } + body, table.body, p, @@ -250,6 +256,10 @@ table.button.small table a { padding: 5px 10px 5px 10px; font-size: 14px; } +table.button.large table a { + padding: 10px 20px 10px 20px; + font-size: 20px; } + table.button.expanded { width: 100% !important; } table.button.expanded table { @@ -274,7 +284,7 @@ table.button:active table a { border: 0 solid #0b1511; } table.menu { - width: 580px; } + width: 540px; } table.menu th.menu-item { padding: 10px; padding-right: 10px; } @@ -291,7 +301,7 @@ table.menu.vertical th.menu-item { .menu[align="center"] { width: auto !important; } -@media only screen and (max-width: 596px) { +@media only screen and (max-width: 556px) { table.body img { width: auto; height: auto; } @@ -309,12 +319,12 @@ table.menu.vertical th.menu-item { table.body .columns .columns { padding-left: 0 !important; padding-right: 0 !important; } + th.small-6 { + display: inline-block !important; + width: 50% !important; } th.small-12 { display: inline-block !important; width: 100% !important; } - .columns th.small-12 { - display: block !important; - width: 100% !important; } table.menu { width: 100% !important; } table.menu td, @@ -332,11 +342,8 @@ html, .body { background: white !important; } -@media screen and (max-width: 800px) { - .clubhub-email-body { - width: 100vw !important; } } - h1, +h6, p, a, ul { @@ -346,11 +353,25 @@ ul { h1 { font-weight: 700; - font-size: 32px; } + font-size: 24px; } + @media screen and (min-width: 596px) { + h1 { + font-size: 32px !important; } } + +h6 { + font-weight: 500; + color: #cacaca; + font-size: 14px; } + @media screen and (min-width: 800px) { + h6 { + font-size: 18px !important; } } p { - font-size: 18px; - word-break: normal; } + word-break: normal; + font-size: 16px; } + @media screen and (min-width: 596px) { + p { + font-size: 18px !important; } } .light-text { font-weight: 300; } @@ -370,11 +391,14 @@ img { min-width: 100%; } .image-container { - height: 300px; + height: 240px; min-width: 100%; overflow: hidden; background-color: #f3f3f3; vertical-align: middle; } + @media only screen and (min-width: 596px) { + .image-container { + height: 320px !important; } } .logo-col { padding: 18px 0px; } @@ -409,7 +433,7 @@ img { .container.footer p, .container.footer a { color: #AEBDC4; - font-size: 12px; + font-size: 12px !important; font-weight: 500; } .container.footer ul { padding-left: 0px; } @@ -444,20 +468,12 @@ table.button table td { margin-bottom: 0px !important; } .event-body a { - line-height: 1.75rem; } + line-height: 1.75rem; + text-decoration: underline; } .event-body .align-text-right { text-align: right; } -.event-body .detail-header { - font-size: 16px; - font-weight: 500; - color: #cacaca; } - -.event-body .detail-content { - font-size: 22px; - line-height: 2.5rem; } - .event-body .detail-link { font-weight: 500; color: #1d362c; } diff --git a/dist/templates/event.html b/dist/templates/event.html index c9d964b..5878f4e 100644 --- a/dist/templates/event.html +++ b/dist/templates/event.html @@ -1 +1 @@ -New Event
{{club.name}}

{{name}}

{{subtitle}}

LOCATION

{{location}}

{{street}}

View On Map

DATE & TIME

{{date}}

{{time}}

Add To Calendar
{{cta}}

DESCRIPTON

{{{content}}}

 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file +New Event
{{club.name}}

{{name}}

{{subtitle}}

LOCATION

{{location}}

{{street}}

View On Map
DATE & TIME

{{date}}

{{time}}

Add To Calendar
{{cta}}
DESCRIPTION

{{{content}}}

 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file diff --git a/dist/templates/generic.html b/dist/templates/generic.html index 24f50ef..7c2ce87 100644 --- a/dist/templates/generic.html +++ b/dist/templates/generic.html @@ -1 +1 @@ -My Basic Email Template Subject
{{club.name}}
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file +My Basic Email Template Subject
{{club.name}}
{{{content}}}
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file diff --git a/dist/templates/index.html b/dist/templates/index.html index 3409fc3..08470bf 100644 --- a/dist/templates/index.html +++ b/dist/templates/index.html @@ -1 +1 @@ -My Email Templates
 
 

Hi there!

Thanks for downloading Foundation for Emails! Your days of coding up painful HTML emails are officially over. You’ll soon be cranking out some slick, responsive emails in no time! To help get you up and running, we've put together 11 templates for the most common email use cases including newsletters, transactional emails, and marketing blasts. Feel free to customize them to your hearts content.

 
Event TemplatePost TemplateConfirmation TemplateGeneric Template
 

Happy Coding,

The Foundation Team

 
 
Keep on keepin' on. <3 ZURB
 
                                                           
\ No newline at end of file +My Email Templates
 
 

Hi there!

Thanks for downloading Foundation for Emails! Your days of coding up painful HTML emails are officially over. You’ll soon be cranking out some slick, responsive emails in no time! To help get you up and running, we've put together 11 templates for the most common email use cases including newsletters, transactional emails, and marketing blasts. Feel free to customize them to your hearts content.

 
Event TemplatePost TemplateConfirmation TemplateGeneric Template
 

Happy Coding,

The Foundation Team

 
 
Keep on keepin' on. <3 ZURB
 
                                                           
\ No newline at end of file diff --git a/dist/templates/post.html b/dist/templates/post.html index b3cf514..1e39552 100644 --- a/dist/templates/post.html +++ b/dist/templates/post.html @@ -1 +1 @@ -My Basic Email Template Subject
{{club.name}}

{{name}}

{{{content}}}
{{cta}}
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file +My Basic Email Template Subject
{{club.name}}

{{name}}

{{{content}}}
{{cta}}
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file diff --git a/dist/transform/transform.js b/dist/transform/transform.js index abfea14..b8de139 100644 --- a/dist/transform/transform.js +++ b/dist/transform/transform.js @@ -11,7 +11,7 @@ exports.BuildGenericContent = (content, club) => { }; exports.BuildEventContent = (event, club, link) => { const date = new Date(event.start); - var dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + var dateOptions = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' }; var timeOptions = { hour: 'numeric', minute: 'numeric' }; const richContent = { name: event.name, diff --git a/package-lock.json b/package-lock.json index 07ee039..8393169 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5818,10 +5818,22 @@ "vinyl-fs": "^3.0.0" }, "dependencies": { + "findup-sync": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz", + "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==", + "dev": true, + "requires": { + "detect-file": "^1.0.0", + "is-glob": "^4.0.0", + "micromatch": "^3.0.4", + "resolve-dir": "^1.0.1" + } + }, "gulp-cli": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.0.1.tgz", - "integrity": "sha512-RxujJJdN8/O6IW2nPugl7YazhmrIEjmiVfPKrWt68r71UCaLKS71Hp0gpKT+F6qOUFtr7KqtifDKaAJPRVvMYQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.1.0.tgz", + "integrity": "sha512-txzgdFVlEPShBZus6JJyGyKJoBVDq6Do0ZQgIgx5RAsmhNVTDjymmOxpQvo3c20m66FldilS68ZXj2Q9w5dKbA==", "dev": true, "requires": { "ansi-colors": "^1.0.1", @@ -5834,7 +5846,7 @@ "gulplog": "^1.0.0", "interpret": "^1.1.0", "isobject": "^3.0.1", - "liftoff": "^2.5.0", + "liftoff": "^3.1.0", "matchdep": "^2.0.0", "mute-stdout": "^1.0.0", "pretty-hrtime": "^1.0.0", @@ -5844,6 +5856,43 @@ "yargs": "^7.1.0" } }, + "liftoff": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-3.1.0.tgz", + "integrity": "sha512-DlIPlJUkCV0Ips2zf2pJP0unEoT1kwYhiiPUGF3s/jtxTCjziNLoiVVh+jqWOWeFi6mmwQ5fNxvAUyPad4Dfog==", + "dev": true, + "requires": { + "extend": "^3.0.0", + "findup-sync": "^3.0.0", + "fined": "^1.0.1", + "flagged-respawn": "^1.0.0", + "is-plain-object": "^2.0.4", + "object.map": "^1.0.0", + "rechoir": "^0.6.2", + "resolve": "^1.1.7" + } + }, + "micromatch": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", + "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", + "dev": true, + "requires": { + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" + } + }, "yargs": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", diff --git a/src/templates/assets/scss/_settings.scss b/src/templates/assets/scss/_settings.scss index 2a4d7e4..074162d 100644 --- a/src/templates/assets/scss/_settings.scss +++ b/src/templates/assets/scss/_settings.scss @@ -33,7 +33,7 @@ $dark-gray: #8a8a8a; $black: #495057; $white: #fefefe; $pre-color: #ff6908; -$global-width: 580px; +$global-width: 540px; $global-width-small: 95%; $global-gutter: 16px; $body-background: $light-gray; diff --git a/src/templates/assets/scss/template/_event.scss b/src/templates/assets/scss/template/_event.scss index fb2ab71..c4121eb 100644 --- a/src/templates/assets/scss/template/_event.scss +++ b/src/templates/assets/scss/template/_event.scss @@ -7,24 +7,14 @@ } a { - line-height: 1.75rem; + line-height: 1.75rem; + text-decoration: underline; } .align-text-right { text-align: right; } - .detail-header { - font-size: 16px; - font-weight: 500; - color: $medium-gray; - } - - .detail-content { - font-size: 22px; - line-height: 2.5rem; - } - .detail-link { font-weight: 500; color: $primary-color; diff --git a/src/templates/assets/scss/template/_footer.scss b/src/templates/assets/scss/template/_footer.scss index 0a2a330..e872d7a 100644 --- a/src/templates/assets/scss/template/_footer.scss +++ b/src/templates/assets/scss/template/_footer.scss @@ -4,7 +4,7 @@ p, a { color: #AEBDC4; - font-size: 12px; + font-size: 12px !important; font-weight: 500; } diff --git a/src/templates/assets/scss/template/_template.scss b/src/templates/assets/scss/template/_template.scss index 195c182..078f14a 100644 --- a/src/templates/assets/scss/template/_template.scss +++ b/src/templates/assets/scss/template/_template.scss @@ -8,9 +8,9 @@ html, background: white !important; } -.clubhub-email-body { - @media screen and (max-width: 800px) { - width: 100vw !important; +@media screen and (max-width: 596px) { + u ~ div { + min-width: 100vw !important; } } @@ -35,12 +35,30 @@ ul { h1 { font-weight: 700; - font-size: 32px; + font-size: 24px; + + @media screen and (min-width:596px) { + font-size: 32px !important; + } +} + +h6 { + font-weight: 500; + color: $medium-gray; + font-size: 14px; + + @media screen and (min-width:800px) { + font-size: 18px !important; + } } p { - font-size: 18px; word-break: normal; + font-size: 16px; + + @media screen and (min-width:596px) { + font-size: 18px !important; + } } .light-text{ @@ -80,11 +98,15 @@ img { } .image-container { - height: 300px; + height: 240px; min-width: 100%; overflow: hidden; background-color: $light-gray; vertical-align: middle; + + @media only screen and (min-width:596px) { + height: 320px !important; + } } diff --git a/src/templates/data-prod/content.json b/src/templates/data-prod/generic.json similarity index 100% rename from src/templates/data-prod/content.json rename to src/templates/data-prod/generic.json diff --git a/src/templates/layouts/default.html b/src/templates/layouts/default.html index 5e79dc8..a11ded1 100644 --- a/src/templates/layouts/default.html +++ b/src/templates/layouts/default.html @@ -16,7 +16,7 @@ {{subject}} - + {{description}} diff --git a/src/templates/pages/event.html b/src/templates/pages/event.html index 4e17cb3..374450f 100644 --- a/src/templates/pages/event.html +++ b/src/templates/pages/event.html @@ -32,37 +32,33 @@

{{ event.name }}

- - - - - -
-

LOCATION

-

{{event.location}}

-

{{event.street}}

- View On Map -
- - -
-

DATE & TIME

-

{{event.date}}

-

{{event.time}}

- Add To Calendar -
- - - + + +
+
LOCATION
+

{{event.location}}

+

{{event.street}}

+ View On Map +
+ + +
+
DATE & TIME
+

{{event.date}}

+

{{event.time}}

+ Add To Calendar +
+ +
- +
@@ -71,7 +67,7 @@

{{ event.name }}

-

DESCRIPTON

+
DESCRIPTION

{{{event.content}}}

diff --git a/src/transform/transform.ts b/src/transform/transform.ts index ea34ce6..99fb420 100644 --- a/src/transform/transform.ts +++ b/src/transform/transform.ts @@ -26,7 +26,7 @@ export const BuildGenericContent= (content: string, club: core.Club.Model): Rich */ export const BuildEventContent = (event: core.Event.Model, club: core.Club.Model, link: string): EventInfo => { const date = new Date(event.start) - var dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + var dateOptions = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' }; var timeOptions = { hour: 'numeric', minute: 'numeric' } const richContent: EventInfo = { name: event.name, From f0cf8bc4ab540093ea4b79a8b1686a4fd54e0a77 Mon Sep 17 00:00:00 2001 From: Kevin Coleman Date: Mon, 1 Apr 2019 15:14:41 -0700 Subject: [PATCH 2/3] Bumping core --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8393169..5cc4107 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2099,8 +2099,8 @@ } }, "club-hub-core": { - "version": "git+https://git@github.com/meshhq/club-hub-core.git#7be51211318df24a0f92ca085603c3ad7626ddc2", - "from": "git+https://git@github.com/meshhq/club-hub-core.git#0.0.45", + "version": "git+https://git@github.com/meshhq/club-hub-core.git#da6a52da51fc1d746ae3173a33264d2b6a63ab95", + "from": "git+https://git@github.com/meshhq/club-hub-core.git#0.0.46", "requires": { "axios": "^0.18.0" }, diff --git a/package.json b/package.json index 2b0edb6..8946690 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "index.js" ], "dependencies": { - "club-hub-core": "https://git@github.com/meshhq/club-hub-core.git#0.0.45", + "club-hub-core": "https://git@github.com/meshhq/club-hub-core.git#0.0.46", "feather-icons": "^4.17.0", "handlebars": "^4.1.0", "jsdom": "^14.0.0", From 7c70df1ba14a310db4ea3e301f170014f4cdf4a6 Mon Sep 17 00:00:00 2001 From: Kevin Coleman Date: Mon, 1 Apr 2019 15:17:01 -0700 Subject: [PATCH 3/3] Updating --- dist/templates/confirmation.html | 2 +- dist/templates/css/app.css | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/dist/templates/confirmation.html b/dist/templates/confirmation.html index 4b15511..e17c874 100644 --- a/dist/templates/confirmation.html +++ b/dist/templates/confirmation.html @@ -1 +1 @@ -My Basic Email Template Subject
 

🏌

{{title}}

 

{{subtitle}}

 

{{info}}

View Reservation
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file +My Basic Email Template Subject
 

🏌

{{title}}

 

{{subtitle}}

 

{{info}}

View Reservation
 
 

We send Club news and special offers to members who have opted into our mailing list.

Unsubscribe
                                                           
\ No newline at end of file diff --git a/dist/templates/css/app.css b/dist/templates/css/app.css index c850314..153ad19 100644 --- a/dist/templates/css/app.css +++ b/dist/templates/css/app.css @@ -248,7 +248,10 @@ table.button:active table tr td a, table.button table tr td a:visited, table.button.small:hover table tr td a, table.button.small:active table tr td a, -table.button.small table tr td a:visited { +table.button.small table tr td a:visited, +table.button.large:hover table tr td a, +table.button.large:active table tr td a, +table.button.large table tr td a:visited { color: #fefefe; } table.button.small table td,