Permalink
Browse files

feat: early beta of mobile CSS view

Plus add in opencollective in readme
  • Loading branch information...
1 parent 8a7ba30 commit ff905ad1e6b010663cd97fe390e26e3e8d8d8ca3 @remy remy committed Aug 1, 2016
Showing with 165 additions and 85 deletions.
  1. +9 −0 README.markdown
  2. +66 −0 emails/email-footer.html
  3. +17 −0 emails/email-header.html
  4. +3 −85 emails/welcome.html
  5. +2 −0 lib/features.js
  6. +64 −0 public/css/mobile.css
  7. +4 −0 views/index.html
View
@@ -80,3 +80,12 @@ End points are:
- `GET /api/:bin/:rev` - Retrieve the specific version of the bin with the specified ID and revision
- `POST /api/save` - Create a new bin, the body of the post should be URL encoded and contain `html`, `javascript` and `css` parameters
- `POST /api/:bin/save` - Create a new revision for the specified bin, the body of the post should be URL encoded and contain `html`, `javascript` and `css` parameters
+
+## Backers
+
+[Become a backer]((https://opencollective.com/jsbin#backer)) and show your support to our open source project.
+
+
+## Sponsors
+
+Does your company use JS Bin? Ask your manager or marketing team if your company would be interested in supporting our project. Support will allow the maintainers to dedicate more time for maintenance and new features for everyone. Also, your company's logo will show [on GitHub](https://github.com/jsbin/jsbin#readme) --who doesn't want a little extra exposure? [Here's the info](https://opencollective.com/jsbin#sponsor).
@@ -0,0 +1,66 @@
+</td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr style="vertical-align: top; padding: 0;">
+ <td class="container templateContainerPadding" align="center" valign="top" style="vertical-align: top; padding: 0 40px;">
+ <table id="footerContent" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 100%; border-top-style: solid; border-top-color: #ebeaef; color: #999999; font-size: 12px; background: #ffffff; margin: 0; padding: 0; border-width: 1px 0 0;">
+ <tr style="vertical-align: top; padding: 0;">
+ <td valign="top" style="vertical-align: top; text-align: left; padding: 0;" align="left">
+ <p style="margin: 20px 0;">
+ Your username: {{user.name}}<br>
+ </p>
+ </td>
+ <td width="30">&nbsp;</td>
+ <td valign="top" style="vertical-align: top; text-align: right; padding: 0;" align="right">
+ <p style="margin: 20px 0;">JS Bin Ltd.<br>Company No.&nbsp;8998555<br>Made in Brighton, UK</p>
+ </td>
+ </tr>
+ <tr>
+ <td valign="top" style="vertical-align: top; text-align: center; padding: 0;" align="center" colspan="3">
+ <a style="color: #00F;font-weight: bold;text-decoration: none;" href="https://jsbin.com/upgrade?utm_source=welcome-email&utm_medium=email&utm_campaign=welcome-email"><img src="https://static.jsbin.com/images/jsbin-knockout.png" alt="JS Bin" width="128" height="128" style="outline: none; text-decoration: none; border: 0;" /></a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </center>
+
+<style type="text/css">
+body {
+width: 100% !important;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+body {
+-webkit-text-size-adjust: none;
+}
+body {
+margin: 0; padding: 0;
+}
+img {
+border: 0; outline: none; text-decoration: none;
+}
+#backgroundTable {
+height: 100% !important; margin: 0; padding: 0; width: 100% !important;
+}
+#backgroundTable {
+color: #4c4c4c; background-color: #ffffff; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; font-size: 15px; line-height: 150%;
+}
+
+@media screen and (max-width: 600px) {
+ body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: none !important }
+ body { width: 100% !important; min-width: 100% !important }
+ .container { width: auto !important; padding: 0 10px !important;}
+}</style>
+</body>
+</html>
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
+ </head>
+ <body id="jsbinannouce" style="width: 100% !important; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
+ <center>
+ <table id="backgroundTable" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100% !important; width: 100% !important; color: #4c4c4c; font-size: 15px; line-height: 150%; background: #ffffff; margin: 0; padding: 0; border: 0;">
+ <tr style="vertical-align: top; padding: 0;">
+ <td align="center" valign="top" style="vertical-align: top; padding: 0;">
+ <table class="container" id="templateContainer" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 600px; color: #4c4c4c; font-size: 15px; line-height: 150%; background: #ffffff; margin: 0px 0; padding: 0; border: 0;">
+ <tr style="vertical-align: top; padding: 0;">
+ <td class="container templateContainerPadding" align="center" valign="top" style="vertical-align: top; padding: 0 40px;">
+ <table id="templateContent" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 100%; background: #ffffff; margin: 0; padding: 0; border: 0;">
+ <tr style="vertical-align: top; padding: 0;">
+ <td style="vertical-align: top; text-align: left; padding: 0;" align="left" valign="top">
View
@@ -1,28 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
- </head>
- <body id="jsbinannouce" style="width: 100% !important; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
- <center>
- <table id="backgroundTable" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100% !important; width: 100% !important; color: #4c4c4c; font-size: 15px; line-height: 150%; background: #ffffff; margin: 0; padding: 0; border: 0;">
- <tr style="vertical-align: top; padding: 0;">
- <td align="center" valign="top" style="vertical-align: top; padding: 0;">
- <table class="container" id="templateContainer" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 600px; color: #4c4c4c; font-size: 15px; line-height: 150%; background: #ffffff; margin: 0px 0; padding: 0; border: 0;">
- <tr style="vertical-align: top; padding: 0;">
- <td class="container templateContainerPadding" align="center" valign="top" style="vertical-align: top; padding: 0 40px;">
- <table id="templateContent" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 100%; background: #ffffff; margin: 0; padding: 0; border: 0;">
- <tr style="vertical-align: top; padding: 0;">
- <td style="vertical-align: top; text-align: left; padding: 0;" align="left" valign="top">
-
+{{>email-header}}
<!-- BODY -->
<p style="margin: 20px 0;">Welcome to JS Bin!</p>
<p style="margin: 20px 0;">Thanks for signing up. To get familiar with JS Bin, check out our <a style="text-decoration: underline;" href="https://jsbin.com/help?utm_medium=email">help</a> and follow <a style="text-decoration: underline;" href="https://twitter.com/js_bin">@js_bin</a> on Twitter.</p>
{{#if code}}
-<p style="margin: 20px 0;">As a special gift, I'm offering you 60 days free Pro – <span style="font-weight: bold">total saving of over&nbsp;$100(!)</span> when you subscribe to a yearly pro account with the special code: <a style="font-weight: bold;text-decoration: underline;" href="https://jsbin.com/upgrade?coupon={{code}}&amp;utm_source=welcome-email&amp;utm_medium=email&amp;utm_campaign=welcome-email-discount
+<p style="margin: 20px 0;">As an exclusive gift, I'm offering you a month of free Pro – <span style="font-weight: bold">total saving of over&nbsp;$100(!)</span> when you subscribe to a yearly pro account with the special code: <a style="font-weight: bold;text-decoration: underline;" href="https://jsbin.com/upgrade?coupon={{code}}&amp;utm_source=welcome-email&amp;utm_medium=email&amp;utm_campaign=welcome-email-discount
">{{code}}</a> (valid for a month from today).</p>
{{else}}
<p style="margin: 20px 0;">If you want to power-up your JS Bin usage, you can <a href="https://jsbin.com/upgrade?coupon={{code}}&amp;utm_source=welcome-email&amp;utm_medium=email&amp;utm_campaign=welcome-email">upgrade your account to Pro today</a>, and you'll have access to unlimited private bins, asset uploading, experimental features and more.</p>
@@ -32,69 +15,4 @@
<p style="margin: 20px 0;">– <a href="https://twitter.com/rem">Remy</a> (creator of JS Bin)</p>
<!-- /BODY -->
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr style="vertical-align: top; padding: 0;">
- <td class="container templateContainerPadding" align="center" valign="top" style="vertical-align: top; padding: 0 40px;">
- <table id="footerContent" style="border-spacing: 0; border-collapse: collapse; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; height: 100%; width: 100%; border-top-style: solid; border-top-color: #ebeaef; color: #999999; font-size: 12px; background: #ffffff; margin: 0; padding: 0; border-width: 1px 0 0;">
- <tr style="vertical-align: top; padding: 0;">
- <td valign="top" style="vertical-align: top; text-align: left; padding: 0;" align="left">
- <p style="margin: 20px 0;">
- Your username: {{user.name}}<br>
- </p>
- </td>
- <td width="30">&nbsp;</td>
- <td valign="top" style="vertical-align: top; text-align: right; padding: 0;" align="right">
- <p style="margin: 20px 0;">JS Bin Ltd.<br>Company No.&nbsp;8998555<br>Made in Brighton, UK</p>
- </td>
- </tr>
- <tr>
- <td valign="top" style="vertical-align: top; text-align: center; padding: 0;" align="center" colspan="3">
- <a style="color: #00F;font-weight: bold;text-decoration: none;" href="https://jsbin.com/upgrade?utm_source=welcome-email&utm_medium=email&utm_campaign=welcome-email"><img src="https://static.jsbin.com/images/jsbin-knockout.png" alt="JS Bin" width="128" height="128" style="outline: none; text-decoration: none; border: 0;" /></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </center>
-
-<style type="text/css">
-body {
-width: 100% !important;
-}
-.ReadMsgBody {
-width: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-body {
--webkit-text-size-adjust: none;
-}
-body {
-margin: 0; padding: 0;
-}
-img {
-border: 0; outline: none; text-decoration: none;
-}
-#backgroundTable {
-height: 100% !important; margin: 0; padding: 0; width: 100% !important;
-}
-#backgroundTable {
-color: #4c4c4c; background-color: #ffffff; font-family: proxima-nova, 'helvetica neue', helvetica, arial, geneva, sans-serif; font-size: 15px; line-height: 150%;
-}
-
-@media screen and (max-width: 600px) {
- body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: none !important }
- body { width: 100% !important; min-width: 100% !important }
- .container { width: auto !important; padding: 0 10px !important;}
-}</style>
-</body>
-</html>
+{{>email-footer}}
View
@@ -83,6 +83,8 @@ var flags = {
offline: alpha,
+ mobile: beta,
+
userNotifications: function () {
!!undefsafe(config, 'features.userNotifications');
},
View
@@ -0,0 +1,64 @@
+@media only screen and (max-width: 450px) {
+ html:before {
+ content: 'mobile';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: black;
+ color: white;
+ z-index: 1000;
+ }
+
+ a.toppanel-logo {
+ transform: translate(-86px, 120px) scale(0.35);
+ }
+
+ #control {
+ height: 44px;
+ }
+
+ #bin {
+ top: 44px;
+ }
+
+ #control .control {
+ border: 0;
+ }
+
+ #control .control > div {
+ display: none;
+ }
+
+ #control #panels {
+ display: block;
+ border: 0;
+ padding: 0;
+ padding-top: 0px;
+ right: 0;
+ width: auto;
+ position: absolute;
+ margin-right: 0;
+ }
+
+ #control #panels > a.button {
+ box-sizing: border-box;
+ border-radius: 0;
+ border-top: 0;
+ border-bottom: 0;
+ padding: 0 10px;
+ min-width: 50px;
+ line-height: 44px;
+ height: 44px;
+ border-right: 0;
+ border-left: 1px solid #ccc;
+ }
+
+ #control #panels > a.button:focus {
+ box-shadow: none;
+ }
+
+ .mobile .editbox textarea {
+ font-family: SourceCodeProRegular, Monaco, consolas, monospace;
+ }
+}
View
@@ -6,6 +6,10 @@
<link rel="alternate" type="application/json+oembed" href="{{root}}/oembed?url={{root}}{{request.url}}">
<link rel="icon" href="{{static}}/images/favicon.png">
<link rel="stylesheet" href="{{static}}/css/style.css{{cacheBust}}">
+ {{feature request "mobile"}}
+ <meta name="viewport" content="width=device-width">
+ <link rel="stylesheet" href="{{static}}/css/mobile.css{{cacheBust}}">
+ {{/feature}}
{{#if userCSS}}<style>{{{userCSS}}}</style>{{/if}}
<link rel="stylesheet" href="{{static}}/css/font.css{{cacheBust}}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

0 comments on commit ff905ad

Please sign in to comment.