search

Terrastories / terrastories

Terrastories is a geostorytelling application for mapping, managing and sharing place-based stories.
https://terrastories.app
MIT License
319 stars 157 forks source link

[Bug][Rails] Adapt height of the welcome screen card to adjust to overflow content #684

Closed rudokemper closed 3 years ago

rudokemper commented 3 years ago

Describe the bug Currently, if any of the content on the welcome screen card (such as the h1 welcome message, .welcome-card-user, or .language-picker content) is forced to go to a second line, the overall .welcome-card height does not adjust. Let's make it dynamically adjust so that all the content fits.

To Reproduce Steps to reproduce the behavior:

  1. Go to the Terrastories welcome screen
  2. Use DevTools to make the content of any of the above adapt to two lines.

Expected behavior The height of the .welcome-card should increase to accommodate the content needing to increase in size.

Screenshots image In this screenshot, the .welcome-card-user content forces the .language-picker content down, and while it's still visible there should be a 2em padding at the bottom as on the other sides..

image In this screenshot, both the h1 and .welcome-card-user content are taking up two lines, and the language-picker block isn't even visible.

everly-gif commented 3 years ago

hey I would like to work on this issue. Please assign it to me

rudokemper commented 3 years ago

Great @everly-gif! Welcome. I assigned you

everly-gif commented 3 years ago

hey @rudokemper I reproduced this issue locally. But I'm not able to exactly reproduce the first screenshot . I see that the .welcome-card-user is forced to take up two lines in your screenshot whereas it only takes up one line in mine even when the .language-picker is pushed down out of the card(overflowing). Although you claimed that the overflowing content isn't visible. I can actually see it as indicated in the screenshot.

I also noticed .welcome-card-user isn't translated to the language selected in mine unlike yours. I find this strange, any suggestions what is going on here and why we both have such different outputs?

Here's a screenshot welcome-terrastories

Also another question : If you just need the height to adapt changing the height property to min-height property will do the deal. But I guess you also expect the content to be taking each one line only isn't it? In that case, shouldn't we focus on making the width adaptive?

Here's me changing the property to make the height adaptive: screencapture-localhost-3000-pt-2021-10-14-12_40_38

you can see just by comparing the two screenshots above, you can say the height has changed. But some content still takes 2 lines like the h1 . So In my opinion if you are looking forward to fix that then the focus should also be on the width right?

Here's me making a change in the width (changed max-width to min-width) : width-changes

All the content take one line but will need some media queries for even smaller screens and also some dynamic font-sizing. PS:The above two screenshots are of the same break point/screen size : 637px

rudokemper commented 3 years ago

Hi @everly-gif, thanks for this.

Regarding your question on outputs, the reason why our outputs are different is because I used WebDev Tools to change the text content a little, as a way of illustrating the issue on the fly. It will be an issue for any localized use of Terrastories where the translation of the text will overflow.

I like your proposed solution! With this, we probably should have a max-width limit, upon which the height starts to adjust, but I think this is a good approach.

everly-gif commented 3 years ago

oh okay what about the .welcome-card-user not being translated? I still see it as community | logout even after picking a different language.

rudokemper commented 3 years ago

We probably need to localize that text still.

rudokemper commented 3 years ago

@everly-gif I saw your messages about Docker not working after updating Windows, and the service "extensions" has neither an image nor a build context specified: invalid compose project you received. Did you end up resolving it? We're actually trying to figure out this issue on our Slack channel as well, you aren't the only one who's had this problem.

everly-gif commented 3 years ago

@everly-gif I saw your messages about Docker not working after updating Windows, and the service "extensions" has neither an image nor a build context specified: invalid compose project you received. Did you end up resolving it? We're actually trying to figure out this issue on our Slack channel as well, you aren't the only one who's had this problem.

Yes I did, I was thinking of creating an issue separately on this , hence deleted the comments.

To fix this : Go to settings>general> uncheck the box that says "Use docker compose V2"(which is now set as default after updating to the latest version) apply and restart .

Open powershell and type the commands. now docker-compose commands should work. I was able to successfully run it and make changes

rudokemper commented 3 years ago

Great, thanks @everly-gif. If you don't mind filing the issue and describing your workaround solution, that would be great. We may have to investigate whether this will get us into problems later down the road with docker compose V1 becoming deprecated.

everly-gif commented 3 years ago

I tried using docker compose commands instead of docker-compose and it gave me the same error service "extensions" has neither an image nor a build context specified: invalid compose project. Although acc to the documentation this small change should be more than sufficient, I am not sure why I get those errors. I'm not familiar with docker as much but I can try figuring this out