Skip to content

Commit

Permalink
Layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
LarsBergqvist committed Nov 29, 2023
1 parent 49ae633 commit e6e0a11
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 57 deletions.
106 changes: 50 additions & 56 deletions src/app/components/programs/programs-list.component.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,55 @@
<app-program-favorites></app-program-favorites>
<p-accordion>
<p-accordionTab header="{{'Categories' | translate}}">
<p-selectButton [options]="categoryOptions" [(ngModel)]="localState.selectedCategory" optionLabel="label" optionValue="value"
(onChange)="onCategoryChanged($event, dt2)"
></p-selectButton>
</p-accordionTab>
</p-accordion>

<div class="programs-list">
<p-table #dt2 [value]="programs" responsiveLayout="stack" [paginator]="true" [rows]="pageSize" [totalRecords]="totalHits" (onLazyLoad)="loadLazy($event)" [lazy]="true"
[globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
<ng-template pTemplate="caption">
<span>
<p-accordion>
<p-accordionTab header="{{'Categories' | translate}}">
<p-selectButton [options]="categoryOptions" [(ngModel)]="localState.selectedCategory" optionLabel="label" optionValue="value"
(onChange)="onCategoryChanged($event, dt2)"
></p-selectButton>
</p-accordionTab>
</p-accordion>
</span>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th class="min-title-column" pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
</p-sortIcon>
</th>
<th pSortableColumn="channel.name">{{'ChannelNameTitle' | translate | uppercase }}<p-sortIcon
field="channel.name">
</p-sortIcon>
</th>
<p-table #dt2 [value]="programs" responsiveLayout="stack" [paginator]="true" [rows]="pageSize" [totalRecords]="totalHits" (onLazyLoad)="loadLazy($event)" [lazy]="true"
[globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
<ng-template pTemplate="header">
<tr>
<th class="min-title-column" pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
</p-sortIcon>
</th>
<th pSortableColumn="channel.name">{{'ChannelNameTitle' | translate | uppercase }}<p-sortIcon
field="channel.name">
</p-sortIcon>
</th>

<th>{{'Description' | translate | uppercase}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-program>
<tr>
<td class="min-title-column">
<div class="p-grid" style="width:100%">
<span (click)="onProgramDetails(program)" class="clickable p-col-8">
<img src={{program.programimage}} class="image-thumb" />
<span *ngIf="program?.channel" class="prg-chan">
{{program.channel.name}}
</span>
<span class="prg-title">
{{program.name}}
</span>
<th>{{'Description' | translate | uppercase}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-program>
<tr>
<td class="min-title-column">
<div class="p-grid" style="width:100%">
<span (click)="onProgramDetails(program)" class="clickable p-col-8">
<img src={{program.programimage}} class="image-thumb" />
<span *ngIf="program?.channel" class="prg-chan">
{{program.channel.name}}
</span>
<span class="p-col-4" style="float:right;padding-top:0px">
<span class="clickable" (click)="onProgramDetails(program)"><i
class="pi pi-info-circle details-btn"></i>
</span>
<span class="prg-title">
{{program.name}}
</span>
</div>
</td>
<td class="prg-chan-td">
<div *ngIf="program?.channel">
{{program.channel.name}}
</div>
</td>
<td class="description-td" style="border:none">
{{program.description}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</span>
<span class="p-col-4" style="float:right;padding-top:0px">
<span class="clickable" (click)="onProgramDetails(program)"><i
class="pi pi-info-circle details-btn"></i>
</span>
</span>
</div>
</td>
<td class="prg-chan-td">
<div *ngIf="program?.channel">
{{program.channel.name}}
</div>
</td>
<td class="description-td" style="border:none">
{{program.description}}
</td>
</tr>
</ng-template>
</p-table>
2 changes: 1 addition & 1 deletion src/app/services/programs.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class ProgramsService extends SRBaseService {
fav: false,
channel: {
id: p?.channel.id,
name: p?.channel.name
name: p?.channel.name === '[No channel]' ? '' : p?.channel.name
},
programimage: p.programimagetemplate + SRApiService.DefaultImagePreset,
description: p.description,
Expand Down

0 comments on commit e6e0a11

Please sign in to comment.