search

paulrouget / dzslides

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

Add slide numbering #58

Closed padenot closed 12 years ago

padenot commented 12 years ago

I just added slide numbering, which is mandatory in academia, and I find it quite useful for question after talks.

This is pretty straightforward, and changes the color of the slide number based on the color of the text on the slide (to handle dark background, etc.).

hsablonniere commented 12 years ago

Nice idea but...

The numbering can be done using CSS counter-increment, more details here :

About the color changing stuffs, your code is very specific to the example and I think we can use CSS over JavaScript for this issue.

I've put up a little example for you : http://jsfiddle.net/pFLud/5/

If users need to number their slides, they should be able to do it easily. Maybe we could add the necessary CSS in the example.

Little side effect, when used with onstage or embedder shell, we have the information (slide number) twice. It could be hide by a URL parameter...

@paulrouget What's your opinion?

paulrouget commented 12 years ago

I don't think we should show the counter by default. Maybe we can hide (visibility:hidden), and in the custom style, add visibility:visible in comments.

Also, we are planning to get a progress bar and a view mode (pull 48 and pull 57) - that might make this feature redundant.

hsablonniere commented 12 years ago

Ok for the default and custom style.

I also thought about the other coming features. I think @padenot needs that for his audience to ask questions on specific slides. It's not the same purpose as the progress bar.

For the numbering system, we could use the same as the view mode and just change positionning and/or display.

paulrouget commented 12 years ago

Sounds good to me.

paulrouget commented 12 years ago

@padenot Will you have some time soon to fix this? If not, let me know, we can take over your code. Thanks!

padenot commented 12 years ago

I might take a look at this tomorrow. If I lack time, I'll let you know.

Paul.

On 8 March 2012 22:22, Paul Rouget < reply@reply.github.com

wrote:

@padenot Will you have some time soon to fix this? If not, let me know, we can take over your code. Thanks!

Reply to this email directly or view it on GitHub: https://github.com/paulrouget/dzslides/pull/58#issuecomment-4402915

padenot commented 12 years ago

Here is some code using CSS counter, which works as intended. I think I've screwed up a couple git commands, this asks to merge three commits, but I don't really what I did.

As I'm hardly a designer, I just kept @hsablonniere background and border-radius style, as it is good enough for me and solves the background-color change problem.

hsablonniere commented 12 years ago

Ok nice.

I think we could change 3 little details :

left: 15px;
font-size: 25px;
padding: 2px 10px;

I think what @paulrouget meant with the visibility stuff is :

visibility: hidden;

in default styles.

/* Slide numbering by uncommenting this. */
/* visibility: visible; */

in custom style.

@paulrouget do you confirm ?

hsablonniere commented 12 years ago

Just tested it quickly, because custom styles are before default ones, users will have to use !important in CSS.

@paulrouget Do we want that ?

paulrouget commented 12 years ago

@paulrouget Do we want that ?

No. But I can't think of a better way to do that… let me think.

paulrouget commented 12 years ago

We could use a more specific selector. But "bof".

hsablonniere commented 12 years ago

We could also reorder parts of the code but "bof" again...

Thinking...

Hywan commented 12 years ago

Maybe we can give an example of how adding slides number in comment but not in the code? Keep in mind that DZSlides is by definition hackable and the CSS is not very important here. People can write their own CSS/template (probably based the given one).

Thoughts?

hsablonniere commented 12 years ago

We have to make a decision! I agree with you @Hywan on the fact that DZSlides is by definition hackable but I still think this feature should be provided easily.

I have another idea that keep the custom and core parts separated. It feels like a hack but it provides users cutomization and easy access on this feature :

In the custom part :

/* Slide numbering by uncommenting one of these examples : */  
  section:before {
    /* content: counter(slideidx); */
    /* content: 'slide #' counter(slideidx); */
    /* content: '- ' counter(slideidx) ' -'; */
  }

And in the core part we only remove visibility and content rule from the actual css counter stuff. Without any content, it won't be displayed.

Opinions ?

paulrouget commented 12 years ago

These 5 lines are a little too verbose. I like the content idea though. Can we transform this to one single line?

hsablonniere commented 12 years ago

Ok for a one line thing. Do we keep the tree examples? If we only keep one, which one?

hsablonniere commented 12 years ago

@paulrouget @padenot Up ?

hsablonniere commented 12 years ago

We could merge #48/#86 first and deal with this one just after. There will be some refactoring to use the same numbering stuff...

padenot commented 12 years ago

Still up. I'll propose a new patch shortly, when #48/#86 are landed.

2012/4/11 Hubert SABLONNIÈRE < reply@reply.github.com

We could merge #48/#86 first and deal with this one just after. There will be some refactoring to use the same numbering stuff...

Reply to this email directly or view it on GitHub: https://github.com/paulrouget/dzslides/pull/58#issuecomment-5059944

hsablonniere commented 12 years ago

@padenot #48/#86 just landed. If you still have time, you can propose a new PR to add the slide numbering. Use what we discussed here and try to use the already existing CSS counters in the latest master release...

If you don't have time anymore, please let us know.

Good luck and thx again ;-)

Because we'll handle that in a new PR, I'm closing this one...