search

Lurkars / gloomhavensecretariat

A Gloomhaven / Frosthaven Companion App
https://gloomhaven-secretariat.de
GNU Affero General Public License v3.0
179 stars 69 forks source link

‘Moons’ element hard to see on mobile #54

Closed Naugrimohtar closed 1 year ago

Naugrimohtar commented 1 year ago

On iOS I am having a hard time seeing the different in the elemental state of the ‘moons’ element (the one on the far right)

running latest as of 20 DEC 2022

8D2B111A-EA41-41DD-9A88-FC6A7DD3F1FF D2810AA1-28A2-4A6B-BA30-94FA1B370090 A685685B-E5CF-47EB-9841-88E3FABD3589

Lurkars commented 1 year ago

Thanks, I will take a look, now to improve contrast!

Lurkars commented 1 year ago

I lighten it a bit up in v0.35.0, can you please test, if this is enough.

Naugrimohtar commented 1 year ago

Thanks for the fast update! I think it looks improved; however, I still find it hard to in in comparison to the other elements.

I found this old screenshot from GHH that used a different color to help with the contract, sharing for consideration

49DE12F4-8602-4DE1-8546-39B9C720BD79

Naugrimohtar commented 1 year ago

Again, thanks for the update. I am personally still finding this too dark. I request a similar approach to GHH as pictured above.

Lurkars commented 1 year ago

Yes I will take a look. Currently just bit more inactive due to Christmas.

Naugrimohtar commented 1 year ago

No worries, Merry Christmas! Sorry if I seemed ungrateful, I saw it was still assigned to me so wasn't sure how to update it. My apologies.

As added info, I am noticing that this color looks to be displaying different on my iPhone 8 with Chrome (and Safari) than it is with a PC using Chrome (and Edge). I am running v35.3 running on a Synology NAS/server using Docker, working great. That is the setup I am noticing color mismatch on.

I am also seeing the same color issue on my iOS device also on the following servers too: https://gloomhaven-secretary.de/ https://ghs.champonthis.de/

It seems to follow the iOS device, perhaps something about the color palette is either not being recognized on iOS devices or is not being set for those types of clients?

Lurkars commented 1 year ago

Nono, everything fine. I treid to match the old GHH color now in v0.35.4. Hope this fixes it for you!

Naugrimohtar commented 1 year ago

Thanks! I am still having the same issue on my iOS device. I am not sure if it’s just me?

here Are some screen shots.

53A8E959-8C17-470D-966D-3B4A12947FD2 CF268A3D-3524-4009-8F3C-DBC48CFC0786

Lurkars commented 1 year ago

Okay, I it completely looks as non-edited. So I think iOS device cannot apply CSS filters to SVG image. So all my work just didn't work for you. So sorry, I don't know solution by now. I can try to apply filter to complete object and see if this works for you, but maybe then the white border would also change.

Lurkars commented 1 year ago

Hey, taken a while to go back to this, but I tried now a different method of changing the color, so please re-test if latest version, if that finally solve this for you!

Naugrimohtar commented 1 year ago

This look good on iOS, well done!

2C0BA3A9-1603-44F2-818D-6E3801691CEB

As an aside, I recently learned how to save a website as an app on iOS. Very convenient. I don’t know if I’m the oddball who didn’t know or not f I have found something less common but here is a website (that uses way too many words on how to do it) that shows what I mean. If you haven’t already it may be worth a mention on on your description page — especially for the public posted install.

https://www.jackrabbitclass.com/blog/save-website-homepage-iphone/

I imagine this same type of thing is available on Android too.

Lurkars commented 1 year ago

Nice that it solved. Regarding install, this is called PWA and possible, because I developed the app to be such a PWA. that it can be installed. It's documented in the README here: https://github.com/Lurkars/gloomhavensecretariat#progressive-web-app

The main problem seems, that not many people know what this exactly mean, so I should change the text to a less technical description and maybe link some tutorials on how to do this on several devices. On a Desktop for example, it also work in Chrome Browser to install as PWA. So thank for the input, I will adjust the description, so that it get more clear for everyone!