Revert "Fix fullscreen mode on iOS/iPadOS"

This reverts commit bd1d3a5e2e.
Update hashtag
2024-10-09 06:33:28 +02:00 · 2024-05-05 09:10:49 +02:00 · 2024-05-04 11:57:17 +02:00 · 2024-01-21 11:42:57 +01:00 · 2024-01-20 15:19:31 +01:00 · 2024-01-20 13:29:50 +01:00
13 changed files with 11609 additions and 51 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +1,16 @@
-# Mastowall 1.0
+# Mastowall 1.1
-Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It has been updated with new features to improve its usability and appearance.
+Forked from [https://github.com/rstockm/mastowall](https://github.com/rstockm/mastowall)
-<img width="1435" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/af1a3786-335b-4d64-b387-0db75dd73040">
+Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It was written entirely by [ChatGPT4](https://openai.com/product/gpt-4), guided only by text prompts.
-Try it live: [Mastowall for the BiblioCon conference]([https://rstockm.github.io/mastowall/?hashtags=111bibliocon,bibliocon,bibliocon23&server=https://openbiblio.social))
+<img width="1348" alt="image" src="https://git.verdigado.com/NB-Public/mastowall/raw/branch/main/screenshot.jpg">
 Try it live: [Mastowall for BDK23](https://tretkowski.de/mastowall/?hashtags=bdk23,netzbegruenung&server=https://gruene.social)
 Use your own hashtags and server:
-<img width="1164" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/97814e5b-5377-426a-bfff-78be8f560421">
+<img width="1108" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/761237da-2166-46c5-8f31-46b9e913f736">
 JSON config file:
@ -48,6 +50,8 @@ Mastowall is built using the following technologies:
 - **[Bootstrap](https://getbootstrap.com/)**: A popular CSS framework for responsive, mobile-first front-end web development.
 - **[DOMPurify](https://github.com/cure53/DOMPurify)**: Library for sanitizing HTML input, which should prevent the vast majority of malicious input from being rendered
 ## Usage
 1. Load the application in a web browser. If no hashtags are specified in the URL, you will be presented with a form to enter up to three hashtags and a server URL.
@ -62,7 +66,7 @@ Mastowall is built using the following technologies:
 Mastowall supports URL parameters to easily share specific hashtag configurations and the Mastodon server. Simply append the desired hashtags and the server URL to the URL following this format: `?hashtags=hashtag1,hashtag2,hashtag3&server=serverUrl`
-Enjoy using Mastowall 0.2!
+Enjoy using Mastowall!
 ## AI-Guided Development: A Proof of Concept
--- a/README_SSB.md
+++ b/README_SSB.md
@ -0,0 +1,16 @@
 ## Additions made by SSB for BDK23
 # added carousel for posts
 ## Important
 install color emojis:
 sudo apt-get install fonts-noto-color-emoji
 install xdotool to move the mouse to bottom right (does not work with Bookworm/Wayland)
 sudo apt-get install xdotool -y
 run in kiosk mode:
 chromium-browser --kiosk index.html
 or use the remote URL instead of index.html
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
--- a/config.json
+++ b/config.json
@ -1,6 +1,12 @@
 {
-  "navbarBrandText": "Mastowall 1.0 - written by ChatGPT4 - Prompting: Ralf Stockmann (rstockm)",
+  "navbarBrandText": "Netzbegrünung Mastowall - gruene.social",
-  "defaultServerUrl": "https://mastodon.social",
+  "defaultServerUrl": "https://gruene.social",
-  "navbarColor": "#333355",
+  "navbarColor": "#008939",
-  "includeReplies": false
+  "duration": 10,
  "refreshDuration": 30,
  "maxAge": 604800,
  "extraCards": [
    "<img src='sharepic.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
  ],
  "includeReplies": true
 }
--- a/index.html
+++ b/index.html
@ -3,9 +3,21 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Mastowall 0.2</title>
+    <title>Netzbegrünung Mastowall</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <link rel="apple-touch-icon" href="mastowall-favicon.png">
    <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://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://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/dompurify/3.0.3/purify.min.js"></script>
    <script src="script.js"></script>
 </head>
 <body>
    <nav class="navbar navbar-light">
@ -22,19 +34,19 @@
                  <form id="hashtag-form">
                    <div class="form-group">
                        <label for="hashtag1">Hashtag 1:</label>
-                        <input type="text" class="form-control" id="hashtag1" placeholder="Enter a hashtag">
+                        <input type="text" class="form-control" id="hashtag1" placeholder="Enter a hashtag" value="netzbegruenung">
                    </div>
                    <div class="form-group">
                        <label for="hashtag2">Hashtag 2:</label>
-                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag">
+                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="ldk24">
                    </div>
                    <div class="form-group">
                        <label for="hashtag3">Hashtag 3:</label>
-                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag">
+                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag" value="wasjetztzählt">
                    </div>
                    <div class="form-group">
                        <label for="serverUrl">Server:</label>
-                        <input type="text" class="form-control" id="serverUrl" placeholder="Enter server URL" value="https://mastodon.social">
+                        <input type="text" class="form-control" id="serverUrl" placeholder="Enter server URL" value="https://gruene.social">
                    </div>
                    <button type="submit" class="btn btn-primary">Reload</button>
@ -48,16 +60,17 @@
        <div class="row masonry-grid" id="wall"></div>
    </div>
    <div id="popover" class="popover">
        <div id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-pause="false">
        </div>
    </div>
    <footer class="footer text-center py-4 mt-5">
      <div class="container">
-          <span class="text-muted">Host your own Mastowall - check </span>
+          <a href="https://netzbegruenung.de/" target="_blank">Netzbegrünung</a>
-          <a href="https://github.com/rstockm/mastowall" target="_blank">GitHub</a>
+          <span class="text-muted"> - Verein für GRÜNE Netzkultur e.V.</span>
      </div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.4.1.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="script.js"></script>
 </body>
 </html>
--- a/masonry.pkgd.min.js
+++ b/masonry.pkgd.min.js
--- a/mastowall-favicon.png
+++ b/mastowall-favicon.png
--- a/mastowall.desktop
+++ b/mastowall.desktop
@ -0,0 +1,6 @@
 [Desktop Entry]
 Type=Application
 Name=MastoWall Autostart
 Comment=Starten der MastoWall zur BDK23
 NoDisplay=false
 Exec=sh -c 'cd /home/ssb/Documents/mastowall && xdotool mousemove 1920 1080 && sleep 5 && chromium-browser --kiosk index.html'
--- a/screenshot.jpg
+++ b/screenshot.jpg
--- a/script.js
+++ b/script.js
@ -6,6 +6,7 @@ function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    console.log(results)
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }
@ -16,23 +17,44 @@ const secondsAgo = date => Math.floor((new Date() - date) / 1000);
 const timeAgo = function(seconds) {
    // An array of intervals for years, months, days, hours, and minutes.
    const intervals = [
-        { limit: 31536000, text: 'years' },
+        { limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
-        { limit: 2592000, text: 'months' },
+        { limit: 2592000, singular: 'Monat', plural: 'Monaten' },
-        { limit: 86400, text: 'days' },
+        { limit: 86400, singular: 'Tag', plural: 'Tagen' },
-        { limit: 3600, text: 'hours' },
+        { limit: 3600, singular: 'Stunde', plural: 'Stunden' },
-        { limit: 60, text: 'minutes' }
+        { limit: 60, singular: 'Minute', plural: 'Minuten' }
    ];
    // Loop through the intervals to find which one is the best fit.
    for (let interval of intervals) {
        if (seconds >= interval.limit) {
-            return Math.floor(seconds / interval.limit) + ` ${interval.text} ago`;
+            let amount = Math.floor(seconds / interval.limit);
            let text;
            if (amount !== 1) {
                text = interval.plural;
            } else {
                text = interval.singular;
            }
            return `Vor ${amount} ${text}`;
        }
    }
-    return Math.floor(seconds) + " seconds ago";
+    let text = "Sekunde";
    let amount = Math.floor(seconds);
    if (amount !== 1) {
        text += "n";
    }
    return `Vor ${amount} ${text}`;
 };
 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
 const fetchConfig = async function() {
@ -41,9 +63,23 @@ const fetchConfig = async function() {
        $('#navbar-brand').text(config.navbarBrandText);
        $('.navbar').css('background-color', config.navbarColor);
        includeReplies = config.includeReplies;
        maxAge = config.maxAge;
        duration = config.duration * 1000;
        refresh = config.refreshDuration * 1000;
        extraCards = config.extraCards;
        return config.defaultServerUrl;
    } catch (error) {
-        console.error("Error loading config.json:", error);
+        console.log("Error loading config.json:", error);
        $('#navbar-brand').text("Netzbegrünung Mastowall - gruene.social");
        $('.navbar').css('background-color', "#008939");
        includeReplies = true;
        maxAge = 60 * 60 * 24 * 7;
        duration = 10000;
        refresh = 30000;
        extraCards = [
            "<div><img src='sharepic.png' style='max-width: 100%;max-height: 100%'></div>"
        ];
        return "https://gruene.social";
    }
 }
@ -59,16 +95,26 @@ const fetchPosts = async function(serverUrl, hashtag) {
 // updateTimesOnPage updates the time information displayed for each post
 const updateTimesOnPage = function() {
-    $('.card-text a').each(function() {
+    $('.card-text a.time').each(function() {
-        const date = new Date($(this).attr('data-time'));
+        const timeValue = $(this).attr('data-time');
        if (timeValue === '') return;
        const date = new Date(timeValue);
        const newTimeAgo = timeAgo(secondsAgo(date));
        $(this).text(newTimeAgo);
    });
 };
 // replace certain emojies in some text with images
 const replaceEmojies = (text, emojis) => {
    emojis.forEach(emoji => {
        text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.static_url}">`);
    });
    return text;
 };
 // displayPost creates and displays a 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 0;
    existingPosts.push(post.id);
@ -77,12 +123,16 @@ const displayPost = function(post) {
            <div class="card m-2 p-2">
                <div class="d-flex align-items-center mb-2">
                    <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${post.account.display_name}</p>
+                    <p class="m-0">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                </div>
-                ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
+                ${post.media_attachments[0] ?
-                <p class="card-text">${post.content}</p>
+                    (post.media_attachments[0].url.endsWith('.mp4') ?
-                ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${post.spoiler_text}</p>` : ''}
+                        `<video src="${post.media_attachments[0].url}" controls autoplay muted loop></video>` :
-                <p class="card-text"><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>
+                        `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">`) :
                    ''}
                <p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</p>
                ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
                <p class="card-text text-right"><small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
            </div>
        </div>
    `;
@ -90,27 +140,148 @@ const displayPost = function(post) {
    let $card = $(cardHTML);
    $('#wall').prepend($card);
    $('.masonry-grid').masonry('prepended', $card);
    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
 const updateWall = function(posts) {
    if (!posts || posts.length === 0) return;
    posts = processPosts(posts);
    posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
-    posts.forEach(post => displayPost(post));
+
    let ret = 0
    posts.forEach(post => ret += displayPost(post));
    $('.masonry-grid').masonry('layout');
    return ret;
 };
 // updateCarousel
 const updateCarousel = function(slides, posts) {
    if (!posts || posts.length === 0) return;
    posts = processPosts(posts);
    posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
    // remove slides in carousel
    slides.innerHTML = "";
    var newHTML = ` <!-- No Indicators -->`
    newHTML += `<!-- the slides -->
                <div class="carousel-inner">
                `;
    let existingCards = [];
    for( let i = 0; i < posts.length; i++ ) {
        let post = posts[i];
        if (existingCards.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) continue;
        existingCards.push(post.id);
        /*console.log( post.content )*/
        if ( i == 0 ) {
            newHTML += `<div class="carousel-item active" data-interval="${duration}" data-pause="false">`;
        }
        else {
            newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
        }
        const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
        newHTML += `
            <div class="card-big">
                <div class="d-flex align-items-center mb-4">
                    <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
                    <p class="avatar-name">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                </div>
                <hr>
                <div class="row align-items-center vertical-align-center">
                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
                    ${post.media_attachments[0] ?
                        (post.media_attachments[0].url.endsWith('.mp4') ?
                            `<div class="col-md-6"><video src="${post.media_attachments[0].url}" controls autoplay muted loop class="card-img-bottom" align="center"></video></div>` :
                            `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>`) :
                        ''}
                </div>
                <hr>
                <p class="card-text text-right">
                    <small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a>
                        ${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' }
                        ${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' }
                        ${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' }
                    </small>
                </p>
            </div>
        `;
        newHTML += '</div>';
    }
    for( let i = 0; i < extraCards.length; i++ ) {
        newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
        <div className="card-big">
            <div class="d-flex align-items-center mb-4">
                ${extraCards[i]}
            </div>
        </div>
        </div>`;
    }
    newHTML += '</div>'
    document.getElementById("myCarousel").innerHTML = newHTML;
 };
 const showCarousel = function() {
    // show popover
    document.getElementById('popover').style.opacity = '1';
    // Activate Carousel
    $('#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';
    // Activate Carousel
 }
 // hashtagsString returns a single string based on the given array of hashtags
 const hashtagsString = function(hashtagsArray) {
  return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
 }
 // updateHashtagsOnPage updates the displayed hashtags
 const updateHashtagsOnPage = function(hashtagsArray) {
-    $('#hashtag-display').text(hashtagsArray.length > 0 ? `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}` : 'No hashtags set');
+    $('#hashtag-display').text(hashtagsArray.length > 0 ? hashtagsString(hashtagsArray) : 'No hashtags set');
 };
 // updateHashtagsOnPage updates the document title by appending the given array of hashtags
 const updateHashtagsInTitle = function(hashtagsArray) {
    const baseTitle = document.title;
    document.title = `${baseTitle} | ${hashtagsString(hashtagsArray)}`;
 }
 // handleHashtagDisplayClick handles the event when the hashtag display is clicked
 const handleHashtagDisplayClick = function(serverUrl) {
    $('#app-content').addClass('d-none');
    $('#zero-state').removeClass('d-none');
    const currentHashtags = getUrlParameter('hashtags').split(',');
    if ( currentHashtags = null ) {
        currentHasttags = "netzbegruenung,ldk24,wasjetztzählt".split(',')
    }
    for (let i = 0; i < currentHashtags.length; i++) {
        $(`#hashtag${i+1}`).val(currentHashtags[i]);
@ -156,9 +327,12 @@ $(document).ready(async function() {
    setInterval(function() {
        $('.masonry-grid').masonry('layout');
-    }, 10000);
+    }, refresh);
-    const hashtags = getUrlParameter('hashtags');
+    let hashtags = getUrlParameter('hashtags');
    if ( hashtags == '' ) {
        hashtags = "netzbegruenung,lptsh,wasjetztzählt";
    }
    const hashtagsArray = hashtags ? hashtags.split(',') : [];
    const serverUrl = getUrlParameter('server') || defaultServerUrl;
@ -166,24 +340,41 @@ $(document).ready(async function() {
        handleHashtagDisplayClick(serverUrl);
    });
    const slides = $('#myCarousel');
    const popover = $('#popover');
    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());
        setTimeout(function() {
            $('.masonry-grid').masonry('layout');
            }, 2000);
        updateCarousel(slides, allPosts.flat());
        setTimeout(async function() { showCarousel(); }, duration)
        setInterval(async function() {
            const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
-            updateWall(newPosts.flat());
+            let updated = updateWall(newPosts.flat());
-        }, 10000);
+            if ( updated > 0 ) {
                updateCarousel(slides, newPosts.flat());
            }
        }, refresh);
    } else {
        $('#zero-state').removeClass('d-none');
        $('#popover').removeClass('popover');
        $('#app-content').addClass('d-none');
    }
    updateHashtagsOnPage(hashtagsArray);
    updateHashtagsInTitle(hashtagsArray);
    $('#hashtag-form').on('submit', function(e) {
        handleHashtagFormSubmit(e, hashtagsArray);
    });
    updateTimesOnPage();
    setInterval(updateTimesOnPage, 60000);
 });
--- a/sharepic.jpg
+++ b/sharepic.jpg
--- a/sharepic.png
+++ b/sharepic.png
--- a/styles.css
+++ b/styles.css
@ -1,8 +1,12 @@
@charset "utf-8";
 /* Add some custom CSS for the cards */
 .card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  background-color: rgb(240,255,240);
 }
 /* Position the avatar and username in the top left of the card */
@ -21,6 +25,11 @@
  left: 70px;
 }
 .card-text.text-right {
    text-align: right;
    margin-top: -20px !important;
 }
 /* Add padding to the card body to prevent overlay with avatar and username */
 .card-body {
  padding-top: 40px;
@ -41,6 +50,12 @@
  margin-bottom: 1px !important;
 }
 .carousel .card-text {
    font-size: 1.6em;
    overflow: hidden;
    max-height: 50vh;
 }
 .card {
  font-size: 0.9em;  /* adjust this value to get the desired text size */
 }
@ -57,8 +72,8 @@
 /* Custom navbar styles */
 .navbar {
-  height: 50px;  /* reduce the height of the navbar */
+  min-height: 50px;  /* reduce the height of the navbar */
-  background-color: rgb(227, 6, 19);
+  background-color: rgb(0, 137, 57);
  margin-bottom: 10px !important;
  top: -10px !important;
  padding-top: 14px !important;
@ -67,13 +82,13 @@
 .navbar-brand {
  color: rgba(255, 255, 255, 0.8) !important;  /* change the text color */
  margin: 0 auto;  /* center the brand name */
-  font-size: 0.9em;
+  font-size: 1.8em;
 }
 .navbar-info {
  color: rgba(255, 255, 255, 0.8) !important;  /* change the text color */
  margin: 0 auto;  /* center the brand name */
-  font-size: 1.2em;
+  font-size: 2.4em;
  display: block !important;
 }
@ -119,12 +134,28 @@ body {
  height: 50px;
 }
 .avatar-img-big {
  width: 100px;
  height: 100px;
 }
 .avatar-name {
    font-size:2em;
    font-weight:600;
    padding-top:0.3em
 }
 .user-name {
    font-weight: normal;
    opacity: 0.7;
 }
 .container {
  max-width: 2000px !important;
  }
 .footer {
-    background-color: rgb(200, 200, 200);
+    background-color: rgb(0, 137, 57);
    color: #f2f2f2;
    position: fixed;
    left: 0;
@ -134,3 +165,66 @@ body {
    padding-bottom: 2px !important; /* reduce padding-bottom to half */
    font-size: 0.9em;
 }
 .popover {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    max-height: 80%;
    max-width: 80%;
    background-color: rgba(255, 255, 255, .95);
    background-clip: padding-box;
    border: 0px solid rgba(0, 137, 57, .5);
    box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
    border-radius:.8rem;
    opacity: 0;
    transition: opacity 0.5s linear;
 }
 .card-big {
    font-size: 1.8em;
    font-weight: 400;
    margin-top: 20px !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
    margin-bottom: 20px !important;
 }
 .card-img-bottom {
    max-width: 600px;
    max-height: 500px;
    width: auto;
    text-align: center;
    aspect-ratio: auto !important;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius:calc(.25rem - 1px);
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    align-items: center;
    float: right;
 }
 .text-muted {
    color:#6c757d !important;
    font-size: 1em;
    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;
 }
 .emoji {
    height: 1em;
 }
Author	SHA1	Message	Date
Norbert Tretkowski	001a361037	Revert "Fix fullscreen mode on iOS/iPadOS" This reverts commit `bd1d3a5e2e`.	2024-10-09 06:33:28 +02:00
Norbert Tretkowski	dbf57bea46	Update hashtag	2024-05-05 09:10:49 +02:00
Norbert Tretkowski	bd1d3a5e2e	Fix fullscreen mode on iOS/iPadOS	2024-05-04 11:57:17 +02:00
Norbert Tretkowski	5099cd92a5	Hashtag #wasjetztzählt hinzugefügt	2024-01-21 11:42:57 +01:00
Norbert Tretkowski	aacb05aee2	Add support for displaying video attachments based on https://github.com/rstockm/mastowall/pull/10	2024-01-20 15:19:31 +01:00
Norbert Tretkowski	1faf17e67f	Update screenshot in README.md	2024-01-20 13:29:50 +01:00
Norbert Tretkowski	dcc607df51	Use jpg for screenshot	2024-01-20 13:28:25 +01:00
Norbert Tretkowski	ba7df6c13e	Add screenshot	2024-01-20 13:27:16 +01:00
Norbert Tretkowski	1237e84670	Update hashtags	2024-01-20 10:00:38 +01:00
Norbert Tretkowski	5c111f86d7	Sharepic fuer LDK24 Potsdam	2024-01-20 09:58:54 +01:00
Tretkowski Norbert	f216b42011	Merge pull request 'Even more improvements' (#5 ) from lisswoma/mastowall:for-pi2 into main Reviewed-on: #5	2023-11-25 10:21:11 +01:00
Max L.	ec902d12f2	Fix extra cards display duration	2023-11-25 02:21:55 +01:00
Max L.	004c92b392	Add emoji support	2023-11-25 02:18:39 +01:00
Max L.	7acd5f4e38	Improve long post handling	2023-11-25 01:48:53 +01:00
Max L.	8efbafef3c	Directly show new posts in carousel	2023-11-25 01:13:05 +01:00
Max L.	c12f8220f4	Improve font sizes	2023-11-25 01:08:41 +01:00
Tretkowski Norbert	39138ef889	Merge pull request 'for-pi2' (#4 ) from for-pi2 into main Reviewed-on: #4	2023-11-24 21:17:28 +01:00
Tretkowski Norbert	945e09b3ac	Merge pull request 'for-pi2' (#3 ) from lisswoma/mastowall:for-pi2 into for-pi2 Reviewed-on: #3	2023-11-24 21:14:11 +01:00
Max L.	c274648f09	Fix duration not being used for carousel	2023-11-24 13:07:14 +01:00
Max L.	876f2bb7ad	Try to deal better with overflow ALso align images right in carousel	2023-11-24 12:45:28 +01:00
Max L.	6f9459fb3e	Fix post content not being child of card-text	2023-11-24 12:26:44 +01:00
Max L.	b0051867aa	Fix wrong links getting their time updated	2023-11-24 12:25:34 +01:00
Max L.	12fca72480	Filter out duplicate carousel cards Also respect reply config option in carousel	2023-11-24 12:08:19 +01:00
Norbert Tretkowski	e821501f6c	Link to original project on GitHub	2023-11-24 08:05:29 +01:00
Tretkowski Norbert	98d8c3b994	Merge pull request 'for-pi2' (#2 ) from for-pi2 into main Reviewed-on: #2	2023-11-24 07:54:18 +01:00
Tretkowski Norbert	bcaa5a5edd	Merge pull request 'Improvements for display' (#1 ) from lisswoma/mastowall:for-pi2 into for-pi2 Reviewed-on: #1	2023-11-24 07:53:18 +01:00
Max L.	3ba54e1653	Display full account name	2023-11-23 22:06:42 +01:00
Max L.	c76dfedac1	Filter out twitter repost spam	2023-11-23 21:57:58 +01:00
Max L.	de46f7c7b8	Fix extra card interval	2023-11-23 21:06:54 +01:00
Max L.	8cdc4ea5c3	Fix sorting in carousel	2023-11-23 20:57:33 +01:00
Max L.	191dc33e28	Add gruene.social to title	2023-11-23 20:48:46 +01:00
Max L	9cab9e8b1c	Display username	2023-11-23 20:44:43 +01:00
Max L	df73c736dd	Fix singular of time ago display	2023-11-23 20:44:42 +01:00
Max L	3ffdeabf33	Add ability to display extra cards and add a post max age	2023-11-23 20:44:41 +01:00
Max L	395ce728bf	Fix footer colors and size	2023-11-23 20:44:40 +01:00
Max L	75d4e84e5c	Increase font size for display on a large screen	2023-11-23 20:44:39 +01:00
Max L	eb85222ea3	Make duration and refresh easily configurable Also increase duration to 10 seconds per post	2023-11-23 20:44:38 +01:00
Stefan Schmidt-Bilkenroth	7edce5ab0f	add 5 seconds sleep before opening mastowll	2023-11-18 20:53:58 +01:00
Stefan Schmidt-Bilkenroth	038546df49	move mouse to bottom right on startup	2023-11-18 20:53:12 +01:00
stefan.schmidt-bilkenroth	65d9454666	fix typo	2023-11-16 18:07:43 +01:00
stefan.scmidt-bilkenroth	ec6c88d83e	fix pause on mouse-over	2023-11-16 18:01:30 +01:00
stefan.scmidt-bilkenroth	53f5b71b32	adding Autostart file	2023-11-16 17:13:03 +01:00
stefan.scmidt-bilkenroth	5b2d634bf0	fixes for raspi	2023-11-16 16:22:59 +01:00
Stefan Schmidt-Bilkenroth	06080e09a1	fix some startup issues, default to BDK config	2023-11-16 16:14:06 +01:00
Stefan Schmidt-Bilkenroth	c951f47034	beantwortet -> kommentiert	2023-11-16 14:51:31 +01:00
Stefan Schmidt-Bilkenroth	7969da352a	fixed small typo	2023-11-16 14:50:20 +01:00
Stefan Schmidt-Bilkenroth	1f6d85a072	some more refinements	2023-11-16 14:47:37 +01:00
stefan.scmidt-bilkenroth	515aa7f86c	added specific ReadMe	2023-11-16 12:32:40 +01:00
Stefan Schmidt-Bilkenroth	752f06f68f	some fixes	2023-11-16 12:18:48 +01:00
Stefan Schmidt-Bilkenroth	63d5eafc01	fix issue with startup form (covered by invisible popup)	2023-11-10 20:35:20 +01:00
Stefan Schmidt-Bilkenroth	4c527ec4c4	small optimization	2023-11-10 19:59:46 +01:00
Stefan Schmidt-Bilkenroth	a4891e24bb	some more work	2023-11-10 19:42:57 +01:00
Stefan Schmidt-Bilkenroth	65438d8799	stuff	2023-11-10 17:17:00 +01:00
Stefan Schmidt-Bilkenroth	42f41cc360	new attempts	2023-11-10 17:16:31 +01:00
Norbert Tretkowski	73163da9ec	Update link	2023-11-05 17:36:04 +01:00
Norbert Tretkowski	3f28ac8ad2	Add default hashtags and server	2023-11-05 17:29:01 +01:00
Norbert Tretkowski	9d07ff6a63	Tippfehler	2023-11-05 11:36:50 +01:00
Norbert Tretkowski	32068def92	Update Demo Link	2023-11-05 11:11:33 +01:00
Norbert Tretkowski	8dde3b2827	Branding und Übersetzung	2023-11-05 10:55:58 +01:00
Ralf Stockmann	a043940301	Merge pull request #5 from optikfluffel/show-hashtags-in-title Show hashtags in the page title	2023-06-07 13:12:28 +02:00
Udo	f0b2e205d9	Show hashtags in the page title	2023-06-05 12:23:01 +02:00
Ralf Stockmann	34ff6c48bd	Update README.md WWDC demo	2023-06-05 09:40:58 +02:00
Ralf Stockmann	abdd8a83de	Add files via upload White Background	2023-05-29 17:20:07 +02:00
Ralf Stockmann	b2f7055164	Delete mastowall-favicon.png	2023-05-29 17:19:48 +02:00
Ralf Stockmann	a9c4621eff	New version of Favicon More space around the # - thx to @malik	2023-05-29 10:51:51 +02:00
Ralf Stockmann	9f82492a96	Delete mastowall-favicon.png	2023-05-29 10:51:08 +02:00
Ralf Stockmann	321bb89b33	Add files via upload More space to borders, thx to @malik	2023-05-29 10:50:13 +02:00
Ralf Stockmann	36eb5bc1db	Update index.html HiRes Favicon	2023-05-28 21:27:54 +02:00
Ralf Stockmann	afb2eb06e8	HiRes Favicon	2023-05-28 21:26:25 +02:00
Ralf Stockmann	1c28ce654d	Update README.md Added 1.1 config screen	2023-05-26 10:26:57 +02:00
Ralf Stockmann	ed73ee845a	Update README.md - Added 1.1 Screenshot	2023-05-26 10:26:08 +02:00
Ralf Stockmann	b194406f6c	Update README.md - Added DOMPurify - Set release version to 1.1	2023-05-26 10:18:21 +02:00
Ralf Stockmann	304fccb812	Update config.json - Update release number	2023-05-26 10:14:30 +02:00
Ralf Stockmann	bee19dc37d	Update index.html - Update release number to 1.1	2023-05-26 10:14:13 +02:00
Ralf Stockmann	dfbd1290de	Update script.js - Added DOMpurify to username, post content and spoiler content to prevent malicious input	2023-05-26 10:12:47 +02:00
Ralf Stockmann	e124f4cf7d	Update index.html - Updated jquery to 3.7 - Added DOMpurify 3.0.3	2023-05-26 10:10:32 +02:00
Ralf Stockmann	bf5d24dc9f	Update styles.css Less wasted vertical space on the cards	2023-05-25 11:04:40 +02:00
Ralf Stockmann	81bd58402f	Update config.json - changig the default behaviour: replies using at least one of the hashtags will we displayed, too.	2023-05-23 07:48:18 +02:00
Ralf Stockmann	db23f4a162	Update script.js Align time information to the right	2023-05-20 23:56:10 +02:00
Ralf Stockmann	30c1c2dec3	Update styles.css Align time information to the right	2023-05-20 23:55:05 +02:00
Ralf Stockmann	dabe3f6782	Merge pull request #2 from derGali/main Minimal changes to the text	2023-05-20 16:21:48 +02:00
Tobias	af8f194298	Minimal changes to the text ChatGPT makes very human mistakes like forgetting brackets ;)	2023-05-20 11:31:48 +02:00
Ralf Stockmann	5384b0fa75	Update README.md	2023-05-20 03:57:10 +02:00
Ralf Stockmann	7540ffc2a5	Update README.md	2023-05-20 03:56:36 +02:00
Ralf Stockmann	1e0be02426	Update index.html - Version Number	2023-05-19 16:48:03 +02:00
Ralf Stockmann	2e53e46537	Merge pull request #1 from rstockm/Mastowall-1.0 Mastowall 1.0	2023-05-19 16:33:13 +02:00
Ralf Stockmann	e33a7e2abb	Update README.md	2023-05-19 16:31:36 +02:00
Ralf Stockmann	2e58b82519	Update README.md 1.0 notes	2023-05-19 16:30:52 +02:00