Improve dismissable banner buttons when they dont fit on 1 line (#25580)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>gh/dev
parent
ed96e28c9e
commit
ae30a60b1f
|
@ -15,9 +15,11 @@ export const ExplorePrompt = () => (
|
|||
<h1><FormattedMessage id='home.explore_prompt.title' defaultMessage='This is your home base within Mastodon.' /></h1>
|
||||
<p><FormattedMessage id='home.explore_prompt.body' defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. It's looking pretty quiet right now, so how about:" /></p>
|
||||
|
||||
<div className='dismissable-banner__message__actions__wrapper'>
|
||||
<div className='dismissable-banner__message__actions'>
|
||||
<Link to='/explore' className='button'><FormattedMessage id='home.actions.go_to_explore' defaultMessage="See what's trending" /></Link>
|
||||
<Link to='/explore/suggestions' className='button button-tertiary'><FormattedMessage id='home.actions.go_to_suggestions' defaultMessage='Find people to follow' /></Link>
|
||||
</div>
|
||||
</div>
|
||||
</DismissableBanner>
|
||||
);
|
|
@ -8768,11 +8768,20 @@ noscript {
|
|||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.button-tertiary {
|
||||
background: rgba($ui-base-color, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
|
|
Reference in New Issue