-
Notifications
You must be signed in to change notification settings - Fork 42
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
Complete UI Polishing & Better Responsive Support #112
Conversation
[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.
Considered bundling #113 with this, but there needs to be discussion about jQuery inclusion first. |
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. |
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? |
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:
|
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). |
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:
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.
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. |
Can you take screenshot examples of your list of quibbles? I didn't add Thanks for the feedback! On Fri, Sep 23, 2016, 12:00 PM dr-ishmael notifications@github.com wrote:
|
> "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.
[x] Remove the "Toggle Raw Values" functionality - it is quite useless. > 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.
Reverting this because I'm not sure how I would like to deal with checkbox styling just yet. I'd like to: - Have consistent-ish styles across different platforms. - Have the size of the input display normally. - Have the clickable area of the input to take up the whole cell for usability. This reverts commit 20fb3eb.
[x] Fixed liberal use of vertical space in tables. [x] Centered "Apply this row" buttons.
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. |
@dr-ishmael addressed your feedback: [x] Resized some controls. Notes:
|
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. |
@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 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. |
@61352151511 just bumping this. |
This should be rebased into one commit |
@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. |
I can squash these if you'd like. Just lemme know whether or not you'd On Sat, Oct 15, 2016, 9:48 AM Mitchell notifications@github.com wrote:
|
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. |
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. |
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. |
Also, do you think a navbar at the top would be better? Similar to http://slimmmo.github.io/dev/ |
I think navbar from /dev/ is great! |
That nav bar is looking awesome. On Wed, Oct 19, 2016, 8:04 PM Stanislav Kupryakhin notifications@github.com
|
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. |
Sure, lemme pull the upstream changes down. |
@Slimmmo now mergeable, no conflicts, and of course, a live preview is available at https://nicholasrbowers.github.io/Slimmmo.github.io/. |
Any idea why the checkboxes are invisible in firefox? |
I removed hidden from checkboxes so you can actually see them now, was it supposed to be there? If so, why? |
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 - NicholasRBowers@51de073 Didn't realize it didn't show up on Firefox. I'll test it out and fix tomorrow. |
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.