Fixed Access the collection button style

[Ankit-Gupta18]

Description

On the collection listing page, the style of the button to view a collection is broken. Some part of the label text is not visible because the background color doesn't cover the full button.

Rationale

Phabricator Ticket

//: # (Link to the Phabricator ticket)

How Has This Been Tested?

1. Apply and approve an application to a partner.
2. Add an expiration date in the admin view for that authorization
3. Check that the access collection button is shown correctly when resizing your desktop screen.

Screenshots of your changes (if appropriate):

Types of changes

What types of changes does your code introduce? Add an x in all the boxes that apply:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Minor change (fix a typo, add a translation tag, add section to README, etc.)

[Ankit-Gupta18]

Hi @suecarmol ,
Please review this.

[suecarmol]

Before I can review this, please fill out the How Has This Been Tested? and Screenshots of your changes (if appropriate): sections of the PR template

[Ankit-Gupta18]

Before I can review this, please fill out the How Has This Been Tested? and Screenshots of your changes (if appropriate): sections of the PR template

I have added the screenshot but am quite confused about what to write in How Has This Been Tested?

[suecarmol]

Before I can review this, please fill out the How Has This Been Tested? and Screenshots of your changes (if appropriate): sections of the PR template

I have added the screenshot but am quite confused about what to write in How Has This Been Tested?

You write the steps to check that the bug has been fixed. For example, in this case, you could add the following:

1. Apply and approve an application to a partner.
2. Add an expiration date in the admin view for that authorization
3. Check that the access collection button is shown correctly when resizing your desktop screen.

Basically, the How Has This Been Tested? section is for adding instructions on how to manually test your PR

[Ankit-Gupta18]

Hi @suecarmol ,
I have updated it. Please review it now.

[jsnshrmn]

We had a problem with travis ci that was causing pr tests to fail. I mitigated the issue in master and rebased this PR to resolve the problem here too.

[suecarmol]

Hi @Ankit-Gupta18! Thank you for working on this bug fix. On taking a look at this PR, I think this is the wrong approach to try and solve this.

When I started developing this section, I took the wrong approach, and instead of working with Bootstrap 4 classes, I made my own breakpoints. I should've known not to re-invent the wheel :)

To really fix the bug, try looking at https://getbootstrap.com/docs/4.0/layout/grid/ to add a container div and column divs inside the card-footer section of TWLight/users/templates/users/user_collection_tile.html.

Let me know if you have any questions about how to approach this solution!

[Ankit-Gupta18]

Hi @Ankit-Gupta18! Thank you for working on this bug fix. On taking a look at this PR, I think this is the wrong approach to try and solve this.

When I started developing this section, I took the wrong approach, and instead of working with Bootstrap 4 classes, I made my own breakpoints. I should've known not to re-invent the wheel :)

To really fix the bug, try looking at https://getbootstrap.com/docs/4.0/layout/grid/ to add a container div and column divs inside the card-footer section of TWLight/users/templates/users/user_collection_tile.html.

Let me know if you have any questions about how to approach this solution!

I tried adding container and col divs but it didn't work as expected. Possibly I must be placing them wrongly so, can you please detail to me where to exactly add those classes?

[suecarmol]

Hi @Ankit-Gupta18! Thank you for working on this bug fix. On taking a look at this PR, I think this is the wrong approach to try and solve this.
When I started developing this section, I took the wrong approach, and instead of working with Bootstrap 4 classes, I made my own breakpoints. I should've known not to re-invent the wheel :)
To really fix the bug, try looking at https://getbootstrap.com/docs/4.0/layout/grid/ to add a container div and column divs inside the card-footer section of TWLight/users/templates/users/user_collection_tile.html.
Let me know if you have any questions about how to approach this solution!

I tried adding container and col divs but it didn't work as expected. Possibly I must be placing them wrongly so, can you please detail to me where to exactly add those classes?

Please upload your changes so I can take a look at them

[Ankit-Gupta18]

Hi @Ankit-Gupta18! Thank you for working on this bug fix. On taking a look at this PR, I think this is the wrong approach to try and solve this.
When I started developing this section, I took the wrong approach, and instead of working with Bootstrap 4 classes, I made my own breakpoints. I should've known not to re-invent the wheel :)
To really fix the bug, try looking at https://getbootstrap.com/docs/4.0/layout/grid/ to add a container div and column divs inside the card-footer section of TWLight/users/templates/users/user_collection_tile.html.
Let me know if you have any questions about how to approach this solution!

I tried adding container and col divs but it didn't work as expected. Possibly I must be placing them wrongly so, can you please detail to me where to exactly add those classes?

Please upload your changes so I can take a look at them

I have uploaded them as a commit. It may contain blunders. Sorry for it but I am a bit confused at this part.

[Ankit-Gupta18]

Hi @suecarmol ,
I have made the changes as you requested but I don't find it working as expected. I have uploaded the changes as a commit. Also attached my screenshot.

[suecarmol]

Hi @suecarmol , I have made the changes as you requested but I don't find it working as expected. I have uploaded the changes as a commit. Also attached my screenshot.

Try adding width: 98%; to the access-apply-button class and the renew-extend-button in new-local.css

[Ankit-Gupta18]

Hi @suecarmol , I have made the changes as you requested but I don't find it working as expected. I have uploaded the changes as a commit. Also attached my screenshot.

Try adding width: 98%; to the access-apply-button class and the renew-extend-button in new-local.css

Doing as you stated, things were not working as expected. I tried to add some CSS to make things look better(image attached). Please review them if it is fine.

[suecarmol]

Thank you for working on this! Because this was a trickier bug than I first thought, I tried fixing the bug myself and filed #987. You can take a look at how I solved this bug :)