[Rating] - Display partial stars

[vinz243]

This is a suggestion for an accurate star widget (inspired from Google Play):

.ui.accurate.star.widget {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAcklEQVQoz2P4//8/AzmYgWKN6KC4uFgYhGF8UjTqgjBJGqG2GUOxMF6NQAViQCwFxGpAbICk0QAqBpITw6ZRAUkxLqyA1akENCvg9SNQgRYWTVoEA4cSjTDFalAM5uPVCFTABY0/ASSDBKBiXNRNcqRiADBao1Bj6dJdAAAAAElFTkSuQmCC') repeat scroll 0% 0% transparent;
  height: 0.875em;
  width: 4.375em;
}
.ui.accurate.star.widget .highlight {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAdElEQVQoz2P4//8/AzmYgWKN6KC4uDgBhGF8UjQ+AGGSNEJt+w/FCXg1AhUUAHEDEB8A4g9IGj9AxUByBdg0LkBSjAsvwOpUApoX4PUjUMEFLJouEAwcSjTCFB+AYjAfr0agAgNo/AUgGRQAFTOgbpIjFQMAtcfKBD81ItYAAAAASUVORK5CYII=') repeat scroll left bottom transparent;
  height: 0.875em;
}
.ui.accurate.star.widget.inline {
  display: inline-block;
  margin-left: 0.3em;
}

And usage :

<div class="ui accurate star widget">
     <div class="highlight" style="width: 75%"></div>
 </div>

http://jsfiddle.net/m6fhLqg2/4/

What do you think?

[brigand]

I like it a lot.

You should use ems instead of pixels.

[vinz243]

Thanks, I edited it!

[mariolamacchia]

👋 What's the state of this issue? Do you need help with a PR?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[davidklebanoff]

bump.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[davidklebanoff]

bump 2.

[brigand]

@davidklebanoff please don't bump posts if you don't have anything constructive to add.

[davidklebanoff]

Well, to add to my previous statement... :)

I see the issue as a valuable feature to add - and it would appear that quite a number of people agree given the multiple votes. I'd hate for it to disappear just because the stale-bot determined it shall be so. I feel like the issue has merit and should be added or at least be cataloged here unless a contributor deems otherwise and decides to close it.

So with all that said, I'd say in addition to this issue, I also have an issue with the stale-bot. I think it's a broken idea, and just because an issue doesn't have new comments doesn't mean it is no longer valid and thus should be auto-closed. Perhaps I should open a separate issue to suggest we remove the stale-bot, but he'd probably just close it anyway in some sort of act of self-preservation. Fitting, I suppose, for the robot uprising to start on GitHub.

[tjscience]

We would love to use the semantic-ui rating module, but we need partial stars. Any idea if this will be added?

[labby]

Hmm, for a start it would be nice if something like this can be done <div class="ui star rating" data-rating="3.5" data-max-rating="5"></div> to display average ratings. Are there any activities referring to this?

[sos0]

Is this confirmed to be added in 2.x?

[lubber-de]

https://fomantic-ui.com implemented Partial Rating by 2.8 https://jsfiddle.net/ycspfa7L/ However it needs jquery >= 3.2 and modern browsers