CSS Grid Implementation

[badg0003]

Added CSS Grid for supporting browser and allowed for side-scrolling (native scrollbar, currently) with scroll-snap enabled so it's a clean horizontal scroll.

One minor change was to move the close button for each window into the same container as the text dropdowns so we could avoid having to absolute position it and allow the button to flow a bit better on smaller screens.

Lastly, the selfsame button was converted to a <button> for accessibility (keyboard access, primarily) reasons.

[johndyer]

Thanks so much for this! I'll check it out.

Eventually, we'll also need to think about a responsive mode where the windows can stack and be pulled to the front (like the current https://biblewebapp.com/study).

Also the reason why the close button was on top was so that it would also be visible, even if the screen width was too small for the menu controls. But I like this, and it really modernizes and cleans up the code.

[badg0003]

Thanks @johndyer I can take a look at that this week (windows stack on mobile).

One problem I've had is getting the texts to build and show up on my local dev. Is there a proper sequence I should be following when creating my environment?

[johndyer]

I’ll update the build tools soon so you can test it out...

On Wed, Apr 8, 2020 at 1:40 PM Mike Badgley ***@***.***> wrote: Thanks @johndyer <https://github.com/johndyer> I can take a look at that this week (windows stack on mobile). One problem I've had is getting the texts to build and show up on my local dev. Is there a proper sequence I should be following when creating my environment? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#121 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABUJUY3CSZVFYPEKNOZQVTRLTAK3ANCNFSM4MCKRR3A> .

-- John Dyer - http://j.hn/

[badg0003]

Thanks John. In the meantime I can take a stab at the mobile version. Were you wanting the same UI (tabs) as is on production site?

[johndyer]

That'd be great. If you have another idea besides using absolute positioning and pseudo elements, I'm all for it!

[badg0003]

Hi @johndyer I'll have some time this week to implement the revised mobile layout of the tabs. Are you looking for the same design/UX that you have on the current production site or did you have something else in mind?

[johndyer]

I’m open to other options if you have ideas.

On Tue, Apr 21, 2020 at 6:09 PM Mike Badgley ***@***.***> wrote: Hi @johndyer <https://github.com/johndyer> I'll have some time this week to implement the revised mobile layout of the tabs. Are you looking for the same design/UX that you have on the current production site or did you have something else in mind? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#121 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABUJU6BDEHEIYUBRG7HCKLRNYRSFANCNFSM4MCKRR3A> .

-- John Dyer - http://j.hn/

[KenBitgood]

Hey John, I hope you and yours are well and are getting out to enjoy this beautiful Springtime weather. How are things going? Would you like to connect by Hangouts for an update? Please let us know if there is anything you need from us with production work. Appreciate you, <https://www.dbs.org/> Ken Bitgood CEO, Digital Bible Society 936-494-4442 [email protected] "Equipping you to Share God's Word in Every Language."

…

On Tue, Apr 21, 2020 at 9:30 PM John Dyer ***@***.***> wrote: I’m open to other options if you have ideas. On Tue, Apr 21, 2020 at 6:09 PM Mike Badgley ***@***.***> wrote: > Hi @johndyer <https://github.com/johndyer> I'll have some time this week > to implement the revised mobile layout of the tabs. Are you looking for the > same design/UX that you have on the current production site or did you have > something else in mind? > > — > You are receiving this because you were mentioned. > > > Reply to this email directly, view it on GitHub > < #121 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AABUJU6BDEHEIYUBRG7HCKLRNYRSFANCNFSM4MCKRR3A > > . > -- John Dyer - http://j.hn/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#121 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKPXMU6Y2HMEC26CGCY3LTRNZJDXANCNFSM4MCKRR3A> .