person details component

Author: Ferie

app/components/person-details/riccardo-person-details-component.js

@@ -0,0 +1,45 @@
+/**
+ * Person Details Component
+ * 
+ * @memberOf riccardo
+ * @description
+ * Person Details Component.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('riccardo').component('person', {
+        bindings: {},
+        controller: PersonDetailsCmptCtrl,
+        templateUrl: 'app/components/person-details/riccardo-person-details.html'
+    });
+
+    PersonDetailsCmptCtrl.$inject = ['$rootScope', '$state', '$stateParams', 'peopleService'];
+
+    /**
+     * @name PersonDetailsCmptCtrl
+     * @function PersonDetailsCmptCtrl
+     * @memberOf riccardo.PersonDetailsCmptCtrl
+     * @param $rootScope
+     * @param $state
+     * @param $stateParams
+     * @param peopleService
+     * @description
+     * Person Details component controller.
+     */
+    function PersonDetailsCmptCtrl($rootScope, $state, $stateParams, peopleService) {
+        var $ctrl = this;
+
+        if (!!$stateParams.person) {
+            $ctrl.person = $stateParams.person;
+        } else {
+            $state.go('riccardo-exercise', {}, {
+                inherit: false,
+                location: true,
+                reload: true,
+                notify: true
+            });
+        }
+    }
+}());

app/components/person-details/riccardo-person-details.html

@@ -0,0 +1,40 @@
+<section class="personDetailsContainer">
+    <div class="personDetails clearfix">
+        <h2 class="personName heading2">{{ $ctrl.person.name }}</h2>
+
+        <div class="clearfix">
+            <div class="personImageContainer">
+                <img class="personImage" ng-src="{{ $ctrl.person.img }}" alt="{{ $ctrl.person.name }}">
+            </div>
+
+            <div class="personDescriptionContainer">
+                {{ $ctrl.person.Description }}
+
+                <div class="personRatingContainer">
+                    <h3 class="heading4">Rating</h3>
+                    <div star-rating ng-model="$ctrl.person.rating" max="5" readonly="true"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="preferences clearfix">
+            <div class="pageLeftColumn">
+                <h3 class="heading4">Likes</h3>
+                <ul>
+                    <li ng-repeat="like in $ctrl.person.Likes">
+                        {{ like }}
+                    </li>
+                </ul>
+            </div>
+
+            <div class="pageRightColumn">
+                <h3 class="heading4">Dislikes</h3>
+                <ul>
+                    <li ng-repeat="dislike in $ctrl.person.Dislikes">
+                        {{ dislike }}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>

assets/sass/components/_person-details.scss

@@ -0,0 +1,88 @@
+// Person Details
+
+.personDetailsContainer {
+    background-color: $whiteF8;
+}
+
+.personDetails {
+    @include box-shadow-defined($android-box-shadow-bottom);
+    background-color: $white;
+    border-radius: $border-radius;
+    padding: rem(16);
+
+    > .heading2 {
+        margin-bottom: rem(20);
+    }
+}
+
+.personName {
+    &.heading2 {
+        font-size: rem(30);
+    }
+}
+
+.personImageContainer,
+.personDescriptionContainer {
+    @extend %grid__item;
+}
+
+.personImageContainer {
+    @extend %one-whole;
+    @extend %xsmall-outwards--one-half;
+    @extend %medium--one-quarter;
+    @extend %large-outwards--one-sixth;
+    padding: rem(10) 0;
+    text-align: center;
+}
+
+.personImage {
+    background-color: $greyEE;
+    border-radius: 50%;
+    min-height: rem(64);
+    width: 100%;
+}
+
+.personDescriptionContainer {
+    @extend %one-whole;
+    @extend %xsmall-outwards--one-half;
+    @extend %medium--three-quarters;
+    @extend %large-outwards--five-sixths;
+    padding: rem(10) 0;
+}
+
+.preferences {
+    > .pageLeftColumn,
+    > .pageRightColumn {
+        @extend %xsmall-outwards--one-half;
+        margin: rem(16) 0;
+    }
+}
+
+@include grid-media-query("xsmall-outwards") {
+    .personImageContainer {
+        padding: rem(10) rem(20) rem(10) 0;
+    }
+
+    .preferences {
+        > .pageLeftColumn,
+        > .pageRightColumn {
+            margin: 0;
+        }
+
+        > .pageLeftColumn {
+            padding-right: rem(20);
+        }
+    }
+}
+
+@include grid-media-query("medium-outwards") {
+    .personName {
+        &.heading2 {
+            font-size: rem(22);
+        }
+    }
+
+    .personDetails {
+        padding: rem(32);
+    }
+}