Try to deal better with overflow
ALso align images right in carousel
This commit is contained in:
parent
6f9459fb3e
commit
876f2bb7ad
2 changed files with 10 additions and 1 deletions
|
@ -185,6 +185,7 @@ const updateCarousel = function(slides, posts) {
|
|||
else {
|
||||
newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" data-mdb-pause="false">`;
|
||||
}
|
||||
const postContent = DOMPurify.sanitize(post.content);
|
||||
newHTML += `
|
||||
<div class="card-big">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
|
@ -193,7 +194,7 @@ const updateCarousel = function(slides, posts) {
|
|||
</div>
|
||||
<hr>
|
||||
<div class="row align-items-center vertical-align-center">
|
||||
${post.media_attachments[0] ? `<div class="col-md-6"><div class="card-text">${DOMPurify.sanitize(post.content)}</div></div>` : `<div class="col-md-12"><div class="card-text">${DOMPurify.sanitize(post.content)}</div></div>`}
|
||||
<div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></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>
|
||||
<hr>
|
||||
|
@ -228,6 +229,11 @@ const showCarousel = function() {
|
|||
$('#myCarousel').carousel("cycle");
|
||||
}
|
||||
|
||||
const strip = function(html) {
|
||||
let doc = new DOMParser().parseFromString(html, 'text/html');
|
||||
return doc.body.textContent || "";
|
||||
}
|
||||
|
||||
const hideCarousel = function() {
|
||||
// show popover
|
||||
document.getElementById('popover').style.opacity = '0';
|
||||
|
|
|
@ -52,6 +52,8 @@
|
|||
|
||||
.carousel .card-text {
|
||||
font-size: 1.4em;
|
||||
overflow: hidden;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
@ -201,6 +203,7 @@ body {
|
|||
margin-top: 0px !important;
|
||||
margin-bottom: 10px !important;
|
||||
align-items: center;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
|
|
Loading…
Reference in a new issue