Missing CSS Dependencies

Zulko / eagle.js

A hackable slideshow framework built with Vue.js

https://zulko.github.io/eaglejs-demo/

ISC License

4.08k stars 222 forks source link

Missing CSS Dependencies #36

Closed aminimalanimal closed 6 years ago

aminimalanimal commented 6 years ago

Under Usage, the documentation says to import 'eagle.js/dist/eagle.css' into your main.js file. I did this and don't see any styles applied.

I installed eagle.js via npm (yarn add eagle.js) into a project bootstrapped with vue init webpack.

Also, the documentation mentions that eagle supports animate.css transitions. Is animate.css included within eagle.css or is it a separate dependency that should be documented to be manually added?

yaodingyd commented 6 years ago

Yes, we do need a new release. Currently you can use eagle.js/dist/theme/base.css. And you need to import animate.css in your main file. README file will be updated.

@Zulko time for a new release?

aminimalanimal commented 6 years ago

Thanks @yaodingyd.

Sounds like the updated documentation should inform the user to add the following to the top of their main.js file:

import 'animate.css/animate.min.css'
import 'eagle.js/dist/eagle.css'
import 'eagle.js/dist/themes/base.css'

That helped out a lot. I now have the styles I was expecting, with one exception:

I seem to have animate.css transitions working for nested items (via eg-transition), but enter and leave transitions aren't working on slide elements

yaodingyd commented 6 years ago

@aminimalanimal Do you have a example repo and online sandbox I can look at?

yaodingyd commented 6 years ago

@aminimalanimal The README do have typos and some confusing writings. Please submit a PR if you find one, and thanks!

aminimalanimal commented 6 years ago

@yaodingyd I thought I found typos, but that misunderstanding was happening because of the issue I'm having with slide. Let me see if I can set up a sandbox to demonstrate.

aminimalanimal commented 6 years ago

Alright, I got a sandbox set up. Took a while because it doesn't support pug. :P Also, note that the sandbox forces me to set a static height on the slideshow to get it to appear.

Sandbox - enter and leave transitions not working on slide

yaodingyd commented 6 years ago

@aminimalanimal I'm so sorry. 0.1.3 have a breaking issue #33. For now you can use 0.1.2 but still there's a lot of console error you will see.

We will roll up a new release in no time.

yaodingyd commented 6 years ago

@aminimalanimal new release out! update to 0.1.4 and all will work out

aminimalanimal commented 6 years ago

@yaodingyd awww, no need to apologize—thanks for patching it so quickly! I just installed the new version and it works. (I like that you got rid of the need to import 'eagle.js/dist/themes/base.css', too.) Closing. :)