for-pi2 #2
3 changed files with 11 additions and 5 deletions
|
@ -11,8 +11,8 @@
|
||||||
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
|
||||||
|
|
|
@ -125,6 +125,7 @@ const updateCarousel = function(slides, posts) {
|
||||||
`
|
`
|
||||||
for( let i = 0; i < posts.length; i++ ) {
|
for( let i = 0; i < posts.length; i++ ) {
|
||||||
let post = posts[i];
|
let post = posts[i];
|
||||||
|
console.log( post.content )
|
||||||
if ( i == 0 ) {
|
if ( i == 0 ) {
|
||||||
newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
|
newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
|
||||||
}
|
}
|
||||||
|
@ -140,10 +141,10 @@ const updateCarousel = function(slides, posts) {
|
||||||
<hr>
|
<hr>
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`}
|
${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`}
|
||||||
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
|
${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<p class="card-text text-right"><small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
|
<p class="card-text text-right"><small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a>, <b>${post.favourites_count}</b> favorisiert, <b>${post.replies_count}</b> Antworten, <b>${post.reblogs_count}</b> geteilt</small></p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
newHTML += '</div>';
|
newHTML += '</div>';
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
/* Add some custom CSS for the cards */
|
/* Add some custom CSS for the cards */
|
||||||
.card {
|
.card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
@ -182,10 +184,14 @@ body {
|
||||||
.card-img-bottom {
|
.card-img-bottom {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
aspect-ratio: auto !important;
|
||||||
border-top-left-radius: calc(.25rem - 1px);
|
border-top-left-radius: calc(.25rem - 1px);
|
||||||
border-top-right-radius:calc(.25rem - 1px);
|
border-top-right-radius:calc(.25rem - 1px);
|
||||||
margin-top: 0px !important;
|
margin-top: 0px !important;
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-muted {
|
.text-muted {
|
||||||
|
@ -193,4 +199,3 @@ body {
|
||||||
font-size: 0.6em;
|
font-size: 0.6em;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue