Freecodecamp: Update CatPhotoApp for better appearance

[erictleung]

Forewarning, this _may_ be bike-shedding worthy....

Workspace

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36. (Chrome on Windows 7)

Setting

The CatPhoto is where you make an web page and one component is adding three buttons like below.

Problem

But then you will eventually make it into something like this below.

Notice that the red Delete button is squished and on the side (this is mostly a desktop problem; mobile user won't have the same issue -- see below)

Mobile Version

Solution

So I propose two things:

• Change the "Delete" button into a "Edit" button so it'll fit on the button better.
  
  
  
  • This is fairly easy. You'll just need to change this in the challenge seeds starting with the challenge Warn your Users of a Dangerous Action where the button is added.
  
  
  • Then change the challenges up until the last one on Line up Form Elements Responsively with Bootstrap.
  
  
  • You could also change the icon if appropriate.
  
  
• Add new challenge to add in making all three of those buttons also have the class btn-sm to make the text inside the button not seem all smushed.
  
  
  
  • This one will require a little more effort in making an entirely new challenge, which may be unnecessary.
  
  

Example:

<button class="btn btn-block btn-info btn-sm"><i class="fa fa-info-circle"></i> Info</button>

If the proposed changes were made, the finished app will look like this:

[ghost]

I don't think the icon matches the word 'edit'. You would need to change the icon to something like fa-pencil-square-o. I don't think the new challenge is necessary however. I can submit a pr with the changes if everyone is happy with @erictleung changes.

[BKinahan]

This all seems backwards. The challenges are teaching about responsive design, where elements should move and scale appropriately for their content, but the proposed solution involves editing the content to conform to the layout. An Edit button also doesn't seem to fit the same type of 'dangerous action' as a Delete button.

Some questions:

• Why doesn't the simulated mobile display on desktop behave the same way as the mobile version, adjusting the size and spacing of the buttons to fit their text content?
• If the minimum spacing between buttons is the cause of the issue, can we address this in a way that teaches the user to deal with the problem in similar cases?

[ghost]

Can you provide viewport width @erictleung ?

[erictleung]

@BKinahan good point. Responsive design is the reason for these challenge. My responsive design skills aren't up to part to figure our how to make it work. And the icon issue can easily be changed to something more appropriate.

• The simulated mobile display probably has a lower pixel resolution than the mobile view. I simulated the mobile view and tested on my Android phone. Using the simulated mobile view, it appears it has problems on the Galaxy S5 (360 x 640).
• Any suggestions on teaching the user how to fix the minimum spacing between buttons?

[SaintPeter]

I like the idea of the btn-sm - that's a feature that until recently I was not aware of.

In "the real world", what I would likely do for an interface like this is make those buttons col-xs-12 so they were stacked up vertically.

Maybe changing it to work like that might be good? Also an introduction to the bootstrap grid?

[BKinahan]

The text looks better (centered properly) with btn-xs

[erictleung]

@SaintPeter The Bootstrap grid is introduced in Use the Bootstrap Grid to Put Element Side by Side.

@BKinahan I would be worried that the buttons look too small at that point. And for me at least, the word Delete gets slightly squished again.

I think keeping the buttons in there put side-by-side is good because it introduces and uses the Bootstrap grid system. For such a small screen, it would be hard to introduce it any other way.

[jnmorse]

how about changing the buttons to be inside a button group

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
          <button class="btn btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
        </div>
        <div class="btn-group" role="group">
          <button class="btn btn-info"><i class="fa fa-info-circle"></i> Info</button>
        </div>
        <div class="btn-group" role="group">
          <button class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
        </div>
      </div>
    </div>

apparently the btn-group around each buttons is nessary when using actual buttons and not anchor elements.. Bootstrap: button groups justified

I believe .btn-block is meant to for full-width buttons so it is perhaps not playing nice with .col-xs-4

Sorry noticed this was supposed to be about using the grid, and not just making the buttons look nicer.

[caravinci]

Hate me if you will, but my two cents are that people should be learning design concepts rather than blindly using the opinionated design parameters bundled in this or any framework. But that's just my opinion.

There's no consideration in this discussion for white space, grid alignment or modularity, thus you see how the elements are all cramped vertically. And even using Bootstrap's "solution", faking that vertical through adding seemingly empty rows (full of &nbsp _shrieks_, as I've seen some people in the industry) is just subpar.

And I do agree with @BKinahan... modifying content so it fits the layout is just bad design.

[andrewtdinh]

Hi there,

As long as you guys are looking into UI issues on the simulated view, maybe you can also fix the breaking into two lines of the 'Loving' checkbox:

[ibrokemypie]

+1 for both of these

[SkyDivin]

I also would love to learn to to actually fit this problem with the Loving line drop and the cut of delete through the Challenges

[dhcodes]

I think we should find a remedy for this. It does look unfinished and could be confusing to campers. Given the challenges before this one, I recommend one of the following:

Solution 1:
Rely on challenge "Create a Custom Heading" to communicate putting items side-by-side and bootstrap grid (may require new instructions). Then remove challenge "Use the Bootstrap Grid to Put Elements Side By Side" in favor of a challenge to introduce btn-groups per @jnmorse suggestions.

Solution 2 (image): Add a component of "Use the Bootstrap Grid to Put Elements Side By Side" that recommends campers add a "buttons" class to their row and then add the following CSS:

.buttons .col-xs-4 {
  padding: 0;
}

Solution 3 (image): Rely on challenge "Create a Custom Heading" to communicate putting items side-by-side and bootstrap grid (may require new instructions). Then remove challenge "Use the Bootstrap Grid to Put Elements Side By Side". This results in full-width buttons which would be acceptable responsive design for a mobile device.

My vote is solution 3.