@@ -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>![](image.jpg)</strong><br> | |||
Image | |||
<br><br> | |||
<strong>![fullscreen](image.jpg)</strong><br> | |||
Vertically fullscreened image, maintains aspect ratio | |||
<br><br> | |||
<strong>![fullscreen stretch](image.jpg)</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" }, [ |