data, logs, logs-content, story, story-content: Fixed form inconsistencies.

marko/components/modal/style.less

@@ -47,6 +47,8 @@ div.overlay {
       background: none;
       outline: none;
       opacity: 0.5;
+
+      border-left: 0.25px dotted;
     }
     input.big {
       font-size: 1.5em;
@@ -91,6 +93,8 @@ div.overlay {
 
       resize: none;
       overflow-y: scroll;
+
+      border-left: 0.25px dotted;
     }
     textarea.tall {
       height: 24em;

marko/page/data/components/add-character-modal/index.marko

@@ -18,5 +18,5 @@
   <label>Description</label>
   <textarea key="description" placeholder="Description" on-change("change", "description") value=state.values.description />
 
-  <button disabled=state.loading on-click("save")>Save character!</button>
+  <button disabled=state.loading on-click("save")>Save</button>
 </modal>

marko/page/data/components/channels-page/index.marko

@@ -3,3 +3,4 @@
   <channel-list channels=state.channels on-edited("channelEdited") />
 </main> 
 <add-channel-modal enabled=(state.modal === "channel.add") user=input.user on-added("channelAdded") on-close("close") />
+<add-character-modal enabled=(state.modal === "character.add") user=input.user on-close("close") />

marko/page/data/components/characters-page/index.marko

@@ -3,3 +3,4 @@
   <character-list characters=state.characters on-removed("characterRemoved") on-edited("characterEdited") on-nicks("characterNicksChanged") />
 </main> 
 <add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") />
+<add-channel-modal enabled=(state.modal === "channel.add") user=input.user on-close("close") />

marko/page/data/components/remove-character-modal/index.marko

@@ -5,5 +5,5 @@
   
   <p class="color-danger">This is irreversible!</p>
 
-  <button disabled=state.loading on-click("doIt")>Yes, do it!</button>
+  <button disabled=state.loading on-click("doIt")>Remove</button>
 </modal>

marko/page/logs-content/components/edit-log-modal/index.marko

@@ -9,11 +9,12 @@ import moment from "moment"
   <input key="title" placeholder=(input.log.channel.name + " – " + moment(input.log.date).format("MMMM D, YYYY")) class="big" on-change("change", "title") value=state.values.title />
 
   <label>Event Name</label>
-  <input key="event" placeholder="(Optional)" class="big" on-change("change", "event") value=state.values.event />
+  <input key="event" placeholder="(Optional)" on-change("change", "event") value=state.values.event />
   
   <label>Description</label>
   <textarea key="description" placeholder="(Optional)" on-change("change", "description") value=state.values.description />
 
+  <label>Options</label>
   <toggle value=state.values.open on="Open" off="Closed"
           onDesc=("New posts in "+input.log.channel.name+" will end up here.")
           offDesc="The logbot will not append to this log."

marko/page/logs-content/components/edit-post-modal/index.marko

@@ -22,5 +22,5 @@
   <label>Text</label>
   <textarea key="text" placeholder="Text" class="tall" on-change("change", "text") value=state.values.text />
 
-  <button disabled=state.loading on-click("save")>Alter History</button>
+  <button disabled=state.loading on-click("save")>Alter history</button>
 </modal>

marko/page/logs-content/components/remove-log-modal/index.marko

@@ -5,5 +5,5 @@
   
   <p class="color-danger">Removal is final!</p>
 
-  <button disabled=state.loading on-click("doIt")>I will destroy you!</button>
+  <button disabled=state.loading on-click("doIt")>Yes, I'm really doing it!</button>
 </modal>

marko/page/logs-content/components/remove-post-modal/index.marko

@@ -12,5 +12,5 @@
     <p><b>Text</b>: ${input.post.text}</p>
   </div>
 
-  <button disabled=state.loading on-click("doIt")>Yes, erase history!</button>
+  <button disabled=state.loading on-click("doIt")>Erase history</button>
 </modal>

marko/page/logs/components/add-log-modal/index.marko

@@ -5,17 +5,17 @@ import moment from "moment"
 
   <p key="error" class="color-error">${state.error}</p>
 
-  <label>Date</label>
-  <input key="date" placeholder="(Required)" class="big" on-change("change", "date") value=state.values.date />
-
-  <label>Channel</label>
-  <input key="channel" placeholder="(Required)" class="big" on-change("change", "channel") value=state.values.channel />
-
   <label>Title</label>
   <input key="title" placeholder="(Optional)" class="big" on-change("change", "title") value=state.values.title />
 
+  <label>Date</label>
+  <input key="date" placeholder="(Required)" on-change("change", "date") value=state.values.date />
+
+  <label>Channel</label>
+  <input key="channel" placeholder="(Required)" on-change("change", "channel") value=state.values.channel />
+
   <label>Event Name</label>
-  <input key="event" placeholder="(Optional)" class="big" on-change("change", "event") value=state.values.event />
+  <input key="event" placeholder="(Optional)" on-change("change", "event") value=state.values.event />
   
   <label>Description</label>
   <textarea key="description" placeholder="(Optional)" on-change("change", "description") value=state.values.description />

marko/page/story-content/components/create-chapter-modal/index.marko

@@ -3,9 +3,14 @@
 
   <p key="error" class="color-error">${state.error}</p>
 
-  <input key="title" placeholder="Title (Optional)" class="big" on-change("change", "title") value=state.values.title />
+  <label>Title</label>
-  <input key="icdate" placeholder="IC Date (Optional)" on-change("change", "fictionalDate") value=state.values.fictionalDate />
+  <input key="title" placeholder="(Optional)" class="big" on-change("change", "title") value=state.values.title />
-  <textarea key="source" placeholder="Content" class="tall" on-change("change", "source") value=state.values.source />
+
+  <label>IC Date</label>
+  <input key="icdate" placeholder="(Optional)" on-change("change", "fictionalDate") value=state.values.fictionalDate />
+
+  <label>Content</label>
+  <textarea key="source" placeholder="" class="tall" on-change("change", "source") value=state.values.source />
 
   <button disabled=state.loading on-click("save")>Save</button>
 </modal>

marko/page/story-content/components/edit-chapter-modal/index.marko

@@ -3,8 +3,13 @@
 
   <p key="error" class="color-error">${state.error}</p>
 
+  <label>Title</label>
   <input key="title" placeholder="Title" class="big" on-change("change", "title") value=state.values.title />
+  
+  <label>IC Date</label>
   <input key="icdate" placeholder="IC Date" on-change("change", "fictionalDate") value=state.values.fictionalDate />
+  
+  <label>Content</label>
   <textarea key="source" placeholder="Content" class="tall" on-change("change", "source") value=state.values.source />
 
   <button disabled=state.loading on-click("save")>Save</button>

marko/page/story/components/story-menu/index.marko

@@ -2,7 +2,7 @@
   <menu-header>Story</menu-header>
   <menu-link key="index" selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
   <menu-link selected=input.selected.tags icon="T" href="/story/tag-list/">Tags</menu-link>
-  <menu-gap />
+  <menu-gap if(input.menuAuthor || input.menuMonth || input.menuTags) />
   <if(input.menuMonth != null)>
     <menu-link selected=(input.selected.special === "month") icon="M" href=("/story/by-month/"+input.menuMonth.url)>${input.menuMonth.text}</menu-link>
   </if>

marko/page/story/components/tags-page/component.js

@@ -8,11 +8,20 @@ module.exports = class {
     this.state = {
       tags: [],
       groups: [],
+      modal: null,
     }
 
     this.update(input.tags)
   }
 
+  open(modal) {
+    this.state.modal = modal
+  }
+
+  close() {
+    this.state.modal = null
+  }
+
   update(newTags) {
     const tags = newTags.map(t => ({
       kind: t.kind,

marko/page/story/components/tags-page/index.marko

@@ -1,14 +1,20 @@
-<div class="tags-page">
+<background src="/assets/images/bg.png" opacity=0.25 />
-  <h1 class="color-primary">All Tags</h1>
+<story-menu categories=input.categories selected=(input.selected || {}) user=input.user on-open("open") />
-  <p>These are all distinct tags that appear in at least one listed story.</p>
+<main>
-  <div class="groups">
+  <div class="tags-page">
-    <div for(group in state.groups) class=["group", group.groupClass]>
+    <h1 class="color-primary">All Tags</h1>
-      <h2 class=group.colorClass>${group.header}</h2>
+    <p>These are all distinct tags that appear in at least one listed story.</p>
-      <ul>
+    <div class="groups">
-        <li for(tag in group.tags)>
+      <div for(group in state.groups) class=["group", group.groupClass]>
-          <a href=tag.url class=group.colorClass>${tag.name}</a>
+        <h2 class=group.colorClass>${group.header}</h2>
-        </li>
+        <ul>
-      </ul>
+          <li for(tag in group.tags)>
+            <a href=tag.url class=group.colorClass>${tag.name}</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
-</div>
+  <add-story-modal enabled=(state.modal === "story.add") stories=input.stories categories=input.categories on-close("close") />
+</main>
+

marko/page/story/tag-list.marko

@@ -1,9 +1,5 @@
 <include("../layout", {title: "Stories", site: "story"})>
   <@body>
-    <background src="/assets/images/bg.png" opacity=0.25 />
+    <tags-page tags=input.tags categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
-    <story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
-    <main>
-      <tags-page tags=input.tags />
-    </main>
   </@body>
 </include>