Skip to content

Commit

Permalink
style: adjust video player and layout heights
Browse files Browse the repository at this point in the history
Set video player heights to 50vh for better responsiveness. 
Update EPG content height to 50vh minus padding for improved 
layout. Modify grid template rows to 50% for better space 
distribution. Ensure fallback titles and descriptions in 
dialog for better user experience.
  • Loading branch information
4gray committed Nov 28, 2024
1 parent 400f97b commit 75b0898
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 9 deletions.
9 changes: 4 additions & 5 deletions src/app/portals/epg-view/epg-view.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { EpgItem } from '../../xtream/epg-item.interface';
templateUrl: './epg-view.component.html',
imports: [
DatePipe,
EpgItemDescriptionComponent,
MatButtonModule,
MatDividerModule,
MatIconModule,
Expand All @@ -24,8 +23,8 @@ import { EpgItem } from '../../xtream/epg-item.interface';
],
styles: `
mat-list {
overflow-y: scroll;
height: calc(100vh - 459px);
/* overflow-y: scroll; */
height: 100vh;
}
`,
})
Expand All @@ -37,8 +36,8 @@ export class EpgViewComponent {
showDetails(item: EpgItem) {
this.dialog.open(EpgItemDescriptionComponent, {
data: {
title: [{ value: item.title, lang: item.lang }],
desc: [{ value: item.description }],
title: item.title ?? 'No title',
desc: item.description ?? 'No description',
},
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@
.itv-container {
display: grid;
grid-template-columns: 330px 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: 50% 50%;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas:
'sidebar video-player video-player'
'sidebar epg epg'
'sidebar epg epg';
height: 100%;
}
Expand Down Expand Up @@ -49,9 +48,10 @@
}

.epg-content {
height: 100%;
height: calc(50vh - 20px);
overflow-y: auto;
border-right: #111 1px solid;
padding-bottom: 20px;
}

.sidebar-content {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
app-vjs-player > .video-js {
height: 100%;
height: 50vh !important;
}

app-html-video-player > #video-player {
height: 50vh !important;
}

0 comments on commit 75b0898

Please sign in to comment.