feat(profile): extend profile view

Add private message form, information table and a general introduction
to the users profile.

---

 scss/include/_variables.scss       |  3 ++
 scss/include/modules/_profile.scss | 18 +++++++++
 scss/style.scss                    |  7 +++-
 src/views/profiles/view.html       | 65 ++++++++++++++++++++++++++++++-
 4 files changed, 89 insertions(+), 4 deletions(-)

Author: MarcScheib

scss/include/_variables.scss

@@ -38,3 +38,6 @@ $footer-icon-bg-color-linkedin: #007bb6;
 $footer-icon-bg-color-twitter: #00aced;
 $footer-icon-bg-color-google: #dd4b39;
 $footer-icon-bg-color-xing: #006567;
+
+// tables
+$table-border-color: #ddd;

scss/include/modules/_profile.scss

@@ -0,0 +1,18 @@
+.profile-image {
+  width: 120px;
+  float: left;
+
+  img {
+    width: 96px;
+    height: 96px;
+  }
+}
+
+.profile-info {
+  margin-left: 120px;
+}
+
+img.circle-border {
+  border: 6px solid #FFFFFF;
+  border-radius: 50%;
+}

scss/style.scss

@@ -4,11 +4,14 @@
 @import "../jspm_packages/github/FortAwesome/font-awesome@4.5.0/scss/font-awesome";
 @import "../jspm_packages/github/twbs/bootstrap@4.0.0-alpha/scss/bootstrap.scss";
 
-/** project **/
+/** base **/
 @import "include/_layout";
 @import "include/_top_navigation";
 @import "include/_navigation";
 @import "include/_page";
 @import "include/_footer";
 @import "include/_basic";
-@import "include/_animation";
+@import "include/_animation";
+
+/** modules **/
+@import "include/modules/_profile";

src/views/profiles/view.html

@@ -1,9 +1,70 @@
 <template>
   <section class="au-animate">
     <div class="row">
-      <div class="col-lg-12">
+      <div class="col-lg-4">
+        <div class="profile-image">
+          <img src="img/user.jpg" class="img-circle circle-border m-b-md">
+        </div>
+        <div class="profile-info">
+          <h2>
+            ${profile.username}
+          </h2>
+          <h4>Member of Guild XX</h4>
+          <small>
+            <!-- Todo: update last visit -->
+            Joined on ${profile.created_at}, Last visit on ${profile.created_at}
+          </small>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <table class="table small">
+          <tbody>
+            <tr>
+              <td>
+                <strong>3</strong> Settlements
+              </td>
+              <td>
+                <strong>200</strong> Troop Strength
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>3</strong> Fights Won
+              </td>
+              <td>
+                <strong>40 000</strong> Resources
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>0</strong> Artifacts
+              </td>
+              <td>
+                <strong>67 040</strong> Overall
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-3">
         <div class="card card-default card-block">
-          <h2 class="card-title">Profile of ${profile.username}</h2>
+          <h4 class="card-title">Private message</h4>
+
+          <p class="small">
+            Send a private message to ${profile.username}
+          </p>
+
+          <div class="form-group">
+            <label>Subject</label>
+            <input type="email" class="form-control" placeholder="Message subject">
+          </div>
+          <div class="form-group">
+            <label>Message</label>
+            <textarea class="form-control" placeholder="Your message" rows="3"></textarea>
+          </div>
+          <button class="btn btn-primary btn-block">Send</button>
         </div>
       </div>
     </div>