Add circle rating for movie and tv list

1dagranholm · Mar 18, 2020 · c4582c6 · c4582c6
1 parent 982d285
commit c4582c6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/src/app/trending-movies/trending-movies.component.html b/src/app/trending-movies/trending-movies.component.html
@@ -46,9 +46,10 @@ <h3 class="mb-0">{{ movie.title }}</h3>
                     More info
                   </button>
                 </div>
-                <small class="text-muted"
-                  >Average vote: {{ movie.vote_average }}</small
-                >
+                <div class="group">
+                  <div class="circular-progress{{ movie.vote_average*10 }}"></div>
+                </div>
+
               </div>
             </div>
           </div>

diff --git a/src/app/trending-tv/trending-tv.component.html b/src/app/trending-tv/trending-tv.component.html
@@ -55,9 +55,9 @@ <h3 class="mb-0">{{ s.name }}</h3>
                     More info
                   </button>
                 </div>
-                <small class="text-muted"
-                  >Average vote: {{ s.vote_average }}</small
-                >
+                <div class="group">
+                  <div class="circular-progress{{ s.vote_average*10 }}"></div>
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/styles.scss b/src/styles.scss
@@ -154,4 +154,74 @@ h5 {
   color: white;
   font-size: 0.7rem;
   white-space: nowrap;
+}
+
+/** ============================
+ ** variable
+ ** ============================ */
+ $circular-margin: 0px;
+ $break-small: 320px;
+ $break-large: 1100px;
+
+ /** ============================
+  ** function circular-progress
+  ** ============================ */
+ @function circular-progress($maxPercent, $percent, $color-bar, $color-back) {
+   $increment: 360 / $maxPercent;
+   $half: round($maxPercent / 2);
+   $background-image: '';
+   @if $percent < $half {
+    $nextdeg: 90deg + ($increment * $percent);
+    $background-image: 'linear-gradient(90deg, #{$color-back} 50%, transparent 50%, transparent), linear-gradient(#{$nextdeg}, #{$color-bar} 50%, #{$color-back} 50%, #{$color-back})';
+
+  }
+  @else {
+    $nextdeg: -90deg + ($increment * ($percent - $half));
+    $background-image: 'linear-gradient(#{$nextdeg}, #{$color-bar} 50%, transparent 50%, transparent), linear-gradient(270deg, #{$color-bar} 50%, #{$color-back} 50%, #{$color-back})';
+
+  }
+  @return unquote($background-image);
+ }
+
+
+ /** ============================
+ ** Mixins Circular Progress
+ ** ============================ */
+ @mixin circular-progress($percent-num, $color1:"#03A9F4") {
+  //circular-progress function
+  //circular-progress($maxPercent, $percent, $color-bar, $color-back);
+  // background: circular-progress(100, $percent-num, #03A9F4, #E0E0E0);
+  background: circular-progress(100, $percent-num, $color1, #E0E0E0);
+  border-radius: 50%;
+  height: 30px;
+  margin: 2em auto;
+  position: relative;
+  min-width: 30px;
+  margin: $circular-margin;
+  transition: all .3s linear;
+  &::before {
+    background-color: #FAFAFA;
+    border-radius: 50%;
+    color: rgba(black, .54);
+    content: '#{$percent-num}';
+    font-size: 0.9rem;
+    font-weight: bold;
+    height: 100%;
+    left: 0;
+    line-height: 30px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    transform: scale(.80);
+    width: 100%;
+  }
+  &:hover {
+    box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
+  }
+ }
+
+@for $i from 1 through 100 {
+  .circular-progress#{$i} {
+    @include circular-progress($i, #3a8fde);
+  }
 }