Complete UI Polishing & Better Responsive Support

[NicholasRBowers]

Hey guys,

Love the calculator, but it bothered the perfectionist part of me, so I gave it a UI polishing and upgraded responsive support. Now the calculator is both functional AND elegant.

[x] Added logical space between not closely related components. [x] Updated button styles and positioning. [x] Made responsive support more robust. [x] Made entire accordion headers clickable. [x] Increased clickable space on checkboxes within tables and changed cursor style to pointer. [x] Vertically aligned table data within cells. [x] Used grid more effectively. [x] Included more components in the custom Bootstrap CSS file. [x] Added a "Calculate Custom Threshold" button.

[NicholasRBowers]

Considered bundling https://github.com/Slimmmo/Slimmmo.github.io/issues/113 with this, but there needs to be discussion about jQuery inclusion first.

[NicholasRBowers]

For convenience, I'm providing some screenshots for you to see what this PR does UI-wise. It's definitely worth pulling down and giving it a whirl locally.

Screenshots

[dr-ishmael]

What platform are you developing on? Judging by the difference in apparent font size from my HD monitor (1920x1080), I'm guessing you're on a tablet? I don't know how the current page looks on a tablet, so if you could also provide "before" pictures on the same device for comparison, that would be helpful.

Given that, my first impression is that the buttons at the top are taking up way too much space. Ideally, the full investments table should be visible without scrolling, which it currently is for me.

I also don't like how you applied center-alignment to many elements. I'm oldschool, so I like things left-aligned unless necessary.

I don't have any quibbles with the non-layout style changes. The blue checkboxes, specifically, are quite nice (assuming that's not simply a feature of your browser).

As a final note: If your goal is to optimize the page for mobile devices (which is implied by your interest in "responsive" tables), perhaps you could employ a separate stylesheet specifically for them?

[NicholasRBowers]

@dr-ishmael

I'm developing on a Macbook Pro with a Retina screen, testing principally on Chrome. 13-inch screen, so the first table isn't completely viewable on the current version for me anyways.

I've included screenshots of how the current calculator looks for me for comparison sake: Screenshots.

There are usability updates here that go beyond what is visible, one of the most helpful is that entire accordion headings become clickable instead of just the text or arrow within the accordion.

But focusing on the layout changes:

1. Buttons are easily resized if you want me to take the top buttons down a notch. Don't think it'll save too terribly much vertical space, but if you think they look gaudy as big as they are now, we can definitely trim.
2. One of the big focuses here, coming to this calculator with fresh eyes, was the fact that seemingly unrelated things were just squashed together and there was no logical separation of unrelated components. Hence the added <hr />'s to logically break things up. This is going to add some vertical space, sure, but it's a cognitive relief (especially to newer users).
3. Completely disagree with you on center-aligned vs. left-aligned in this instance (although this is more subjective to user preference). This entire calculator is VERY dense and very data table heavy. Left aligning the important elements (like the super small "Calculate" button) does not do enough to balance the page and give prime positioning to the most important information. The "Totals" and the "Calculate" button should be centered, because they are extremely important and should not blend in with the rest of the content on the page. If there are other elements that you would prefer to left align, we can discuss it, but I did my best to strike balance in design and visually accommodate information that should be delineated appropriately. Last note here: I think that left align looks worse on smaller screens than big screens.
4. No separate "mobile" styles are created in this PR, I just make better use of Bootstrap's Grid in the HTML than was made use of before (was quite sparse). Similarly, if we implement Bootstrap's responsive tables, we'll just be adding classes to the HTML and not inflating the stylesheet.

[NicholasRBowers]

Here's what the top would look like with smaller buttons - not much space saved, so I'm not sure if you prefer the smaller buttons (less usable on tablets) than the bigger buttons.

If you'd like, we could try to throw the Reset buttons and the # of Angels onto the same line. I hesitate to do that because they are unrelated, but maybe that would alleviate some concerns?

