CSS Fix styles for narrow columns

assets/ResizeSensor.js

+'use strict';
+
+/**
+ * Copyright Marc J. Schmidt. See the LICENSE file at the top-level
+ * directory of this distribution and at
+ * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
+ */
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(factory);
+    } else if (typeof exports === "object") {
+        module.exports = factory();
+    } else {
+        root.ResizeSensor = factory();
+    }
+}(typeof window !== 'undefined' ? window : this, function () {
+
+    // Make sure it does not throw in a SSR (Server Side Rendering) situation
+    if (typeof window === "undefined") {
+        return null;
+    }
+    // https://github.com/Semantic-Org/Semantic-UI/issues/3855
+    // https://github.com/marcj/css-element-queries/issues/257
+    var globalWindow = typeof window != 'undefined' && window.Math == Math
+        ? window
+        : typeof self != 'undefined' && self.Math == Math
+            ? self
+            : Function('return this')();
+    // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
+    // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
+    // would generate too many unnecessary events.
+    var requestAnimationFrame = globalWindow.requestAnimationFrame ||
+        globalWindow.mozRequestAnimationFrame ||
+        globalWindow.webkitRequestAnimationFrame ||
+        function (fn) {
+            return globalWindow.setTimeout(fn, 20);
+        };
+
+    /**
+     * Iterate over each of the provided element(s).
+     *
+     * @param {HTMLElement|HTMLElement[]} elements
+     * @param {Function}                  callback
+     */
+    function forEachElement(elements, callback){
+        var elementsType = Object.prototype.toString.call(elements);
+        var isCollectionTyped = ('[object Array]' === elementsType
+            || ('[object NodeList]' === elementsType)
+            || ('[object HTMLCollection]' === elementsType)
+            || ('[object Object]' === elementsType)
+            || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
+            || ('undefined' !== typeof Elements && elements instanceof Elements) //mootools
+        );
+        var i = 0, j = elements.length;
+        if (isCollectionTyped) {
+            for (; i < j; i++) {
+                callback(elements[i]);
+            }
+        } else {
+            callback(elements);
+        }
+    }
+
+    /**
+    * Get element size
+    * @param {HTMLElement} element
+    * @returns {Object} {width, height}
+    */
+    function getElementSize(element) {
+        if (!element.getBoundingClientRect) {
+            return {
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            }
+        }
+
+        var rect = element.getBoundingClientRect();
+        return {
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+        }
+    }
+
+    /**
+     * Apply CSS styles to element.
+     *
+     * @param {HTMLElement} element
+     * @param {Object} style
+     */
+    function setStyle(element, style) {
+        Object.keys(style).forEach(function(key) {
+            element.style[key] = style[key];
+        });
+    }
+
+    /**
+     * Class for dimension change detection.
+     *
+     * @param {Element|Element[]|Elements|jQuery} element
+     * @param {Function} callback
+     *
+     * @constructor
+     */
+    var ResizeSensor = function(element, callback) {
+        var lastAnimationFrame = 0;
+        
+        /**
+         *
+         * @constructor
+         */
+        function EventQueue() {
+            var q = [];
+            this.add = function(ev) {
+                q.push(ev);
+            };
+
+            var i, j;
+            this.call = function(sizeInfo) {
+                for (i = 0, j = q.length; i < j; i++) {
+                    q[i].call(this, sizeInfo);
+                }
+            };
+
+            this.remove = function(ev) {
+                var newQueue = [];
+                for(i = 0, j = q.length; i < j; i++) {
+                    if(q[i] !== ev) newQueue.push(q[i]);
+                }
+                q = newQueue;
+            };
+
+            this.length = function() {
+                return q.length;
+            }
+        }
+
+        /**
+         *
+         * @param {HTMLElement} element
+         * @param {Function}    resized
+         */
+        function attachResizeEvent(element, resized) {
+            if (!element) return;
+            if (element.resizedAttached) {
+                element.resizedAttached.add(resized);
+                return;
+            }
+
+            element.resizedAttached = new EventQueue();
+            element.resizedAttached.add(resized);
+
+            element.resizeSensor = document.createElement('div');
+            element.resizeSensor.dir = 'ltr';
+            element.resizeSensor.className = 'resize-sensor';
+
+            var style = {
+                pointerEvents: 'none',
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                right: '0px',
+                bottom: '0px',
+                overflow: 'hidden',
+                zIndex: '-1',
+                visibility: 'hidden',
+                maxWidth: '100%'
+            };
+            var styleChild = {
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                transition: '0s',
+            };
+
+            setStyle(element.resizeSensor, style);
+
+            var expand = document.createElement('div');
+            expand.className = 'resize-sensor-expand';
+            setStyle(expand, style);
+
+            var expandChild = document.createElement('div');
+            setStyle(expandChild, styleChild);
+            expand.appendChild(expandChild);
+
+            var shrink = document.createElement('div');
+            shrink.className = 'resize-sensor-shrink';
+            setStyle(shrink, style);
+
+            var shrinkChild = document.createElement('div');
+            setStyle(shrinkChild, styleChild);
+            setStyle(shrinkChild, { width: '200%', height: '200%' });
+            shrink.appendChild(shrinkChild);
+
+            element.resizeSensor.appendChild(expand);
+            element.resizeSensor.appendChild(shrink);
+            element.appendChild(element.resizeSensor);
+
+            var computedStyle = window.getComputedStyle(element);
+            var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
+            if ('absolute' !== position && 'relative' !== position && 'fixed' !== position && 'sticky' !== position) {
+                element.style.position = 'relative';
+            }
+
+            var dirty, rafId;
+            var size = getElementSize(element);
+            var lastWidth = 0;
+            var lastHeight = 0;
+            var initialHiddenCheck = true;
+            lastAnimationFrame = 0;
+
+            var resetExpandShrink = function () {
+                var width = element.offsetWidth;
+                var height = element.offsetHeight;
+
+                expandChild.style.width = (width + 10) + 'px';
+                expandChild.style.height = (height + 10) + 'px';
+
+                expand.scrollLeft = width + 10;
+                expand.scrollTop = height + 10;
+
+                shrink.scrollLeft = width + 10;
+                shrink.scrollTop = height + 10;
+            };
+
+            var reset = function() {
+                // Check if element is hidden
+                if (initialHiddenCheck) {
+                    var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+                    if (invisible) {
+                        // Check in next frame
+                        if (!lastAnimationFrame){
+                            lastAnimationFrame = requestAnimationFrame(function(){
+                                lastAnimationFrame = 0;
+
+                                reset();
+                            });
+                        }
+
+                        return;
+                    } else {
+                        // Stop checking
+                        initialHiddenCheck = false;
+                    }
+                }
+
+                resetExpandShrink();
+            };
+            element.resizeSensor.resetSensor = reset;
+
+            var onResized = function() {
+                rafId = 0;
+
+                if (!dirty) return;
+
+                lastWidth = size.width;
+                lastHeight = size.height;
+
+                if (element.resizedAttached) {
+                    element.resizedAttached.call(size);
+                }
+            };
+
+            var onScroll = function() {
+                size = getElementSize(element);
+                dirty = size.width !== lastWidth || size.height !== lastHeight;
+
+                if (dirty && !rafId) {
+                    rafId = requestAnimationFrame(onResized);
+                }
+
+                reset();
+            };
+
+            var addEvent = function(el, name, cb) {
+                if (el.attachEvent) {
+                    el.attachEvent('on' + name, cb);
+                } else {
+                    el.addEventListener(name, cb);
+                }
+            };
+
+            addEvent(expand, 'scroll', onScroll);
+            addEvent(shrink, 'scroll', onScroll);
+
+            // Fix for custom Elements
+            lastAnimationFrame = requestAnimationFrame(reset);
+        }
+
+        forEachElement(element, function(elem){
+            attachResizeEvent(elem, callback);
+        });
+
+        this.detach = function(ev) {
+            // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
+            if (!lastAnimationFrame) {
+                window.cancelAnimationFrame(lastAnimationFrame);
+                lastAnimationFrame = 0;
+            }
+            ResizeSensor.detach(element, ev);
+        };
+
+        this.reset = function() {
+            element.resizeSensor.resetSensor();
+        };
+    };
+
+    ResizeSensor.reset = function(element) {
+        forEachElement(element, function(elem){
+            elem.resizeSensor.resetSensor();
+        });
+    };
+
+    ResizeSensor.detach = function(element, ev) {
+        forEachElement(element, function(elem){
+            if (!elem) return;
+            if(elem.resizedAttached && typeof ev === "function"){
+                elem.resizedAttached.remove(ev);
+                if(elem.resizedAttached.length()) return;
+            }
+            if (elem.resizeSensor) {
+                if (elem.contains(elem.resizeSensor)) {
+                    elem.removeChild(elem.resizeSensor);
+                }
+                delete elem.resizeSensor;
+                delete elem.resizedAttached;
+            }
+        });
+    };
+
+    if (typeof MutationObserver !== "undefined") {
+        var observer = new MutationObserver(function (mutations) {
+            for (var i in mutations) {
+                if (mutations.hasOwnProperty(i)) {
+                    var items = mutations[i].addedNodes;
+                    for (var j = 0; j < items.length; j++) {
+                        if (items[j].resizeSensor) {
+                            ResizeSensor.reset(items[j]);
+                        }
+                    }
+                }
+            }
+        });
+
+        document.addEventListener("DOMContentLoaded", function (event) {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        });
+    }
+
+    return ResizeSensor;
+
+}));

assets/mastodon.css

@@ -271,6 +271,9 @@
 .status-card__description {
     color: #282c37;
 }
+.status__wrapper[max-width~="350px"] .status-card__description {
+    display: none;
+}
 .status-card__host {
     display: block;
     margin-top: 5px;
@@ -279,6 +282,23 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.status__wrapper[max-width~="350px"] .status.status-public {
+    padding: 8px 10px 8px 10px;
+}
+.status__wrapper[max-width~="350px"] .status__info {
+    font-size: 1.8rem;
+    margin-left: 60px;
+    position: initial;
+}
+.status__wrapper[max-width~="350px"] .status__content {
+    margin-top: 2rem;
+}
+.status__content .invisible {
+  display: none;
+}
+.status__content .ellipsis:after {
+  content: '\2026';
+}
 .status__content summary {
   background: #eee;
     border-radius: 5px;

assets/pixelfed.css

@@ -66,3 +66,17 @@ a.card{
   font-size: 14px;
   color: #fff;
 }
+.pixelfed[max-width~="400px"] .pixelfed-meta .text-center{
+  display: none;
+}
+.pixelfed[max-width~="350px"] .pixelfed-header{
+  display: block!important;
+}
+.pixelfed[max-width~="350px"] .pixelfed-account{
+  float: left;
+  clear: both;
+}
+.pixelfed[max-width~="350px"] .pixelfed-instance{
+  float: right;
+  clear: both;
+}

fediembedi-mastodon-widget.php

@@ -52,6 +52,7 @@ class FediEmbedi_Mastodon extends WP_Widget {
 
 			//getStatus from remote instance
 			$status = $client->getStatus($only_media, $pinned, $exclude_replies, null, null, null, $number, $exclude_reblogs);
+			$account = $status[0]->account;
       include(plugin_dir_path(__FILE__) . 'templates/mastodon.tpl.php' );
 
 		echo $args['after_widget'];

fediembedi.php

@@ -3,8 +3,8 @@
  * Plugin Name: FediEmbedi
  * Plugin URI: https://git.feneas.org/mediaformat/fediembedi
  * Github Plugin URI: https://github.com/mediaformat/fediembedi
- * Description: A widget to show your Mastodon profile timeline
- * Version: 0.8.4
+ * Description: A widget to show your Fediverse profile timeline
+ * Version: 0.8.5
  * Author: mediaformat
  * Author URI: https://mediaformat.org
  * License: GPLv3
@@ -152,6 +152,11 @@ class FediConfig
 
     public function enqueue_styles($hook)
     {
+        if( is_active_widget( false, false, 'mastodon') || is_active_widget( false, false, 'pixelfed') ) {
+            wp_enqueue_script( 'resize-sensor', plugin_dir_url( __FILE__ ) . 'assets/ResizeSensor.js', array(), 'css-element-queries-1.2.2' );
+            wp_enqueue_script( 'element-queries', plugin_dir_url( __FILE__ ) . 'assets/ElementQueries.js', array('resize-sensor'), 'css-element-queries-1.2.2' );
+
+        }
         if( is_active_widget( false, false, 'mastodon') ) {
             wp_enqueue_style( 'mastodon', plugin_dir_url( __FILE__ ) . 'assets/mastodon.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'assets/mastodon.css') );
         }

readme.md

@@ -5,10 +5,10 @@
 FediEmbedi will display your Mastodon, Pleroma, or Pixelfed timeline in a widget, with various display options.
 
 ### Currently supported software
-* Mastodon
-* Pleroma
-* Pixelfed
-* PeerTube
+* [Mastodon](http://joinmastodon.org/)
+* [Pleroma](https://git.pleroma.social/pleroma)
+* [Pixelfed](https://pixelfed.org/)
+* [PeerTube](https://joinpeertube.org/)
 
 
 ### Planned supported software
@@ -48,6 +48,9 @@ and redirected to your site with a secure token. Similar to how you would connec
 
 ## Changelog
 
+### 0.8.5
+* CSS for small columns
+
 ### 0.8.4
 * Fix large video player
 

readme.txt

@@ -18,10 +18,10 @@ Display your Fediverse timeline in a widget
 FediEmbedi will display your Mastodon, Pleroma, or Pixelfed timeline in a widget, with various display options.
 
 = Currently supported software =
-* Mastodon
-* Pleroma
-* Pixelfed
-* PeerTube
+* [Mastodon](http://joinmastodon.org/)
+* [Pleroma](https://git.pleroma.social/pleroma)
+* [Pixelfed](https://pixelfed.org/)
+* [PeerTube](https://joinpeertube.org/)
 
 = Planned supported software =
 * See the [board](https://git.feneas.org/mediaformat/fediembedi/-/boards)
@@ -59,6 +59,9 @@ and redirected to your site with a secure token. Similar to how you would connec
 
 == Changelog ==
 
+= 0.8.5 =
+* CSS for small columns
+
 = 0.8.4 =
 * Fix large video player
 
@@ -68,7 +71,7 @@ and redirected to your site with a secure token. Similar to how you would connec
 = 0.8.2 =
 * Add Support links
 
-= 0.8.1 = 
+= 0.8.1 =
 * CSS fix
 
 = 0.8.0 =

templates/mastodon.tpl.php

@@ -6,28 +6,28 @@
       <div class="account__header">
         <div class="account__header__image">
           <div class="account__header__info"></div>
-          <?php if ($status[0]->account->header): echo "<img src=" . $status[0]->account->header . " loading='lazy'>"; endif; ?>
+          <?php if ($account->header): echo "<img src=" . $account->header . " loading='lazy'>"; endif; ?>
         </div>
         <div class="account__header__bar">
           <div class="account__header__tabs">
-            <a href="<?php echo $status[0]->account->url; ?>" class="avatar" rel="noreferrer noopener" target="_blank">
-              <div class="account__avatar" style="width:90px; height: 90px; background-image: url('<?php echo $status[0]->account->avatar; ?>'); background-size: cover;"></div>
+            <a href="<?php echo $account->url; ?>" class="avatar" rel="noreferrer noopener" target="_blank">
+              <div class="account__avatar" style="width:90px; height: 90px; background-image: url('<?php echo $account->avatar; ?>'); background-size: cover;"></div>
             </a>
             <div class="spacer"></div>
             <div class="account__header__tabs__buttons">
-              <a href="<?php echo $status[0]->account->url; ?>" rel="noreferrer noopener" class="button logo-button"><?php _e('Follow', 'fediembedi'); ?></a>
+              <a href="<?php echo $account->url; ?>" rel="noreferrer noopener" class="button logo-button"><?php _e('Follow', 'fediembedi'); ?></a>
             </div>
           </div>
           <div class="account__header__tabs__name">
             <h1>
-              <span><?php echo $status[0]->account->display_name; ?></span>
-              <small><a href="" target="_blank" rel="noreferrer noopener"><?php echo $status[0]->account->url; ?></a></small>
+              <span><?php echo $account->display_name; ?></span>
+              <small><a href="" target="_blank" rel="noreferrer noopener"><?php echo $account->url; ?></a></small>
             </h1>
           </div>
           <div class="account__header__extra">
             <div class="account__header__bio">
               <div class="account__header__content">
-                <?php echo $status[0]->account->note; ?>
+                <?php echo $account->note; ?>
               </div>
             </div>
           </div>
@@ -76,7 +76,7 @@
                         <div class="status-card__image"><div class="status-card__image-image" style="background-image: url(<?php echo $statut->card->image; ?>);"></div></div>
                         <div class="status-card__content">
                           <strong class="status-card__title" title="<?php echo $statut->card->title; ?>"><?php echo htmlentities($statut->card->title); ?></strong>
-                          <p class="status-card__description"><?php echo wp_trim_words(htmlentities($statut->card->description)); ?></p>
+                          <p class="status-card__description"><?php echo wp_trim_words(htmlentities($statut->card->description), 10); ?></p>
                           <span class="status-card__host"><?php echo $statut->card->url; ?></span>
                         </div>
                       </a>

templates/pixelfed.tpl.php

@@ -4,11 +4,11 @@
     <div class="pixelfed-inner card status-card-embed card-md-rounded-0 border">
       <?php if($show_header): ?>
       <div class="pixelfed-header card-header d-inline-flex align-items-center justify-content-between bg-white">
-        <div>
+        <div class="pixelfed-account">
           <img src="<?php echo $status[0]->account->avatar; ?>" height="32px" width="32px" style="border-radius: 32px;">
           <a href="<?php echo $status[0]->account->url; ?>" class="username font-weight-bold pl-2 text-dark" rel="noreferrer noopener" target="_blank"><?php echo $status[0]->account->username; ?></a>
         </div>
-        <div>
+        <div class="pixelfed-instance">
           <a class="small font-weight-bold text-muted pr-1" href="<?php echo $instance_url; ?>"><?php echo parse_url($instance_url, PHP_URL_HOST); ?></a>
           <img src="<?php echo plugin_dir_url( __FILE__ ) . '../img/pixelfed.svg';?>" width="26px" loading="lazy">
         </div>