Follow Me: truncate long blog titles and handles (#453)

Also add typography control

Co-authored-by: Matthias Pfefferle <pfefferle@users.noreply.github.com>
This commit is contained in:
Matt Wiebe 2023-09-21 12:55:14 -05:00 committed by GitHub
parent 42d9aba80c
commit db0f9c1b51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 4 deletions

View file

@ -24,6 +24,12 @@
"width": true, "width": true,
"color": true, "color": true,
"style": true "style": true
},
"typography": {
"fontSize": true,
"__experimentalDefaultControls": {
"fontSize": true
}
} }
}, },
"attributes": { "attributes": {

View file

@ -1 +1 @@
.activitypub-follow-me-block-wrapper .activitypub-profile,.editor-styles-wrapper .activitypub-profile{align-items:self-start;display:flex;padding:1rem}.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__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{font-size:var(--wp--preset--font-size--large);line-height:1;margin:0}.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:auto}.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 .activitypub-profile,.editor-styles-wrapper .activitypub-profile{align-items:self-start;display:flex;padding:1rem}.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;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-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}

View file

@ -24,6 +24,12 @@
"width": true, "width": true,
"color": true, "color": true,
"style": true "style": true
},
"typography": {
"fontSize": true,
"__experimentalDefaultControls": {
"fontSize": true
}
} }
}, },
"attributes": { "attributes": {

View file

@ -10,13 +10,22 @@
margin-right: 1rem; margin-right: 1rem;
border-radius: 50%; border-radius: 50%;
} }
.activitypub-profile__name { .activitypub-profile__content {
flex: 1;
min-width: 0;
}
.activitypub-profile__name, .activitypub-profile__handle {
margin: 0; margin: 0;
line-height: 1; line-height: 1;
font-size: var( --wp--preset--font-size--large ); white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activitypub-profile__name {
font-size: 1.25em;
} }
.activitypub-profile__follow { .activitypub-profile__follow {
margin-left: auto; margin-left: 1rem;
align-self: center; align-self: center;
background-color: var(--wp--preset--color--black); background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white); color: var(--wp--preset--color--white);