CSS Fix styles for narrow columns

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>