Commit 0934fbfa authored by MediaFormat's avatar MediaFormat
Browse files

CSS Fix styles for narrow columns

parent 715c92be
This diff is collapsed.
'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;
}));
......@@ -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