Skip to content

GitLab

F
FediEmbedi
Commit 446627b4 authored by MediaFormat's avatar MediaFormat
Browse files
Options

0.7.0 Pixelfed Styles, i18n

parent e35d4f3d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 331 deletions
.github/FUNDING.yml 0 → 100644
View file @ 446627b4
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: https://paypal.me/MediaFormat
.gitignore 0 → 100644
View file @ 446627b4
#ignore system files
.DS_Store
bootstrap/css/bootstrap.min.css 0 → 100644
View file @ 446627b4
This source diff could not be displayed because it is too large. You can view the blob instead.
bootstrap/css/bootstrap.min.css.map 0 → 100644
View file @ 446627b4
This diff is collapsed.
fediembedi-settings-form.tpl.php
View file @ 446627b4
......@@ -18,8 +18,8 @@ define("ADVANCED_VIEW",false);
<option value="Pixelfed">Pixelfed</option>
</select>
<input class="button button-primary" type="submit" value="<?php esc_attr_e( 'Connect to your instance', 'fediembedi' ); ?>" name="save" id="save">
<br><small>The currently supported software are Mastodon, Pleroma, Pixelfed.</small><br>
<p>Don't have an account?</p>
<br><small><?php _e( 'The currently supported software are Mastodon, Pleroma, Pixelfed.', 'fediembedi' ); ?></small><br>
<p><?php _e( "Don't have an account?", 'fediembedi' ); ?></p>
<p><span class="mastodon"></span> Visit <a href="https://joinmastodon.org/" rel="noreferrer noopener" target="_blank" class="">joinmastodon.org</a> to find an instance.</p>
<p><span class="pixelfed"></span> Visit <a href="https://pixelfed.org/join" rel="noreferrer noopener" target="_blank" class="">pixelfed.org/join</a> to find an instance.</p>
</div>
......
fediembedi.php
View file @ 446627b4
......@@ -104,10 +104,11 @@ class FediConfig
$instance_type = get_option('fediembedi-instance-type');
switch ($instance_type) {
case 'Mastodon':
wp_enqueue_style( 'fediembedi', plugin_dir_url( __FILE__ ) . 'mastodon/mastodon.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'mastodon/mastodon.css') );
wp_enqueue_style( 'mastodon', plugin_dir_url( __FILE__ ) . 'mastodon/mastodon.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'mastodon/mastodon.css') );
break;
case 'Pixelfed':
wp_enqueue_style( 'fediembedi', plugin_dir_url( __FILE__ ) . 'pixelfed/pixelfed.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'pixelfed/pixelfed.css') );
wp_enqueue_style( 'bootstrap', plugin_dir_url( __FILE__ ) . 'bootstrap/css/bootstrap.min.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'bootstrap/css/bootstrap.min.css') );
wp_enqueue_style( 'pixelfed', plugin_dir_url( __FILE__ ) . 'pixelfed/pixelfed.css', array(), filemtime(plugin_dir_path( __FILE__ ) . 'pixelfed/pixelfed.css') );
//https://css-tricks.com/lozad-js-performant-lazy-loading-images/ lazyloading for background images
break;
default:
......
mastodon/fediembedi-mastodon.tpl.php
View file @ 446627b4
......@@ -15,7 +15,7 @@
</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">Follow</a>
<a href="<?php echo $status[0]->account->url; ?>" rel="noreferrer noopener" class="button logo-button"><?php _e('Follow', 'fediembedi')</a>
</div>
</div>
<div class="account__header__tabs__name">
......
pixelfed/fediembedi-pixelfed.tpl.php
View file @ 446627b4
<!-- pixelfed -->
<?php $instance_url = get_option('fediembedi-instance'); ?>
<div class="scrollable" style="height: <?php echo $height; ?>;">
<div role="feed">
<?php if($show_header): ?>
<div class="account-timeline__header">
<div class="account__header">
<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="margin-top: 50px; width:90px; height: 90px; background-image: url('<?php echo $status[0]->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">Follow</a>
</div>
<div role="feed" class="embed-card pixelfed">
<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>
<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>
<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>
</div>
<?php endif; ?>
<div class="pixelfed-body card-body pb-1">
<div class="pixelfed-meta d-flex justify-content-between align-items-center">
<div class="text-center">
<p class="mb-0 font-weight-bold prettyCount"><?php echo $status[0]->account->statuses_count; ?></p>
<p class="mb-0 text-muted text-uppercase small font-weight-bold"><?php _e('Posts', 'fediembedi'); ?></p>
</div>
<div class="text-center">
<p class="mb-0 font-weight-bold prettyCount"><?php echo $status[0]->account->followers_count; ?></p>
<p class="mb-0 text-muted text-uppercase small font-weight-bold"><?php _e('Followers', 'fediembedi'); ?></p>
</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>
</h1>
<div class="text-center">
<p class="mb-0 font-weight-bold prettyCount"><?php echo $status[0]->account->following_count; ?></p>
<p class="mb-0 text-muted text-uppercase small font-weight-bold"><?php _e('Following', 'fediembedi'); ?></p>
</div>
<div class="account__header__extra">
<div class="account__header__bio">
<div class="account__header__content">
<?php echo $status[0]->account->note; ?>
</div>
</div>
<div class="text-center">
<p class="mb-0">
<a href="<?php echo $instance_url . '/i/intent/follow?user='. $status[0]->account->acct; ?>" class="pixelfed-follow btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" target="_blank"><?php _e('Follow', 'fediembedi'); ?></a>
</p>
</div>
</div>
<div class="pixelfed-images row mt-4 mb-1 px-1">
<?php foreach ($status as $statut) { ?>
<article class="col-4 mt-2 px-0"><?php
if (!empty($statut->media_attachments[0]->preview_url) && $statut->media_attachments[0]->type === 'image'): ?>
<a href="<?php echo $statut->url; ?>" class="card info-overlay card-md-border-0 px-1 shadow-none" target="_blank" rel="noopener">
<div class="square">
<div style='background-image: url(<?php echo $statut->media_attachments[0]->preview_url; ?>);' class='square-content' alt='<?php $statut->media_attachments[0]->description; ?>'></div>
<div class="info-text-overlay"></div>
</div>
</a><?php
elseif($statut->media_attachments[0]->type === 'video'):
echo "<video src=" . $attachment->url . " controls poster='" . $statut->media_attachments[0]->preview_url . "' class='media-gallery__item' alt=" . $statut->media_attachments[0]->description . ">";
endif; ?>
</article>
<?php } ?>
</div>
</div>
<div class="pixelfed-footer card-footer bg-white">
<p class="text-center mb-0">
<a href="<?php echo $status[0]->account->url; ?>" class="font-weight-bold" target="_blank" rel="noreferrer noopener"><?php _e('View More Posts', 'fediembedi'); ?></a>
</p>
</div>
</div>
<?php endif; ?>
<?php foreach ($status as $statut) { ?>
<article>
<div tabindex="-1">
<div class="status__wrapper status__wrapper-public focusable" tabindex="0">
<div class="status__content"><?php
if(!empty($statut->media_attachments)):
foreach ($statut->media_attachments as $attachment) {
if (!empty($attachment->preview_url) && $attachment->type === 'image'): ?>
<a href="<?php echo $statut->url; ?>" class="" target="_blank" rel="noopener">
<img src='<?php echo $attachment->preview_url; ?>' class='media-gallery__item' alt='<?php $attachment->description; ?>' loading='lazy'>
</a><?php
elseif($attachment->type === 'video'):
echo "<video src=" . $attachment->url . " controls poster='" . $attachment->preview_url . "' class='media-gallery__item' alt=" . $attachment->description . ">";
endif;
}
endif;
?></div>
</div>
</div>
</article>
<?php } ?>
</div>
</div>
pixelfed/pixelfed.css
View file @ 446627b4
......@@ -9,299 +9,59 @@
will-change: transform;
}
.status {
padding: 8px 10px 8px 68px;
position: relative;
min-height: 54px;
border-bottom: 1px solid #c0cdd9;
cursor: default;
opacity: 1;
-webkit-animation: fade .15s linear;
animation: fade .15s linear;
}
.status__prepend {
margin-left: 68px;
color: #444b5d;
padding: 8px 0 2px;
font-size: 14px;
position: relative;
/**
* Pixelfed Styles
*/
.embed-card a {
text-decoration: none;
}
.status__prepend-icon-wrapper {
left: -26px;
position: absolute;
a.card{
border: none;
}
.fa-fw {
width: 1.28571429em;
text-align: center;
.card img {
max-width: none;
display: inline;
}
.fa {
display: inline-block;
}
.account__header {
overflow: hidden;
}
.account__header__image {
overflow: hidden;
height: 145px;
.info-overlay {
position: relative;
background: #e6ebf0;
}
.account__header__info {
position: absolute;
top: 10px;
left: 10px;
}
.account__header__image img {
object-fit: cover;
display: block;
.info-overlay-text {
width: 100%;
height: 100%;
margin: 0;
;
}
.account__header__bar {
position: relative;
background: #fff;
padding: 5px;
border-bottom: 1px solid #b3c3d1;
background-color: rgba(0,0,0,.5);
}
.account__header__tabs {
display: flex;
align-items: flex-start;
padding: 7px 5px;
}
.account__header__bar .avatar {
display: block;
flex: 0 0 auto;
width: 94px;
margin-left: -2px;
border-radius: 50%
}
.account__header__tabs .spacer {
flex: 1 1 auto;
}
.account__header__tabs__buttons .button {
margin: 0 8px;
color: #fff;
border-radius: 4px;
padding: 0px 16px;
height: 36px;
line-height: 36px;
}
.account__header__tabs__name {
padding: 5px;
}
.account__header__tabs__name h1 {
font-size: 16px;
line-height: 24px;
color: #000;
font-weight: 500;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.account__header__tabs__name h1 small {
display: block;
font-size: 14px;
color: #282c37;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
}
.account__header__extra {
margin-top: 4px;
}
.account__header__bio {
overflow: hidden;
margin: 0 -5px;
}
.account__header__bio .account__header__content {
padding: 20px 15px 5px;
color: #000;
}
.account__header__content {
color: #282c37;
font-size: 14px;
font-weight: 400;
overflow: hidden;
word-break: normal;
word-wrap: break-word;
}
.account__display-name,
.detailed-status__application,
.detailed-status__datetime,
.detailed-status__display-name,
.status__display-name,
.status__relative-time {
text-decoration: none;
}
.status__display-name {
color: #444b5d;
}
.status__expand {
width: 68px;
position: absolute;
left: 0;
top: 0;
height: 100%;
cursor: pointer;
}
.status__info {
font-size: 15px;
}
.status__info .status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__avatar {
height: 48px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.account__avatar {
border-radius: 4px;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
position: relative;
border-radius: 50%
}
.account__avatar-overlay {
width: 48px;
height: 48px;
background-size: 48px 48px;
}
.account__avatar-overlay-base {
border-radius: 4px;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
width: 36px;
height: 36px;
background-size: 36px 36px;
}
.account__avatar-overlay-overlay {
border-radius: 4px;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
width: 24px;
height: 24px;
background-size: 24px 24px;
.info-overlay .info-overlay-text {
display: none;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.display-name {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.display-name__account {
font-size: 14px;
}
.account__display-name strong, .status__display-name strong {
color: #000;
}
.display-name__html {
font-weight: 500;
}
.notification__relative_time, .status__relative-time {
color: #444b5d;
float: right;
font-size: 14px;
}
.status-card.compact {
border-color: #ccd7e0;
}
.status-card {
.info-overlay:hover .info-overlay-text {
display: -webkit-box;
display: flex;
font-size: 14px;
border: 1px solid #c0cdd9;
border-radius: 4px;
color: #444b5d;
margin-top: 14px;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.status-card.compact .status-card__image {
flex: 0 0 60px;
}
.status-card__image {
flex: 0 0 100px;
background: #c0cdd9;
.square {
position: relative;
width: 100%;
}
.status-card__image-image {
border-radius: 4px 0 0 4px;
.square:after {
content: "";
display: block;
margin: 0;
padding-bottom: 100%;
}
.square-content {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
.status-card.compact .status-card__content {
padding: 10px 8px 8px;
}
.status-card__content {
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;
}
.status-card__title {
display: block;
font-weight: 500;
margin-bottom: 5px;
color: #282c37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
.embed-card .pixelfed-follow {
font-size: 14px;
color: #fff;
}
.status-card__description {
color: #282c37;
}
.status-card__host {
display: block;
margin-top: 5px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status__content summary {
background: #eee;
border-radius: 5px;
padding: 2px 8px;
cursor: pointer;
display: inline-block;
}
.status__content .media-gallery__item{
margin: 1em 0;
}
i.fa-retweet {
background-image: url('../img/retoot.svg');
background-position: 0 0;
height: 19px;
vertical-align: middle;
width: 22px;
color: #ccc;
opacity: .75;
z-index: 10;
position: relative;
}
/**
* Pixelfed Styles
*/
readme.md
View file @ 446627b4
# FediEmbedi
TLDR; Display your Fediverse timeline in a widget
>TLDR; Display your Fediverse timeline in a widget
FediEmbedi will display your Mastodon, Pleroma, or Pixelfed timeline in a widget, with various display options.
......@@ -42,11 +42,19 @@ e.g.
### Does this plugin store my login info?
No, this plugin uses [OAuth 2.0](https://oauth.net/). You will be sent to login to your Instance
and redirected to your site with a secure token. Similar to how you would connect a mobile app to your account
and redirected to your site with a secure token. Similar to how you would connect a mobile app to your account.
## Changelog
### 0.7.0
* Added Pixelfed /embed styles
* Added i18n support to template strings
### 0.6.0
* Updated settings page, with links for finding an instance to join/register
* Clarify widget options
### 0.5.0
* Mirror plugin on Github for use with [Github Updater](https://github.com/afragen/github-updater)
......
readme.txt
View file @ 446627b4
......@@ -54,13 +54,15 @@ or using Github Updater
= Does this plugin store my login info? =
No, this plugin uses [OAuth 2.0](https://oauth.net/). You will be sent to login to your Instance
and redirected to your site with a secure token. Similar to how you would connect a mobile app to your account
and redirected to your site with a secure token. Similar to how you would connect a mobile app to your account.
== Changelog ==
= 0.7.0 =
* Added Pixelfed /embed styles
* Added i18n support to template strings
= 0.6.0 =
* TODO: Copy Changelog to readme.md
* TODO: Style/Script for Pixelfed
* Updated settings page, with links for finding an instance to join/register
* Clarify widget options
......
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