Merge pull request 'Improvements for display' (#1) from lisswoma/mastowall:for-pi2 into for-pi2

Reviewed-on: #1
This commit is contained in:
Norbert Tretkowski 2023-11-24 07:53:18 +01:00
commit bcaa5a5edd
4 changed files with 99 additions and 23 deletions

View file

@ -1,6 +1,12 @@
{ {
"navbarBrandText": "Netzbegrünung Mastowall", "navbarBrandText": "Netzbegrünung Mastowall - gruene.social",
"defaultServerUrl": "https://gruene.social", "defaultServerUrl": "https://gruene.social",
"navbarColor": "#008939", "navbarColor": "#008939",
"duration": 10,
"refreshDuration": 30,
"maxAge": 604800,
"extraCards": [
"<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
],
"includeReplies": true "includeReplies": true
} }

View file

@ -1,12 +1,6 @@
// The existingPosts array is used to track already displayed posts // The existingPosts array is used to track already displayed posts
let existingPosts = []; let existingPosts = [];
// below times are in milliseconds
// duration for slide animations
let duration = 5000;
// refresh rate
let refresh = 30000;
// 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(/[\]]/, '\\]');
@ -23,23 +17,44 @@ const secondsAgo = date => Math.floor((new Date() - date) / 1000);
const timeAgo = function(seconds) { const timeAgo = function(seconds) {
// An array of intervals for years, months, days, hours, and minutes. // An array of intervals for years, months, days, hours, and minutes.
const intervals = [ const intervals = [
{ limit: 31536000, text: 'Jahren' }, { limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
{ limit: 2592000, text: 'Monaten' }, { limit: 2592000, singular: 'Monat', plural: 'Monaten' },
{ limit: 86400, text: 'Tagen' }, { limit: 86400, singular: 'Tag', plural: 'Tagen' },
{ limit: 3600, text: 'Stunden' }, { limit: 3600, singular: 'Stunde', plural: 'Stunden' },
{ limit: 60, text: 'Minuten' } { limit: 60, singular: 'Minute', plural: 'Minuten' }
]; ];
// Loop through the intervals to find which one is the best fit. // Loop through the intervals to find which one is the best fit.
for (let interval of intervals) { for (let interval of intervals) {
if (seconds >= interval.limit) { if (seconds >= interval.limit) {
return "Vor " + Math.floor(seconds / interval.limit) + ` ${interval.text}`; let amount = Math.floor(seconds / interval.limit);
let text;
if (amount !== 1) {
text = interval.plural;
} else {
text = interval.singular;
}
return `Vor ${amount} ${text}`;
} }
} }
return "Vor " + Math.floor(seconds) + " Sekunden"; let text = "Sekunde";
let amount = Math.floor(seconds);
if (amount !== 1) {
text += "n";
}
return `Vor ${amount} ${text}`;
}; };
let includeReplies; let includeReplies;
// max post age in seconds
let maxAge;
// below times are in milliseconds
// duration for slide animations
let duration;
// refresh rate
let refresh;
// extra cards text
let extraCards;
// fetchConfig fetches the configuration from the config.json file // fetchConfig fetches the configuration from the config.json file
const fetchConfig = async function() { const fetchConfig = async function() {
@ -48,12 +63,22 @@ const fetchConfig = async function() {
$('#navbar-brand').text(config.navbarBrandText); $('#navbar-brand').text(config.navbarBrandText);
$('.navbar').css('background-color', config.navbarColor); $('.navbar').css('background-color', config.navbarColor);
includeReplies = config.includeReplies; includeReplies = config.includeReplies;
maxAge = config.maxAge;
duration = config.duration * 1000;
refresh = config.refreshDuration * 1000;
extraCards = config.extraCards;
return config.defaultServerUrl; return config.defaultServerUrl;
} catch (error) { } catch (error) {
console.log("Error loading config.json:", error); console.log("Error loading config.json:", error);
$('#navbar-brand').text("Netzbegrünung Mastowall"); $('#navbar-brand').text("Netzbegrünung Mastowall - gruene.social");
$('.navbar').css('background-color', "#008939"); $('.navbar').css('background-color', "#008939");
includeReplies = true; includeReplies = true;
maxAge = 60 * 60 * 24 * 7;
duration = 10000;
refresh = 30000;
extraCards = [
"<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
];
return "https://gruene.social"; return "https://gruene.social";
} }
} }
@ -88,7 +113,7 @@ const displayPost = function(post) {
<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)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
</div> </div>
${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''} ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
<p class="card-text">${DOMPurify.sanitize(post.content)}</p> <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
@ -104,11 +129,22 @@ const displayPost = function(post) {
return 1; return 1;
}; };
const processPosts = function(posts) {
posts = posts.filter((post) => {
return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1
});
return posts;
};
// updateWall displays all posts // updateWall displays all posts
const updateWall = function(posts) { const updateWall = function(posts) {
if (!posts || posts.length === 0) return; if (!posts || posts.length === 0) return;
posts = processPosts(posts);
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
let ret = 0 let ret = 0
posts.forEach(post => ret += displayPost(post)); posts.forEach(post => ret += displayPost(post));
$('.masonry-grid').masonry('layout'); $('.masonry-grid').masonry('layout');
@ -120,6 +156,8 @@ const updateWall = function(posts) {
const updateCarousel = function(slides, posts) { const updateCarousel = function(slides, posts) {
if (!posts || posts.length === 0) return; if (!posts || posts.length === 0) return;
posts = processPosts(posts);
posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
// remove slides in carousel // remove slides in carousel
@ -141,7 +179,7 @@ const updateCarousel = function(slides, posts) {
<div class="card-big"> <div class="card-big">
<div class="d-flex align-items-center mb-4"> <div class="d-flex align-items-center mb-4">
<img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4"> <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
<p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)}</p> <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
</div> </div>
<hr> <hr>
<div class="row align-items-center vertical-align-center"> <div class="row align-items-center vertical-align-center">
@ -160,6 +198,15 @@ const updateCarousel = function(slides, posts) {
`; `;
newHTML += '</div>'; newHTML += '</div>';
} }
for( let i = 0; i < extraCards.length; i++ ) {
newHTML += `<div class="carousel-item" data-mdb-interval="${duration * 2}" data-mdb-pause="false">
<div className="card-big">
<div class="d-flex align-items-center mb-4">
${extraCards[i]}
</div>
</div>
</div>`;
}
newHTML += '</div>' newHTML += '</div>'
document.getElementById("myCarousel").innerHTML = newHTML; document.getElementById("myCarousel").innerHTML = newHTML;
}; };
@ -264,7 +311,8 @@ $(document).ready(async function() {
const popover = $('#popover'); const popover = $('#popover');
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') { if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag))); let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
updateWall(allPosts.flat()); updateWall(allPosts.flat());
setTimeout(function() { setTimeout(function() {
$('.masonry-grid').masonry('layout'); $('.masonry-grid').masonry('layout');

BIN
sharepic.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

View file

@ -66,7 +66,7 @@
/* Custom navbar styles */ /* Custom navbar styles */
.navbar { .navbar {
height: 50px; /* reduce the height of the navbar */ min-height: 50px; /* reduce the height of the navbar */
background-color: rgb(0, 137, 57); background-color: rgb(0, 137, 57);
margin-bottom: 10px !important; margin-bottom: 10px !important;
top: -10px !important; top: -10px !important;
@ -76,13 +76,13 @@
.navbar-brand { .navbar-brand {
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */ color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
margin: 0 auto; /* center the brand name */ margin: 0 auto; /* center the brand name */
font-size: 0.9em; font-size: 1.8em;
} }
.navbar-info { .navbar-info {
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */ color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
margin: 0 auto; /* center the brand name */ margin: 0 auto; /* center the brand name */
font-size: 1.2em; font-size: 2.4em;
display: block !important; display: block !important;
} }
@ -139,6 +139,11 @@ body {
padding-top:0.3em padding-top:0.3em
} }
.user-name {
font-weight: normal;
opacity: 0.7;
}
.container { .container {
max-width: 2000px !important; max-width: 2000px !important;
} }
@ -181,6 +186,10 @@ body {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
.card-text ~ p {
font-size: 1.4em;
}
.card-img-bottom { .card-img-bottom {
max-width: 600px; max-width: 600px;
max-height: 500px; max-height: 500px;
@ -196,6 +205,19 @@ body {
.text-muted { .text-muted {
color:#6c757d !important; color:#6c757d !important;
font-size: 0.6em; font-size: 1.2em;
text-align: right; text-align: right;
} }
.footer {
font-size: 2em;
}
.footer .text-muted {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.8em;
}
.footer a {
color: rgba(255, 255, 255, 0.8) !important;
}