antennaio / jquery-bar-rating

jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings.
http://antennaio.github.io/jquery-bar-rating/
MIT License
736 stars 263 forks source link

Fractional values not working #121

Open cjwilson1 opened 5 years ago

cjwilson1 commented 5 years ago

I choose this library because I needed fractional values 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

I noticed fractional values are not working on the main examples page.

However, I tried using it anyway and i am getting the same issues. You cannot select half stars and in order to have 1-5 with half star values you must have 10 options. But all 10 stars are displayed.

Was fractional values ever fully implemented?

Thanks

zeyakong commented 5 years ago

Here is my solution

first, replaced the fontawesome-stars-o.css as the following:

.br-theme-fontawesome-stars-o .br-widget {
    height: 28px;
    white-space: nowrap;
}

.br-theme-fontawesome-stars-o .br-widget a {
    font: normal normal normal 17px/1 'Font Awesome 5 Free';
    font-weight: 500;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    color: #FFB600;
    margin-right: 4px;
}

.br-theme-fontawesome-stars-o .br-widget a:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f005';
    color: #d2d2d2;
}

.br-theme-fontawesome-stars-o .br-widget a.br-active:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f005';
    color: #FFB600;
}

.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f005';
    color: #FFB600;
}

.br-theme-fontawesome-stars-o .br-widget .br-current-rating {
    display: none;
}

.br-theme-fontawesome-stars-o .br-readonly a {
    cursor: default;
}

.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after {
    font-weight: 900;
    content: '\f089';
    color: #FFB600;
}

then, in your front-end page, you should use font awesome CSS from their official CDN

<!--font-awesome package-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

finally, you can use it

$('#YourComponentID').barrating({
                theme: 'fontawesome-stars-o',
                readonly: true,
                initialRating: 4.5
            });

it works fine for me.