rpdata/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

story, story-content: Made tag editor in add story and edit story tags form more compact.

Browse Source
This commit is contained in:
gisle
2018-09-23 22:04:18 +02:00
parent 1e751ed5e8
commit 6517a2a0af
2 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marko/components/story-tag-options/index.marko
+8 -2
View File
@@ -1,6 +1,9 @@
<div class="tag-options"> <div class="tag-options">
<div class="field">
<label>Tag Name</label> <label>Tag Name</label>
<input key="name" placeholder="Name" on-change("change", "name") value=state.values.name /> <input key="name" placeholder="Name" on-change("change", "name") value=state.values.name />
</div>
<div class="field">
<label>Tag Kind</label> <label>Tag Kind</label>
<select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind> <select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
<option value="Character" selected=(state.values.kind === "Character")>Character</option> <option value="Character" selected=(state.values.kind === "Character")>Character</option>
@@ -9,13 +12,16 @@
<option value="Organization" selected=(state.values.kind === "Organization")>Organization</option> <option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
<option value="Series" selected=(state.values.kind === "Series")>Series</option> <option value="Series" selected=(state.values.kind === "Series")>Series</option>
</select> </select>
</div>
<div class="button-field">
<button class="add-tag" disabled=(input.loading) on-click("add", state.values)>Add</button>
</div>
<div class="suggestion-list" if(state.suggestions.length > 0)> <div class="suggestion-list" if(state.suggestions.length > 0)>
<div class="header color-menu">Suggestions:</div> <div class="header color-menu">Suggestions:</div>
<a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a> <a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
</div> </div>
<button disabled=(input.loading) on-click("add", state.values)>Add</button>
<div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)> <div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)>
<div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div> <div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div>
<button on-click("emit", "remove", tag)>Remove</button> <button on-click("emit", "remove", tag)>Remove</button>
marko/components/story-tag-options/style.less
+34 -3
View File
@@ -1,4 +1,6 @@
div.tag-options { div.tag-options {
margin-top: 0em;
div.tag { div.tag {
padding: 0.25em; padding: 0.25em;
border-bottom: 1px solid rgba(0, 220, 255, 0.125); border-bottom: 1px solid rgba(0, 220, 255, 0.125);
@@ -15,8 +17,36 @@ div.tag-options {
} }
} }
div.field {
box-sizing: border-box;
display: inline-block;
width: 35%;
margin: 0;
margin-top: 0ch;
input {
height: 1.55em;
}
}
div.button-field {
position: relative;
top: -0.75ch;
box-sizing: border-box;
display: inline-block;
width: 30%;
margin: 0;
text-align: right;
button {
display: inline-block;
width: 14ch;
margin-right: 1ch;
}
}
div.suggestion-list { div.suggestion-list {
margin: 2em 0; margin: -2em 0 1em 0;
a.tag { a.tag {
display: inline-block; display: inline-block;
@@ -35,8 +65,9 @@ div.tag-options {
div.header { div.header {
display: block; display: block;
margin: 0.5em 0.5ch; padding: 0em 0.5ch;
padding: 0.0625em 0.5ch; padding-top: 0.75em;
font-size: 0.75em;
opacity: 0.5; opacity: 0.5;