add half star support for ratings

_includes/featuredbox.html

@@ -20,7 +20,7 @@
                             <h2 class="card-title">
                                 <a class="text-dark" href="{{ post.url | absolute_url }}">{{ post.title }}</a>
                                 {% if post.rating %}
-                                <div class="mb-2 mt-1 font-weight-normal">
+                                <div class="mb-2 mt-2 font-weight-normal">
                                 {% include star_rating_postbox.html %}
                                 </div>
                                 {% endif %}

_includes/postbox.html

@@ -12,7 +12,7 @@
             <h2 class="card-title">
                 <a class="text-dark" href="{{ post.url | absolute_url }}">{{ post.title }}</a>
                 {% if post.rating %}
-                <div class="mb-2 mt-1 font-weight-normal">
+                <div class="mb-2 mt-2 font-weight-normal">
                 {% include star_rating_postbox.html %}
                 </div>
                 {% endif %}

_includes/star_rating.html

@@ -1,19 +1,9 @@
-{% if page.rating == 5 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9733;&#9733;</span>
-{% endif %}
-
-{% if page.rating == 4 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9733;&#9734;</span>
-{% endif %}
-
-{% if page.rating == 3 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9734;&#9734;</span>
-{% endif %}
-
-{% if page.rating == 2 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9734;&#9734;&#9734;</span>
-{% endif %}
-
-{% if page.rating == 1 %}
-  <span class="star-rating text-warning"> &#9733;&#9734;&#9734;&#9734;&#9734;</span>
-{% endif %}
+<div class="rating-holder">
+<div class="c-rating c-rating--regular" data-rating-value="{{page.rating}}">
+  <button>1</button>
+  <button>2</button>
+  <button>3</button>
+  <button>4</button>
+  <button>5</button>
+</div>
+</div>

_includes/star_rating_postbox.html

@@ -1,19 +1,9 @@
-{% if post.rating == 5 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9733;&#9733;</span>
-{% endif %}
-
-{% if post.rating == 4 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9733;&#9734;</span>
-{% endif %}
-
-{% if post.rating == 3 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9733;&#9734;&#9734;</span>
-{% endif %}
-
-{% if post.rating == 2 %}
-  <span class="star-rating text-warning"> &#9733;&#9733;&#9734;&#9734;&#9734;</span>
-{% endif %}
-
-{% if post.rating == 1 %}
-  <span class="star-rating text-warning"> &#9733;&#9734;&#9734;&#9734;&#9734;</span>
-{% endif %}
+<div class="rating-holder">
+<div class="c-rating c-rating--regular" data-rating-value="{{post.rating}}">
+  <button>1</button>
+  <button>2</button>
+  <button>3</button>
+  <button>4</button>
+  <button>5</button>
+</div>
+</div>

_layouts/post.html

@@ -51,8 +51,8 @@ <h1 class="posttitle">{{ page.title }}</h1>
 
             <!-- Rating -->
             {% if page.rating %}
-            <div class="rating mb-4">
-                <strong>Rating</strong>: {% include star_rating.html %}
+            <div class="rating mb-4 d-flex align-items-center">
+                <strong class="mr-1">Rating:</strong> {% include star_rating.html %}
             </div>
             {% endif %}
 

_posts/2018-01-11-customer-service.md

@@ -7,14 +7,14 @@ image: assets/images/11.jpg
 description: "My review of Inception movie. Acting, plot and something else in this short description."
 featured: true
 hidden: true
-rating: 5
+rating: 4.5
 ---
 
 Review products, books, movies, restaurant and anything you like on your Jekyll blog with Mediumish! JSON-LD ready for review property.
 
 #### How to use?
 
-It's actually really simple! Add the rating in your YAML front matter:
+It's actually really simple! Add the rating in your YAML front matter. It also supports halfs:
 
 ```html
 ---
@@ -24,6 +24,6 @@ author: john
 categories: [ Jekyll, tutorial ]
 image: assets/images/11.jpg
 description: "My review of Inception movie. Actors, directing and more."
-rating: 5
+rating: 4.5
 ---
 ```

_sass/_stars.scss

@@ -0,0 +1,137 @@
+/// Credits to https://codepen.io/damianmuti/pen/KmEMdR
+
+///
+$rating-min-value: 0 !default;
+///
+$rating-max-value: 5 !default;
+///
+$rating-steps-value: .25 !default;
+///
+$rating-color-empty: '%23ddd' !default;
+///
+$rating-color-full: gold !default;
+///
+$rating-color-hover: grey !default;
+/// This variable is a map containing the "d" attribute of each of the SVG icons
+$rating-icons-paths: (
+  quarter: 'M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z',
+  half: 'M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z',
+  three-quarters: 'M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z',
+  full: 'M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z'
+);
+
+/// Creates a dynamic list of values that increment each .25 from 0 to 5
+/// @return {list} 
+@function rating-values() {
+  $rating-values: ();
+
+  @for $i from $rating-min-value through ($rating-max-value / $rating-steps-value) {
+    $rating-value: abs($i * $rating-steps-value);
+    $rating-values: append($rating-values, $rating-value, 'comma');
+  }
+
+  @return $rating-values;
+}
+
+/// Generates an SVG with a given fill color depending on the type of icon passed as parameter. The SVG string is scaped for cross-browser support.
+/// @param {string} $icon - Type of icon. Accepted values: `quarter`, `half`, `three-quarters` or `full`.
+/// @param {color} $color - Passes the fill color of the SVG icon that is being generated. Note: Hexa color values must be escaped for cross-browser support.
+/// @return {string} background value.
+@function get-icon($icon, $color) {
+  @if not index(quarter half three-quarters full, $icon) {
+    @error "Interaction type must be either `quarter`, `half`, `three-quarters` or `full`.";
+  }
+
+  @return url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22' + $color + '%22%20d%3D%22' + map-get($rating-icons-paths, $icon) + '%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') center / cover no-repeat;
+}
+
+/// This is a CSS-only star rating component that shows the proper rating depending on a data-attribute value. JS logic behind this component should round up values per quarter.
+/// @param {number} $star-size [20px] - Provides width and height for each of the stars.
+/// @param {string} $rating-element [button] - Element to use for each of the stars.
+/// @param {string} $interaction-type [representative] - Indicates whether this component should be clickable or representative. Accepted values: `clickable` or `representative`.
+/// @example scss
+///   .class {
+///     c-rating(toem(20px), button, clickable);
+///   }
+/// @example markup
+///   <div class="c-rating" data-rating-value="3.25">
+///     <span>1</span>
+///     <span>2</span>
+///     <span>3</span>
+///     <span>4</span>
+///     <span>5</span>
+///   </div>
+@mixin c-rating($star-size: 20px, $star-element: button, $interaction-type: representative) {
+  @if not index(clickable representative, $interaction-type) {
+    @error "Interaction type must be either `clickable` or `representative`.";
+  }
+
+  #{$star-element} {
+    display: inline-block;
+    float: left;
+    width: $star-size;
+    height: $star-size;
+    border: 0;
+    text-indent: -9999px;
+    outline: none;
+    background: get-icon(full, $rating-color-empty);
+
+  }
+
+ @each $rating-value in rating-values() {
+    // Get the next higher integer.
+    $rating-value-ceil: ceil($rating-value);
+
+    &[data-rating-value="#{$rating-value}"] {
+      #{$star-element}:nth-child(-n+#{$rating-value-ceil}) {
+        background: get-icon(full, $rating-color-full);
+      }
+
+      #{$star-element}:nth-child(#{$rating-value-ceil}) {
+        // Evaluate which fraction of a star this value is and add the proper background
+        @if str-slice("#{$rating-value}", 2, 4) == '.25' {
+          background: get-icon(quarter, $rating-color-full), get-icon(full, $rating-color-empty)
+        }
+        @else if str-slice("#{$rating-value}", 2, 4) == '.5' {
+          background: get-icon(half, $rating-color-full), get-icon(full, $rating-color-empty)
+        }
+        @else if str-slice("#{$rating-value}", 2, 4) == '.75' {
+          background: get-icon(three-quarters, $rating-color-full), get-icon(full, $rating-color-empty)
+        }
+      }
+    }
+  }
+}
+
+/// Convert to EMs function
+/// @param {number} target - The value to be converted
+/// @param {number} context [$msuxf-font-size] The base font size
+/// @return {em} value
+@function toem($target, $context: 16px) {
+  @if $target == 0 {
+    @return 0
+  }
+
+  @return $target / $context+0em;
+}
+
+
+.rating-holder {
+  font-size: 16px;
+  display: inline-block;
+  background-color: #fff;
+  border-radius: toem(25px);
+  box-sizing: border-box;
+}
+
+.c-rating {
+  @include c-rating(toem(20px), button, clickable);
+
+  &--small {
+    font-size: 50%
+  }
+
+  &--big {
+    font-size: 150%;
+  }
+}

assets/css/main.scss

@@ -10,5 +10,6 @@
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
-	"syntax"
+	"syntax",
+    "stars"
 ;

assets/css/screen.css

@@ -664,19 +664,4 @@ License: https://www.wowthemes.net/freebies-license/
 }
 .sticky-top-80 {
     top:80px;
-}
-.star-rating {
-    font-size:20px;
-}
-
-a.reveal {
-	font-size: 65%;
-    padding: 4px;
-    border-radius:2px;
-    line-height:1;
-	background: #333;
-	color: #fff !important;
-	font-style: italic;
-	cursor: pointer;
-    display:inline-block;
 }