sl-BaseWithHeaderEmailLayout.coffee 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. _ = require("underscore")
  2. settings = require "settings-sharelatex"
  3. module.exports = _.template """
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="Margin: 0; background: #f6f6f6 !important; margin: 0; min-height: 100%; padding: 0;">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9. <meta name="viewport" content="width=device-width">
  10. <style>.avoid-auto-linking a,
  11. .avoid-auto-linking a[href] {
  12. color: #a93529 !important;
  13. text-decoration: none !important;
  14. -moz-hyphens: none;
  15. -ms-hyphens: none;
  16. -webkit-hyphens: none;
  17. hyphens: none; }
  18. .avoid-auto-linking a:visited,
  19. .avoid-auto-linking a[href]:visited {
  20. color: #a93529; }
  21. .avoid-auto-linking a:hover,
  22. .avoid-auto-linking a[href]:hover {
  23. color: #80281f; }
  24. .avoid-auto-linking a:active,
  25. .avoid-auto-linking a[href]:active {
  26. color: #80281f; }
  27. </style>
  28. <style>@media only screen {
  29. html {
  30. min-height: 100%;
  31. background: #f6f6f6;
  32. }
  33. }
  34. @media only screen and (max-width: 596px) {
  35. .small-float-center {
  36. margin: 0 auto !important;
  37. float: none !important;
  38. text-align: center !important;
  39. }
  40. .small-text-center {
  41. text-align: center !important;
  42. }
  43. .small-text-left {
  44. text-align: left !important;
  45. }
  46. .small-text-right {
  47. text-align: right !important;
  48. }
  49. }
  50. @media only screen and (max-width: 596px) {
  51. .hide-for-large {
  52. display: block !important;
  53. width: auto !important;
  54. overflow: visible !important;
  55. max-height: none !important;
  56. font-size: inherit !important;
  57. line-height: inherit !important;
  58. }
  59. }
  60. @media only screen and (max-width: 596px) {
  61. table.body table.container .hide-for-large,
  62. table.body table.container .row.hide-for-large {
  63. display: table !important;
  64. width: 100% !important;
  65. }
  66. }
  67. @media only screen and (max-width: 596px) {
  68. table.body table.container .callout-inner.hide-for-large {
  69. display: table-cell !important;
  70. width: 100% !important;
  71. }
  72. }
  73. @media only screen and (max-width: 596px) {
  74. table.body table.container .show-for-large {
  75. display: none !important;
  76. width: 0;
  77. mso-hide: all;
  78. overflow: hidden;
  79. }
  80. }
  81. @media only screen and (max-width: 596px) {
  82. table.body img {
  83. width: auto;
  84. height: auto;
  85. }
  86. table.body center {
  87. min-width: 0 !important;
  88. }
  89. table.body .container {
  90. width: 95% !important;
  91. }
  92. table.body .columns,
  93. table.body .column {
  94. height: auto !important;
  95. -moz-box-sizing: border-box;
  96. -webkit-box-sizing: border-box;
  97. box-sizing: border-box;
  98. padding-left: 16px !important;
  99. padding-right: 16px !important;
  100. }
  101. table.body .columns .column,
  102. table.body .columns .columns,
  103. table.body .column .column,
  104. table.body .column .columns {
  105. padding-left: 0 !important;
  106. padding-right: 0 !important;
  107. }
  108. table.body .collapse .columns,
  109. table.body .collapse .column {
  110. padding-left: 0 !important;
  111. padding-right: 0 !important;
  112. }
  113. td.small-1,
  114. th.small-1 {
  115. display: inline-block !important;
  116. width: 8.33333% !important;
  117. }
  118. td.small-2,
  119. th.small-2 {
  120. display: inline-block !important;
  121. width: 16.66667% !important;
  122. }
  123. td.small-3,
  124. th.small-3 {
  125. display: inline-block !important;
  126. width: 25% !important;
  127. }
  128. td.small-4,
  129. th.small-4 {
  130. display: inline-block !important;
  131. width: 33.33333% !important;
  132. }
  133. td.small-5,
  134. th.small-5 {
  135. display: inline-block !important;
  136. width: 41.66667% !important;
  137. }
  138. td.small-6,
  139. th.small-6 {
  140. display: inline-block !important;
  141. width: 50% !important;
  142. }
  143. td.small-7,
  144. th.small-7 {
  145. display: inline-block !important;
  146. width: 58.33333% !important;
  147. }
  148. td.small-8,
  149. th.small-8 {
  150. display: inline-block !important;
  151. width: 66.66667% !important;
  152. }
  153. td.small-9,
  154. th.small-9 {
  155. display: inline-block !important;
  156. width: 75% !important;
  157. }
  158. td.small-10,
  159. th.small-10 {
  160. display: inline-block !important;
  161. width: 83.33333% !important;
  162. }
  163. td.small-11,
  164. th.small-11 {
  165. display: inline-block !important;
  166. width: 91.66667% !important;
  167. }
  168. td.small-12,
  169. th.small-12 {
  170. display: inline-block !important;
  171. width: 100% !important;
  172. }
  173. .columns td.small-12,
  174. .column td.small-12,
  175. .columns th.small-12,
  176. .column th.small-12 {
  177. display: block !important;
  178. width: 100% !important;
  179. }
  180. table.body td.small-offset-1,
  181. table.body th.small-offset-1 {
  182. margin-left: 8.33333% !important;
  183. Margin-left: 8.33333% !important;
  184. }
  185. table.body td.small-offset-2,
  186. table.body th.small-offset-2 {
  187. margin-left: 16.66667% !important;
  188. Margin-left: 16.66667% !important;
  189. }
  190. table.body td.small-offset-3,
  191. table.body th.small-offset-3 {
  192. margin-left: 25% !important;
  193. Margin-left: 25% !important;
  194. }
  195. table.body td.small-offset-4,
  196. table.body th.small-offset-4 {
  197. margin-left: 33.33333% !important;
  198. Margin-left: 33.33333% !important;
  199. }
  200. table.body td.small-offset-5,
  201. table.body th.small-offset-5 {
  202. margin-left: 41.66667% !important;
  203. Margin-left: 41.66667% !important;
  204. }
  205. table.body td.small-offset-6,
  206. table.body th.small-offset-6 {
  207. margin-left: 50% !important;
  208. Margin-left: 50% !important;
  209. }
  210. table.body td.small-offset-7,
  211. table.body th.small-offset-7 {
  212. margin-left: 58.33333% !important;
  213. Margin-left: 58.33333% !important;
  214. }
  215. table.body td.small-offset-8,
  216. table.body th.small-offset-8 {
  217. margin-left: 66.66667% !important;
  218. Margin-left: 66.66667% !important;
  219. }
  220. table.body td.small-offset-9,
  221. table.body th.small-offset-9 {
  222. margin-left: 75% !important;
  223. Margin-left: 75% !important;
  224. }
  225. table.body td.small-offset-10,
  226. table.body th.small-offset-10 {
  227. margin-left: 83.33333% !important;
  228. Margin-left: 83.33333% !important;
  229. }
  230. table.body td.small-offset-11,
  231. table.body th.small-offset-11 {
  232. margin-left: 91.66667% !important;
  233. Margin-left: 91.66667% !important;
  234. }
  235. table.body table.columns td.expander,
  236. table.body table.columns th.expander {
  237. display: none !important;
  238. }
  239. table.body .right-text-pad,
  240. table.body .text-pad-right {
  241. padding-left: 10px !important;
  242. }
  243. table.body .left-text-pad,
  244. table.body .text-pad-left {
  245. padding-right: 10px !important;
  246. }
  247. table.menu {
  248. width: 100% !important;
  249. }
  250. table.menu td,
  251. table.menu th {
  252. width: auto !important;
  253. display: inline-block !important;
  254. }
  255. table.menu.vertical td,
  256. table.menu.vertical th,
  257. table.menu.small-vertical td,
  258. table.menu.small-vertical th {
  259. display: block !important;
  260. }
  261. table.menu[align="center"] {
  262. width: auto !important;
  263. }
  264. table.button.small-expand,
  265. table.button.small-expanded {
  266. width: 100% !important;
  267. }
  268. table.button.small-expand table,
  269. table.button.small-expanded table {
  270. width: 100%;
  271. }
  272. table.button.small-expand table a,
  273. table.button.small-expanded table a {
  274. text-align: center !important;
  275. width: 100% !important;
  276. padding-left: 0 !important;
  277. padding-right: 0 !important;
  278. }
  279. table.button.small-expand center,
  280. table.button.small-expanded center {
  281. min-width: 0;
  282. }
  283. }</style>
  284. </head>
  285. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F6F6F6" style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; Margin: 0; background: #f6f6f6 !important; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; min-height: 100%; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
  286. <!-- <span class="preheader"></span> -->
  287. <table class="body" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="Margin: 0; background: #f6f6f6 !important; border-collapse: collapse; border-spacing: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; height: 100%; line-height: 1.3; margin: 0; min-height: 100%; padding: 0; text-align: left; vertical-align: top; width: 100%;">
  288. <tr style="padding: 0; text-align: left; vertical-align: top;">
  289. <td class="body-cell" align="center" valign="top" bgcolor="#F6F6F6" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #f6f6f6 !important; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; padding-bottom: 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
  290. <center data-parsed="" style="min-width: 580px; width: 100%;">
  291. <table align="center" class="wrapper header float-center" style="Margin: 0 auto; background: #fefefe; border-bottom: solid 1px #cfcfcf; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
  292. <table align="center" class="container" style="Margin: 0 auto; background: transparent; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  293. <table class="row collapse" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;">
  294. <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; text-align: left; width: 588px;"><table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
  295. <h1 class="sl-logotype" style="Margin: 0; Margin-bottom: 0; color: #333333; font-family: Baskerville, 'Baskerville Old Face', Georgia, serif; font-size: 26px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 0; padding: 0; text-align: left; word-wrap: normal;">
  296. <span>S</span><span class="sl-logotype-small" style="font-size: 80%;">HARE</span><span>L</span><span class="sl-logotype-small" style="font-size: 80%;">A</span><span>T</span><span class="sl-logotype-small" style="font-size: 80%;">E</span><span>X</span>
  297. </h1>
  298. </th>
  299. <th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th></tr></table></th>
  300. </tr></tbody></table>
  301. </td></tr></tbody></table>
  302. </td></tr></table>
  303. <table class="spacer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  304. <table align="center" class="container main float-center" style="Margin: 0 auto; Margin-top: 10px; background: #fefefe; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; margin-top: 10px; padding: 0; text-align: center; vertical-align: top; width: 580px;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  305. <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  306. <%= body %>
  307. <table class="wrapper secondary" align="center" style="background: #f6f6f6; border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  308. <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="10px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: normal; hyphens: auto; line-height: 10px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  309. <p style="Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;"><small style="color: #7a7a7a; font-size: 80%;">
  310. #{ settings.appName} &bull; <a href="#{ settings.siteUrl }" style="Margin: 0; color: #a93529; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">#{ settings.siteUrl }</a>
  311. </small></p>
  312. </td></tr></table>
  313. </td></tr></tbody></table>
  314. </center>
  315. </td>
  316. </tr>
  317. </table>
  318. <!-- prevent Gmail on iOS font size manipulation -->
  319. <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  320. </body>
  321. </html>
  322. """