teacher profile component update

src/client/components/TeacherProfile.js

@@ -8,12 +8,15 @@ export default function (app) {
         },
         template: template,
         controller: function($sce){
-            let [first, middle, last] = splitName(this.member.name);
+            const [_, first, middle, last] = splitName(this.member.name);
             this.firstName = first;
             this.middleName = middle;
             this.lastName = last;
 
-            if (this.member.picture) this.image = this.member.picture.big.url;
+            if(this.member.picture){
+                this.image = this.member.picture.big;
+            }
+
             this.biography = $sce.trustAsHtml(this.member.biography);
         }
     });

src/style/components/teacher-proifile.scss

@@ -1,33 +1,49 @@
 @import "../variables";
 
+$picture-width: 30%;
+$info-width: 100% - $picture-width;
+
 .teacher-profile {
   margin: 0 auto $double-margin;
 
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   flex-wrap: wrap;
-}
 
-.teacher-profile__picture {
-  width: 20%;
-  max-width: 15em;
-  min-width: 12em;
-  margin: 0 1em;
+  &__picture {
+    width: $picture-width;
+    max-width: 15em;
+    min-width: 12em;
 
-  img {
-    width: 100%;
-  }
-}
-
-.teacher-profile__info {
-  width: 60%;
-  margin: 0 1em;
-
-  h3 {
-    font-weight: 200;
-
-    span {
-      font-weight: 600;
+    img {
+      width: 100%;
     }
   }
-}
+
+  &__info {
+    width: $info-width;
+
+    padding-left: $single-margin;
+    box-sizing: border-box;
+
+    h3 {
+      font-weight: 200;
+
+      strong {
+        font-weight: 600;
+      }
+    }
+
+    .info {
+      margin-bottom: $single-margin;
+    }
+
+    .biography {
+      margin-top: $single-margin;
+
+      p{
+        margin-bottom: $single-margin;
+      }
+    }
+  }
+}

src/templates/components/teacher-profile.html

@@ -1,20 +1,18 @@
 <div class="teacher-profile">
-    <a name="{{$ctrl.member.anchor}}"></a>
-
     <div class="teacher-profile__picture">
-        <img ng-src="{{$ctrl.image   }}">
+        <img ng-src="{{$ctrl.image.url}}" >
     </div>
 
     <div class="teacher-profile__info">
         <h3>{{$ctrl.firstName}} {{$ctrl.middleName}} <strong>{{$ctrl.lastName}}</strong></h3>
 
-        <p>{{$ctrl.member.position}}</p>
-        <p>{{$ctrl.member.status}}</p>
-        <p></p>
+        <div class="info">
+            <p><strong>{{$ctrl.member.position}}</strong></p>
+            <p>{{$ctrl.member.status}}</p>
+            <p>Образование: {{$ctrl.member.edu}}</p>
+            <p>Диплом: {{$ctrl.member.diploma}}</p>
+        </div>
 
-        <p class="edu">{{$ctrl.member.edu}} </p>
-        <p class="diploma">Диплом {{$ctrl.member.diploma}}</p>
-
-        <div ng-bind-html="$ctrl.biography"></div>
+        <div class="biography" ng-bind-html="$ctrl.biography"></div>
     </div>
 </div>