1
0
mirror of https://github.com/Kovah/LinkAce.git synced 2025-04-14 03:32:01 +02:00

Minor styling changes for link thumbnails

This commit is contained in:
Kovah 2021-04-18 13:59:28 +02:00
parent 9caeadfddb
commit 39ed05e1a1
No known key found for this signature in database
GPG Key ID: AAAA031BA9830D7B
3 changed files with 32 additions and 16 deletions

View File

@ -166,21 +166,38 @@ code {
display: none !important;
}
.link-thumbnail {
box-shadow: inset 0 0 1px $secondary;
}
.link-thumbnail-detail {
width: 180px;
height: 100px;
background-size: cover !important;
width: 100%;
height: auto;
padding-bottom: 52.5%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include media-breakpoint-up('lg') {
width: 180px;
height: 93px;
padding-bottom: 0;
}
}
.link-thumbnail-list-holder {
width: 100%;
@include media-breakpoint-up('md') {
width: auto;
}
width: 180px;
height: 93px;
//@include media-breakpoint-up('lg') {
// width: 180px;
//}
.link-thumbnail-list {
width: 100px;
height: 75px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover !important;
}
}

View File

@ -4,7 +4,8 @@
<div class="d-flex align-items-top flex-wrap flex-md-nowrap">
@if($link->thumbnail)
<div class="d-flex justify-content-center mr-2 mb-2 mb-md-0 link-thumbnail-list-holder">
<a href="{{ $link->url }}" {!! linkTarget() !!} class="border rounded d-block link-thumbnail-list" style="background: url('{{ $link->thumbnail }}') no-repeat center;">
<a href="{{ $link->url }}" {!! linkTarget() !!} class="rounded d-block link-thumbnail link-thumbnail-list"
style="background-image: url('{{ $link->thumbnail }}');">
</a>
</div>
@endif

View File

@ -9,12 +9,10 @@
<div class="card-body">
<div class="d-flex flex-column flex-lg-row mb-3">
@if($link->thumbnail)
<div class="mt-1 mr-2 align-self-center">
<a href="{{ $link->url }}" {!! linkTarget() !!}
class="border rounded d-block link-thumbnail-detail" style="background: url('{{ $link->thumbnail }}') no-repeat center;">
</a>
</div>
<a href="{{ $link->url }}" {!! linkTarget() !!}
class="rounded d-block mt-lg-1 mr-lg-2 align-self-center link-thumbnail link-thumbnail-detail"
style="background-image: url('{{ $link->thumbnail }}') ;">
</a>
@endif
<div class="d-sm-inline-block mt-1 mb-2 mb-sm-0">
{!! $link->getIcon('mr-1 mr-sm-2') !!}