Looks bad on iPhone

[jernst]

@indietechrocks/all : indietech.rocks looks not so great on iPhone. Don't know about Android.

I know nothing about how to get the CSS right on mobile, does anybody here have a few cycles editing CSS?

[jackjamieson2]

Hi Johannes, I could take a look at this next week if you like.

[jernst]

That would be great!!

…

On Jul 1, 2017, at 16:52, jackjamieson2 ***@***.***> wrote: Hi Johannes, I could take a look at this next week if you like. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA1ZIVCBzCl0iYlx0PjMm4ZVvP8qUW4Sks5sJtuzgaJpZM4OLcV->.

[jackjamieson2]

Hi Johannes, how do you feel about reformatting the table on small screens as per: https://css-tricks.com/responsive-data-tables/

A little messy but I think it'd get the job done.

[jernst]

I have no opinion. Try it out?

[jackjamieson2]

I've edited _indietechrocks.scss to reformat the tables, but I'm not sure how to get media queries working with sass. Do you have any idea?

[jernst]

I haven't done this, but I would assume that you can write it like plain CSS. Hierarchy and $vars optional ..

[jackjamieson2]

Got it — turned out I had a couple typos elsewhere. Take a look on mobile if you like - A bit easier to read on my android phone than it was before

[jernst]

Excellent! Looks much better. Does the animated logo come up on Android? It doesn't on iPhone. Is there a way of using a static PNG instead of the SVG on mobile?

[kartikprabhu]

Should be possible to use the picture element to do this. Can't look at this currently though.

…

On Jul 3, 2017 5:19 PM, "Johannes Ernst" ***@***.***> wrote: Excellent! Looks much better. Does the animated logo come up on Android? It doesn't on iPhone. Is there a way of using a static PNG instead of the SVG on mobile? — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACPuXw9AjfpHpz-ZVz1lt-SRX-mN6VWlks5sKVrKgaJpZM4OLcV-> .

[jackjamieson2]

The animated logo displays correctly on my Android in Firefox and Chrome.

[jernst]

Darn iPhones! Actually, it does not work in my version of OSX Safari either. Any idea how to switch to something else "on Apple devices only"?

[kartikprabhu]

Use ​<picture> <source srcset="logo.svg" type="image/svg+xml"> <img src="logo.png"> </picture> You can move the animation CSS inside the SVG following https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style

…

On Jul 3, 2017 6:28 PM, "Johannes Ernst" ***@***.***> wrote: Darn iPhones! Actually, it does not work in my version of OSX Safari either. Any idea how to switch to something else "on Apple devices only"? — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACPuXy93J9R6cokOaM_iwCRL8T3KS76uks5sKWsYgaJpZM4OLcV-> .

[jernst]

This did not work. See http://indietech.rocks/ -- I don't understand where it gets its coordinates from. And there's still nothing on the iPhone.

[kartikprabhu]

Johannes, I could take a look in a couple of days when I have my computer back; unless someone else fixes it before then

…

On Jul 4, 2017 12:10 AM, "Johannes Ernst" ***@***.***> wrote: This did not work. See http://indietech.rocks/ -- I don't understand where it gets its coordinates from. And there's still nothing on the iPhone. — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACPuXwgWi_WPSXxAqSenrgCUDXz907rAks5sKbsmgaJpZM4OLcV-> .

[jernst]

I played around with it some more after the 4th-of-July BBQ :-) and got somewhere. Not optimal, but a PNG replacement now shows up on iPhone and Safari: basically, I put the PNG fallback as a background image in the div inclosing the SVG, and the SVG first paints a big box with the background color, thereby painting over the SVG.

I could not get the picture element formatted, it placed its insides all over the map, just not where I wanted them to be.

[jernst]

@kartikprabhu Thanks for your pull request, which I merged, but it does not seem to work for me. The logo has again disappeared on Safari/OSX and iPhone. See currently deployed site.

[kartikprabhu]

@jernst that is very strange. I don't have a good way of testing on Safari or iPhone. Maybe Safari is just ignoring SVG for some strange reason.

[kartikprabhu]

btw the site looks nice on Android. FF and Chrome show the animated SVG while Opera shows the static logo

[jernst]

Just noticed Apple does not list the element here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/HTMLTags.html

[jernst]

Does not seem like it. Also, if I go to http://indietech.rocks/images/logo.svg directly, Safari does not display it either. Works in FF and Chrome.

[jernst]

So I reverted back to the PNG background image, I guess that's the best we can do.

[jernst]

We are doing something wrong here. Just noticed that https://kodi.tv uses a SVG image as their main logo, and it works fine on Safari (Mac and iPad, not tried on iPhone)