Fixed responsiveness of buttons in create-collection page #527

frappelatte28 · 2020-10-27T18:27:03Z

Problem

https://tickets.metabrainz.org/browse/BB-558

Solution

Applied top margin for mobile screens using media query.

Areas of Impact

src/client/components/forms/userCollection.js
src/client/stylesheets/style.less

frappelatte28 · 2020-10-27T18:28:35Z

@MonkeyDo Please kindly review this PR :)

coveralls · 2020-10-27T19:56:53Z

Coverage increased (+0.1%) to 60.887% when pulling 8dcdf53 on frappelatte28:uifixes2 into b087f3d on bookbrainz:master.

MonkeyDo

Thanks, good find!

I have a suggestion for a different approach:
First of all, let's fix the issue with the overlapping buttons in a way that will fix it across the website. I've identified the issue is coming from the bootstrap theme, but can (and has) been mitigated; see this bit of CSS used previously to sort the issue of horizontal overlap:
https://github.com/bookbrainz/bookbrainz-site/blob/master/src/client/stylesheets/style.less#L83-L87
I propose to change that simply to margin: 0; to fix the overlapping issue vertically as well.

With that out of the way, I think there is a simple way to display our buttons properly using existing css.
We can use bootstrap's responsive grid system by modifying the structure just a bit:

<div class="row">
  <div class="col-sm-6">
    <button type="button" class="btn btn-block btn-primary">Add another collaborator</button>
  </div>
  <div class="col-sm-6">
    <button type="submit" class="btn btn-block btn-success">Create collection</button>
  </div>
</div>

We change the text-center class of the parent element to row
We create two <div class="col-sm-6"> elements around the existing buttons
Profit.

I think it looks quite good like that, with full width buttons in mobile sizes, and better looking as well in desktop sizes I find:

How does that sound?

frappelatte28 · 2020-11-03T13:53:26Z

@MonkeyDo
i think we can achieve the same with little less mess ,
we can use predefined " no-gutters " class on .row to remove negative margin of row and extra gutters of columns .

https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

also , i think giving space between two buttons will look more nicer so i think we can use above "no-gutter" method and then add the space manually in this section .

what do you think?

MonkeyDo · 2020-11-05T20:34:14Z

on .row to remove negative margin of row and extra gutters of columns

I'm not sure I understand your suggestion. Which .row element do you want to modify?
I don't follow how it will solve the issue.

We're using an older version of Bootstrap that doesn't have the no-gutter class, but that's not a huge issue as we can always define some css class for it.

frappelatte28 · 2020-11-08T15:10:40Z

We're using an older version of Bootstrap that doesn't have the no-gutter class, but that's not a huge issue as we can always define some css class for it.

yes i agree on this .

also
i have tested this code

<div class="row">
  <div class="col-sm-6">
    <button type="button" class="btn btn-block btn-primary">Add another collaborator</button>
  </div>
  <div class="col-sm-6">
    <button type="submit" class="btn btn-block btn-success">Create collection</button>
  </div>
</div>

looks great to me ,
i should make a commit using this !

frappelatte28 · 2020-11-08T16:56:45Z

@MonkeyDo please review the changes !

MonkeyDo

It's looking quite good !
A suggestion below to simplify the fix.

Also, currently our continuous integration (CI) tests are failing on simple code style issues, which you can easily fix by running this command: npm run lint -- --fix before committing the changes to the userCollection.js file.

MonkeyDo · 2020-11-09T13:57:14Z

src/client/components/forms/userCollection.js

