Add sentences responsive

Tatoeba / tatoeba2

Tatoeba is a platform whose purpose is to create a collaborative and open dataset of sentences and their translations.

https://tatoeba.org

GNU Affero General Public License v3.0

714 stars 132 forks source link

Add sentences responsive #3008

Closed vinkaks closed 1 year ago

vinkaks commented 2 years ago

Responsive design for the add sentences page based on search page. Related to #2903

Lifted search bar styles from sentences/search.css to layout/default.css

Screenshots: dev tools testing

360px mobile phone

Screenshot 2022-09-19 at 13-08-18 Add sentences - Tatoeba

360px mobile phone : sidenav open

Screenshot 2022-09-19 at 13-47-16 Add sentences - Tatoeba

360px mobile phone: sentence added

FireShot Capture 015 - Add sentences - Tatoeba - localhost

800px tablet

Screenshot 2022-09-19 at 13-09-20 Add sentences - Tatoeba

1440px laptop

Screenshot 2022-09-19 at 13-09-45 Add sentences - Tatoeba

1440px laptop: sentence added

FireShot Capture 016 - Add sentences - Tatoeba - localhost

1440px laptop: old layout

Screenshot 2022-09-19 at 13-11-54 Add sentences - Tatoeba

PS: Screwed up my my git.. Recovered in this form..

jiru commented 1 year ago

@vinkaks Thank you for your PR! :slightly_smiling_face:

I can see a problem when adding a new sentence using the old design on a large screen:

And a related problem on tablet:

Actually the layout is broken on any size. Because the old design has a fixed width by design, you probably need to wrap it into a fixed width container.

jiru commented 1 year ago

@vinkaks Thank you for the fix. It appears the display still looks weird in some situations, for example using a 756px wide screen:

Yorwba commented 1 year ago

Looks good to me now. Thanks a lot!