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 e41d212..153ad19 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, @@ -242,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, @@ -250,6 +259,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 +287,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 +304,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 +322,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 +345,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 +356,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 +394,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 +436,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 +471,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..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" }, @@ -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/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", 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,