You should definitely pull down a local copy and view this on your screen so you can compare and contrast the old calculator vs this calculator on your screen size (I can scale my page in Chrome, but that's just guessing as to what your system looks like).

[dr-ishmael]

Alright, I've forked your fork. (hur hur hur)

The under-the-hood changes are fine, no quibbles there either. I just noticed the new location of the Calculate button - I like, that's a much more logical place for it.

The blue checkboxes must be a feature of your browser, because I don't have them. :(

Specific replies to your points above:

1. "Gaudy," that's a good word for them. :) To me, they don't seem nearly important enough to take up that much space. I only used the save-state functionality a few times (my browser's local storage was reliable enough), and I never used the reset functionality either - generally, I could get back to nearly the same point very quickly after a reset, so I didn't see the point when I'd just be re-entering the same numbers and re-checking off most of the same upgrades. In fact, I'd use my previous state (in the calculator) as a guidepost for where my current state (in-game) should be headed.
2. I understand, but you have to balance that against efficient use of space. There are ways to separate elements without making the page taller; for example, you could left-align some elements and right-align others in the same vertical space. For example, I'd recommend doing that for the "# of Angels" input boxes and the reset buttons.
3. The font size of the Totals makes them stand out enough, I think. Centering them just makes them jagged on both ends, which looks bad. Also, they share a common element "Total $" which feels like it should be aligned the same across all three lines.

Here's how I see the current page.

Here's your version.

(Album with more screenshots: http://imgur.com/a/AJ8TW Generally they reproduce your own screenshots, but they show that I see basically the same things you do.)

And here's a big list of quibbles.

• The planet-selector tabs are lost in between the huge buttons. These feel like they should be the most important things at the top of the page, not the buttons.
• The <hr> immediately after the planet tabs is redundant with the border below the non-active tabs.
• Does anyone even use the "raw values" toggle? Beyond millions (maybe billions), the raw numbers are impossible to read easily, and they skew the table layout since they can't be wrapped.
• The MegaTicket checkboxes are gigantic for me. This appears to be a result of the CSS you added to the form-control class, specifically the height: 34px attribute. Removing that returns those checkboxes to their normal size. I'm not sure how that only shows up for me and not for you, but I know different browsers can interpret CSS in very different and non-obvious ways.
• A similar issue comes from the width: 100% attribute in that class, with two effects: 1) the MegaTicket checkbox gets centered in its cell; 2) the investment number input box expands to fill the cell.
• That input box also gains padding: 6px 12px from that class, which makes more space around the number in the box, but it also increases the row height - making it more difficult for the whole table to fit on a given screen. Decreasing the vertical padding to 2px still looks fine to me, and keeps the row height the same as before.
• Checkbox labels. You added font-weight: bold to the label element, which means the giant lists of Cash/Angel upgrades and Mangers are entirely bolded. That feels like too much bold to my eyes.
• However, the Platinum/Suit and Super Badge checkboxes have an additional class: checkbox-inline, which specifies font-weight: normal and overrides the bold. Is there a reason this class wasn't applied to the Cash/Angel/Mangers before? I added it to a few of them, and it doesn't seem to do anything bad.
• Under Other Bonuses, centering the "Total Angel Investor %" doesn't make sense. It's a derivative calculation from the "% Angel Investor Bonus" field and should be grouped with it; it has nothing to do with the "x Multiplier" field, but centering it underneath both gives the impression that it's related to both.
• Under Angel Calculations, the "Lifetime Earnings" and "Angels Sacrificed" inputs. I see them as a tabular input, so spreading them across the page like that makes them feel unrelated. Especially with the giant button between them and the table - it just makes the entire form feel disjointed.
• Same thing with the Recommendation Filters. It feels very disjointed with so much space between everything.

Unrelated to your changes... I never understood why the Angel Calculations and Recommendation Filters were in a panel-group together, such that you can't have both open at once.

[NicholasRBowers]

Can you take screenshot examples of your list of quibbles? I didn't add many of these styles, but I did fix the classes applied to the elements incorrectly which allowed their original styling to come through. A lot of your issues are a result of you being on a bigger screen that I can't reproduce. I'm on mobile now, but I'll respond more thoughtfully with fixes later.

Thanks for the feedback!

On Fri, Sep 23, 2016, 12:00 PM dr-ishmael notifications@github.com wrote:

Alright, I've forked your fork. (hur hur hur)

The under-the-hood changes are fine, no quibbles there either. I just noticed the new location of the Calculate button - I like, that's a much more logical place for it.

The blue checkboxes must be a feature of your browser, because I don't have them. :(

Specific replies to your points above:

1. "Gaudy," that's a good word for them. :) To me, they don't seem nearly important enough to take up that much space. I only used the save-state functionality a few times (my browser's local storage was reliable enough), and I never used the reset functionality either - generally, I could get back to nearly the same point very quickly after a reset, so I didn't see the point when I'd just be re-entering the same numbers and re-checking off most of the same upgrades. In fact, I'd use my previous state (in the calculator) as a guidepost for where my current state (in-game) should be headed.
2. I understand, but you have to balance that against efficient use of space. There are ways to separate elements without making the page taller; for example, you could left-align some elements and right-align others in the same vertical space. For example, I'd recommend doing that for the "# of Angels" input boxes and the reset buttons.
3. The font size of the Totals makes them stand out enough, I think. Centering them just makes them jagged on both ends, which looks bad. Also, they share a common element "Total $" which feels like it should be aligned the same across all three lines.

Here's how I see the current page.

[image: Slimmmo] https://camo.githubusercontent.com/bf7aacf8294a20ad8baebff6e33c473289408e81/687474703a2f2f692e696d6775722e636f6d2f6565634847774d2e706e67

Here's your version.

[image: NicholasRBowers] https://camo.githubusercontent.com/2b603e6ea5513ed7fccc1ad7b6b7d2555f10d39a/687474703a2f2f692e696d6775722e636f6d2f6846413572734f2e706e67

(Album with more screenshots: http://imgur.com/a/AJ8TW Generally they reproduce your own screenshots, but they show that I see basically the same things you do.)

And here's a big list of quibbles.

• The planet-selector tabs are lost in between the huge buttons. These feel like they should be the most important things at the top of the page, not the buttons.
• The

  ---

  immediately after the planet tabs is redundant with the border below the non-active tabs.
• Does anyone even use the "raw values" toggle? Beyond millions (maybe billions), the raw numbers are impossible to read easily, and they skew the table layout since they can't be wrapped.
• The MegaTicket checkboxes are gigantic for me. This appears to be a result of the CSS you added to the form-control class, specifically the height: 34px attribute. Removing that returns those checkboxes to their normal size. I'm not sure how that only shows up for me and not for you, but I know different browsers can interpret CSS in very different and non-obvious ways.
• A similar issue comes from the width: 100% attribute in that class, with two effects: 1) the MegaTicket checkbox gets centered in its cell; 2) the investment number input box expands to fill the cell.
• That input box also gains padding: 6px 12px from that class, which makes more space around the number in the box, but it also increases the row height - making it more difficult for the whole table to fit on a given screen. Decreasing the vertical padding to 2px still looks fine to me, and keeps the row height the same as before.
• Checkbox labels. You added font-weight: bold to the label element, which means the giant lists of Cash/Angel upgrades and Mangers are entirely bolded. That feels like too much bold to my eyes.
• However, the Platinum/Suit and Super Badge checkboxes have an additional class: checkbox-inline, which specifies font-weight: normal and overrides the bold. Is there a reason this class wasn't applied to the Cash/Angel/Mangers before? I added it to a few of them, and it doesn't seem to do anything bad.
• Under Other Bonuses, centering the "Total Angel Investor %" doesn't make sense. It's a derivative calculation from the "% Angel Investor Bonus" field and should be grouped with it; it has nothing to do with the "x Multiplier" field, but centering it underneath both gives the impression that it's related to both.
• Under Angel Calculations, the "Lifetime Earnings" and "Angels Sacrificed" inputs. I see them as a tabular input, so spreading them across the page like that makes them feel unrelated. Especially with the giant button between them and the table - it just makes the entire form feel disjointed.
• Same thing with the Recommendation Filters. It feels very disjointed with so much space between everything.

Unrelated to your changes... I never understood why the Angel Calculations and Recommendation Filters were in a panel-group together, such that you can't have both open at once.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Slimmmo/Slimmmo.github.io/pull/112#issuecomment-249232145, or mute the thread https://github.com/notifications/unsubscribe-auth/ABl0gGpsMfGs5HQrXlupoowjuJ3SAbnOks5qs_eLgaJpZM4KEQeR .

[61352151511]

Can you create your own version of the calculator (I.E. NicholasRBowers.github.io) and post here when that's done so I can check it out. I have my own redesign but have pretty much given up on it with school and all. If yours looks good and fits with the current theme it might be merged.

[NicholasRBowers]

@dr-ishmael addressed your feedback:

[x] Resized some controls. [x] Put multiple controls in the same line. [x] Leave the controls left and right aligned on desktops and have them center when they hit Bootstrap breakpoints. [x] Left align totals. [x] Fixed redundant <hr>s. [x] Overhauled checkboxes. [x] Fixed liberal vertical spacing in tables. [x] Fixed "Other Bonuses" section according to feedback. [x] Fixed "Recommendations Filters" and "Angel Calculations" from closing each other.

Notes:

• Investment number input box expanding to take entire cell was intentional. Looks much better this way.
• Overhauled checkboxes: it was important to me to settle on something that was visually appealing, consistent across all browsers, and enabled a bigger area of clicking/touching than previously (used to be restricted to a line-height of 14px for Mega Tickets [when table cells were 36px in height, meaning that only 1/3 of each cell was clickable]).
• Don't agree with feedback about "Angel Calculations" and "Recommendation Filters" but willing to talk about this further if it would block merging upstream. Previous version looked confusing and terrible on smaller screens (I'm on a 13-inch Macbook Pro w/ Retina).

