refactored out generic content list format

This commit is contained in:
bill bittner 2017-09-11 11:09:38 -07:00
parent 8a9b1ea0cf
commit b1dcb78a3d
4 changed files with 54 additions and 33 deletions

View file

@ -153,10 +153,11 @@ module.exports = {
.then(allChannelClaims => {
if (allChannelClaims) {
allChannelClaims.forEach(element => {
element['channelName'] = channelName;
element['longChannelId'] = longChannelId;
element['shortChannelId'] = shortChannelId;
element['fileExtension'] = element.contentType.substring(element.contentType.lastIndexOf('/') + 1);
const fileExtenstion = element.contentType.substring(element.contentType.lastIndexOf('/') + 1);
element['showUrlLong'] = `/${channelName}:${longChannelId}/${element.name}`;
element['showUrlShort'] = `/${channelName}:${shortChannelId}/${element.name}`;
element['directUrlLong'] = `/${channelName}:${longChannelId}/${element.name}.${fileExtenstion}`;
element['directUrlShort'] = `/${channelName}:${shortChannelId}/${element.name}.${fileExtenstion}`;
});
}
return resolve(allChannelClaims);

View file

@ -154,27 +154,50 @@ button.copy-button {
height: 1em;
}
/* all claims */
.all-claims-item {
/* content lists */
.content-list-card {
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
overflow: auto;
position: relative;
}
.all-claims-asset {
.content-list-card-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
.content-list-asset {
width: 20%;
float: left;
margin: 5px 30px 5px 0px;
}
.all-claims-details {
.content-list-title {
color: black;
font-weight: bold;
}
.content-list-details {
word-wrap: break-word;
}
.content-list-details > ul {
position: relative;
z-index: 2;
list-style: none;
list-style-type: none;
}
.content-list-card:hover {
background-color: #F5F0EF;
}
/* statistics */
.totals-row {
border-top: 1px solid grey;

View file

@ -2,31 +2,9 @@
{{> topBar}}
<div>
<h3>{{this.channelName}}</h3>
<p>Below are all the free claims in this channel.</p>
<p>Below is all the free content in this channel.</p>
{{#each channelContents}}
<script>console.log(this)</script>
<div class="all-claims-item">
<a href="/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}">
{{#ifConditional this.contentType '===' 'video/mp4'}}
<img class="all-claims-asset" src="{{this.thumbnail}}"/>
{{else}}
<img class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.{{this.fileExtension}}" />
{{/ifConditional}}
</a>
<div class="all-claims-details">
<ul style="list-style-type:none">
<li><strong>{{this.title}}</strong></li>
<li><i> {{this.description}}</i></li>
<li><a href="/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}">spee.ch/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}</a></li>
<li>License: {{this.license}}</li>
<li>
Claim:
<a href="lbry://{{this.name}}">lbry://{{this.name}}</a>
</li>
<li>Claim Id: {{this.claimId}}</li>
</ul>
</div>
</div>
{{> contentListItem}}
{{/each}}
</div>
{{> footer}}

View file

@ -0,0 +1,19 @@
<div class='content-list-card'>
<a href="{{this.showUrlLong}}"><span class='content-list-card-link'></span></a>
{{#ifConditional this.contentType '===' 'video/mp4'}}
{{#ifConditional this.thumbnail '===' ''}}
<img class="content-list-asset" src="/assets/img/content-freedom-large.png"/>
{{else}}
<img class="content-list-asset" src="{{this.thumbnail}}"/>
{{/ifConditional}}
{{else}}
<img class="content-list-asset" src="{{this.directUrlLong}}" />
{{/ifConditional}}
<div class="content-list-details">
<ul>
<li class="content-list-title">{{this.title}}</li>
<li><a href="{{this.directUrlShort}}">spee.ch{{this.directUrlShort}}</a></li>
</ul>
</div>
</div>