UIAngular/Client/src/app/components/sermon-large/sermon-large-pic.component....

32 lines
1.5 KiB
HTML

<div class="wrapper" [@inout]="startFadeIn">
<div class="photo">
<button md-button (click)="play()">
<img src="../../assets/images/facebookplay.png" />
</button>
</div><!--
--><div class="info" (click)="toggleState()">
<span class="title">{{ title }}</span>
<br>
<span class="date">{{ date |date:'yyyy-MM-dd' }}</span> | <span class="author">{{ author }}</span>
<br>
<p class="description" [@toggleAnimationFade]="state">
{{ description }}
</p>
<div class="fade"><i ofbicon *ngIf="state === 'closed'">arrow_drop_down</i><i ofbicon *ngIf="state === 'open'">arrow_drop_up</i></div>
</div>
<div class="expanded" [@toggleAnimation]="state" (click)="toggleState()">
<p class="expanded-content">
{{ description }}
</p>
</div>
<div class="buttons">
<button md-button class="action pct40" (click)="play()" ><i ofbicon>headset</i> Listen</button><!--
--><button md-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i> Download</button><!--
--><button md-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
</div>
<div class="buttons-edit" *ngIf="loggedIn">
<div class="border"></div>
<button md-button class="action" (click)="edit()" ><i ofbicon>edit</i> Edit</button><!--
--><button md-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button>
</div>
</div>