CORD GUI -- Users page has a panel with information about what each category blocks.

Change-Id: I035dbc139656abcb9f918a3197dda39aa05a0757

@@ -78,10 +78,6 @@ th {
     font-weight: lighter;
     font-weight: lighter;
 }
 }
 
 
-div.container {
-    min-height: 100%;
-}
-
 button,
 button,
 input[type="button"],
 input[type="button"],
 input[type="reset"] {
 input[type="reset"] {
@@ -119,6 +115,7 @@ input[type="reset"][disabled]:hover {
 div.container {
 div.container {
     width: 85%;
     width: 85%;
     margin: 0 auto;
     margin: 0 auto;
+    min-height: 100%;
 }
 }
 div.main-left, div.main-right {
 div.main-left, div.main-right {
     float: left;
     float: left;
@@ -141,6 +138,9 @@ g.icon circle {
 g.icon use.glyph.checkMark {
 g.icon use.glyph.checkMark {
     fill: rgb(68, 189, 83)
     fill: rgb(68, 189, 83)
 }
 }
+g.icon use.glyph.xMark {
+    fill: #CE5650;
+}
 
 
 th.user-pic {
 th.user-pic {
     background-color: white;
     background-color: white;

+<!--Partial HTML for rating panel directive-->
+<div id="rating-panel">
+    <div ng-cloak class="ng-hide ng-cloak panel" ng-show="ratingsShown">
+        <table>
+            <tr>
+                <th class="title">Category</th>
+                <th ng-repeat="rating in level_order">{{rating}}</th>
+            </tr>
+            <tr ng-repeat="cat in category_order">
+                <td class="title">{{cat}}</td>
+                <td ng-repeat="r in level_order">
+                    <div ng-if="prohibitedSites[r][cat]">
+                        <icon size="15" id="xMark"></icon>
+                    </div>
+                   <div ng-if="!prohibitedSites[r][cat]">
+                       <icon size="15" id="checkMark"></icon>
+                   </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
\ No newline at end of file

@@ -46,6 +46,11 @@
     padding: 2% 1%;
     padding: 2% 1%;
 }
 }
 
 
+#user span.help:hover {
+    cursor: pointer;
+    color: #CE5650;
+}
+
 #user div.main-left.family table.user-info th,
 #user div.main-left.family table.user-info th,
 #user div.main-right.family table.user-form th {
 #user div.main-right.family table.user-form th {
     padding: 17px;
     padding: 17px;
@@ -109,3 +114,67 @@
 #user td.buttons svg {
 #user td.buttons svg {
     vertical-align: middle;
     vertical-align: middle;
 }
 }
+
+#rating-panel th,
+#rating-panel td {
+    text-align: center;
+    padding: 1%;
+    font-weight: lighter;
+}
+
+#rating-panel th.title,
+#rating-panel td.title {
+    width: 125px;
+    text-align: left;
+}
+
+#rating-panel th {
+    background-color: white;
+    padding-top: 3%;
+    border-bottom: 1px solid #CE5650;
+    color: #3C3C3C;
+    font-weight: normal;
+}
+
+#rating-panel tr th:first-child,
+#rating-panel tr td:first-child {
+    padding-left: 5%;
+}
+#rating-panel tr th:last-child,
+#rating-panel tr td:last-child {
+    padding-right: 5%;
+}
+
+div#rating-panel {
+    position: relative;
+    pointer-events: none;
+}
+
+#rating-panel div.ng-hide-add.ng-hide-add-active,
+#rating-panel div.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.75s;
+    transition: all linear 0.75s;
+}
+
+#rating-panel div.panel {
+    position: absolute;
+    top: 0;
+    left: -6%;
+    height: 545px;
+    overflow: auto;
+    padding: 0;
+    pointer-events: auto;
+    box-shadow: 0 3px 23px 7px rgb(118, 118, 118);
+    border-radius: 3px;
+}
+#rating-panel table {
+    table-layout: fixed;
+    width: 500px;
+    background-color: white;
+    opacity: 1;
+}
+
+#rating-panel div.ng-hide {
+    opacity: 0;
+    left: -55%;
+}

@@ -23,7 +23,11 @@
                   name="changeLevels">
                   name="changeLevels">
                 <table class="user-form">
                 <table class="user-form">
                     <tr>
                     <tr>
-                        <th>Select Site Rating</th>
+                        <th>
+                            Select Site Rating
+                            <span class="help"
+                                  ng-click="showRatings()"> (?)</span>
+                        </th>
                     </tr>
                     </tr>
                     <tr ng-repeat="user in users" class="options">
                     <tr ng-repeat="user in users" class="options">
                         <td>
                         <td>
@@ -49,5 +53,8 @@
                 </table>
                 </table>
             </form>
             </form>
         </div>
         </div>
+        <div ng-if="isFamily">
+            <ratings-panel></ratings-panel>
+        </div>
     </div>
     </div>
 </div>
 </div>
\ No newline at end of file

@@ -30,6 +30,7 @@
                 $scope.isFamily = false;
                 $scope.isFamily = false;
                 $scope.newLevels = {};
                 $scope.newLevels = {};
                 $scope.showCheck = false;
                 $scope.showCheck = false;
+                $scope.ratingsShown = false;
 
 
                 // === Get data functions ---
                 // === Get data functions ---
 
 
@@ -112,7 +113,53 @@
                     $scope.showCheck = false;
                     $scope.showCheck = false;
                 };
                 };
 
 
+                $scope.showRatings = function () {
+                    $scope.ratingsShown = !$scope.ratingsShown;
+                };
+
             $log.debug('Cord User Ctrl has been created.');
             $log.debug('Cord User Ctrl has been created.');
+        }])
+
+        .directive('ratingsPanel', ['$log', function ($log) {
+            return  {
+                templateUrl: 'app/view/user/ratingPanel.html',
+                link: function (scope, elem, attrs) {
+                    function fillSubMap(order, bool) {
+                        var result = {};
+                        $.each(order, function (index, cat) {
+                            result[cat] = bool;
+                        });
+                        return result;
+                    }
+                    function processSubMap(prhbSites) {
+                        var result = {};
+                        $.each(prhbSites, function (index, cat) {
+                            result[cat] = true;
+                        });
+                        return result;
+                    }
+
+                    function preprocess(data, order) {
+                        return {
+                            ALL: fillSubMap(order, false),
+                            G: processSubMap(data.G),
+                            PG: processSubMap(data.PG),
+                            PG_13: processSubMap(data.PG_13),
+                            R: processSubMap(data.R),
+                            NONE: fillSubMap(order, true)
+                        };
+                    }
+
+                    $.getJSON('/app/data/pc_cats.json', function (data) {
+                        scope.level_order = data.level_order;
+                        scope.category_order = data.category_order;
+                        scope.prohibitedSites = preprocess(
+                            data.prohibited, data.category_order
+                        );
+                        scope.$apply();
+                    });
+                }
+            };
         }]);
         }]);
 
 
 }());
 }());