pepepper
/
tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #117 from eai04191/feature/card-horizontal 

カードのレイアウトを横向きに
This commit is contained in:
shibafu 2019-03-02 16:04:00 +09:00 committed by GitHub
parent 023857f7d7 0ff253cbfb
commit b961956b63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/tissue.css vendored
View File

@ -84,4 +84,16 @@
#navbarAccountDropdownSp {
max-width: calc(100vw - 5em);
}
.card-img-left {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-bottom-left-radius: calc(.25rem - 1px);
}
.card-img-right {
width: 100%;
border-top-right-radius: calc(.25rem - 1px);
border-bottom-right-radius: calc(.25rem - 1px);
}

7
public/js/tissue.js vendored
View File

@ -17,9 +17,11 @@
url: $this.find('a').attr('href')
}
}).then(function (data) {
var $metaColumn = $this.find('.col-12:last-of-type');
var $imageColumn = $this.find('.col-12:first-of-type');
var $title = $this.find('.card-title');
var $desc = $this.find('.card-text');
var $image = $this.find('img');
var $image = $imageColumn.find('img');
if (data.title === '') {
$title.hide();
@ -34,7 +36,8 @@
}
if (data.image === '') {
$image.hide();
$imageColumn.hide();
$metaColumn.removeClass('col-md-6');
} else {
$image.attr('src', data.image);
}

16
resources/views/components/link-card.blade.php
View File

@ -1,9 +1,15 @@
<div class="card link-card mb-2 px-0 col-12 col-md-6 d-none" style="font-size: small;">
<div class="card link-card mb-2 px-0 col-12 d-none" style="font-size: small;">
<a class="text-dark card-link" href="{{ $link }}" target="_blank" rel="noopener">
<img src="" alt="Thumbnail" class="card-img-top bg-secondary">
<div class="card-body">
<h6 class="card-title font-weight-bold">タイトル</h6>
<p class="card-text">コンテンツの説明文</p>
<div class="row no-gutters">
<div class="col-12 col-md-6">
<img src="" alt="Thumbnail" class="card-img-left bg-secondary">
</div>
<div class="col-12 col-md-6">
<div class="card-body">
<h6 class="card-title font-weight-bold">タイトル</h6>
<p class="card-text">コンテンツの説明文</p>
</div>
</div>
</div>
</a>
</div>