beyond_canvas 0.10.0.pre → 0.11.0.pre

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fd36e8ee286be66d4bee8fcae14a2b1bbc7b1196c78ad74b422bc52bb6979ee0
4
- data.tar.gz: 5cdf4c4ff623a1a504bc323cf5cbd603c7b5286f1cf16ac144ad26db1a3ea35b
3
+ metadata.gz: b56d18ef18e7126a4905cf09023dc459eb5676980611c33153a8c2087cf4bb8b
4
+ data.tar.gz: eec1d0e477862015dc3c86e44e09caa0b17957dd48ed27a1aafb3e9dfc456fed
5
5
  SHA512:
6
- metadata.gz: e5b1967bcc9c9d9e5fb907c23e24332ad8f223755a982028afa3928b90d12eb6e5685a1abdc7cee7a1e6a6f8bd90aa51bc5fc5b57f3338405e2421790f33d6f0
7
- data.tar.gz: 9180fa6cab6bb646d4a95507906c7786edd6d5ef8eb3189cee42e7ec2d769158f43420fb6b3f5e925f836762d5bb680890f54f92a4c9163ec3d6718f77c7f792
6
+ metadata.gz: e01cb32b532adbcd00b58135f80afab03449470e9bb62bf62f716179b80f6ce80fe3d1a8fe7c28478f48e1ce9a597a3de2085cac9e0780b703d30003829132ad
7
+ data.tar.gz: '0046293b5e7d13a1f1e70a1696697b716cee79f73510b3f153703bacabe3c063804b8104432fd920898455d089e8a1381c82d8a0ae3331a81eb13eeb04d13f91'
@@ -3,6 +3,9 @@
3
3
  > :first-child
4
4
  margin-top: 0 !important
5
5
 
6
+ > :last-child
7
+ margin-bottom: 0
8
+
6
9
  > *:not(:last-child)
7
10
  margin-bottom: 16px
8
11
 