[NicholasRBowers]

@61352151511 here you go - https://nicholasrbowers.github.io/Slimmmo.github.io/

[61352151511]

I personally think this looks good. The only thing I dislike is the buttons being moved. If you check out 61352151511.github.io/adcapcalc It's what I had before I got too busy with school. Perhaps move all the buttons to be at the top and then it would be nice. On that version I tried to prevent as much scrolling as I could.

[NicholasRBowers]

@61352151511 ^ I like this. It's looking like a proper dashboard. The only reason we can't really move the "Reset Planet" and "Hard Reset Planet" buttons above the tabs on my version is because they are a function on the current planet. So if you have values in for Earth and Moon and hit the Reset button, it only resets the current planet - so logically, it has to be UNDER the planet selector in this paradigm.

But eventually, as we move to more of your dashboard-looking paradigm, we can absolutely throw the buttons into a control bar at the top or bottom and have them position: fixed;, which will be really bad ass.

After merging this PR, could you push your progress on the current branch of v0.2? I'd love to incorporate some of my layout changes with your new paradigm and see if we can get that closer to the finish line. My only concern with the new paradigm would be how to get it to adapt for mobile/tablets, but that's part of the fun.

[NicholasRBowers]

@61352151511 just bumping this.

[DarthMDev]

This should be rebased into one commit There are a ton of them

