therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor the FE parts

Browse source
This commit is contained in:
shpuld 2019-01-27 22:33:36 +02:00 • committed by William Pitcock
parent 2b86f6e883
commit 96c36af731
3 changed files with 74 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/link-preview/link-preview.vue
View file

@ -1,13 +1,13 @@
<template>
<div>
<a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
<div class="image">
<div :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
<div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
<img :src="card.image"></img>
</div>
<div class="content">
<strong>{{ card.title }}</strong>
<p>{{ card.description }}</p>
<span class="host">{{ card.provider_name }}</span>
<div class="card-content">
<span class="card-host faint">{{ card.provider_name }}</span>
<h4 class="card-title">{{ card.title }}</h4>
<p class="card-description" v-if="useDescription">{{ card.description }}</p>
</div>
</a>
</div>
@ -19,36 +19,56 @@
@import '../../_variables.scss';
.link-preview-card {
display: flex !important;
display: flex;
flex-direction: row;
cursor: pointer;
margin: 0.5em 0.7em 0.6em 0.0em;
overflow: hidden;
.image {
flex: 0 0 100px;
position: relative;
}
// TODO: clean up the random margins in attachments, this makes preview line
// up with attachments...
margin-right: 0.7em;
.image > div {
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center center;
}
.content {
padding: 1em;
flex: 1;
.host {
font-size: 90%;
.card-image {
flex-shrink: 0;
width: 120px;
max-width: 25%;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
}
}
.small-image {
width: 80px;
}
.card-content {
max-height: 100%;
margin: 0.5em;
display: flex;
flex-direction: column;
}
.card-host {
font-size: 12px;
}
.card-description {
margin: 0.5em 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px);
}
color: $fallback--text;
color: var(--text, $fallback--text);
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;