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

Long time no see. A bunch of stuff I cba to summarize.
the build was successful
Details

Browse Source
This commit is contained in:
gisle
2019-03-07 23:13:46 +01:00
parent 494d0404ed
commit 490725ecd2
20 changed files with 642 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marko/page/story-content/components/comment/component.js
+18
View File
@@ -0,0 +1,18 @@
module.exports = class {
onCreate(input) {
this.state = {
showCharacter: false,
paragraphs: input.comment.source.split('\n').filter(l => l.length > 1),
}
}
onInput(input) {
if (this.state) {
this.state.paragraphs = input.comment.source.split('\n').filter(l => l.length > 1)
}
}
toggle(key) {
this.state[key] = !this.state[key]
}
}
marko/page/story-content/components/comment/index.marko
+110
View File
@@ -0,0 +1,110 @@
import moment from "moment"
<div class=["comment", "mode-" + input.mode.toLowerCase()]>
<if (input.mode === "Message")>
<div class="metadata">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<chapter-meta weak kind="date" value=input.comment.createdDate />
<chapter-meta weak kind="author" value=input.comment.author />
</div>
<div class="content color-blockquote">
<table class="header">
<tbody>
<tr if(input.comment.subject != "")>
<th>Subject:</th>
<td>${input.comment.subject}</td>
</tr>
<tr>
<th>From:</th>
<td>
<div if(input.comment.character != null) class="tooltip" style="display: inline-block">
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark">
<h1>${input.comment.character.name}</h1>
<h2>${input.comment.character.author}</h2>
<markdown source=input.comment.character.description />
</div>
</div>
<div else>
<span>${input.comment.characterName}</span>
</div>
</td>
</tr>
<tr if(input.comment.fictionalDate != null)>
<th>Date:</th>
<td>${moment(input.comment.fictionalDate).format("MMM D, YYYY")}</td>
</tr>
</tbody>
</table>
<markdown class="body" source=input.comment.source />
</div>
</if>
<if(input.mode === "Chat")>
<div class="content">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<for (paragraph in state.paragraphs)>
<div class="message-text color-text">
<markdown class="body" source=paragraph>
<span class="decoration color-menu">[</span>
<date class="color-menu" value=input.comment.fictionalDate></date>
<span class="decoration color-menu">]&nbsp;</span>
<span class="decoration color-menu">&lt;</span>
<span if(input.comment.character != null) class="tooltip color-primary">
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark color-primary">
<h1>${input.comment.character.name}</h1>
<h2>${input.comment.character.author}</h2>
<markdown source=input.comment.character.description />
</div>
</span>
<span class="tooltip color-primary" else>
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark color-primary">
<h1>(Unknown Character)</h1>
<h2>${input.comment.author}</h2>
</div>
</span>
<span class="decoration color-menu">&gt;&nbsp;</span>
</markdown>
</div>
</for>
</div>
</if>
<if(input.mode === "Article")>
<div class="metadata">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<chapter-meta kind="title" value=input.comment.subject />
<chapter-meta kind="name" value=input.comment.characterName character=input.comment.character />
<chapter-meta kind="date" value=input.comment.fictionalDate />
<chapter-meta weak kind="date" value=input.comment.createdDate />
<chapter-meta weak kind="author" value=input.comment.author />
</div>
<div class="content color-text">
<markdown class="body" source=input.comment.source />
</div>
</if>
</div>
marko/page/story-content/components/comment/style.less
+113
View File
@@ -0,0 +1,113 @@
div.comment {
position: relative;
div.options {
width: 100%;
max-width: 95ch;
}
}
div.comment.mode-message {
margin-bottom: 1.5em;
font-size: 1em;
.metadata {
padding-bottom: 0.5em;
}
.content {
outline: 1px solid;
padding: 0.25em 1ch;
font-size: 1.25em;
table.header {
border-bottom: 0.5px solid;
margin: 0;
width: 100%;
tbody {
tr {
text-align: left;
th {
width: 12ch;
padding-right: 1ch;
}
td {
width: 100%;
}
}
}
}
}
div.body {
padding-top: 0.5em;
p:first-of-type {
margin-top: 0;
padding-top: 0;
}
}
}
div.comment.mode-chat {
div.options {
display: none;
bottom: -0.25em;
a {
background: black;
opacity: 0.666;
}
a:hover {
opacity: 1;
}
}
div.content {
line-height: 2em;
font-size: 1.125em;
div.tooltip-content {
text-indent: 0;
}
div.message-text {
vertical-align: top;
padding-left: 2ch;
text-indent: -2ch;
div.body {
p:first-of-type {
display: inline;
}
p:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
p {
line-height: 1.5em;
}
}
}
}
}
div.comment.mode-article {
margin-bottom: 1em;
.content {
font-size: 1.25em;
}
}
div.comment.mode-chat:hover {
div.options {
display: block;
}
}