Event-Federation/wordpress-activitypub
Event-Federation/wordpress-activitypub
7
1
Fork 0
Code Issues 3 Pull requests Projects Releases Wiki Activity Actions

Follow Me: more sensible and leaner styles (#496)

Browse source 
* side padding only for border/color
This commit is contained in:
Matt Wiebe 2023-10-07 00:11:07 -05:00 committed by GitHub
parent 838ddf478f
commit 8efe98ad20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
build/follow-me/index.asset.php
View file

@ -1 +1 @@
<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '0435827df447a2d3f759'); <?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2a185b1c488886051601');

2
build/follow-me/index.js
View file

File diff suppressed because one or more lines are too long

2
build/follow-me/style-index.css
View file

@ -1 +1 @@
.activitypub-follow-me-block-wrapper{width:100%}.activitypub-follow-me-block-wrapper .activitypub-profile,.editor-styles-wrapper .activitypub-profile{align-items:center;display:flex;padding:1rem .5rem}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__avatar,.editor-styles-wrapper .activitypub-profile .activitypub-profile__avatar{border-radius:50%;height:75px;margin-right:1rem;width:75px}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__content,.editor-styles-wrapper .activitypub-profile .activitypub-profile__content{flex:1;min-width:0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__handle,.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__handle,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{font-size:1.25em}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__follow,.editor-styles-wrapper .activitypub-profile .activitypub-profile__follow{align-self:center;background-color:var(--wp--preset--color--black);color:var(--wp--preset--color--white);margin-left:1rem}.activitypub-profile__confirm.components-modal__frame{background-color:#f7f7f7;color:#333}.activitypub-profile__confirm.components-modal__frame .components-modal__header-heading,.activitypub-profile__confirm.components-modal__frame h4{color:#333;letter-spacing:inherit;word-spacing:inherit}.activitypub-follow-me__dialog{max-width:30em}.activitypub-follow-me__dialog h4{line-height:1;margin:0}.activitypub-follow-me__dialog .apmfd__section{margin-bottom:2em}.activitypub-follow-me__dialog .apfmd-description{font-size:var(--wp--preset--font-size--normal,.75rem);margin:.33em 0 1em}.activitypub-follow-me__dialog .apfmd__button-group{display:flex;justify-content:flex-end}.activitypub-follow-me__dialog .apfmd__button-group svg{height:21px;margin-right:.5em;width:21px}.activitypub-follow-me__dialog .apfmd__button-group input{flex:1;padding-left:1em;padding-right:1em} .activitypub-follow-me-block-wrapper{width:100%}.activitypub-follow-me-block-wrapper.has-background .activitypub-profile,.activitypub-follow-me-block-wrapper.has-border-color .activitypub-profile{padding-left:1rem;padding-right:1rem}.activitypub-follow-me-block-wrapper .activitypub-profile{align-items:center;display:flex;padding:1rem 0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__avatar{border-radius:50%;height:75px;margin-right:1rem;width:75px}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__content{flex:1;min-width:0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__handle,.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name{line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name{font-size:1.25em}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__follow{align-self:center;background-color:var(--wp--preset--color--black);color:var(--wp--preset--color--white);margin-left:1rem}.activitypub-profile__confirm.components-modal__frame{background-color:#f7f7f7;color:#333}.activitypub-profile__confirm.components-modal__frame .components-modal__header-heading,.activitypub-profile__confirm.components-modal__frame h4{color:#333;letter-spacing:inherit;word-spacing:inherit}.activitypub-follow-me__dialog{max-width:30em}.activitypub-follow-me__dialog h4{line-height:1;margin:0}.activitypub-follow-me__dialog .apmfd__section{margin-bottom:2em}.activitypub-follow-me__dialog .apfmd-description{font-size:var(--wp--preset--font-size--normal,.75rem);margin:.33em 0 1em}.activitypub-follow-me__dialog .apfmd__button-group{display:flex;justify-content:flex-end}.activitypub-follow-me__dialog .apfmd__button-group svg{height:21px;margin-right:.5em;width:21px}.activitypub-follow-me__dialog .apfmd__button-group input{flex:1;padding-left:1em;padding-right:1em}

4
src/follow-me/edit.js
View file

@ -6,7 +6,9 @@ import FollowMe from './follow-me';
import { useEffect } from '@wordpress/element'; import { useEffect } from '@wordpress/element';
export default function Edit( { attributes, setAttributes } ) { export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps(); const blockProps = useBlockProps( {
className: 'activitypub-follow-me-block-wrapper',
} );
const usersOptions = useUserOptions(); const usersOptions = useUserOptions();
const { selectedUser } = attributes; const { selectedUser } = attributes;

15
src/follow-me/style.scss
View file

@ -1,13 +1,20 @@
.activitypub-follow-me-block-wrapper { .activitypub-follow-me-block-wrapper {
width: 100%; width: 100%;
}
.editor-styles-wrapper, .activitypub-follow-me-block-wrapper { // extra side padding for border/background colors
&.has-border-color, &.has-background {
.activitypub-profile { .activitypub-profile {
padding-left: 1rem;
padding-right: 1rem;
}
}
.activitypub-profile {
display: flex; display: flex;
align-items: center; align-items: center;
// @todo only add side padding if there's bg color, border, etc. Otherwise: full width. // right/left padding overridden above for border/background colors
padding: 1rem .5rem; padding: 1rem 0;
.activitypub-profile__avatar { .activitypub-profile__avatar {
height: 75px; height: 75px;