Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-08-07 09:01:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleaning up the grid

Browse Source
This commit is contained in:
Zoe Roux 2020-04-21 23:22:33 +02:00
parent e84ce29783
commit cde168c425
3 changed files with 85 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/show-grid/show-grid.component.html
View File

@ -1,11 +1,17 @@
<div class="container-fluid">
<a class="show" *ngFor="let show of this.shows" href="/show/{{show.slug}}" routerLink="show/{{show.slug}}">
<mat-card>
<div matRipple [style.background-image]="getThumb(show.slug)" > </div>
<p class="title">{{show.title}}</p>
<p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
<ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
<p class="overview">{{show.overview}}</p>
<div *ngFor="let show of this.shows" class="show-container">
<mat-card class="show">
<a href="/show/{{show.slug}}" routerLink="show/{{show.slug}}" class="d-flex">
<div class="thumb">
<div [style.background-image]="getThumb(show.slug)"> </div>
</div>
<div class="data">
<p class="title">{{show.title}}</p>
<p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
<ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
<p class="overview">{{show.overview}}</p>
</div>
</a>
</mat-card>
</a>
</div>
</div>

109
src/app/show-grid/show-grid.component.scss
View File

@ -18,16 +18,13 @@ button
flex-wrap: wrap;
}
.show
.show-container
{
width: 100%;
min-width: 300px;
list-style: none;
margin: .5em;
text-decoration: none;
color: inherit;
outline: none;
padding: .5em;
@include media-breakpoint-up(lg)
{
width: 50%;
@ -37,47 +34,81 @@ button
{
width: 33%;
}
}
&:focus, &:hover
.show
{
padding: 0;
> a
{
> div
text-decoration: none;
color: inherit;
outline: none;
position: relative;
&:focus, &:hover
{
outline: solid var(--accentColor);
> .data > .title
{
text-decoration: underline;
}
}
> .title
> .thumb
{
text-decoration: underline;
width: 33%;
> div
{
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
}
}
> div
{
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
> p
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-bottom: 0px;
opacity: 1;
&.date
> .data
{
opacity: 0.8;
font-size: 0.8em;
}
}
width: 67%;
padding: .5rem;
position: absolute;
top: 0;
bottom: 0;
right: 0;
&:host-context(.hoverEnabled) &:hover
{
cursor: pointer;
> p:not(.overview)
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-bottom: 0;
opacity: 1;
display: inline-block;
&.date
{
opacity: 0.8;
font-size: 0.8em;
padding-left: 1rem;
}
}
> .overview
{
overflow-y: auto;
height: calc(100% - 2rem);
text-align: justify;
padding-right: .5rem;
}
&:host-context(.hoverEnabled) &:hover
{
cursor: pointer;
}
}
}
}

2
src/app/show-grid/show-grid.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnInit} from '@angular/core';
import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
import {Show} from "../../models/show";
import {DomSanitizer} from "@angular/platform-browser";