@@ -262,7 +262,8 @@ class UserCollectionForm extends React.Component {
 							<div className={errorAlertClass}>
 								<Alert bsStyle="danger">Error: {errorText}</Alert>
 							</div>
-							<div className="text-center">
+							<div className="row">
+								<div className = "col-sm-6">


You can add a simple Bootstrap class to add a space on top of both of these col-sm-6 elements, which will give a bit of space between the buttons when they are on top of each other:

Suggested change

<div className = "col-sm-6">

<div className = "col-sm-6 margin-top-d5">

With that simply change on both elements, you can remove the changes to the style.less file.

MonkeyDo · 2020-11-09T13:58:00Z

src/client/stylesheets/style.less

@@ -549,3 +550,10 @@ hr.wide {
 	margin-right: 0.5em !important;;
 	vertical-align: text-top;
 }
+
+@media (max-width: 498px){
+	.buttons-container > button:nth-child(2) {


This buttons-container class is not used anywhere, so this code block is unused, and can be removed.

As mentioned in the comment above, we can add a bit of space between the buttons using existing bootstrap classes instead.

frappelatte28 · 2020-11-10T11:21:57Z

@MonkeyDo Please review the changes!

MonkeyDo

Just two more details and I think this will be perfect :)

src/client/components/forms/userCollection.js

MonkeyDo · 2020-11-10T14:53:41Z

src/client/components/forms/userCollection.js

-								>
-									<FontAwesomeIcon icon="save"/>&nbsp;{submitLabel}
-								</Button>
+							<div className="row">


Suggested change

<div className="row">

<div className="row margin-bottom-2">

This makes sure there's a bit of space between the buttons and the footer.

MonkeyDo · 2020-11-10T15:09:05Z

src/client/components/forms/userCollection.js

 								{
 									this.props.collection.id ?
 										<Button


I just noticed the third button ("Delete"), which is only visible when you edit one of your own collections.

It should receive the same changes as the other buttons, meaning it should also be wrapped in a <div> in the same way and the button should have the block attribute.

Here's the full block of code:

{ this.props.collection.id ? <div className="col-sm-6 margin-top-d5"> <Button block bsStyle="danger" type="button" onClick={this.handleShowModal} > <FontAwesomeIcon icon="trash-alt"/> Delete collection </Button> </div> : null }

With three buttons in mind, it's worth you having another pass to see if it looks good with the three buttons.

…r width

frappelatte28 · 2020-11-18T16:49:42Z

@MonkeyDo Sorry for the late commit, I was occupied with some work, I have made the requested changes, feel free to let me know if you need any further changes.

MonkeyDo

Thank you for your PR, this now looks a whole lot better !
🚀

welcome · 2020-11-24T18:20:53Z

Congratulations on your first merged pull request for BookBrainz! 🎉
We're very thankful for your work, and happy to count you part of our team !

Fixed responsiveness of buttons in create-collection page

b34284d

MonkeyDo mentioned this pull request Oct 28, 2020

Changed the styling of buttons to enhance the semanticity of website #526

Closed

MonkeyDo reviewed Oct 28, 2020

View reviewed changes

added bootstrap grid system to make buttons responsive

b326698

MonkeyDo requested changes Nov 9, 2020

View reviewed changes

Removed unused css and added top margin to buttons

64328d9

MonkeyDo reviewed Nov 10, 2020

View reviewed changes

Added a 'block' attribute on button so that they occupy full containe…

8dcdf53

…r width

MonkeyDo approved these changes Nov 24, 2020

View reviewed changes

MonkeyDo merged commit e463e50 into metabrainz:master Nov 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed responsiveness of buttons in create-collection page #527

Fixed responsiveness of buttons in create-collection page #527

frappelatte28 commented Oct 27, 2020

frappelatte28 commented Oct 27, 2020

coveralls commented Oct 27, 2020 •

edited

Loading

MonkeyDo left a comment •

edited

Loading

frappelatte28 commented Nov 3, 2020

MonkeyDo commented Nov 5, 2020

frappelatte28 commented Nov 8, 2020

frappelatte28 commented Nov 8, 2020

MonkeyDo left a comment

MonkeyDo Nov 9, 2020

MonkeyDo Nov 9, 2020

frappelatte28 commented Nov 10, 2020

MonkeyDo left a comment

MonkeyDo Nov 10, 2020

MonkeyDo Nov 10, 2020

frappelatte28 commented Nov 18, 2020

MonkeyDo left a comment

welcome bot commented Nov 24, 2020

	<div className = "col-sm-6">
	<div className = "col-sm-6 margin-top-d5">

Fixed responsiveness of buttons in create-collection page #527

Fixed responsiveness of buttons in create-collection page #527

Conversation

frappelatte28 commented Oct 27, 2020

Problem

Solution

Areas of Impact

frappelatte28 commented Oct 27, 2020

coveralls commented Oct 27, 2020 • edited Loading

MonkeyDo left a comment • edited Loading

Choose a reason for hiding this comment

frappelatte28 commented Nov 3, 2020

MonkeyDo commented Nov 5, 2020

frappelatte28 commented Nov 8, 2020

frappelatte28 commented Nov 8, 2020

MonkeyDo left a comment

Choose a reason for hiding this comment

MonkeyDo Nov 9, 2020

Choose a reason for hiding this comment

MonkeyDo Nov 9, 2020

Choose a reason for hiding this comment

frappelatte28 commented Nov 10, 2020

MonkeyDo left a comment

Choose a reason for hiding this comment

MonkeyDo Nov 10, 2020

Choose a reason for hiding this comment

MonkeyDo Nov 10, 2020

Choose a reason for hiding this comment

frappelatte28 commented Nov 18, 2020

MonkeyDo left a comment

Choose a reason for hiding this comment

welcome bot commented Nov 24, 2020

coveralls commented Oct 27, 2020 •

edited

Loading

MonkeyDo left a comment •

edited

Loading