Skip to content

GitLab

Currently we have some license issues. We are working on it.

Commit 446627b4 authored by MediaFormat's avatar MediaFormat
Browse files

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 diff is collapsed.
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