[61352151511]

@mgracer48 When merging, we have the ability to squash it to one commit.

@NicholasRBowers I believe major changes like this would be the decision of @Slimmmo and not me.

[NicholasRBowers]

I can squash these if you'd like. Just lemme know whether or not you'd prefer me to do it now or if you'd prefer to do it during a merge.

On Sat, Oct 15, 2016, 9:48 AM Mitchell notifications@github.com wrote:

@mgracer48 https://github.com/mgracer48 When merging, we have the ability to squash it to one commit.

@NicholasRBowers https://github.com/NicholasRBowers I believe major changes like this would be the decision of @Slimmmo https://github.com/Slimmmo and not me.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/Slimmmo/Slimmmo.github.io/pull/112#issuecomment-253985327, or mute the thread https://github.com/notifications/unsubscribe-auth/ABl0gHlZFSs7XC8jKKv8HeTe7Nuo64rhks5q0NmrgaJpZM4KEQeR .

[Slimmmo]

If @61352151511 and @dr-ishmael are happy with the changes then I'm happy with them being merged.

Off-topic but something that might be worth considering is that with the way the game is going I think it would be best to have all of the events loaded in the JS instead of one at a time and the user selects whichever one they have active. This would lead to the reset buttons actually being used but requires some UI decisions on picking/re-picking events.

[61352151511]

I was looking at that yesterday, attempting to make the event tab say "Event" and have it be a drop down menu for the user to select the event. However I am overwhelmed with assignments and practical work for my college so I will not be able to do that anytime soon, someone else may want to tackle it however.

[Slimmmo]

Yeah that sounds fine to me. I may get time to do this today but it'll create more branch conflicts and I still have no idea how to deal with them XD.

[Slimmmo]

Also, do you think a navbar at the top would be better? Similar to http://slimmmo.github.io/dev/

[skupr]

I think navbar from /dev/ is great!

[NicholasRBowers]

That nav bar is looking awesome.

On Wed, Oct 19, 2016, 8:04 PM Stanislav Kupryakhin notifications@github.com wrote:

I think navbar from /dev/ is great!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Slimmmo/Slimmmo.github.io/pull/112#issuecomment-254975024, or mute the thread https://github.com/notifications/unsubscribe-auth/ABl0gFf69u_n-SBIBbrRo-wDm_1JeOKHks5q1rAhgaJpZM4KEQeR .

[Slimmmo]

I'm trying to fix the merge conflicts but I think it needs your input to accept my changes to your branch Nicholas.

I think I've done it incorrectly but I'm still trying to figure out how it works.

[NicholasRBowers]

Sure, lemme pull the upstream changes down.

[NicholasRBowers]

@Slimmmo now mergeable, no conflicts, and of course, a live preview is available at https://nicholasrbowers.github.io/Slimmmo.github.io/.

[Slimmmo]

Any idea why the checkboxes are invisible in firefox?

[Slimmmo]

I removed hidden from checkboxes so you can actually see them now, was it supposed to be there? If so, why?

[NicholasRBowers]

Checkboxes are notorious for not being able to be styled. I chose to hiding them and use pseudo elements to make a more consistent & usable calculator (larger clickable area without the checkboxes being 50px in height).

The commit that does this is - https://github.com/NicholasRBowers/Slimmmo.github.io/commit/51de0738e856e1be98f2d0a0beba4129468a227b

Didn't realize it didn't show up on Firefox. I'll test it out and fix tomorrow.