prepare wall for bdk
This commit is contained in:
parent
73163da9ec
commit
ae3cd2e856
5 changed files with 11301 additions and 11 deletions
10159
bootstrap.min.css
vendored
Normal file
10159
bootstrap.min.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Netzbegrünung Mastowall</title>
|
<title>Netzbegrünung Mastowall</title>
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
<link rel="stylesheet" href="bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="apple-touch-icon" href="mastowall-favicon.png">
|
<link rel="apple-touch-icon" href="mastowall-favicon.png">
|
||||||
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<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://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
<script src="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>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
|
1069
masonry.pkgd.min.js
vendored
Normal file
1069
masonry.pkgd.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
33
script.js
33
script.js
|
@ -1,6 +1,8 @@
|
||||||
// The existingPosts array is used to track already displayed posts
|
// The existingPosts array is used to track already displayed posts
|
||||||
let existingPosts = [];
|
let existingPosts = [];
|
||||||
|
|
||||||
|
var cardIterator = 0;
|
||||||
|
|
||||||
// getUrlParameter helps to fetch URL parameters
|
// getUrlParameter helps to fetch URL parameters
|
||||||
function getUrlParameter(name) {
|
function getUrlParameter(name) {
|
||||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
@ -69,19 +71,20 @@ const updateTimesOnPage = function() {
|
||||||
// displayPost creates and displays a post
|
// displayPost creates and displays a post
|
||||||
const displayPost = function(post) {
|
const displayPost = function(post) {
|
||||||
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
|
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
|
||||||
|
|
||||||
existingPosts.push(post.id);
|
existingPosts.push(post.id);
|
||||||
|
|
||||||
let cardHTML = `
|
let cardHTML = `
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-2">
|
||||||
<div class="card m-2 p-2">
|
<div class="card m-2 p-2">
|
||||||
<div class="d-flex align-items-center mb-2">
|
<div class="d-flex align-items-center mb-2">
|
||||||
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
|
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
|
||||||
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
|
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
|
||||||
</div>
|
</div>
|
||||||
${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
|
<div class="row">
|
||||||
<p class="card-text">${DOMPurify.sanitize(post.content)}</p>
|
${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.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
|
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
|
||||||
|
|
||||||
|
</div>
|
||||||
<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></small></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -156,6 +159,11 @@ const handleHashtagFormSubmit = function(e, hashtagsArray) {
|
||||||
window.location.href = newUrl;
|
window.location.href = newUrl;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// make singe card bigger by switching class
|
||||||
|
const toggleSize = function(child,i) {
|
||||||
|
console.log( child )
|
||||||
|
}
|
||||||
|
|
||||||
// On document ready, the script configures Masonry, handles events, fetches and displays posts
|
// On document ready, the script configures Masonry, handles events, fetches and displays posts
|
||||||
$(document).ready(async function() {
|
$(document).ready(async function() {
|
||||||
const defaultServerUrl = await fetchConfig();
|
const defaultServerUrl = await fetchConfig();
|
||||||
|
@ -167,7 +175,7 @@ $(document).ready(async function() {
|
||||||
|
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
$('.masonry-grid').masonry('layout');
|
$('.masonry-grid').masonry('layout');
|
||||||
}, 10000);
|
}, 1000);
|
||||||
|
|
||||||
const hashtags = getUrlParameter('hashtags');
|
const hashtags = getUrlParameter('hashtags');
|
||||||
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
||||||
|
@ -184,6 +192,19 @@ $(document).ready(async function() {
|
||||||
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||||
updateWall(newPosts.flat());
|
updateWall(newPosts.flat());
|
||||||
}, 10000);
|
}, 10000);
|
||||||
|
setInterval(function() {
|
||||||
|
var mason = $('.masonry-grid').data('masonry')
|
||||||
|
//console.log( cardIterator )
|
||||||
|
|
||||||
|
mason.element.children[cardIterator].classList.value = 'col-sm-2'
|
||||||
|
//mason.element.children[cardIterator].children[0].classList.toggle( '' )
|
||||||
|
//console.log( mason.element.children[cardIterator].classList )
|
||||||
|
|
||||||
|
cardIterator++
|
||||||
|
if ( cardIterator >= mason.element.childNodes.length )
|
||||||
|
cardIterator = 0
|
||||||
|
mason.element.children[cardIterator].classList.value = 'col-big'
|
||||||
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
$('#zero-state').removeClass('d-none');
|
$('#zero-state').removeClass('d-none');
|
||||||
$('#app-content').addClass('d-none');
|
$('#app-content').addClass('d-none');
|
||||||
|
|
47
styles.css
47
styles.css
|
@ -7,8 +7,8 @@
|
||||||
|
|
||||||
/* Position the avatar and username in the top left of the card */
|
/* Position the avatar and username in the top left of the card */
|
||||||
.card-avatar {
|
.card-avatar {
|
||||||
height: 50px;
|
height: 80px;
|
||||||
width: 50px;
|
width: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
@ -44,10 +44,11 @@
|
||||||
|
|
||||||
.card-text {
|
.card-text {
|
||||||
margin-bottom: 1px !important;
|
margin-bottom: 1px !important;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
font-size: 0.9em; /* adjust this value to get the desired text size */
|
font-size: 1.5em; /* adjust this value to get the desired text size */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove indent of URLs */
|
/* Remove indent of URLs */
|
||||||
|
@ -139,3 +140,43 @@ body {
|
||||||
padding-bottom: 2px !important; /* reduce padding-bottom to half */
|
padding-bottom: 2px !important; /* reduce padding-bottom to half */
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.col-sm-2 {
|
||||||
|
/*-ms-flex: 0 0 99%;*/
|
||||||
|
/*flex: 0 0 99%;*/
|
||||||
|
/*width: 99%;*/
|
||||||
|
/*max-width: 99%;*/
|
||||||
|
/*height: 80%;*/
|
||||||
|
/*max-height: 80%;*/
|
||||||
|
position: absolute;
|
||||||
|
display: block
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-big {
|
||||||
|
/*-ms-flex: 0 0 99%;*/
|
||||||
|
/*flex: 0 0 99%;*/
|
||||||
|
/*width: 99%;*/
|
||||||
|
/*max-width: 99%;*/
|
||||||
|
/*height: 80%;*/
|
||||||
|
/*max-height: 80%;*/
|
||||||
|
/*z-index: 2;*/
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 10;
|
||||||
|
left: 10;
|
||||||
|
width: 100%;
|
||||||
|
height: 400;
|
||||||
|
transition: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-bottom {
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 400px;
|
||||||
|
border-top-left-radius: calc(.25rem - 1px);
|
||||||
|
border-top-right-radius:calc(.25rem - 1px)
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue