Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

fix link/video borders

This commit is contained in:
Nicolas Constant 2019-10-01 00:40:23 -04:00
parent 4ba42a0d0c
commit 8c36620b0a
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/components/stream/status/card/card.component.html
View File

@ -1,34 +1,34 @@
<div class="card" *ngIf="card.type === 'link' || card.type === 'video'"> <div class="card-data" *ngIf="card.type === 'link' || card.type === 'video'">
<a *ngIf="card.type === 'link'" class="card__link" href="{{ card.url }}" target="_blank" title="{{ card.title }}"> <a *ngIf="card.type === 'link'" class="card-data__link" href="{{ card.url }}" target="_blank" title="{{ card.title }}">
<img *ngIf="card.image" class="card__link--image" src="{{ card.image }}" alt="" /> <img *ngIf="card.image" class="card-data__link--image" src="{{ card.image }}" alt="" />
<div *ngIf="!card.image" class="card__link--image"> <div *ngIf="!card.image" class="card-data__link--image">
<fa-icon class="card__link--image--logo" [icon]="faFileAlt"></fa-icon> <fa-icon class="card-data__link--image--logo" [icon]="faFileAlt"></fa-icon>
</div> </div>
<h3 class="card__link--title">{{ card.title }}</h3> <h3 class="card-data__link--title">{{ card.title }}</h3>
<span class="card__link--host">{{ host }}</span> <span class="card-data__link--host">{{ host }}</span>
</a> </a>
<div *ngIf="card.type === 'photo'" class="card__photo"> <div *ngIf="card.type === 'photo'" class="card-data__photo">
</div> </div>
<div *ngIf="card.type === 'video'" class="card__video"> <div *ngIf="card.type === 'video'" class="card-data__video">
<div *ngIf="!showHtml" class="card__video--preview"> <div *ngIf="!showHtml" class="card-data__video--preview">
<div class="card__video--preview--controls"> <div class="card-data__video--preview--controls">
<a href class="card__video--preview--link" (click)="play()" title="play"> <a href class="card-data__video--preview--link" (click)="play()" title="play">
<fa-icon [icon]="faPlay"></fa-icon> <fa-icon [icon]="faPlay"></fa-icon>
</a> </a>
<a href class="card__video--preview--link" (click)="expand()" title="open"> <a href class="card-data__video--preview--link" (click)="expand()" title="open">
<fa-icon [icon]="faExpand"></fa-icon> <fa-icon [icon]="faExpand"></fa-icon>
</a> </a>
<a href="{{ card.url }}" class="card__video--preview--link" target="_blank" title="browse"> <a href="{{ card.url }}" class="card-data__video--preview--link" target="_blank" title="browse">
<fa-icon [icon]="faExternalLinkAlt"></fa-icon> <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
</a> </a>
</div> </div>
<img src="{{ card.image }}" class="card__video--preview--image" /> <img src="{{ card.image }}" class="card-data__video--preview--image" />
</div> </div>
<div #video *ngIf="showHtml" class="card__video--content" [innerHTML]="html"> <div #video *ngIf="showHtml" class="card-data__video--content" [innerHTML]="html">
</div> </div>
</div> </div>
<div *ngIf="card.type === 'rich'" class="card__rich" [innerHTML]="html"></div> <div *ngIf="card.type === 'rich'" class="card-data__rich" [innerHTML]="html"></div>
</div> </div>

8
src/app/components/stream/status/card/card.component.scss
View File

@ -1,15 +1,12 @@
@import "variables"; @import "variables";
.card { .card-data {
border-radius: 3px; border-radius: 3px;
border: 0px; border: 0px;
transition: all .2s; transition: all .2s;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background-color: $column-background;
// background-color: red;
&:hover { &:hover {
background-color: lighten($column-background, 5); background-color: lighten($column-background, 5);
@ -19,6 +16,7 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
color: whitesmoke; color: whitesmoke;
overflow: auto;
border: 1px solid $card-border-color; border: 1px solid $card-border-color;

2
src/sass/_variables.scss
View File

@ -48,7 +48,7 @@ $button-border-color: #303957;
$column-background: #0f111a; $column-background: #0f111a;
$card-border-color: #1e2435; $card-border-color: #2b344d;
$context-menu-background: #d9e1e8; $context-menu-background: #d9e1e8;
$context-menu-background-hover: #a9c9e6; $context-menu-background-hover: #a9c9e6;