react-templates/sample/ImageSearch.rt

18 lines
955 B
Plaintext
Raw Normal View History

2014-11-19 20:26:39 +01:00
<!doctype rt InfiniteScroll="InfiniteScroll">
<div class="innerContainer">
<div class="searchbox">
2014-11-16 00:09:52 +01:00
<input type="text" valueLink="{this.linkState('searchTerm')}" onKeyDown="(e) => if (e.keyCode == 13) { this.search(); return false; }"></input>
<button onClick="() => this.search(); return false;">Search</button>
</div>
<InfiniteScroll class="fixed" onLoadMore="{this.loadMore}" threshold="{150}">
2014-11-16 00:09:52 +01:00
<div rt-repeat="row in [0, 1, 2]" key="{row}">
<a rt-repeat="i in this.state.items[row]" href="{i.originalContext}" target="blank" class="container fadeInDown" key="{i.id}">
2014-11-16 00:09:52 +01:00
<div style="padding-top: {Math.floor(100/i.ratio)}%; background-color: grey"></div>
<div class="imgContainer">
2014-11-16 00:09:52 +01:00
<img width="100%" src="{i.url}"/>
<div class="title">{i.title}</div>
2014-11-16 00:09:52 +01:00
</div>
</a>
</div>
</InfiniteScroll>
</div>