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

add a nice fade effect

Browse source
This commit is contained in:
Nolan Lawson 2018-01-21 14:31:59 -08:00
parent ff6c370ef1
commit 75d78d44a2
2 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
routes/_components/Timeline.html
View file

@ -2,7 +2,9 @@
<div class="timeline" role="feed" aria-label="{{label}}" on:initialized> <div class="timeline" role="feed" aria-label="{{label}}" on:initialized>
<VirtualList component="{{StatusListItem}}" <VirtualList component="{{StatusListItem}}"
items="{{keyedStatuses}}" items="{{keyedStatuses}}"
on:scrollToBottom="onScrollToBottom()" /> on:scrollToBottom="onScrollToBottom()"
shown="{{initialized}}"
/>
</div> </div>
<style> <style>
.timeline { .timeline {

3
routes/_components/VirtualList.html
View file

@ -1,5 +1,5 @@
<!-- TODO: setting height is hacky, just make this element the scroller --> <!-- TODO: setting height is hacky, just make this element the scroller -->
<div class="virtual-list" style="height: {{$height}}px;"> <div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
{{#each $visibleItems as item @key}} {{#each $visibleItems as item @key}}
<VirtualListItem :component <VirtualListItem :component
offset="{{item.offset}}" offset="{{item.offset}}"
@ -12,6 +12,7 @@
<style> <style>
.virtual-list { .virtual-list {
position: relative; position: relative;
transition: opacity 0.25s linear;
} }
</style> </style>
<script> <script>