@@ -0,0 +1,5 @@
1
+ @import 'bourbon'
2
+
3
+ @import 'settings/variables'
4
+
5
+ @import 'components/markdown'
@@ -0,0 +1,23 @@
1
+ <% locals = locals || {} %>
2
+
3
+ <!-- Button : BEGIN -->
4
+ <% if locals&.dig(:url) && locals&.dig(:text) %>
5
+ <tr>
6
+ <td style="background-color: #ffffff;">
7
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
8
+ <tr>
9
+ <td style="padding: 0 20px 20px;">
10
+ <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
11
+ <tr>
12
+ <td class="button-td button-td-primary" style="border-radius: 4px; background: #f6f6f6;">
13
+ <a class="button-a button-a-primary" href="<%= locals[:url] %>" style="font-family: sans-serif; font-size: 15px; padding: 6px 12px 7px; border-radius: 3px; border-width: 1px; border-style: solid; cursor: pointer; font-weight: 700; line-height: 1; outline: none; background-color: #4eb7a8; transition: 0.125s ease-in; color: white; border-color: #4eb7a8; border-bottom-width: 2px; border-bottom-color: #3d9589;"><%= locals[:text] %></a>
14
+ </td>
15
+ </tr>
16
+ </table>
17
+ </td>
18
+ </tr>
19
+ </table>
20
+ </td>
21
+ </tr>
22
+ <% end %>
23
+ <!-- Button : END -->
@@ -0,0 +1,13 @@
1
+ <!-- 1 Column Text + Button : BEGIN -->
2
+ <tr>
3
+ <td style="background-color: #ffffff;">
4
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
5
+ <tr>
6
+ <td class="markdown" style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
7
+ <%= yield %>
8
+ </td>
9
+ </tr>
10
+ </table>
11
+ </td>
12
+ </tr>
13
+ <!-- 1 Column Text + Button : END -->
@@ -0,0 +1,282 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
3
+ <head>
4
+ <!DOCTYPE html>
5
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
6
+ <head>
7
+ <meta charset="utf-8"> <!-- utf-8 works for most cases -->
8
+ <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
9
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
10
+ <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
11
+ <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"> <!-- Tell iOS not to automatically link certain text strings. -->
12
+ <meta name="color-scheme" content="light">
13
+ <meta name="supported-color-schemes" content="light">
14
+ <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
15
+
16
+ <%= stylesheet_link_tag "beyond_canvas/mailer" %>
17
+
18
+ <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
19
+ <!--[if gte mso 9]>
20
+ <xml>
21
+ <o:OfficeDocumentSettings>
22
+ <o:AllowPNG/>
23
+ <o:PixelsPerInch>96</o:PixelsPerInch>
24
+ </o:OfficeDocumentSettings>
25
+ </xml>
26
+ <![endif]-->
27
+
28
+ <!-- Web Font / @font-face : BEGIN -->
29
+ <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
30
+
31
+ <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
32
+ <!--[if mso]>
33
+ <style>
34
+ * {
35
+ font-family: sans-serif !important;
36
+ }
37
+ </style>
38
+ <![endif]-->
39
+
40
+ <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
41
+ <!--[if !mso]><!-->
42
+ <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
43
+ <!--<![endif]-->
44
+
45
+ <!-- Web Font / @font-face : END -->
46
+
47
+ <!-- CSS Reset : BEGIN -->
48
+ <style>
49
+
50
+ /* What it does: Tells the email client that only light styles are provided but the client can transform them to dark. A duplicate of meta color-scheme meta tag above. */
51
+ :root {
52
+ color-scheme: light;
53
+ supported-color-schemes: light;
54
+ }
55
+
56
+ /* What it does: Remove spaces around the email design added by some email clients. */
57
+ /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
58
+ html,
59
+ body {
60
+ margin: 0 auto !important;
61
+ padding: 0 !important;
62
+ height: 100% !important;
63
+ width: 100% !important;
64
+ }
65
+
66
+ /* What it does: Stops email clients resizing small text. */
67
+ * {
68
+ -ms-text-size-adjust: 100%;
69
+ -webkit-text-size-adjust: 100%;
70
+ }
71
+
72
+ /* What it does: Centers email on Android 4.4 */
73
+ div[style*="margin: 16px 0"] {
74
+ margin: 0 !important;
75
+ }
76
+ /* What it does: forces Samsung Android mail clients to use the entire viewport */
77
+ #MessageViewBody, #MessageWebViewDiv{
78
+ width: 100% !important;
79
+ }
80
+
81
+ /* What it does: Stops Outlook from adding extra spacing to tables. */
82
+ table,
83
+ td {
84
+ mso-table-lspace: 0pt !important;
85
+ mso-table-rspace: 0pt !important;
86
+ }
87
+
88
+ /* What it does: Fixes webkit padding issue. */
89
+ table {
90
+ border-spacing: 0 !important;
91
+ border-collapse: collapse !important;
92
+ table-layout: fixed !important;
93
+ margin: 0 auto !important;
94
+ }
95
+
96
+ /* What it does: Uses a better rendering method when resizing images in IE. */
97
+ img {
98
+ -ms-interpolation-mode:bicubic;
99
+ }
100
+
101
+ /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
102
+ a {
103
+ text-decoration: none;
104
+ }
105
+
106
+ /* What it does: A work-around for email clients meddling in triggered links. */
107
+ a[x-apple-data-detectors], /* iOS */
108
+ .unstyle-auto-detected-links a,
109
+ .aBn {
110
+ border-bottom: 0 !important;
111
+ cursor: default !important;
112
+ color: inherit !important;
113
+ text-decoration: none !important;
114
+ font-size: inherit !important;
115
+ font-family: inherit !important;
116
+ font-weight: inherit !important;
117
+ line-height: inherit !important;
118
+ }
119
+
120
+ /* What it does: Prevents Gmail from changing the text color in conversation threads. */
121
+ .im {
122
+ color: inherit !important;
123
+ }
124
+
125
+ /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
126
+ .a6S {
127
+ display: none !important;
128
+ opacity: 0.01 !important;
129
+ }
130
+ /* If the above doesn't work, add a .g-img class to any image in question. */
131
+ img.g-img + div {
132
+ display: none !important;
133
+ }
134
+
135
+ /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
136
+ /* Create one of these media queries for each additional viewport size you'd like to fix */
137
+
138
+ /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
139
+ @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
140
+ u ~ div .email-container {
141
+ min-width: 320px !important;
142
+ }
143
+ }
144
+ /* iPhone 6, 6S, 7, 8, and X */
145
+ @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
146
+ u ~ div .email-container {
147
+ min-width: 375px !important;
148
+ }
149
+ }
150
+ /* iPhone 6+, 7+, and 8+ */
151
+ @media only screen and (min-device-width: 414px) {
152
+ u ~ div .email-container {
153
+ min-width: 414px !important;
154
+ }
155
+ }
156
+
157
+ </style>
158
+ <!-- CSS Reset : END -->
159
+
160
+ <!-- Progressive Enhancements : BEGIN -->
161
+ <style>
162
+
163
+ /* What it does: Hover styles for buttons */
164
+ .button-td,
165
+ .button-a {
166
+ transition: all 100ms ease-in;
167
+ }
168
+ .button-td-primary:hover,
169
+ .button-a-primary:hover {
170
+ background: #3d9589 !important;
171
+ border-color: #3d9589 !important;
172
+ }
173
+
174
+ /* Media Queries */
175
+ @media screen and (max-width: 480px) {
176
+
177
+ /* What it does: Forces table cells into full-width rows. */
178
+ .stack-column,
179
+ .stack-column-center {
180
+ display: block !important;
181
+ width: 100% !important;
182
+ max-width: 100% !important;
183
+ direction: ltr !important;
184
+ }
185
+ /* And center justify these ones. */
186
+ .stack-column-center {
187
+ text-align: center !important;
188
+ }
189
+
190
+ /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
191
+ .center-on-narrow {
192
+ text-align: center !important;
193
+ display: block !important;
194
+ margin-left: auto !important;
195
+ margin-right: auto !important;
196
+ float: none !important;
197
+ }
198
+ table.center-on-narrow {
199
+ display: inline-block !important;
200
+ }
201
+
202
+ /* What it does: Adjust typography on small screens to improve readability */
203
+ .email-container p {
204
+ font-size: 17px !important;
205
+ }
206
+ }
207
+
208
+ </style>
209
+ <!-- Progressive Enhancements : END -->
210
+
211
+ </head>
212
+ <!--
213
+ The email background color (#e9e8dc) is defined in three places:
214
+ 1. body tag: for most email clients
215
+ 2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
216
+ 3. mso conditional: For Windows 10 Mail
217
+ -->
218
+ <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #e9e8dc;">
219
+ <center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #e9e8dc;">
220
+ <!--[if mso | IE]>
221
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #e9e8dc;">
222
+ <tr>
223
+ <td>
224
+ <![endif]-->
225
+
226
+ <!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
227
+ <!-- Preview Text Spacing Hack : BEGIN -->
228
+ <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
229
+ &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
230
+ </div>
231
+ <!-- Preview Text Spacing Hack : END -->
232
+
233
+ <!--
234
+ Set the email width. Defined in two places:
235
+ 1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
236
+ 2. MSO tags for Desktop Windows Outlook enforce a 680px width.
237
+ Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
238
+ -->
239
+ <div style="max-width: 680px; margin: 0 auto;" class="email-container">
240
+ <!--[if mso]>
241
+ <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="680">
242
+ <tr>
243
+ <td>
244
+ <![endif]-->
245
+
246
+ <!-- Email Body : BEGIN -->
247
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
248
+
249
+ <%= render 'beyond_canvas/mailer/header' %>
250
+
251
+ <!-- Email Content : BEGIN -->
252
+ <tr>
253
+ <td style="background-color: #ffffff; border-radius: 3px; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); overflow: hidden;">
254
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
255
+
256
+ <%= yield %>
257
+
258
+ </table>
259
+ </td>
260
+ </tr>
261
+ <!-- Email Content : END -->
262
+
263
+ </table>
264
+ <!-- Email Body : END -->
265
+
266
+ <%= render 'beyond_canvas/mailer/footer' %>
267
+
268
+ <!--[if mso]>
269
+ </td>
270
+ </tr>
271
+ </table>
272
+ <![endif]-->
273
+ </div>
274
+
275
+ <!--[if mso | IE]>
276
+ </td>
277
+ </tr>
278
+ </table>
279
+ <![endif]-->
280
+ </center>
281
+ </body>
282
+ </html>
@@ -1,4 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ Rails.application.config.assets.precompile += %w( beyond_canvas/mailer.css )
3
4
  Rails.application.config.assets.precompile += %w( beyond_canvas.css )
4
5
  Rails.application.config.assets.precompile += %w( beyond_canvas.js )
@@ -10,6 +10,10 @@ module BeyondCanvas
10
10
 
11
11
  ::ActionController::Base.helper BeyondCanvas::Engine.helpers
12
12
  end
13
+
14
+ ActiveSupport.on_load :action_mailer do
15
+ layout 'beyond_canvas/mailer'
16
+ end
13
17
  end
14
18
  end
15
19
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module BeyondCanvas
4
- VERSION = '0.10.0.pre'
4
+ VERSION = '0.11.0.pre'
5
5
  end
data/lib/beyond_canvas.rb CHANGED
@@ -8,6 +8,7 @@ require 'bourbon'
8
8
  require 'slim-rails'
9
9
  require 'inline_svg'
10
10
  require 'http/accept'
11
+ require 'premailer/rails'
11
12
 
12
13
  module BeyondCanvas
13
14
  class << self
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: beyond_canvas
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.10.0.pre
4
+ version: 0.11.0.pre
5
5
  platform: ruby
6
6
  authors:
7
7
  - Unai Abrisketa
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-03-17 00:00:00.000000000 Z
11
+ date: 2020-03-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bourbon
@@ -114,6 +114,20 @@ dependencies:
114
114
  - - "~>"
115
115
  - !ruby/object:Gem::Version
116
116
  version: '3.2'
117
+ - !ruby/object:Gem::Dependency
118
+ name: premailer-rails
119
+ requirement: !ruby/object:Gem::Requirement
120
+ requirements:
121
+ - - "~>"
122
+ - !ruby/object:Gem::Version
123
+ version: '1.11'
124
+ type: :runtime
125
+ prerelease: false
126
+ version_requirements: !ruby/object:Gem::Requirement
127
+ requirements:
128
+ - - "~>"
129
+ - !ruby/object:Gem::Version
130
+ version: '1.11'
117
131
  - !ruby/object:Gem::Dependency
118
132
  name: rubocop
119
133
  requirement: !ruby/object:Gem::Requirement
@@ -159,9 +173,10 @@ files:
159
173
  - app/assets/stylesheets/beyond_canvas/components/_markdown.sass
160
174
  - app/assets/stylesheets/beyond_canvas/components/_notices.sass
161
175
  - app/assets/stylesheets/beyond_canvas/components/_relative.sass
176
+ - app/assets/stylesheets/beyond_canvas/components/_spinner.sass
162
177
  - app/assets/stylesheets/beyond_canvas/components/_tables.sass
163
178
  - app/assets/stylesheets/beyond_canvas/components/_texts.sass
164
- - app/assets/stylesheets/beyond_canvas/components/spinner.sass
179
+ - app/assets/stylesheets/beyond_canvas/mailer.sass
165
180
  - app/assets/stylesheets/beyond_canvas/settings/_reset_css.sass
166
181
  - app/assets/stylesheets/beyond_canvas/settings/_typography.sass
167
182
  - app/assets/stylesheets/beyond_canvas/settings/_variables.sass
@@ -172,10 +187,13 @@ files:
172
187
  - app/helpers/beyond_canvas/application_helper.rb
173
188
  - app/helpers/beyond_canvas/locale_switch_helper.rb
174
189
  - app/views/beyond_canvas/custom/_public_head.html.slim
190
+ - app/views/beyond_canvas/mailer/_button.html.erb
191
+ - app/views/beyond_canvas/mailer/_text.html.erb
175
192
  - app/views/beyond_canvas/shared/_flash.html.slim
176
193
  - app/views/beyond_canvas/shared/_head.html.slim
177
194
  - app/views/beyond_canvas/shared/_locale_switch.html.slim
178
195
  - app/views/beyond_canvas/shared/_logo.html.slim
196
+ - app/views/layouts/beyond_canvas/mailer.html.erb
179
197
  - app/views/layouts/beyond_canvas/public.html.slim
180
198
  - config/initializers/beyond_canvas/assets.rb
181
199
  - config/initializers/beyond_canvas/form_utils.rb