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

first stab at rendering media

Browse source
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> </div>
{{/if}} {{/if}}
<div class="status-author"> <div class="status-author">
<a class="status-author-name" href="/accounts/{{original.id}}"> <a class="status-author-name" href="/accounts/{{originalAccount.id}}">
{{original.display_name || original.username}} {{originalAccount.display_name || originalAccount.username}}
</a> </a>
<span class="status-author-handle"> <span class="status-author-handle">
@{{original.acct}} @{{originalAccount.acct}}
</span> </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}} {{relativeDate}}
</a> </a>
</div> </div>
<Avatar account={{original}} className="status-sidebar"/> <Avatar account={{originalAccount}} className="status-sidebar"/>
<div class="status-content">{{{status.content}}}</div> <div class="status-content">{{{status.content}}}</div>
<div class="status-toolbar"> <div class="status-toolbar">
<button aria-label="Reply" aria-pressed="false" type="button"> <button aria-label="Reply" aria-pressed="false" type="button">
@ -46,6 +46,13 @@
</svg> </svg>
</button> </button>
</div> </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> </article>
<style> <style>
@ -58,7 +65,8 @@
".............. status-boosted" ".............. status-boosted"
"status-sidebar status-author" "status-sidebar status-author"
"status-sidebar status-content" "status-sidebar status-content"
".............. status-toolbar"; ".............. status-toolbar"
".............. status-media";
grid-template-columns: 58px 1fr; grid-template-columns: 58px 1fr;
border-bottom: 1px solid var(--main-border); border-bottom: 1px solid var(--main-border);
/* will-change: transform; */ /* TODO: is this necessary? */ /* will-change: transform; */ /* TODO: is this necessary? */
@ -179,6 +187,20 @@
.status-toolbar button:active svg { .status-toolbar button:active svg {
fill: var(--action-button-fill-color-active); 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> </style>
<script> <script>
import Avatar from './Avatar.html' import Avatar from './Avatar.html'
@ -198,7 +220,9 @@
stop('compute relativeDate') stop('compute relativeDate')
return res 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> </script>