WIP: Change Okazu view

This commit is contained in:
eai04191 2019-08-08 16:30:39 +09:00
parent f7c9e83b12
commit cc905a0bce
2 changed files with 44 additions and 0 deletions

View File

@ -0,0 +1,9 @@
<div class="card okazu-card overflow-hidden d-none">
<a href="{{ $link }}" target="_blank" rel="noopener">
<img src="" class="card-img" alt="">
<div class="card-img-overlay d-flex align-items-end p-3">
<h5 class="card-title overflow-hidden m-0 font-weight-bold p-1" style="text-overflow: ellipsis;white-space: nowrap;background: rgba(229, 63, 177, 0.75);color: white;">Card title</h5>
<p class="card-text overflow-hidden d-none" style="text-overflow: ellipsis;white-space: nowrap;">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</a>
</div>

View File

@ -31,6 +31,41 @@
<p class="mt-4"> <p class="mt-4">
<span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。 <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
</p> </p>
@elseif (Route::currentRouteName() === 'user.okazu')
@push('script')
<script>
document.querySelectorAll(".okazu-card").forEach(card => {
const title = card.querySelector(".card-title");
const description = card.querySelector(".card-text");
const image = card.querySelector(".card-img");
const params = new URLSearchParams();
params.set('url', card.querySelector("a").href);
fetch("/api/checkin/card?" + params.toString())
.then(response => response.json())
.then(json => {
if (json.image) {
title.innerText = json.title;
description.innerText = json.description;
image.setAttribute("src", json.image);
card.classList.remove("d-none");
}
})
});
</script>
@endpush
<div class="card-columns mt-3">
@forelse ($ejaculations as $ejaculation)
@component('components.okazu-card', ['link' => $ejaculation->link])
@endcomponent
@empty
<li class="list-group-item border-bottom-only">
<p>まだチェックインしていません。</p>
</li>
@endforelse
</div>
@else @else
<ul class="list-group"> <ul class="list-group">
@forelse ($ejaculations as $ejaculation) @forelse ($ejaculations as $ejaculation)