search

digitalbiblesociety / browserbible-3

Bible software that runs in the browser
MIT License
193 stars 77 forks source link

CSS Grid Implementation #121

Open badg0003 opened 4 years ago

badg0003 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

On Wed, Apr 8, 2020 at 1:40 PM Mike Badgley notifications@github.com 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 https://github.com/digitalbiblesociety/browserbible-3/pull/121#issuecomment-611124456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABUJUY3CSZVFYPEKNOZQVTRLTAK3ANCNFSM4MCKRR3A .

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

badg0003 commented 4 years ago

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 commented 4 years ago

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

badg0003 commented 4 years ago

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 commented 4 years ago

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

On Tue, Apr 21, 2020 at 6:09 PM Mike Badgley notifications@github.com 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 https://github.com/digitalbiblesociety/browserbible-3/pull/121#issuecomment-617458191, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABUJU6BDEHEIYUBRG7HCKLRNYRSFANCNFSM4MCKRR3A .

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

KenBitgood commented 4 years ago

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 ken@dbs.org

"Equipping you to Share God's Word in Every Language."

On Tue, Apr 21, 2020 at 9:30 PM John Dyer notifications@github.com wrote:

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

On Tue, Apr 21, 2020 at 6:09 PM Mike Badgley notifications@github.com 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 < https://github.com/digitalbiblesociety/browserbible-3/pull/121#issuecomment-617458191 , 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 https://github.com/digitalbiblesociety/browserbible-3/pull/121#issuecomment-617510905, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKPXMU6Y2HMEC26CGCY3LTRNZJDXANCNFSM4MCKRR3A .