mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-18 11:03:17 +00:00
Refactor embeds
This commit is contained in:
Daniel Supernault
parent
87ee0633fe
commit
51b6fe7dc8
2 changed files with 143 additions and 265 deletions
|
|
@ -1,14 +1,11 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ app()->getLocale() }}">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<title>{{ $title ?? config_cache('app.name', 'Pixelfed') }}</title>
|
||||||
<title>{{ $title ?? config('app.name', 'Pixelfed') }}</title>
|
|
||||||
|
|
||||||
<meta property="og:site_name" content="{{ config_cache('app.name', 'pixelfed') }}">
|
<meta property="og:site_name" content="{{ config_cache('app.name', 'pixelfed') }}">
|
||||||
<meta property="og:title" content="{{ $title ?? config_cache('app.name', 'pixelfed') }}">
|
<meta property="og:title" content="{{ $title ?? config_cache('app.name', 'pixelfed') }}">
|
||||||
<meta property="og:type" content="article">
|
<meta property="og:type" content="article">
|
||||||
|
|
@ -18,101 +15,82 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
|
<link rel="shortcut icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
|
||||||
<link rel="apple-touch-icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
|
<link rel="apple-touch-icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
|
<style>.btn,img{vertical-align:middle}.btn,a{background-color:transparent}.btn:hover,a{text-decoration:none}.card,.col-4,.info-overlay,.square{position:relative}*,::after,::before{box-sizing:border-box}p{margin-top:0;margin-bottom:1rem}a{color:#2c78bf}a:hover{color:#1e5181;text-decoration:underline}img{border-style:none}.small{font-size:.875em;font-weight:400}.btn,body{font-size:.9rem;font-weight:400;line-height:1.6;color:#212529}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-4{width:100%;padding-right:15px;padding-left:15px;flex:0 0 33.33333333%;max-width:33.33333333%}.btn{display:inline-block;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.card,body{display:flex}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(44,120,191,.25)}.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(76,140,201,.5)}.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}.btn-primary,.btn-primary:disabled{color:#fff;background-color:#2c78bf;border-color:#2c78bf}.btn-primary:focus,.btn-primary:hover{background-color:#2564a0;border-color:#225e96;color:#fff}.btn-primary:not(:disabled):not(.disabled):active{color:#fff;background-color:#225e96;border-color:#20578b}.btn-sm{padding:.25rem .5rem;font-size:.7875rem;line-height:1.5;border-radius:.2rem}.card{flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}.card-footer,.card-header{padding:.75rem 1.25rem;background-color:#fff}.card-header{margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.bg-white{background-color:#fff!important}.border{border:1px solid #dee2e6!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.shadow-none{box-shadow:none!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-4{margin-top:1.5rem!important}.px-0{padding-right:0!important;padding-left:0!important}.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.px-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.text-center{text-align:center!important}.text-uppercase{text-transform:uppercase!important}.font-weight-bold{font-weight:700!important}a.text-dark:focus,a.text-dark:hover{color:#000!important}a.text-muted:focus,a.text-muted:hover{color:#454b50!important}.text-muted{color:#6c757d!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}img{page-break-inside:avoid}p{orphans:3;widows:3}body{min-width:992px!important}}body{margin:0;text-align:left;background-color:rgba(247,251,253,.4705882353);min-height:100vh;flex-flow:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}.text-dark{color:#212529!important}.square{width:100%}.square::after{content:"";display:block;padding-bottom:100%}.square-content{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:50%}@media (max-width:576px){.card-md-border-0{border-width:0!important;border-radius:0!important}.card-md-rounded-0{border-width:1px 0;border-radius:0!important}}.card{box-shadow:0 2px 6px 0 hsla(0,0%,0%,.2);border:none}body.embed-card{background:#fff!important;margin:0;padding-bottom:0}.status-card-embed{box-shadow:none;border-radius:4px;overflow:hidden}.avatar{border-radius:100%}</style>
|
||||||
<style type="text/css">
|
|
||||||
body.embed-card {
|
|
||||||
background: #fff !important;
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
.status-card-embed {
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white">
|
<body class="bg-white">
|
||||||
<div class="embed-card">
|
<div class="embed-card">
|
||||||
<div class="card status-card-embed card-md-rounded-0 border">
|
<div class="card status-card-embed card-md-rounded-0 border">
|
||||||
<div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
|
<div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
|
||||||
<div>
|
<div>
|
||||||
<img src="{{$profile['avatar']}}" width="32px" height="32px" style="border-radius: 32px;">
|
<img src="{{$profile['avatar']}}" width="32" height="32" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
|
||||||
<a class="username font-weight-bold pl-2 text-dark" target="_blank" href="{{$profile['url']}}">
|
<a class="username font-weight-bold pl-2 text-dark" target="_blank" href="{{$profile['url']}}">
|
||||||
{{$profile['username']}}
|
{{$profile['username']}}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a class="small font-weight-bold text-muted pr-1" href="{{config('app.url')}}" target="_blank">{{config('pixelfed.domain.app')}}</a>
|
<a class="small font-weight-bold text-muted pr-1" href="{{config('app.url')}}" target="_blank">{{config('pixelfed.domain.app')}}</a>
|
||||||
<img src="/img/pixelfed-icon-color.svg" width="26px">
|
<img src="/img/pixelfed-icon-color.svg" width="26" height="26">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body pb-1">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['statuses_count']}}"></p>
|
||||||
|
<p class="mb-0 text-muted text-uppercase small font-weight-bold">Posts</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['followers_count']}}"></p>
|
||||||
|
<p class="mb-0 text-muted text-uppercase small font-weight-bold">Followers</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="mb-0"><a href="/i/intent/follow?user={{$profile['username']}}" class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" target="_blank">Follow</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mt-4 mb-1 embed-row"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer bg-white">
|
||||||
|
<p class="text-center mb-0">
|
||||||
|
<a href="{{$profile['url']}}" class="font-weight-bold" target="_blank">View More Posts</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<script type="text/javascript">
|
||||||
<div class="card-body pb-1">
|
window.addEventListener("message", e=>{const t=e.data||{};});
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
document.querySelectorAll('.caption-container a').forEach(function(i) {i.setAttribute('target', '_blank');});
|
||||||
<div class="text-center">
|
function formatCount(count = 0, locale = 'en-GB', notation = 'compact') {
|
||||||
<p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['statuses_count']}}"></p>
|
if(count < 1) {
|
||||||
<p class="mb-0 text-muted text-uppercase small font-weight-bold">Posts</p>
|
return 0;
|
||||||
</div>
|
}
|
||||||
<div class="text-center">
|
return new Intl.NumberFormat(locale, { notation: notation , compactDisplay: "short" }).format(count);
|
||||||
<p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['followers_count']}}"></p>
|
}
|
||||||
<p class="mb-0 text-muted text-uppercase small font-weight-bold">Followers</p>
|
function generateElements(html) {
|
||||||
</div>
|
const template = document.createElement('template');
|
||||||
<div class="text-center">
|
template.innerHTML = html.trim();
|
||||||
<p class="mb-0"><a href="/i/intent/follow?user={{$profile['username']}}" class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" target="_blank">Follow</a></p>
|
return template.content.children;
|
||||||
</div>
|
}
|
||||||
</div>
|
document.querySelectorAll('.prettyCount').forEach(function(i) {
|
||||||
<div class="row mt-4 mb-1 embed-row"></div>
|
i.innerText = formatCount(i.getAttribute('data-count'));
|
||||||
</div>
|
});
|
||||||
<div class="card-footer bg-white">
|
fetch("{{config('app.url')}}/api/pixelfed/v1/accounts/{{$profile['id']}}/statuses?only_media=true&limit=24")
|
||||||
<p class="text-center mb-0">
|
.then(res => res.json())
|
||||||
<a href="{{$profile['url']}}" class="font-weight-bold" target="_blank">View More Posts</a>
|
.then(res => {
|
||||||
</p>
|
let parent = document.querySelector('.embed-row');
|
||||||
</div>
|
|
||||||
</div>
|
res.filter(res => res.pf_type == 'photo' && !res.sensitive && res.visibility === 'public')
|
||||||
</div>
|
.slice(0, 9)
|
||||||
<script type="text/javascript" src="{{mix('js/manifest.js')}}"></script>
|
.forEach(post => {
|
||||||
<script type="text/javascript" src="{{mix('js/vendor.js')}}"></script>
|
let mediaUrl = post.media_attachments[0].preview_url ? post.media_attachments[0].preview_url : post.media_attachments[0].url;
|
||||||
<script type="text/javascript" src="{{mix('js/app.js')}}"></script>
|
let el = document.createElement('template')
|
||||||
<script type="text/javascript">
|
el.innerHTML = `<div class="col-4 mt-2 px-0"><a class="card info-overlay card-md-border-0 px-1 shadow-none" href="${post.url}" target="_blank"><div class="square"><div class="square-content" style="background-image: url('${mediaUrl}')"></div></div></a></div>`;
|
||||||
window.addEventListener("message", e=>{const t=e.data||{};});
|
parent.append(el.content);
|
||||||
</script>
|
})
|
||||||
<script type="text/javascript">document.querySelectorAll('.caption-container a').forEach(function(i) {i.setAttribute('target', '_blank');});</script>
|
}).then(() => {
|
||||||
<script type="text/javascript">
|
window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
|
||||||
document.querySelectorAll('.prettyCount').forEach(function(i) {
|
setTimeout(() => {
|
||||||
i.innerText = App.util.format.count(i.getAttribute('data-count'));
|
window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
|
||||||
});
|
}, 5000);
|
||||||
</script>
|
})
|
||||||
<script type="text/javascript">
|
</script>
|
||||||
axios.get('/api/pixelfed/v1/accounts/{{$profile['id']}}/statuses', {
|
|
||||||
params: {
|
|
||||||
only_media: true,
|
|
||||||
limit: 24
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(res => {
|
|
||||||
let parent = $('.embed-row');
|
|
||||||
res.data
|
|
||||||
.filter(res => res.pf_type == 'photo')
|
|
||||||
.filter(res => !res.sensitive)
|
|
||||||
.slice(0, 9)
|
|
||||||
.forEach(post => {
|
|
||||||
let el = `<div class="col-4 mt-2 px-0">
|
|
||||||
<a class="card info-overlay card-md-border-0 px-1 shadow-none" href="${post.url}" target="_blank">
|
|
||||||
<div class="square">
|
|
||||||
<div class="square-content" style="background-image: url('${post.media_attachments[0].url}')">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>`;
|
|
||||||
parent.append(el);
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
|
|
||||||
setTimeout(() => {
|
|
||||||
window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
|
|
||||||
}, 5000);
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,72 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ app()->getLocale() }}">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<title>{{ $title ?? config_cache('app.name', 'Pixelfed') }}</title>
|
||||||
|
<meta property="og:site_name" content="{{ config_cache('app.name', 'pixelfed') }}">
|
||||||
<title>{{ $title ?? config('app.name', 'Pixelfed') }}</title>
|
<meta property="og:title" content="{{ $title ?? config_cache('app.name', 'pixelfed') }}">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
<meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
|
<meta property="og:url" content="{{$status['url']}}">
|
||||||
<meta property="og:title" content="{{ $title ?? config('app.name', 'pixelfed') }}">
|
<meta name="medium" content="image">
|
||||||
<meta property="og:type" content="article">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta property="og:url" content="{{$status->url()}}">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="medium" content="image">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<style type="text/css">hr,p{margin-bottom:1rem}.small,body{font-weight:400}.card,body{display:flex}*,::after,::before{box-sizing:border-box}p{margin-top:0}a{color:#2c78bf;text-decoration:none;background-color:transparent}a:hover{color:#1e5181;text-decoration:underline}img{vertical-align:middle;border-style:none}hr{box-sizing:content-box;height:0;overflow:visible;margin-top:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small{font-size:.875em}.card{position:relative;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}.card-footer,.card-header{padding:.75rem 1.25rem;background-color:#fff}.card-header{margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.bg-white{background-color:#fff!important}.border{border:1px solid #dee2e6!important}.d-inline-flex{display:inline-flex!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.my-0{margin-top:0!important}.mb-0,.my-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.pr-1{padding-right:.25rem!important}.pl-2{padding-left:.5rem!important}.text-uppercase{text-transform:uppercase!important}.font-weight-bold{font-weight:700!important}a.text-dark:focus,a.text-dark:hover{color:#000!important}a.text-muted:focus,a.text-muted:hover{color:#454b50!important}.text-muted{color:#6c757d!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}img{page-break-inside:avoid}p{orphans:3;widows:3}body{min-width:992px!important}}body{margin:0;font-size:.9rem;line-height:1.6;color:#212529;text-align:left;background-color:rgba(247,251,253,.4705882353);min-height:100vh;flex-flow:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}.text-dark{color:#212529!important}@media (max-width:576px){.card-md-rounded-0{border-width:1px 0;border-radius:0!important}}.card{box-shadow:0 2px 6px 0 hsla(0,0%,0%,.2);border:none}.status-card-embed{box-shadow:none;border-radius:4px;overflow:hidden}body.embed-card{background:#fff!important;margin:0;padding-bottom:0}.avatar{border-radius:100%}</style>
|
||||||
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
|
||||||
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
|
|
||||||
<style type="text/css">
|
|
||||||
body.embed-card {
|
|
||||||
background: #fff !important;
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
.status-card-embed {
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white">
|
<body class="bg-white">
|
||||||
<div class="embed-card">
|
<div class="embed-card">
|
||||||
@php($item = $status)
|
<div class="card status-card-embed card-md-rounded-0 border">
|
||||||
<div class="card status-card-embed card-md-rounded-0 border">
|
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
<img src="{{$status['account']['avatar']}}" width="32" height="32" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
|
||||||
<img src="{{$item->profile->avatarUrl()}}" width="32px" height="32px" style="border-radius: 32px;">
|
<a class="username font-weight-bold pl-2 text-dark" target="_blank" rel="ugc" href="{{$status['account']['url']}}">
|
||||||
<a class="username font-weight-bold pl-2 text-dark" target="_blank" href="{{$item->profile->url()}}">
|
{{$status['account']['username']}}
|
||||||
{{$item->profile->username}}
|
</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
<a href="{{$status['url']}}" target="_blank" rel="ugc">
|
||||||
<a href="{{$status->url()}}" target="_blank">
|
<div>
|
||||||
@php($status = $item)
|
<img src="{{$status['media_attachments'][0]['preview_url'] ?? $status['media_attachments'][0]['url']}}" width="100%">
|
||||||
@switch($status->viewType())
|
</div>
|
||||||
@case('photo')
|
</a>
|
||||||
@case('image')
|
@if($layout != 'compact')
|
||||||
@if($status->is_nsfw)
|
<div class="card-body">
|
||||||
<details class="details-animated">
|
<div class="view-more mb-2">
|
||||||
<summary>
|
<a class="font-weight-bold" href="{{$status['url']}}" target="_blank">View More on Pixelfed</a>
|
||||||
<p class="mb-0 lead font-weight-bold">CW / NSFW / Hidden Media</p>
|
</div>
|
||||||
<p class="font-weight-light">(click to show)</p>
|
<hr>
|
||||||
</summary>
|
<div class="caption">
|
||||||
<a class="max-hide-overflow {{$status->firstMedia()->filter_class}}" href="{{$status->url()}}" target="_blank">
|
<p class="my-0">
|
||||||
<img class="card-img-top" src="{{$status->mediaUrl()}}">
|
<span class="username font-weight-bold">
|
||||||
</a>
|
<bdi><a class="text-dark" href="{{$status['account']['url']}}" target="_blank">{{$status['account']['username']}}</a></bdi>
|
||||||
</details>
|
</span>
|
||||||
@else
|
@if($showCaption)
|
||||||
<div class="{{$status->firstMedia()->filter_class}}">
|
<span class="caption-container">{{ $status['content_text'] }}</span>
|
||||||
<img src="{{$status->mediaUrl()}}" width="100%">
|
@endif
|
||||||
</div>
|
</p>
|
||||||
@endif
|
</div>
|
||||||
@break
|
</div>
|
||||||
@case('photo:album')
|
@endif
|
||||||
<div id="photo-carousel-wrapper-{{$status->id}}" class="carousel slide carousel-fade mb-n3 " data-ride="carousel">
|
<div class="card-footer bg-white d-inline-flex justify-content-between align-items-center">
|
||||||
<ol class="carousel-indicators">
|
<div class="timestamp">
|
||||||
@for($i = 0; $i < $status->media_count; $i++)
|
<p class="small text-uppercase mb-0">
|
||||||
<li data-target="#photo-carousel-wrapper-{{$status->id}}" data-slide-to="{{$i}}" class="{{$i == 0 ? 'active' : ''}}"></li>
|
<a href="{{$status['url']}}" class="text-muted" target="_blank" rel="ugc">
|
||||||
@endfor
|
{{now()->parse($status['created_at'])->diffForHumans()}}
|
||||||
</ol>
|
</a>
|
||||||
<div class="carousel-inner">
|
</p>
|
||||||
@foreach($status->media()->orderBy('order')->get() as $media)
|
</div>
|
||||||
<div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">
|
<div>
|
||||||
<figure class="{{$media->filter_class}}">
|
<a class="small font-weight-bold text-muted pr-1" href="{{config('app.url')}}" target="_blank">{{config('pixelfed.domain.app')}}</a>
|
||||||
<div class="float-right mr-3 badge badge-dark border border-secondary rounded-pill p-2" style="position:absolute;top:8px;right:0;margin-bottom:-20px;">{{$loop->iteration}}/{{$loop->count}}</div>
|
<img src="/img/pixelfed-icon-color.svg" width="26" height="26" />
|
||||||
<img class="d-block w-100" src="{{$media->url()}}" alt="{{$status->caption}}">
|
</div>
|
||||||
</figure>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
</div>
|
||||||
</div>
|
<script type="text/javascript">
|
||||||
<a class="carousel-control-prev" href="#photo-carousel-wrapper-{{$status->id}}" role="button" data-slide="prev">
|
window.addEventListener("message",e=>{const t=e.data||{};window.parent&&"setHeight"===t.type&&window.parent.postMessage({type:"setHeight",id:t.id,height:document.getElementsByTagName("html")[0].scrollHeight},"*")});
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
document.querySelectorAll('.caption-container a').forEach(function(i) {i.setAttribute('target', '_blank');});
|
||||||
<span class="sr-only">Previous</span>
|
</script>
|
||||||
</a>
|
|
||||||
<a class="carousel-control-next" href="#photo-carousel-wrapper-{{$status->id}}" role="button" data-slide="next">
|
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
||||||
<span class="sr-only">Next</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
@break
|
|
||||||
@case('video')
|
|
||||||
@if($status->is_nsfw)
|
|
||||||
<details class="details-animated">
|
|
||||||
<summary>
|
|
||||||
<p class="mb-0 lead font-weight-bold">CW / NSFW / Hidden Media</p>
|
|
||||||
<p class="font-weight-light">(click to show)</p>
|
|
||||||
</summary>
|
|
||||||
<div class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source src="{{$status->firstMedia()->url()}}" type="{{$status->firstMedia()->mime}}">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
@else
|
|
||||||
<div class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source src="{{$status->firstMedia()->url()}}" type="{{$status->firstMedia()->mime}}">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@break
|
|
||||||
@case('video-album')
|
|
||||||
@if($status->is_nsfw)
|
|
||||||
<details class="details-animated">
|
|
||||||
<summary>
|
|
||||||
<p class="mb-0 lead font-weight-bold">CW / NSFW / Hidden Media</p>
|
|
||||||
<p class="font-weight-light">(click to show)</p>
|
|
||||||
</summary>
|
|
||||||
<div class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source src="{{$status->firstMedia()->url()}}" type="{{$status->firstMedia()->mime}}">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
@else
|
|
||||||
<div class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source src="{{$status->firstMedia()->url()}}" type="{{$status->firstMedia()->mime}}">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@break
|
|
||||||
@endswitch
|
|
||||||
</a>
|
|
||||||
@if($layout != 'compact')
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="view-more mb-2">
|
|
||||||
<a class="font-weight-bold" href="{{$status->url()}}" target="_blank">View More on Pixelfed</a>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="caption">
|
|
||||||
<p class="my-0">
|
|
||||||
<span class="username font-weight-bold">
|
|
||||||
<bdi><a class="text-dark" href="{{$item->profile->url()}}" target="_blank">{{$item->profile->username}}</a></bdi>
|
|
||||||
</span>
|
|
||||||
@if($showCaption)
|
|
||||||
<span class="caption-container">{!! $item->rendered ?? e($item->caption) !!}</span>
|
|
||||||
@endif
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
<div class="card-footer bg-white d-inline-flex justify-content-between align-items-center">
|
|
||||||
<div class="timestamp">
|
|
||||||
<p class="small text-uppercase mb-0"><a href="{{$item->url()}}" class="text-muted" target="_blank">{{$item->created_at->diffForHumans()}}</a></p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="small font-weight-bold text-muted pr-1" href="{{config('app.url')}}" target="_blank">{{config('pixelfed.domain.app')}}</a>
|
|
||||||
<img src="/img/pixelfed-icon-color.svg" width="26px">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">window.addEventListener("message",e=>{const t=e.data||{};window.parent&&"setHeight"===t.type&&window.parent.postMessage({type:"setHeight",id:t.id,height:document.getElementsByTagName("html")[0].scrollHeight},"*")});</script>
|
|
||||||
<script type="text/javascript">document.querySelectorAll('.caption-container a').forEach(function(i) {i.setAttribute('target', '_blank');});</script>
|
|
||||||
<script type="text/javascript" src="{{ mix('js/manifest.js') }}"></script>
|
|
||||||
<script type="text/javascript" src="{{ mix('js/vendor.js') }}"></script>
|
|
||||||
<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue