~cytrogen/masto-fe

c43cfd24064120b0e75cdcfa352997382fdea6eb — Renaud Chaput 2 years ago 4faa4eb
[Glitch] Improve dismissable banner buttons when they dont fit on 1 line

Port ae30a60b1f6b7f51be38fe541e42a80ee2242d79 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
M app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx => app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx +5 -3
@@ 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'>
      <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 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>
);

M app/javascript/flavours/glitch/styles/components/columns.scss => app/javascript/flavours/glitch/styles/components/columns.scss +11 -2
@@ 1005,9 1005,18 @@ $ui-header-height: 55px;

    &__actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 30px;

      &__wrapper {
        display: flex;
        margin-top: 30px;
      }

      .button {
        display: block;
        flex-grow: 1;
      }
    }

    .button-tertiary {