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

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

@ -18,15 +18,12 @@ button
flex-wrap: wrap; flex-wrap: wrap;
} }
.show .show-container
{ {
width: 100%; width: 100%;
min-width: 300px; min-width: 300px;
list-style: none; list-style: none;
margin: .5em; padding: .5em;
text-decoration: none;
color: inherit;
outline: none;
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)
{ {
@ -37,47 +34,81 @@ button
{ {
width: 33%; 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 > .data
{
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
{ {
opacity: 0.8; width: 67%;
font-size: 0.8em; padding: .5rem;
} position: absolute;
} top: 0;
bottom: 0;
right: 0;
&:host-context(.hoverEnabled) &:hover > p:not(.overview)
{ {
cursor: pointer; 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 {Show} from "../../models/show";
import {DomSanitizer} from "@angular/platform-browser"; import {DomSanitizer} from "@angular/platform-browser";