bug: Button bar too tall on mobile

[alex-larkin]

Proposed Solution

Given @alex-larkin 's bug report below, I (Chris) am recommending the following solution. On mobile, we should hide the entry number display and prev/next buttons on the mobile view. This can be done using the CSS display: none method for a particular breakpoint as seen here.

The solution is implemented when:

• The entry number display and prev/next buttons are hidden in mobile view
• The entry number display and prev/next buttons are visible in desktop/tablet view

Describe the bug

The new entry number is a very handy feature, but presently it causes the top button bar (encased in the gray box) to double in height on mobile, costing the user precious vertical space.

Related: Pull request #1215

To Reproduce
Load an entry on mobile

Expected behavior
The top blue bar should only have one row of buttons, maximizing use of screen space.

Mobile (please complete the following information):

• Device: Samsung Galaxy S10e
• OS: Android 10
• Browser: Chrome

Android App in Google Play
For Mobile, are you using the Language Forge Android app in the Google Play store? No

Possible solutions

1. Make the text box narrower on mobile
2. Make the button bar scrollable on mobile.
3. Remove the comment button or history button on mobile
4. Move the comment button or history button on mobile to somewhere else
5. Create a floating button that lives in the corner of the screen which, when pressed, expands to show the comment button, history button, and possibly other functions such as Settings, Share, and the avatar options (My profile, Change Password, Logout). We could also consider moving other buttons there, such as the help options and interface language options.

I think option 2 would be a good quick fix, while option 5 would be the most ideal solution, but also the one requiring the most coding.

What are your thoughts?

[megahirt]

I think the jump to entry number is a niche but important feature that is unlikely to be required on mobile (although nice to have). My inclination is to hide it on mobile. Kind regards, Chris

…

On Sat, Jan 22, 2022, 3:24 AM Alex Larkin ***@***.***> wrote: *Describe the bug* The new entry number is a very handy feature, but presently it causes the top button bar (encased in the gray box) to double in height on mobile, costing the user precious vertical space. [image: Screenshot_20220121-141242_Chrome] <https://user-images.githubusercontent.com/82162128/150593674-14184e28-07ad-4e61-8a8a-c48ca28f3641.jpg> Related: Pull request #1215 <#1215> *To Reproduce* Load an entry on mobile *Expected behavior* The top blue bar should only have one row of buttons, maximizing use of screen space. *Mobile (please complete the following information):* - Device: Samsung Galaxy S10e - OS: Android 10 - Browser: Chrome *Android App in Google Play* For Mobile, are you using the Language Forge Android app in the Google Play store? *No* *Possible solutions* 1. Make the text box narrower on mobile 2. Make the button bar scrollable on mobile. 3. Remove the comment button or history button on mobile 4. Move the comment button or history button on mobile to somewhere else 5. Create a floating button that lives in the corner of the screen which, when pressed, expands to show the comment button, history button, and possibly other functions such as Settings, Share, and the avatar options (My profile, Change Password, Logout). We could also consider moving other buttons there, such as the help options and interface language options. I think option 2 would be a good quick fix, while option 5 would be the most ideal solution, but also the one requiring the most coding. What are your thoughts? — Reply to this email directly, view it on GitHub <#1290>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2I6KJSAXVWGAZ227KFVOLUXG6IRANCNFSM5MQO4HFA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[alex-larkin]

test comment.