Commit 0934fbfa authored by MediaFormat's avatar MediaFormat

CSS Fix styles for narrow columns

parent 715c92be
This diff is collapsed.
This diff is collapsed.
......@@ -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;
......
......@@ -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;
}
......@@ -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'];
......
......@@ -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') );
}
......
......@@ -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
......
......@@ -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 =
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment