Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

first stab at rendering media

This commit is contained in:
Nolan Lawson 2018-01-17 17:02:43 -08:00
parent 697170b04a
commit bfe310fcca
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
routes/_components/Status.html
View File

@ -12,17 +12,17 @@
</div>
{{/if}}
<div class="status-author">
<a class="status-author-name" href="/accounts/{{original.id}}">
{{original.display_name || original.username}}
<a class="status-author-name" href="/accounts/{{originalAccount.id}}">
{{originalAccount.display_name || originalAccount.username}}
</a>
<span class="status-author-handle">
@{{original.acct}}
@{{originalAccount.acct}}
</span>
<a class="status-author-date" rel="noopener" target="_blank" href="{{original.url}}">
<a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
{{relativeDate}}
</a>
</div>
<Avatar account={{original}} className="status-sidebar"/>
<Avatar account={{originalAccount}} className="status-sidebar"/>
<div class="status-content">{{{status.content}}}</div>
<div class="status-toolbar">
<button aria-label="Reply" aria-pressed="false" type="button">
@ -46,6 +46,13 @@
</svg>
</button>
</div>
<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
{{#each originalMedia as media}}
<div class="status-media-container">
<img src="{{media.preview_url}}" alt="{{media.description || ''}}"/>
</div>
{{/each}}
</div>
</article>
<style>
@ -58,7 +65,8 @@
".............. status-boosted"
"status-sidebar status-author"
"status-sidebar status-content"
".............. status-toolbar";
".............. status-toolbar"
".............. status-media";
grid-template-columns: 58px 1fr;
border-bottom: 1px solid var(--main-border);
/* will-change: transform; */ /* TODO: is this necessary? */
@ -179,6 +187,20 @@
.status-toolbar button:active svg {
fill: var(--action-button-fill-color-active);
}
.status-media {
grid-area: status-media;
display: grid;
align-items: center;
justify-content: center;
justify-items: center;
}
.status-media-container {
}
.status-media-container img {
object-fit: cover;
}
</style>
<script>
import Avatar from './Avatar.html'
@ -198,7 +220,9 @@
stop('compute relativeDate')
return res
},
original: (status) => status.reblog ? status.reblog.account : status.account
originalAccount: (status) => status.reblog ? status.reblog.account : status.account,
originalMedia: (status) => status.reblog ? status.reblog.media_attachments : status.media_attachments,
minMediaWidth: (originalMedia) => Math.min.apply(Math, originalMedia.map(_ => _.meta.small.width))
}
}
</script>