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

14
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">
<div class="thumb">
<div [style.background-image]="getThumb(show.slug)"> </div>
</div>
<div class="data">
<p class="title">{{show.title}}</p> <p class="title">{{show.title}}</p>
<p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</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> <ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
<p class="overview">{{show.overview}}</p> <p class="overview">{{show.overview}}</p>
</mat-card> </div>
</a> </a>
</mat-card>
</div>
</div> </div>

55
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,20 +34,32 @@ button
{ {
width: 33%; width: 33%;
} }
}
.show
{
padding: 0;
> a
{
text-decoration: none;
color: inherit;
outline: none;
position: relative;
&:focus, &:hover &:focus, &:hover
{ {
> div
{
outline: solid var(--accentColor);
}
> .title > .data > .title
{ {
text-decoration: underline; text-decoration: underline;
} }
} }
> .thumb
{
width: 33%;
> div > div
{ {
width: 100%; width: 100%;
@ -59,25 +68,47 @@ button
background-size: cover; background-size: cover;
background-color: #333333; background-color: #333333;
} }
}
> p > .data
{
width: 67%;
padding: .5rem;
position: absolute;
top: 0;
bottom: 0;
right: 0;
> p:not(.overview)
{ {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
margin-bottom: 0px; margin-bottom: 0;
opacity: 1; opacity: 1;
display: inline-block;
&.date &.date
{ {
opacity: 0.8; opacity: 0.8;
font-size: 0.8em; 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 &:host-context(.hoverEnabled) &:hover
{ {
cursor: pointer; 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";