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 +4 -4
- data/app/assets/stylesheets/beyond_canvas/components/_markdown.sass +3 -0
- data/app/assets/stylesheets/beyond_canvas/components/{spinner.sass → _spinner.sass} +0 -0
- data/app/assets/stylesheets/beyond_canvas/mailer.sass +5 -0
- data/app/views/beyond_canvas/mailer/_button.html.erb +23 -0
- data/app/views/beyond_canvas/mailer/_text.html.erb +13 -0
- data/app/views/layouts/beyond_canvas/mailer.html.erb +282 -0
- data/config/initializers/beyond_canvas/assets.rb +1 -0
- data/lib/beyond_canvas/engine.rb +4 -0
- data/lib/beyond_canvas/version.rb +1 -1
- data/lib/beyond_canvas.rb +1 -0
- metadata +21 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b56d18ef18e7126a4905cf09023dc459eb5676980611c33153a8c2087cf4bb8b
|
4
|
+
data.tar.gz: eec1d0e477862015dc3c86e44e09caa0b17957dd48ed27a1aafb3e9dfc456fed
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e01cb32b532adbcd00b58135f80afab03449470e9bb62bf62f716179b80f6ce80fe3d1a8fe7c28478f48e1ce9a597a3de2085cac9e0780b703d30003829132ad
|
7
|
+
data.tar.gz: '0046293b5e7d13a1f1e70a1696697b716cee79f73510b3f153703bacabe3c063804b8104432fd920898455d089e8a1381c82d8a0ae3331a81eb13eeb04d13f91'
|
File without changes
|
@@ -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
|
+
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
|
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>
|
data/lib/beyond_canvas/engine.rb
CHANGED
data/lib/beyond_canvas.rb
CHANGED
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.
|
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-
|
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/
|
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
|