first stab at rendering media
This commit is contained in:
parent
697170b04a
commit
bfe310fcca
|
@ -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>
|
Loading…
Reference in a new issue