diff --git a/eosweb/core/main.py b/eosweb/core/main.py index 6ac9a62..5da1b46 100644 --- a/eosweb/core/main.py +++ b/eosweb/core/main.py @@ -387,6 +387,12 @@ def email_authenticate(): return flask.redirect(flask.url_for('login_complete')) +@app.route('/email') +def tmp(): + import sass + css = sass.compile(string=flask.render_template('email/base.scss')) + return flask.render_template('email/base.html', title='Hello World', text='

Dear voter,

You are registered to vote in the election Election Name.

', css=css) + # === Apps === for app_name in app.config['APPS']: diff --git a/eosweb/core/templates/email/base.html b/eosweb/core/templates/email/base.html new file mode 100644 index 0000000..a8dcf4b --- /dev/null +++ b/eosweb/core/templates/email/base.html @@ -0,0 +1,76 @@ +{# + Eos - Verifiable elections + Copyright © 2017 RunasSudo (Yingtong Li) + + This file adapted from https://github.com/leemunroe/responsive-html-email-template, licensed under the MIT licence. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +#} + + + + + + + {{ title }} + + + + + + + + + +
  +
+ + + + + + + + + + +
+ + + + +
+ {{ text|safe }} +
+
+ + +
+ + + + +
+ Eos Voting for {{ eosweb.app.config['ORG_NAME'] }} +
+
+ + + +
+ 		 
+ + diff --git a/eosweb/core/templates/email/base.scss b/eosweb/core/templates/email/base.scss new file mode 100644 index 0000000..310835c --- /dev/null +++ b/eosweb/core/templates/email/base.scss @@ -0,0 +1,339 @@ +{# + Eos - Verifiable elections + Copyright © 2017 RunasSudo (Yingtong Li) + + This file adapted from https://github.com/leemunroe/responsive-html-email-template, licensed under the MIT licence. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +#} + +/* ------------------------------------- + GLOBAL RESETS +------------------------------------- */ + +img { + border: none; + -ms-interpolation-mode: bicubic; + max-width: 100%; +} + +body { + background-color: #f6f6f6; + font-family: sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + line-height: 1.4; + margin: 0; + padding: 0; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +table { + border-collapse: separate; + mso-table-lspace: 0pt; + mso-table-rspace: 0pt; + width: 100%; + + td { + font-family: sans-serif; + font-size: 14px; + vertical-align: top; + } +} + +/* ------------------------------------- + BODY & CONTAINER +------------------------------------- */ + +.body { + background-color: #f6f6f6; + width: 100%; +} + +/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ +.container { + display: block; + Margin: 0 auto !important; + /* makes it centered */ + max-width: 580px; + padding: 10px; + width: 580px; +} + +/* This should also be a block element, so that it will fill 100% of the .container */ +.content { + box-sizing: border-box; + display: block; + Margin: 0 auto; + max-width: 580px; + padding: 10px; +} + +/* ------------------------------------- + HEADER, FOOTER, MAIN +------------------------------------- */ + +.main { + background: #ffffff; + border-radius: 3px; + width: 100%; +} + +.wrapper { + box-sizing: border-box; + padding: 20px; +} + +.content-block { + padding-bottom: 10px; + padding-top: 10px; +} + +.footer { + clear: both; + Margin-top: 10px; + text-align: center; + width: 100%; +} + +.footer td, .footer p, .footer span, .footer a { + color: #999999; + font-size: 12px; + text-align: center; +} + +/* ------------------------------------- + TYPOGRAPHY +------------------------------------- */ + +h1, h2, h3, h4 { + color: #000000; + font-family: sans-serif; + font-weight: 400; + line-height: 1.4; + margin: 0; + Margin-bottom: 30px; +} + +h1 { + font-size: 35px; + font-weight: 300; + text-align: center; + text-transform: capitalize; +} + +p, ul, ol { + font-family: sans-serif; + font-size: 14px; + font-weight: normal; + margin: 0; + Margin-bottom: 15px; + + li { + list-style-position: inside; + margin-left: 5px; + } +} + +a { + color: #3498db; + text-decoration: underline; +} + +/* ------------------------------------- + BUTTONS +------------------------------------- */ + +.btn { + box-sizing: border-box; + width: 100%; + + & > tbody > tr > td { + padding-bottom: 15px; + } + + table { + width: auto; + + td { + background-color: #ffffff; + border-radius: 5px; + text-align: center; + } + } + + a { + background-color: #ffffff; + border: solid 1px #3498db; + border-radius: 5px; + box-sizing: border-box; + color: #3498db; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-weight: bold; + margin: 0; + padding: 12px 25px; + text-decoration: none; + text-transform: capitalize; + } +} + +.btn-primary { + table td { + background-color: #3498db; + } + + a { + background-color: #3498db; + border-color: #3498db; + color: #ffffff; + } +} + +/* ------------------------------------- + OTHER STYLES THAT MIGHT BE USEFUL +------------------------------------- */ + +.last { + margin-bottom: 0; +} +.first { + margin-top: 0; +} + +.align-center { + text-align: center; +} +.align-right { + text-align: right; +} +.align-left { + text-align: left; +} + +.clear { + clear: both; +} + +.mt0 { + margin-top: 0; +} +.mb0 { + margin-bottom: 0; +} + +.preheader { + color: transparent; + display: none; + height: 0; + max-height: 0; + max-width: 0; + opacity: 0; + overflow: hidden; + mso-hide: all; + visibility: hidden; + width: 0; +} + +.powered-by a { + text-decoration: none; +} + +hr { + border: 0; + border-bottom: 1px solid #f6f6f6; + Margin: 20px 0; +} + +/* ------------------------------------- + RESPONSIVE AND MOBILE FRIENDLY STYLES +------------------------------------- */ + +@media only screen and (max-width: 620px) { + table[class=body] { + h1 { + font-size: 28px !important; + margin-bottom: 10px !important; + } + + p, ul, ol, td, span, a { + font-size: 16px !important; + } + + .wrapper, .article { + padding: 10px !important; + } + + .content { + padding: 0 !important; + } + + .container { + padding: 0 !important; + width: 100% !important; + } + + .main { + border-left-width: 0 !important; + border-radius: 0 !important; + border-right-width: 0 !important; + } + + .btn { + table { + width: 100% !important; + } + + a { + width: 100% !important; + } + + .img-responsive { + height: auto !important; + max-width: 100% !important; + width: auto !important; + } + } + } +} + +/* ------------------------------------- + PRESERVE THESE STYLES IN THE HEAD +------------------------------------- */ + +@media all { + .ExternalClass { + width: 100%; + } + .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { + line-height: 100%; + } + .apple-link a { + color: inherit !important; + font-family: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + text-decoration: none !important; + } + .btn-primary table td:hover { + background-color: #34495e !important; + } + .btn-primary a:hover { + background-color: #34495e !important; + border-color: #34495e !important; + } +} diff --git a/requirements.txt b/requirements.txt index 1b14c28..29decd8 100644 --- a/requirements.txt +++ b/requirements.txt @@ -2,6 +2,7 @@ coverage==4.4.1 Flask==0.12.2 Flask-OAuthlib==0.9.4 gunicorn==19.7.1 +libsass==0.13.4 psycopg2==2.7.3.2 PyExecJS==1.4.1 pymongo==3.5.1