| @@ -9,6 +9,35 @@ | |||
| <body> | |||
| <div id="root"></div> | |||
| <div id="formatTipsTmpl" class="template"> | |||
| <div class="tip"> | |||
| <strong># Header 1</strong><br> | |||
| <strong>## Header 2</strong><br> | |||
| <strong>### Header 3, etc</strong><br> | |||
| </div> | |||
| <div class="tip"> | |||
| <strong></strong><br> | |||
| Image | |||
| <br><br> | |||
| <strong></strong><br> | |||
| Vertically fullscreened image, maintains aspect ratio | |||
| <br><br> | |||
| <strong></strong><br> | |||
| Fullscreened image, stretched | |||
| </div> | |||
| <div class="tip"> | |||
| <em>_italics_</em> | |||
| </div> | |||
| <div class="tip"> | |||
| <strong>**bold**</strong> | |||
| </div> | |||
| </div> | |||
| <script src="/polyfills.js"></script> | |||
| <script src="lib.js"></script> | |||
| <script src="view.js"></script> | |||
| @@ -1,3 +1,8 @@ | |||
| .template { | |||
| display: none; | |||
| } | |||
| #root { | |||
| width: 95%; | |||
| max-width: 1000px; | |||
| @@ -108,3 +113,39 @@ | |||
| #root.edit #preview { | |||
| height: 500px; | |||
| } | |||
| #root.edit #formatTips { | |||
| padding: 12px; | |||
| text-align: left; | |||
| border-bottom: 1px solid #ccc; | |||
| border-left: 1px solid #ccc; | |||
| position: absolute; | |||
| top: 0px; | |||
| bottom: 0px; | |||
| right: 0px; | |||
| max-width: 250px; | |||
| } | |||
| #root.edit #formatTips .tip { | |||
| padding-top: 12px; | |||
| padding-bottom: 12px; | |||
| border-top: 1px solid #ccc; | |||
| } | |||
| #root.edit #formatTips .tip:first-child { | |||
| border-top: none; | |||
| } | |||
| @media screen and (max-width: 1580px) { | |||
| #root.edit { | |||
| margin-left: 0px; | |||
| } | |||
| } | |||
| @media screen and (max-width: 1290px) { | |||
| #root.edit #formatTips { | |||
| display: none; | |||
| } | |||
| #root.edit { | |||
| margin-left: auto; | |||
| } | |||
| } | |||
| @@ -185,6 +185,11 @@ | |||
| }) | |||
| ]), | |||
| elem("div", { | |||
| id: "formatTips", | |||
| innerHTML: $$("#formatTipsTmpl").innerHTML | |||
| }), | |||
| fileListEl = elem("div", { id: "fileList" }), | |||
| elem("div", { id: "controls" }, [ | |||