search

paulrouget / dzslides

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.
http://paulrouget.com/dzslides
938 stars 255 forks source link

Replace the inline-SVG code by UTF8 characters #37

Closed mstalfoort closed 13 years ago

mstalfoort commented 13 years ago

… to make it work in Opera.

Was:

Patch opera inline svg Patch for inline svg support/fallback for browsers who don't support it (yet)

paulrouget commented 13 years ago

That's a lot of code. Do you think it could be better/easier to use UTF8 characters, or data:urls for the images?

paulrouget commented 13 years ago

Opera 12 will support inline SVG. Can we wait until then?

paulrouget commented 13 years ago

Can you try with Opera 12 Alpha?

mstalfoort commented 13 years ago

According to http://caniuse.com/#search=inline I see the following note:

Note: Support in Opera 12 is based on support in experimental builds and is not certain to be included.

I've (short) been in contact with Divya Manian about the inline svg support and this was a nice solution for the time being. Let me see if I can contact her again to find out if version 12 will have this support for sure.

Regarding your previous comment: I like the simplicity of the HTML used in the embedder file, so I wouldn't propose changing the svg elements to images with data:urls which would only result in less readable code. But that's my opinion, you're the owner so you have the power to decide ;)

mstalfoort commented 13 years ago

Just had a testrun on 12 alpha and indeed it supports inline svg now. Thought I tested this yesterday but it seems I did it in the pre-alpha version. Also had confirmation from Divya (and shwetank) via IRC as of this version will have inline svg support.

So it looks like this just has become not relevant anymore, well if you're still aiming for the latest browsers.

hsablonniere commented 13 years ago

I think we can wait.

About light alternative versions :

paulrouget commented 13 years ago

Any ideas of which characters we could use? (see http://www.fileformat.info/info/unicode/category/So/list.htm)

hsablonniere commented 13 years ago

Little triangles work for me : http://www.fileformat.info/info/unicode/char/25c0/index.htm http://www.fileformat.info/info/unicode/char/25b6/index.htm

mstalfoort commented 13 years ago

Really?

I was thinking of these two:

http://www.fileformat.info/info/unicode/char/21e6/index.htm http://www.fileformat.info/info/unicode/char/21e8/index.htm

hsablonniere commented 13 years ago

I like minimalism but we're just talking about icons here, so...

mstalfoort commented 13 years ago

I'm on the same page as you and like minimalism also and yet I would choose the other ones, funny

paulrouget commented 13 years ago

I'll let you guys decide which ones you prefer (we also need one for the popup button). I'll let @mstalfoort write the patch, and @hsablonniere review and pull. In the mean time… http://i.imgur.com/tCp90.gif

hsablonniere commented 13 years ago

Ok NP.

@mstalfoort can you just post on this thread two screenshots of embedder with the 2 alternatives ?

We'll make a decision based on that.

mstalfoort commented 13 years ago

Sure I can, and will create 2 screens with back, forward and popout buttons

mstalfoort commented 13 years ago

Screenhot01 (21e6 and 21e8) Screenshot01

Screenshot02 (25c0 and 25b6) Screenshot02

My personal favorite would be Screenshot01, please have a look at it and let me know what you think

hsablonniere commented 13 years ago

I'm willing to agree on your arrows but I really don't like that gray background.

Have you tried white on black ? (and gray on black when disabled).

Ok for the popup icon...

mstalfoort commented 13 years ago

You're right, the grey background doesn't look that good. Here are updated versions

Screenhot01b Screenshot01b

Screenshot02b Screenshot02b

paulrouget commented 13 years ago

I prefer the second one because the plain-character. I am pretty sure there are plain-arrows as well.

mstalfoort commented 13 years ago

You mean by 'plain-arrows' a filled one and not the outlined version as in screenshot01 ?

Like one of these perhaps: http://www.fileformat.info/info/unicode/char/279e/index.htm http://www.fileformat.info/info/unicode/char/27a1/index.htm

paulrouget commented 13 years ago

The filled one. Yeah, the last one looks good. I also the plain-triangle.

mstalfoort commented 13 years ago

Screenshot based on the "last one" as paul mentioned

Screenhot03 Screenshot03

paulrouget commented 13 years ago

I think I prefer the pain-triangle. This will need some style for :hover and :active.

hsablonniere commented 13 years ago

I also agree that plain triangles are simpler. I'm thinking light gray to white for :hover and maybe little a little show for :activate but I'm just throwing ideas...

@mstalfoort You can commit your changes and clean your pull request with a rebase...

paulrouget commented 13 years ago

Not sure to understand what you mean for :active.

hsablonniere commented 13 years ago

I meant shadow, sorry :p

Maybe shadow is better for :hover and color change for :activate

paulrouget commented 13 years ago

Usually, :hover is lighter, and activate is margin-top:-1px.

mstalfoort commented 13 years ago

Shall I setup a jsfiddle for this prior to sending in a pull request?

hsablonniere commented 13 years ago

I agree with @paulrouget on usual behaviour. I think you won't need jsfiddle.

You can implement what we discussed, do a rebase to cleanup everything and have a single commit into this PR. Then I'll do a code review.

Note that I just merged master branch.

hsablonniere commented 13 years ago

@mstalfoort Excellent work, simple, nice looking...