hakanersu / AmaranJS

Nice, sleek and stylish notifications.
http://amaranjs.com/
MIT License
213 stars 59 forks source link

issues getting started #3

Closed mwaschkowski closed 10 years ago

mwaschkowski commented 10 years ago

Hi,

Looks like a cool library, but having trouble getting it going. The docs should be updated to reflect:

-folder name is 'theme' not 'themes' -there is no 'jquery.amaran.min.css' file -you may wish to leave off 'http:' for the hrefs in case users are working in an http environment -all-themes has an http: import which will not work in an https environment

With the master branch: -when I tried doing the example notification, it didn't look proper with the default css -when I tried doing the awesome theme, I got a green circle for the icon

Going to give the new branch a try I guess - I just need to figure out why I'm getting the green circle instead of whatever icon I specify. ie. icon: 'fa fa-download'

I'll post back with what I see from the new branch.

Thanks

Mark

mwaschkowski commented 10 years ago

OK, just tried with the coffee-sass branch, and it seems to be working, but I'm still getting the green circle even though I'm using:

$.amaran({
    content: {
        message: 'Submitted for Quotation',
        size: '1.4 GB',
        file: 'my_birthday.mp4',
        icon: 'fa fa-download'
    },
    theme: 'awesome ok'
});

I've tried some other font awesome FA icons, but always get the green circle.

mwaschkowski commented 10 years ago

I checked out the html that is rendered and see:

<div class="amaran-wrapper bottom right">
    <div class="amaran awesome ok" style="display: block;">
    <i class="icon fa fa-cloud icon-large"></i>
    <p class="bold">Submitted for Quotation</p>
    <p><span>1.4 GB</span><span class="light">my_birthday.mp4</span></p>
    </div>
</div>

which looks good to me, so maybe an issue with my setup?

Thanks

Mark

image

hakanersu commented 10 years ago

Thank you for feedback @mwaschkowski ill update documentation and investigate about your problems. Can you share any live example about your problem ?

mwaschkowski commented 10 years ago

I can put up a live example if needed. Any ideas why I might be seeing a circle first? When I go to the demo, everything looks fine, but the files being used are different, so not apples to apples.

image

hakanersu commented 10 years ago

Case 1 :

<i class="icon fa fa-cloud icon-large"></i>

Fontawesome not properly working.Add this code on your page and check icon showing up.

Case 2:

Note likely but somehow icon color can be green too :)

mwaschkowski commented 10 years ago

Hi,

Thanks for the suggestion. For the icon, its a config issue on my side. Some css is loading following the font awesome being loaded and it has a icon* rule set which conflicts with font awesome. I reversed the order of loading and its working fine now.

Best,

Mark

hakanersu commented 10 years ago

Hi @mwaschkowski good to see that your problem solved issue will open until listed bugs resolved.

hakanersu commented 10 years ago

Documentation updated , thank you.