improve UI style #2
No reviewers
Labels
No labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
No milestone
No project
No assignees
2 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference: organicmaps/url-processor#2
Loading…
Add table
Reference in a new issue
No description provided.
Delete branch "improveui"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Demo link
it's not perfect by any means, but it's a bit cleaner looking
Signed-off-by: Harry Bond endim8@pm.me
Thanks! It's definitely better. Let's make it perfect!
I am not sure that an additional 163K of (potentially expensive roaming) traffic are really necessary. It would be great to stick to native iOS/Android/Desktop fonts.
Does it work on Android 5 devices?
@ -72,0 +127,4 @@}@keyframes fadeout {from { opacity: 1; }Can you please also replace all
constandlettovar? Looks like some Android 5 devices may not work properly.Please also add a link
geo:lat,lon?Z=zoomwith the easily copyable text "lat, lon" and ideally with a small copy-to-a-buffer button that copies just coordinates.The size is not so critical, but is it really necessary? We like lightweight code )
Btw, is the icon clickable? Also, is the mobile version displayed properly if the name of the feature is not passed as a parameter?
The icon takes you to https://organicmaps.app, and yes :)
We can stick with the default sans-serif, on android it's usually Roboto anyway :)
According to https://caniuse.com/css-variables, it's supported by 96.16% of users, however adoption only picked up around 2016, so if you're using the old default browser it may not work. There's no harm in converting to the hex values now that they've been decided on though, so I'll do that :)
👍 changed to
@ -72,0 +127,4 @@}@keyframes fadeout {from { opacity: 1; }fixed
also fixed
Changed to
I'm afraid I'm not quite sure what you mean,
do you mean a small button inside the 'See on OpenStreetMap' button that opens the
geo:link?Is this what you mean? On pressing, it opens the
geo:url with the pinned location.Yes, the second option. Would it be hard to also draw a 📋 symbol on the right of the coords inside a geo button, and add a copy-on-click JS code (with a popup that "lat, lon has been copied into clipboard")?
I think it'd be good to merge the 'Install Organic Maps' button into the 'Open in Organic Maps' button, if pressed and OM isn't installed, it'd redirect to get.html, and if it is installed it'd open the location in OM. What do you think?
It should be possible 👍 I might not be able to do it for a few days though unfortunately
I've merged the 'Install OrganicMaps' and 'Open in OrganicMaps' buttons, so now it tries to open the location in OM, and if it doesn't work it opens the /get.html page. This works in iOS and Android :)
I'll add the coordinate copying button, and this should be ready to merge :)
Done mostly 👍 added the button and pop-up, embedding the image was too much pain for its worth, so I just left it as text for now. In the future, maybe someone can improve it :)
@biodranik this should be good to merge now :)
Can you please also make a screenshot how what it looks like on the smartphone now? Am I correctly understanding that "Open in Organic Maps" changes to "Install Organic Maps" if a user clicks on it, but there is no app installed?
You may try to use this SVG icon for better quality:
Why is it removed on mobiles? How it will appear if the app is not installed?
@ -0,0 +1,9 @@<?xml version="1.0" encoding="UTF-8"?>Is it used? What is its license? Maybe pasteboard emoji is enough?
i didn't originally use this as the emoji size was messing stuff up, however i've found and implemented a solution 👍
On mobile, only the 'Open in OrganicMaps' will appear:
it looks like this, no matter if the app is installed:
it'd be nice to change it to 'Install OrganicMaps' if it isn't detected as installed, but afaik this isn't possible :(
@ -0,0 +1,9 @@<?xml version="1.0" encoding="UTF-8"?>It's from https://github.com/organicmaps/organicmaps/blob/master/data/styles/clear/style-clear/symbols/copyshop-m.svg , i left it there in case someone in the future wants to try using it :)
in the meanwhile, the emoji has been added.
added 👍
Thanks, changed to that icon 👍
Here's the screen:
the button always stays as 'Open in OrganicMaps', but if it isn't installed it redirects the user to get.html, where the user can install OM :)
all of the changes suggested in the review have been implemented :)
it can be tested here: https://url-processor.endim8.workers.dev/o4B4pYZsRs/Zoo_Z%C3%BCrich
Great! Almost perfect :)
geo:URLs without slashes on desktop OSes. So let's make the whole button clickable, or also copy coordinates and show the "copied" message on the desktop.demo here: https://url-processor.endim8.workers.dev/o4B4pYZsRs/Zoo_Zürich
Great! (2) is still reproducing on iOS.
Sorry about the delay with this, I'm struggling to find a way to reproduce (2) as I don't have any (working) iPhones
I'm going to try and find a cheap one to test with 👍
edit: i've got a part arriving tomorrow to fix an old one, so i'll fix this as soon as the phone is fixed :)
@ -24,3 +24,3 @@title = name + ' | ' + title;} else {name = 'Shared via <a href="https://organicmaps.app">Organic Maps app</a>';name = 'Shared via <a href="https://organicmaps.app">Organic Maps</a>';Why this link was removed?
nit: insert spaces from left and right here, below and above in
position: absolute;and other properties.nit: consistently use single quotes in JS, and double quotes in HTML.
This seems to be quite fiddly to fix, but I've got an iPhone finally so I'll be actively working on it. Sorry it's taken so long :|
edit:
i've also discovered that the copy button doesn't work on iOS
@endim8 we can stick to the previous solution with two separate buttons, and merge all useful changes. So you'll have more time to find a better fix if you want.
@ -24,3 +24,3 @@title = name + ' | ' + title;} else {name = 'Shared via <a href="https://organicmaps.app">Organic Maps app</a>';name = 'Shared via <a href="https://organicmaps.app">Organic Maps</a>';I just thought it wasn't really needed, re-added now 👍
fixed 👍
fixed 👍
@biodranik this should be good to merge now, the copy button doesn't work on safari but i'll fix that later as its a small issue.
I've also fixed the map element so that the marker is centred, as before it was centred relative to the screen height which didn't take into account the header height.
Also, i kept the single button but switched back to two buttons on iOS (iOS' implementation is different to android so it doesn't work)