Browse Source

logs-content: Added styles for posts to differentiate post types more easily and highlight scenes.

1.2
Gisle Aune 6 years ago
parent
commit
55379fcfe3
  1. 2
      marko/page/logs-content/components/post-meta/index.marko
  2. 10
      marko/page/logs-content/components/post-meta/style.less
  3. 4
      marko/page/logs-content/components/post/index.marko
  4. 12
      marko/page/logs-content/components/post/style.less

2
marko/page/logs-content/components/post-meta/index.marko

@ -1,5 +1,5 @@
<if(state.text != null && state.text != "")> <if(state.text != null && state.text != "")>
<div class=["post-meta", input.kind, state.color, input.weak ? "weak" : null] title=state.tooltip>
<div class=["post-meta", input.kind, state.color, input.weak ? "weak" : null, input.class] title=state.tooltip>
<a if(state.href != null) href=state.href>${state.text}</a> <a if(state.href != null) href=state.href>${state.text}</a>
<span else>${state.text}</span> <span else>${state.text}</span>
</div> </div>

10
marko/page/logs-content/components/post-meta/style.less

@ -18,3 +18,13 @@ div.post-meta {
div.post-meta.weak { div.post-meta.weak {
opacity: 0.5; opacity: 0.5;
} }
div.post-meta.nick.pk-text {
color: #AAA;
}
div.post-meta.nick.pk-action {
color: #A64;
}
div.post-meta.nick.pk-scene {
color: #68A;
}

4
marko/page/logs-content/components/post/index.marko

@ -1,4 +1,4 @@
<div if(!state.removed) class=["post", component.kindClass("post-type"), state.multipart ? "multipart" : null]>
<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null]>
<div class="post-meta-row"> <div class="post-meta-row">
<div class="options color-menu"> <div class="options color-menu">
<if-permitted user=input.user permission="post.move"> <if-permitted user=input.user permission="post.move">
@ -13,7 +13,7 @@
</if-permitted> </if-permitted>
</div> </div>
<post-meta kind="timestamp" value=input.post.time /> <post-meta kind="timestamp" value=input.post.time />
<post-meta kind="nick" value=input.post.nick />
<post-meta kind="nick" class=("pk-"+input.post.kind) value=input.post.nick />
</div> </div>
<div if(input.post.kind.startsWith("annotation.")) class="post-body" > <div if(input.post.kind.startsWith("annotation.")) class="post-body" >
<annotation level=(input.post.kind.substring(11))> <annotation level=(input.post.kind.substring(11))>

12
marko/page/logs-content/components/post/style.less

@ -1,5 +1,7 @@
div.post { div.post {
margin-bottom: 1ch; margin-bottom: 1ch;
margin-left: -12px;
padding-left: 12px;
div.post-meta-row { div.post-meta-row {
padding: 0; padding: 0;
@ -48,12 +50,18 @@ div.post {
div.annotation { div.annotation {
margin-top: 0.33em; margin-top: 0.33em;
} }
}
div.post-body p:first-of-type {
p:first-of-type {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
} }
} }
}
div.post.pk-scene {
margin-left: -14px;
border-left: 2px solid #68A;
}
div.post.multipart { div.post.multipart {
margin-top: -1.25em; margin-top: -1.25em;

Loading…
Cancel
Save