Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -10,7 +10,8 @@ import { SetupService } from 'src/app/services/setup.service';
@Component({
selector: 'app-general-settings',
templateUrl: './general-settings.component.html',
styleUrls: ['./general-settings.component.css']
styleUrls: ['./general-settings.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class SettingsComponent implements OnInit, CanComponentDeactivate {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<form class="ml-3 mr-3" name="hostaddress" #hostaddress="ngForm">
<p-card class="m-5">
<form class="mx-0 md:mx-3" name="hostaddress" #hostaddress="ngForm">
<p-card class="m-0 md:m-5">
<ng-template pTemplate="title">
{{ 'settings.hostaddress.title' | translate }}
</ng-template>
Expand Down Expand Up @@ -139,7 +139,7 @@
{{ 'settings.hostaddress.primaryip_label' | translate }}
</label>
<p-dropdown [options]="m_IPsAll " [(ngModel)]="m_HostAddressData.BackendServerAddr"
[editable]="true" class="block w-15rem mb-2" name="BackendServerAddr"
[editable]="true" class="block mb-2 w-full" name="BackendServerAddr"
#BackendServerAddr="ngModel" aria-describedby="BackendServerAddr-help">
</p-dropdown>
<small class="block w-full" id="BackendServerAddr-help">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -13,7 +13,8 @@ import { SetupService } from 'src/app/services/setup.service';
@Component({
selector: 'app-input-connections',
templateUrl: './input-connections.component.html',
styleUrls: ['./input-connections.component.css']
styleUrls: ['./input-connections.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class InputConnectionsComponent implements OnInit {

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<p-card class="m-5">
<p-card class="md:m-5">
<h2>{{ 'settings.rprofiles.title' | translate }}</h2>

<p-accordion class="col-12 w-full" (onOpen)="onTabOpen($event)" (onClose)="onTabClose($event)" >
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
Expand All @@ -11,7 +11,8 @@ import { Router } from '@angular/router';
@Component({
selector: 'app-recording-profiles',
templateUrl: './recording-profiles.component.html',
styleUrls: ['./recording-profiles.component.css']
styleUrls: ['./recording-profiles.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class RecordingProfilesComponent implements OnInit {

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -18,7 +18,8 @@ interface GroupCard {
@Component({
selector: 'app-storage-groups',
templateUrl: './storage-groups.component.html',
styleUrls: ['./storage-groups.component.css']
styleUrls: ['./storage-groups.component.css'],
encapsulation: ViewEncapsulation.None,
})

export class StorageGroupsComponent implements OnInit, CanComponentDeactivate {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
import { Component, HostListener, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -11,7 +11,8 @@ import { SetupService } from 'src/app/services/setup.service';
@Component({
selector: 'app-system-events',
templateUrl: './system-events.component.html',
styleUrls: ['./system-events.component.css']
styleUrls: ['./system-events.component.css'],
encapsulation: ViewEncapsulation.None,
})

export class SystemEventsComponent implements OnInit {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -11,7 +11,8 @@ import { SetupService } from 'src/app/services/setup.service';
@Component({
selector: 'app-video-sources',
templateUrl: './video-sources.component.html',
styleUrls: ['./video-sources.component.css']
styleUrls: ['./video-sources.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class VideoSourcesComponent implements OnInit, CanComponentDeactivate {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.is-invalid {
border-color: red;
}
}
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<p-toast></p-toast>

<form class="ml-3 mr-3" name="databaseForm" #databaseForm="ngForm">
<p-card class="m-5">
<form class="mx-0 md:mx-3" name="databaseForm" #databaseForm="ngForm">
<p-card class="m-0 md:m-5">
<ng-template pTemplate="title">
{{ 'setupwizard.databaseSetup' | translate }}
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
import { Component, HostListener, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { ConfigService } from '../../../services/config.service';
import { MythService } from '../../../services/myth.service';
Expand All @@ -16,7 +16,8 @@ import { Clipboard } from '@angular/cdk/clipboard';
selector: 'app-dbsetup',
templateUrl: './dbsetup.component.html',
styleUrls: ['./dbsetup.component.css'],
providers: [MessageService]
providers: [MessageService],
encapsulation: ViewEncapsulation.None,
})
export class DbsetupComponent implements OnInit {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
.language-item {
display: flex;
align-items: center;
}
}
@media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
.p-accordion-content {
padding: 0rem !important;
}
}
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="wizard-content m-3">
<form class="ml-3 mr-3" name="langform" #langform="ngForm">
<p-card class="m-5">
<div class="wizard-content m-0 md:m-3">
<form class="mx-0 md:mx-3" name="langform" #langform="ngForm">
<p-card class="m-0 md:m-5">
<ng-template pTemplate="title">
{{ 'setupwizard.localSetup' | translate }}
</ng-template>
<ng-template pTemplate="subtitle">
{{ 'setupwizard.countryAndLanguage' | translate }}
</ng-template>
<ng-template pTemplate="content">
<div class="grid m-3">
<div class="grid m-0 md:m-3">
<div class="col-12 md:col-6 pt-2">
<p-listbox [options]="m_countries" [(ngModel)]="m_wizardData.Country" [multiple]="false"
[filter]="true" optionLabel="Country"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { MythCountryList, Country } from '../../../services/interfaces/country.interface';
import { MythLanguageList, Language } from "../../../services/interfaces/language.interface";
Expand All @@ -14,7 +14,8 @@ import { MythService } from 'src/app/services/myth.service';
@Component({
selector: 'app-selectlanguage',
templateUrl: './selectlanguage.component.html',
styleUrls: ['./selectlanguage.component.css']
styleUrls: ['./selectlanguage.component.css'],
encapsulation: ViewEncapsulation.None,
})

export class SelectLanguageComponent implements OnInit, AfterViewInit {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,12 @@
.medium-width {
width: "600";
}

/* @media screen and (max-width: 48rem) {
.p-card-body {
padding: 0rem !important;
}
.p-card-content {
padding: 0rem !important;
}
} */
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{{ 'dashboard.upcoming.date' | translate }} </th>
<th style="flex-basis: 6%" class="justify-content-end p-1">
{{ 'dashboard.upcoming.time' | translate }} </th>
<th style="flex-basis: 6%" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
<th style="flex-basis: 7%" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
<th style="flex-basis: 8%" class="p-1" *ngIf="usage == 'UPCOMING'">{{ 'dashboard.upcoming.encoder' |
translate }} </th>
<th style="flex-basis: 12%" class="p-1">
Expand Down Expand Up @@ -37,10 +37,11 @@
<ng-template pTemplate="body" let-program>
<tr>
<td style="flex-basis: 8%" class="justify-content-end p-1 overflow-hidden">
{{formatStartDate(program)}}</td>
<div [innerHTML]="formatStartDate(program)"></div>
</td>
<td style="flex-basis: 6%" class="justify-content-end p-1 overflow-hidden">
{{formatStartTime(program)}}</td>
<td style="flex-basis: 6%" class="justify-content-end pl-1 pr-3 pt-1 pb-1 overflow-hidden">
<td style="flex-basis: 7%" class="justify-content-end pl-1 pr-3 pt-1 pb-1 overflow-hidden">
{{ getDuration(program) | number:'1.0-0' }} min</td>
<td style="flex-basis: 8%" class="p-1" *ngIf="usage == 'UPCOMING'">{{program.Recording.EncoderName}}
</td>
Expand All @@ -52,7 +53,8 @@
<div *ngIf="program.Season>0 || program.Episode>0"> {{program.Season}}x{{program.Episode}}</div>
</td>
<td style="flex-basis: 8%" class="justify-content-end p-1">
{{formatAirDate(program)}}</td>
<div [innerHTML]="formatAirDate(program)"></div>
</td>
<td style="flex-basis: 10%" class="p-1">
{{program.Channel.ChanNum}} {{program.Channel.CallSign}}</td>
<td style="flex-basis: 8%" class="p-1" *ngIf="usage == 'UPCOMING'">{{program.Recording.RecGroup}}</td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { DataService } from 'src/app/services/data.service';
import { DvrService } from 'src/app/services/dvr.service';
import { ScheduleOrProgram } from 'src/app/services/interfaces/program.interface';
import { RecRule } from 'src/app/services/interfaces/recording.interface';
import { UtilityService } from 'src/app/services/utility.service';

@Component({
selector: 'app-programs',
Expand All @@ -21,27 +22,28 @@ export class ProgramsComponent implements OnInit {
errorCount = 0;
program?: ScheduleOrProgram;

constructor(public dataService: DataService, private dvrService: DvrService) {
constructor(public dataService: DataService, private dvrService: DvrService,
private utility: UtilityService) {
}

ngOnInit(): void { }

formatStartDate(program: ScheduleOrProgram): string {
let starttm;
if (this.usage == 'UPCOMING') {
starttm = new Date(program.Recording.StartTs).getTime();
starttm = program.Recording.StartTs;
}
else {
starttm = new Date(program.StartTime).getTime();
starttm = program.StartTime;
}
return new Date(starttm).toLocaleDateString()
return this.utility.formatDate(starttm, true);
}

formatAirDate(program: ScheduleOrProgram): string {
if (!program.Airdate)
return '';
let date = program.Airdate + ' 00:00';
return new Date(date).toLocaleDateString()
return this.utility.formatDate(date, true);
}


Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form class="ml-3 mr-3" name="recsform" #recsform="ngForm">
<form name="recsform" #recsform="ngForm">
<div style="white-space: 'pre-line';">
<p-toast position="center"></p-toast>
</div>
Expand Down Expand Up @@ -70,9 +70,11 @@ <h2>{{ 'dashboard.recordings.heading' | translate }}</h2>
</div>
</td>
<td style="flex-basis: 8%" class="justify-content-end p-1">
{{utility.formatDate(program.Airdate)}}</td>
<div [innerHTML]="utility.formatDate(program.Airdate,true)"></div>
</td>
<td style="flex-basis: 8%" class="justify-content-end p-1">
{{utility.formatDate(program.StartTime)}}</td>
<div [innerHTML]="utility.formatDate(program.StartTime,true)"></div>
</td>
<td style="flex-basis: 10%" class="p-1">
{{program.Channel.ChanNum}} {{program.Channel.CallSign}}</td>
<td style="flex-basis: 8%" class="p-1">{{program.Recording.RecGroup}}</td>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ml-3 mr-3">
<div>
<div style="white-space: 'pre-line';">
<p-toast position="center"></p-toast>
</div>
Expand All @@ -11,7 +11,7 @@ <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
</p-checkbox>
&nbsp;&nbsp;&nbsp;
<div *ngIf="refreshing else refreshBn"><p-progressSpinner
[style]="{width: '30px', height: '30px'}"></p-progressSpinner></div>
[style]="{width: '2rem', height: '2rem'}"></p-progressSpinner></div>
<ng-template #refreshBn>
<button pButton pRipple icon="pi pi-refresh" class="p-button-text .p-button-success"
(click)="refreshing=true;refresh()" pTooltip="{{ 'common.refresh' | translate }}"></button>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ml-3 mr-3">
<div>
<div style="white-space: 'pre-line';">
<p-toast position="center"></p-toast>
</div>
Expand Down Expand Up @@ -72,7 +72,8 @@ <h2>{{ 'dashboard.videos.heading' | translate }}</h2>
<div *ngIf="video.Season>0 || video.Episode>0"> {{video.Season}}x{{video.Episode}} </div>
</td>
<td style="flex-basis: 12%" class="justify-content-end p-1">
{{utility.formatDate(video.ReleaseDate)}}</td>
<div [innerHTML]="utility.formatDate(video.ReleaseDate,true)"></div>
</td>
<td style="flex-basis: 10%" class="justify-content-end p-1">
<div *ngIf="video.Length > 0"> {{ video.Length }} min </div>
</td>
Expand Down
24 changes: 16 additions & 8 deletions mythtv/html/backend/src/app/layout/navbar/navbar.component.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<div class="flex flex-column relative flex-auto">
<div class="toolbar flex justify-content-between align-items-center pm-8 surface-section relative lg:static surface-border"
style="height: 80px;">
style="height: 80px;" *ngIf="showTopBar else hidden">
<div class="toolbar flex align-items-left flex-shrink-0" style="height: 80px;">
<a pRipple
class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:hidden lg:justify-content-center
<a pRipple class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:hidden lg:justify-content-center
hover:bg-gray-800 border-round text-300 hover:text-0
transition-duration-150 transition-colors"
(click)="toggleShowSidebar()">
transition-duration-150 transition-colors" (click)="toggleShowSidebar()">
<i class="pi pi-bars mr-1 lg:ml-1 text-base lg:text-xl "></i>
<span class="p-ink" ng serve></span>
</a>
Expand All @@ -15,10 +13,12 @@
<h1>{{ 'navbar.mainheading' | translate }}</h1>
</div>
</div>
<div class="toolbar flex-grow-1" style="height: 80px;"></div>
<div class="toolbar flex flex-grow-1 align-items-end" style="height: 80px;">
<button pButton pRipple icon="pi pi-angle-up" class="p-button-text lg:col-offset-3 p-button-secondary"
(click)="showTopBar=false" pTooltip="{{ 'navbar.hide' | translate }}"></button>
</div>
<div class="pr-2 toolbar" style="height: 80px;">
<a pRipple style="height: 80px;"
class="toolbar p-ripple p-element my-2 mx-2 flex align-items-center cursor-pointer p-3 md:hidden md:justify-content-center
<a pRipple style="height: 80px;" class="toolbar p-ripple p-element my-2 mx-2 flex align-items-center cursor-pointer p-3 md:hidden md:justify-content-center
hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors"
(click)="toggleShowNavbar()">
<i class="pi pi-ellipsis-v mr-1 md:mr-0 text-base md:text-xl "></i>
Expand Down Expand Up @@ -56,6 +56,14 @@ <h1>{{ 'navbar.mainheading' | translate }}</h1>
</ul>
</div>
</div>

<ng-template #hidden>
<div class="toolbar block flex flex-grow-1 justify-content-center align-items-end " style="height: 2rem;">
<button pButton pRipple icon="pi pi-angle-down" class="p-button-text p-button-secondary"
(click)="showTopBar=true" pTooltip="{{ 'navbar.show' | translate }}"></button>
</div>
</ng-template>

</div>

<p-overlayPanel #themePanel [showCloseIcon]="true" [style]="{width: '350px'}">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export class NavbarComponent implements OnInit {
m_selectedLanguage!: Language;

m_showNavbar: boolean = true;
showTopBar = true;
m_devMode: boolean = isDevMode();
m_haveDatabase: boolean = true;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="mt-1 select-none">
<ul class="list-none p-3 lg:py-3 lg:px-2 m-0">
<li [routerLink]="'dashboard/status'" pTooltip="{{ 'navbar.dashboard' | translate }}"
[tooltipDisabled]="dataService.m_showSidebar === false">
[tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
<a pRipple
class="p-ripple p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center
hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
Expand All @@ -17,7 +17,7 @@
</a>
</li>
<li [routerLink]="'setupwizard/dbsetup'" pTooltip="{{ 'navbar.backendSetup' | translate }}"
[tooltipDisabled]="dataService.m_showSidebar === false">
[tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
<a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
<i class="pi pi-cog mr-2 lg:mr-0 text-base lg:text-xl"></i>
Expand All @@ -27,7 +27,7 @@
</a>
</li>
<li [routerLink]="'dashboard/program-guide'" pTooltip="{{ 'dashboard.programguide' | translate }}"
[tooltipDisabled]="dataService.m_showSidebar === false">
[tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
<a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
<i class="pi pi-map mr-2 lg:mr-0 text-base lg:text-xl"></i>
Expand All @@ -39,7 +39,7 @@
</div>
</div>
</div>
<div class="contentarea px-3 w-full">
<div class="contentarea px-0 lg:px-3 w-full">
<router-outlet></router-outlet>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion mythtv/html/backend/src/app/services/data.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,12 @@ export class DataService {
}
}


toggleShowSidebar() {
this.m_showSidebar = !this.m_showSidebar;
}

showSidebar(x: boolean) {
this.m_showSidebar = x;
}

}
9 changes: 7 additions & 2 deletions mythtv/html/backend/src/app/services/utility.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@ import { Injectable } from '@angular/core';
})
export class UtilityService {

allSlashes = new RegExp(/\//g);

constructor() { }

formatDate(date: string): string {
formatDate(date: string, innerHtml?: boolean): string {
if (!date)
return '';
if (date.length == 10)
date = date + ' 00:00';
return new Date(date).toLocaleDateString()
let x = new Date(date).toLocaleDateString();
if (innerHtml)
return x.replace(this.allSlashes, '/<wbr>');
return x;
}

formatTime(date: string): string {
Expand Down