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

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

Browse Source 
カードのレイアウトを横向きに
This commit is contained in:
shibafu 2019-03-02 16:04:00 +09:00 committed by GitHub
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 { #navbarAccountDropdownSp {
max-width: calc(100vw - 5em); 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') url: $this.find('a').attr('href')
} }
}).then(function (data) { }).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 $title = $this.find('.card-title');
var $desc = $this.find('.card-text'); var $desc = $this.find('.card-text');
var $image = $this.find('img'); var $image = $imageColumn.find('img');
if (data.title === '') { if (data.title === '') {
$title.hide(); $title.hide();
@ -34,7 +36,8 @@
} }
if (data.image === '') { if (data.image === '') {
$image.hide(); $imageColumn.hide();
$metaColumn.removeClass('col-md-6');
} else { } else {
$image.attr('src', data.image); $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"> <a class="text-dark card-link" href="{{ $link }}" target="_blank" rel="noopener">
<img src="" alt="Thumbnail" class="card-img-top bg-secondary"> <div class="row no-gutters">
<div class="card-body"> <div class="col-12 col-md-6">
<h6 class="card-title font-weight-bold">タイトル</h6> <img src="" alt="Thumbnail" class="card-img-left bg-secondary">
<p class="card-text">コンテンツの説明文</p> </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> </div>
</a> </a>
</div> </div>