Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit buttons styles for Templates responses (Mod) #14468

Merged
merged 7 commits into from Aug 12, 2021
Merged

Edit buttons styles for Templates responses (Mod) #14468

merged 7 commits into from Aug 12, 2021

Conversation

thomasbnt
Copy link
Contributor

@thomasbnt thomasbnt commented Aug 10, 2021

What type of PR is this? (check all applicable)

  • Refactor
  • Feature
  • Bug Fix
  • Optimization
  • Documentation Update

Description

Make styles for buttons "Personal" and "Moderator" for Templates responses.

Related Tickets & Documents

Closes #13747

QA Instructions, Screenshots, Recordings

2021-08-11_01-03-31.mp4

Added/updated tests?

  • Yes
  • No, and this is why: please replace this line with details on why tests
    have not been included
  • I need help with writing tests

[Forem core team only] How will this change be communicated?

Will this PR introduce a change that impacts Forem members or creators, the
development process, or any of our internal teams? If so, please note how you
will share this change with the people who need to know about it.

  • I've updated the Developer Docs and/or
    Admin Guide, or
    Storybook (for Crayons components)
  • I've updated the README or added inline documentation
  • I've added an entry to
    CHANGELOG.md
  • I will share this change in a Changelog
    or in a forem.dev post
  • I will share this change internally with the appropriate teams
  • I'm not sure how best to communicate this change and need help
  • This change does not need to be communicated, and this is why not: please
    replace this line with details on why this change doesn't need to be
    shared

[optional] What gif best describes this PR or how it makes you feel?

New Girl Fistbump GIF

@thomasbnt thomasbnt requested a review from a team August 10, 2021 23:11
@pr-triage pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Aug 10, 2021
@thomasbnt thomasbnt requested review from nickytonline and Ridhwana and removed request for a team August 10, 2021 23:11
@github-actions
Copy link
Contributor

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

@thomasbnt
Copy link
Contributor Author

Good for others themes !

Pink theme
Dark theme
Ten X Hacker Theme

Copy link
Contributor

@aitchiss aitchiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking so much better - nice work! I've suggested a change that I think can streamline what you've implemented here - let me know if you have any questions about it.

I'm not sure if we have a separate issue for this yet but it would be a nice follow up task (not for now - I'm just thinking out loud 😄 ) to update the styles on these buttons so that they have a bit of spacing and don't grow in height with the template content:

screenshot showing the moderator template options. The buttons to the right "send as mod" and "insert" have no spacing between them and expand to the full height of the comment message

app/assets/stylesheets/views/comments.scss Outdated Show resolved Hide resolved
app/views/comments/_form.html.erb Outdated Show resolved Hide resolved
@pr-triage pr-triage bot added PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes and removed PR: unreviewed bot applied label for PR's with no review labels Aug 11, 2021
@pr-triage pr-triage bot added PR: unreviewed bot applied label for PR's with no review and removed PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes labels Aug 11, 2021
@thomasbnt
Copy link
Contributor Author

thomasbnt commented Aug 11, 2021

I'm not sure if we have a separate issue for this yet but it would be a nice follow up task (not for now - I'm just thinking out loud ) to update the styles on these buttons so that they have a bit of spacing and don't grow in height with the template content:

#14468 (review)

Yeah good idea to also change this buttons with a little spacing between us!

@thomasbnt
Copy link
Contributor Author

thomasbnt commented Aug 11, 2021

Submit buttons like 'Send as Mod' and 'Insert' is modified with m-1. Thanks for see that @aitchiss !

image

@thomasbnt
Copy link
Contributor Author

Also edited the margin bottom to the <header> of .response-templates-container to adding mb-3. 6a62b93 (#14468)

Preview :
image

Copy link
Contributor

@aitchiss aitchiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! I've just left a final change request as I think a class name has just been missed in the refactor, but otherwise this is looking great, and nice work on the submit button spacing too 🌈

app/views/comments/_form.html.erb Outdated Show resolved Hide resolved
@pr-triage pr-triage bot added PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes and removed PR: unreviewed bot applied label for PR's with no review labels Aug 11, 2021
Copy link
Contributor

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, and thanks for fixing this! 🚢

@pr-triage pr-triage bot added PR: unreviewed bot applied label for PR's with no review and removed PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes labels Aug 12, 2021
app/assets/stylesheets/views/comments.scss Outdated Show resolved Hide resolved
@pr-triage pr-triage bot added PR: partially-approved bot applied label for PR's where a single reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Aug 12, 2021
@pr-triage pr-triage bot added PR: unreviewed bot applied label for PR's with no review and removed PR: partially-approved bot applied label for PR's where a single reviewer approves changes labels Aug 12, 2021
Copy link
Contributor

@aitchiss aitchiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! ✨

@pr-triage pr-triage bot added PR: partially-approved bot applied label for PR's where a single reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Aug 12, 2021
@aitchiss
Copy link
Contributor

I've restarted the failed build job as I don't think it's related to your changes. Hopefully, this will go green shortly and we can get this merged 🙌

@aitchiss aitchiss merged commit a041e59 into forem:main Aug 12, 2021
@pr-triage pr-triage bot added PR: merged bot applied label for PR's that are merged and removed PR: partially-approved bot applied label for PR's where a single reviewer approves changes labels Aug 12, 2021
@thomasbnt thomasbnt deleted the response-templates-buttons-issue13747-thomasbnt branch August 12, 2021 15:45
@cmgorton
Copy link
Contributor

Thanks so much for this wonderful fix @thomasbnt !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: merged bot applied label for PR's that are merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styling Issues With Response Templates Buttons
6 participants