data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

reduce dom nodes in each status

Browse source
This commit is contained in:
Nolan Lawson 2018-01-16 08:38:23 -08:00
parent 27e40da453
commit ef786bd204
3 changed files with 16 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
routes/_components/Avatar.html
View file

@ -1,21 +1,23 @@
{{#await imagePromise}} {{#await imagePromise}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
{{then src}} {{then src}}
<img alt="Profile picture for @{{account.acct}}" src="{{account.avatar}}" /> <img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
src="{{account.avatar}}" />
{{catch error}} {{catch error}}
<svg> <svg class="{{className}} avatar">
<use xlink:href="#fa-user" /> <use xlink:href="#fa-user" />
</svg> </svg>
{{/await}} {{/await}}
<style> <style>
img, svg { .avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin: 0 auto;
border-radius: 4px; border-radius: 4px;
} }
svg { svg.avatar {
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
} }
</style> </style>

18
routes/_components/Status.html
View file

@ -1,4 +1,4 @@
<article> <article class="status-article">
{{#if status.reblog}} {{#if status.reblog}}
<div class="boosted"> <div class="boosted">
<svg> <svg>
@ -22,9 +22,7 @@
{{relativeDate}} {{relativeDate}}
</a> </a>
</div> </div>
<div class="sidebar"> <Avatar account={{original}} className="sidebar"/>
<Avatar account={{original}} />
</div>
<div class="content">{{{status.content}}}</div> <div class="content">{{{status.content}}}</div>
<div class="toolbar"> <div class="toolbar">
<button aria-label="Reply" aria-pressed="false" type="button"> <button aria-label="Reply" aria-pressed="false" type="button">
@ -51,11 +49,10 @@
</article> </article>
<style> <style>
article { .status-article {
width: 580px; width: 580px;
max-width: calc(100vw); max-width: calc(100vw);
margin: 0 10px; padding: 10px;
padding: 10px 0;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"....... boosted" "....... boosted"
@ -63,11 +60,12 @@
"sidebar content" "sidebar content"
"....... toolbar"; "....... toolbar";
grid-template-columns: 68px 1fr; grid-template-columns: 68px 1fr;
border-bottom: 1px solid var(--main-border);
} }
.sidebar {
:global(.sidebar) {
grid-area: sidebar; grid-area: sidebar;
display: flex; margin: 0 10px;
justify-content: center;
} }
.author { .author {

7
routes/_components/StatusListItem.html
View file

@ -1,11 +1,4 @@
<div class="list-item">
<Status status="{{virtualProps}}" /> <Status status="{{virtualProps}}" />
</div>
<style>
.list-item {
border-bottom: 1px solid var(--main-border);
}
</style>
<script> <script>
import Status from './Status.html' import Status from './Status.html'