Re-style challenge selection button bar

garcharjay811 · Feb 1, 2018 · 1b7da3a · 1b7da3a
1 parent 9b22af8
commit 1b7da3a
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/app/views/ScoreBoard.html b/app/views/ScoreBoard.html
@@ -8,9 +8,14 @@ <h3 class="page-header page-header-sm" translate="TITLE_SCORE_BOARD"></h3>
             <div class="form-group">
                 <label translate="LABEL_DIFFICULTY"></label>
                 <div class="btn-group">
-                    <label ng-repeat="difficulty in [1, 2, 3, 4, 5, 6]" class="btn btn-info" ng-model="scoreBoardTablesExpanded[difficulty]" ng-click="toggleDifficulty()" uib-btn-checkbox>
-                        <span uib-rating ng-model="difficulty" max="{{difficulty}}" read-only="true" class="nowrap"></span>
-                        <span class="badge"><i class="fas fa-check" aria-hidden="true"></i>{{(challenges|filter: {difficulty: difficulty, solved: true}).length + '/' + (challenges|filter: {difficulty: difficulty}).length}}</span>
+                    <label ng-repeat="difficulty in [1, 2, 3, 4, 5, 6]" class="btn btn-primary" ng-model="scoreBoardTablesExpanded[difficulty]" ng-click="toggleDifficulty()" uib-btn-checkbox>
+                        <span class="fa-4x fa-layers fa-fw">
+                            <i class="far fa-star"></i>
+                            <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-9" style="font-weight:900;">{{difficulty}}</span>
+                            <span ng-class="'fa-layers-counter bg-' + ((challenges|filter: {difficulty: difficulty, solved: true}).length === (challenges|filter: {difficulty: difficulty}).length ? 'success' : (challenges|filter: {difficulty: difficulty, solved: true}).length === 0 ? 'danger' : 'warning')">
+                                {{(challenges|filter: {difficulty: difficulty, solved: true}).length + '/' + (challenges|filter: {difficulty: difficulty}).length}}
+                            </span>
+                        </span>
                     </label>
                 </div>
             </div>