Browse Source

added formatting tips to edit view

master
mortie 7 years ago
parent
commit
ed64d80c3c
3 changed files with 75 additions and 0 deletions
  1. 29
    0
      web/admin/index.html
  2. 41
    0
      web/admin/style.css
  3. 5
    0
      web/admin/view.js

+ 29
- 0
web/admin/index.html View File

@@ -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>

+ 41
- 0
web/admin/style.css View File

@@ -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;
}
}

+ 5
- 0
web/admin/view.js View File

@@ -185,6 +185,11 @@
})
]),

elem("div", {
id: "formatTips",
innerHTML: $$("#formatTipsTmpl").innerHTML
}),

fileListEl = elem("div", { id: "fileList" }),

elem("div", { id: "controls" }, [

Loading…
Cancel
Save