Reactive UI changes

[daespinozah]

I've collapsed the lower two tables into dropdowns, as well as updated the UI so it works nicer on more screen sizes.

[daespinozah]

I'd like to move all those rules at the bottom to tooltips on the individual fields as a next step if this stuff looks good

[daespinozah]

after the last commit I can now fully use two situations with my foldable phone open. OnePlus Open

[jmegner]

I like the accordions. I might move the avg dmg and kill chance above the accordions, OR they could become the text of the Accordion.Header elements!

I also would love to voice chat where you educate me on how to manipulate width and layout better, because I have been struggling to achieve what I want.

I think there are two big facets where we want to go in different directions.

1) I want things horizontally squeezed together even when there is plenty of space, and I want this so 1a) your mouse/input-mechanism doesn't have to do a lot of travel to interact with elements, like modifying both shooting situations to use Px=1 and increment the BS. And 1b) it is hard to read table rows when the columns are way spaced out. Table columns should be minimal width. 1c) Same thing as 1b but for glancing between Situation 1 and Situation 2.

2) I don't like to vertically stack two vertically-long things and require a lot of lengthy scrolling back and forth to change inputs or look at both outputs. In mobile with your changes, the two situations are vertically stacked and vertically long, thus you have to scroll up and down a lot. In mobile with what I have, you can do a quick horizontal scroll between the two situations or zoom out to see everything at once.

[daespinozah]

I think I agree with you on point one, I was trying to make maximal use of the extra space but we could shrink it a lot without it looking barren. On point two, mobile sites and apps are designed around all the information being visible horizontally with some necessary vertical scrolling. Maybe we could make a sliding pane so you can swipe between the two? My main issue originally was that all the text was too small and having to pinch to zoom and scroll around manually felt inconvenient.

[jmegner]

Note for self: admire the hover effect for the "KillChance vs Sv & W"

Some notes while we were talking...

Maybe use Carousel so mobile can swipe between situations and we have an option to go back to old way if they want to zoom out. Ah, can just have button to switch to desktop site? We don't want to have to explain how to force desktop site in the browser menu.

Some questions on if we should do the swipy based on screen size (so big tablets that don't need it won't have it), because I find that hard to correctly validate with browser screen/device emulation and I don't know all the ways to do this sort of thing. I try to put in OnePlus 10 Pro's alleged 1440x3216 resolution with ~525 ppi density, but that doesn't work when naively inputted to firefox device list. Even dividing by 2.75 (seen in other devices) didn't work. Will have to empirically figure it out? Gross. Ah, Daniel found a good site and term "viewport": https://yesviz.com/devices/oneplus-10-pro/ so I want 412x919 in firefox...confirmed. Daniel cracked the case! He also found https://viewportsizes.com/mine/ which quickly tells you your browser's current viewport size.

I still like having things compact and easy to glance between the 2 situations, rather than expanding things to use the space. You bring up a great point to use horizontal space somehow, like moving the Notes and/or a combined situation table upwards and occupying unused side space.

Possible split up of work: Daniel on Carousel/swipy thing and Jacob to experiment with moving things like Notes to unused horizontal space and maybe making a both-situation result table. Also, Jacob to do the Accordion stuff.

[daespinozah]

PC version back to smaller size, all tables now highlight row on hover (and tap on mobile). New version running on my repo!

[daespinozah]

Carousel working on mobile

[jmegner]

Great work, I hope soon to have some time to do my homework.

On my phone, the delay between completing my swipe gesture and the start of the carousel transition is annoyingly long. With PC browser dev tools on your page, I changed the transition from 0.3s to 0.05s and was much happier with that. Using 0.0s made it seem like nothing was happening. What do you think about 0.05s?

Also, I'm worried about people keeping track of which situation they are on, and that we need something like "Situation X" to float/whatever-the-right-term-is at the top once you scroll down. What do you think?

[daespinozah]

I was unsure about the transition time myself, it does still feel a little slow though for sure. I'll try .05s and see what that feels like. And I actually had the same thought on the situation headers! I was planning on making them stick to top of screen when you scroll up when I have some time.

[jmegner]

@daespinozah can you link me to the Accordion example where you got that accordion-related css?

[jmegner]

@daespinozah can you educate me on why you put the app in a Stack element and how that changed layout? Thanks.

[daespinozah]

Here's the link for the accordion stuff: https://react-bootstrap.netlify.app/docs/components/accordion/#accordionbutton

As for the stack element, it's a more natural fit for elements arranged vertically that's the only reason I changed it:

https://react-bootstrap.netlify.app/docs/layout/stack

[jmegner]

Thanks, but specifically where did you get the "accordion-related CSS?"

[daespinozah]

The accordions in the documentation are using it. I copied from the dev tools window.

[jmegner]

Ah, thanks.

[jmegner]

https://github.com/jmegner/KT21Calculator/commit/91f33ec1a34af7b3b9c2674bbe8edc149058056c incorporates Accordions based on your work. I will look at the SwipeableViews stuff next. Thanks again, and critique of what I did is very welcome.

[daespinozah]

I really like that you put the most relevant data in the header of the accordions, looks good!