Fix Design issues

This commit is contained in:
Siroco 2020-11-17 11:51:12 +01:00
parent e2eac2a19c
commit 0bcd5861ec
14 changed files with 86 additions and 34 deletions

View File

@ -11,6 +11,6 @@ $breakpoint-tablet: 768px;
$breakpoint-phone: 500px; $breakpoint-phone: 500px;
$background-color: #1c1c1c; $background-color: #1c1c1c;
// $slide-background: #f90; // $slide-background: #f90;
$slide-background: #cc7722; $slide-background: #090501;
$backgroundhover: #ff0038b5; $backgroundhover: #ff0038b5;

View File

@ -6,7 +6,8 @@ import { InitComponent} from './init/init.component';
const routes: Routes = [ const routes: Routes = [
{ path: ':name', component: SlideComponent }, { path: ':name', component: SlideComponent },
{ path: '', component: InitComponent } { path: '', redirectTo: '/home', pathMatch: 'full'}
// { path: '', component: InitComponent }
]; ];
@NgModule({ @NgModule({

View File

@ -1,4 +1,4 @@
<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''"> <div class="router" [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet> <router-outlet #o="outlet"></router-outlet>
</div> </div>

View File

@ -0,0 +1 @@
div.router { overflow:hidden;}

View File

@ -1,13 +1,13 @@
<div class="slide" routerLink="home" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');"> <div class="slide" routerLink="home" style="background-image:url('/assets/img/trailer.gif');">
<div class="element" *ngIf="false"> <div class="element">
<h1 routerLink="home" style="cursor:pointer">Beire</h1> <!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
<h2>Un propuesta de Maite Redondo y Luca Rullo</h2> <!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> --> <!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
<h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> <!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
<div class="element logo"> <div class="element logo">
<img src="assets/img/landarte_logo.png"/> <img src="assets/img/landarte_logo.png"/>
<img src="assets/img/logoCK.png"/>
<img src="assets/img/logoBeire.png"/> <img src="assets/img/logoBeire.png"/>
<img src="assets/img/logoEscuelaMusicaOlite.jpg"/>
<img src="assets/img/logoSoinumapa.png"/> <img src="assets/img/logoSoinumapa.png"/>
</div> </div>
</div> </div>

View File

@ -76,8 +76,8 @@ export class PlayerService {
if (data.length <= 0) { return } if (data.length <= 0) { return }
this.ListIndex = this.getRandomInt(data.length); this.ListIndex = this.getRandomInt(data.length);
if (this.ListIndex >= data.length) { this.ListIndex = 0 } if (this.ListIndex >= data.length) { this.ListIndex = 0 }
if (!data[this.ListIndex]["title"]) {this.audio_title = "Escuchando desde Beire"} if (!data[this.ListIndex]["title"]) {this.audio_title = "desde Beire"}
else {this.audio_title = "Escuchando "+data[this.ListIndex]["title"]} else {this.audio_title = data[this.ListIndex]["title"]}
this.playUrl(data[this.ListIndex]["url"],this.audio_title) this.playUrl(data[this.ListIndex]["url"],this.audio_title)
} }
) )

View File

@ -2,17 +2,28 @@
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()"> <div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
<div class="content"> <div class="content">
<div class="element logo" *ngIf="slide.name=='about'">
<a href="http://www.landarte.es/"><img style="max-height:60px;" src="assets/img/landarte_logo.png"/></a>
</div>
<div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div> <div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
<div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div> <div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div>
<div class="element second-title" [innerHTML]="slide.content"></div> <div class="element second-title" [innerHTML]="slide.content"></div>
<div class="element logo" *ngIf="slide.name=='about'">
<a href="http://www.culturanavarra.es/"><img src="assets/img/logoCK.png"/></a>
<a href="http://www.navarra.es/"><img src="assets/img/navarra.png"/></a>
</div>
<div class="element logo" *ngIf="slide.name=='about'">
<a href="https://www.beire.es/"><img src="assets/img/logoBeire.png"/></a>
<a href="http://soinumapa.net"><img src="assets/img/logoSoinumapa.png" style="max-width:80px;"/></a>
</div>
</div> </div>
</div> </div>
<div class="controls" *ngIf="slide"> <div class="controls" *ngIf="slide">
<div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div> <div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
<div *ngIf="slide.e" class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div> <div *ngIf="slide.e" class="right control end"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
<div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><div class="rotate-up"><img src="assets/img/left.svg"/></div></div></div> <div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
<div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><div class="rotate-down"><img src="assets/img/left.svg"/></div></div></div> <div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
</div> </div>
<div class="header"> <div class="header">
@ -29,13 +40,20 @@
</div> </div>
<div class="footer right"> <div class="footer right">
<span class="audioElement"[innerHTML]="audio_title"></span> <span class="audioElement"[innerHTML]="'Escuchando '+audio_title"></span>
</div> </div>
<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()"> <div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
<div id="video-player-content"></div> <div id="video-player-content" (click)="stopVideo()"></div>
</div> </div>
</ng-container> </ng-container>
<div *ngIf="showInit" class="slide init-slide" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');" (click)="forcePlay()"></div> <div *ngIf="showInit" class="slide init-slide" style="background-image:url('/assets/img/trailer.gif');" (click)="forcePlay()">
<div class="element">
<!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
<!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
<!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
</div>
</div>

View File

@ -17,16 +17,20 @@ div.slide {
} }
div.slide.init-slide { div.slide.init-slide {
background-size:cover;
background-position:center center;
position:absolute; position:absolute;
background-repeat: no-repeat;
z-index:2000; z-index:2000;
top:0; top:0;
left:0; left:0;
filter:none;
} }
div.element { div.element {
width:50vw; width:50vw;
margin:auto; margin:auto;
text-align:center; text-align:justify;
} }
div.big-title { div.big-title {
@ -41,22 +45,33 @@ div.big-title {
} }
div.second-title { div.second-title {
font-size:1.6vw; font-size:1.2vmax;
font-family:"Swiss Light",serif; font-family:"Helvetica",serif;
overflow-wrap:break-word; overflow-wrap:break-word;
text-align:justify;
a { text-decoration:none; font-weight:bold;} a { text-decoration:none; font-weight:bold;}
} }
/* controls */ /* controls */
div.controls{ div.controls{
div.control {position:absolute;z-index:100;width:10vw;height:10vh;display:flex;justify-content: center; align-items: center;} div.control {
div.left { top:0;left:0;height:100vh; } position:absolute;
div.right { top:0;right:0;height:100vh; } z-index:100;
div.top { top:0;left:0;width:100vw;padding-top:2vh; } width:22vw;
div.bottom { bottom:0;left:0;width:100vw; } height:18vh;
display:flex;justify-content: center; align-items: center;}
div.left { top:0;left:4.5vw;height:100vh;max-width:80px; }
div.right { top:0;right:4.5vw;height:100vh;max-width:80px; }
div.top { top:5.5vh;left:0;width:100vw;padding-top:2vh;max-height:80px; }
div.bottom { bottom:6vh;left:0;width:100vw;max-height:80px; }
}
div.controls.end {
justify-content: end;
} }
div.arrow { div.arrow {
display:inline-flex;
cursor:pointer; cursor:pointer;
min-width:75px; min-width:75px;
min-height:75px; min-height:75px;
@ -68,7 +83,7 @@ div.arrow {
font-weight:bold; font-weight:bold;
div.rotate-up { transform:rotate(90deg);} div.rotate-up { transform:rotate(90deg);}
div.rotate-down { transform:rotate(-90deg);} div.rotate-down { transform:rotate(-90deg);}
img { max-width:60px; max-height:60px;} img { max-width:60px; max-height:60px; margin:auto;}
} }
/* header */ /* header */
@ -115,4 +130,12 @@ div.video-player {
background:rgba(0,0,0,0.5); background:rgba(0,0,0,0.5);
top:0; top:0;
* { margin:auto;} * { margin:auto;}
#video-player-content { max-width:100%; max-height:100%; display:inherit; }
}
/** logo **/
div.logo img {
padding:10px;
max-height:40px;
max-width:200px;
} }

View File

@ -78,16 +78,20 @@ export class SlideComponent implements OnInit {
showVideoVimeo(id:string) { showVideoVimeo(id:string) {
var options = {loop: false, id: id, responsive: true, autoplay: true}; var options = {loop: false, id: id, responsive: false, autoplay: true};
if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();} if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
else if ( this.getVideoId() == id ) { this.videoPlayer.requestFullscreen(); } else if ( this.getVideoId() == id ) {
//this.videoPlayer.requestFullscreen();
}
this.videoPlayer = new Player('video-player-content', options); this.videoPlayer = new Player('video-player-content', options);
this.showVideo = "flex" this.showVideo = "flex"
this.videoPlayer.on('play', () => { this.videoPlayer.on('play', () => {
this._videoID = id; this._videoID = id;
this.videoPlayer.getFullscreen().then( (f) => { if (!f) { this.videoPlayer.requestFullscreen(); } }); this.videoPlayer.getFullscreen().then( (f) => {
//if (!f) { this.videoPlayer.requestFullscreen(); }
});
} }
); );
this.videoPlayer.on('ended', () => { this.stopVideo(); }); this.videoPlayer.on('ended', () => { this.stopVideo(); });
@ -122,13 +126,15 @@ export class SlideComponent implements OnInit {
this.up(e); break; this.up(e); break;
case "ArrowDown" : case "ArrowDown" :
this.down(e); break; this.down(e); break;
case "Space" :
this.playUrl(); break;
} }
} }
left(e) { this.router.navigate(['/', this.slide.o]);} left(e) { if (this.slide.o) this.router.navigate(['/', this.slide.o]);}
right(e) { this.router.navigate(['/', this.slide.e]); } right(e) { if (this.slide.e) this.router.navigate(['/', this.slide.e]); }
up(e) { this.router.navigate(['/', this.slide.n]); } up(e) { if (this.slide.n) this.router.navigate(['/', this.slide.n]); }
down(e) { this.router.navigate(['/', this.slide.s]); } down(e) { if (this.slide.s) this.router.navigate(['/', this.slide.s]); }
mute() { mute() {
this.playerService.mute(); this.playerService.mute();

BIN
src/assets/img/logoCK.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/img/navarra.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

BIN
src/assets/img/trailer.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 948 B

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -2,10 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BeireFrontend</title> <title>Beire - Una propuesta de Maite Redondo y Luca Rullo</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="description" content="Una propuesta de Maite Redondo y Luca Rullo para el programa Landarte, Cultura contemporánea y ruralidad. Con la ayuda de JESUSA — PAZ — LOLA — JUANA — CATALINA — ARACELI — YASMIN — ANGÉLICA — MIREN — NAIARA — NOA — TERE — AMAYA — IDOIA — PATRICIA — DAVID — LUIS MARI — PAULA — DAVID — JUAN — MARI CARMEN — AINARA — MARGARITA RUBIO — FERMINA [BURRA] — AZAHARA — ASIER — JUDITH — MARKEL — ION — NIEZYELA — SAAD — ALICIA — OIHANE — JOAQUIN — JAVIER GORRIA — ALFONSO — MARI — PEPÍN — BERTA — JOSÉ PIERRE — BRUNO — VIRGINIA — POLI — VALENTÍN — CHARO — CECILIA — FERMINA — FLAVIO — CASINO DE BEIRE — MARI — PEDRO LUIS — HILDA — BAR BARIAIN — ANGÉLICA — MARGARITA ONGAY — VICTOR — EDUARDO — CARLOS — IGNACIO — ESCALERAS ARIZONA — ESCUELA DE MÚSICA DE OLITE — GERMÁN — JAVIER CLEMENTE — AMETS — MIKEL — GARAZI — PERU — NURIA — JON — ANNE — MARC">
<meta name="keywords" content="beire, landarte, navarra, nafarroa, cultura, documental, interactivo, documentary, interactive, maite redondo, luca rullo">
<meta name="author" content="Maite Redondo y Luca Rullo">
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
</head> </head>
<body> <body>