From ff481b6317915ecd695150d3f3b0f96333ffde7a Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Tue, 17 Dec 2019 13:04:53 +0100
Subject: [PATCH] Code styles of profile view.

---
 musician/static/musician/css/default.css      |   7 ++
 .../default-profile-picture-primary-color.png | Bin 0 -> 3037 bytes
 musician/templates/musician/profile.html      |  80 ++++++++++--------
 3 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 musician/static/musician/images/default-profile-picture-primary-color.png

diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index 42972ab..a9d7da4 100644
--- a/musician/static/musician/css/default.css
+++ b/musician/static/musician/css/default.css
@@ -247,6 +247,13 @@ h1.service-name {
     font-weight: 900;
 }
 
+.card.card-profile .card-header {
+    background: white;
+    border-bottom: none;
+    font-size: large;
+    text-transform: uppercase;
+}
+
 #configDetailsModal .modal-header {
     border-bottom: 0;
     text-align: center;
diff --git a/musician/static/musician/images/default-profile-picture-primary-color.png b/musician/static/musician/images/default-profile-picture-primary-color.png
new file mode 100644
index 0000000000000000000000000000000000000000..feaf2c7c3c686840fd87f2d6d5ae54ea7d5f888b
GIT binary patch
literal 3037
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

literal 0
HcmV?d00001

diff --git a/musician/templates/musician/profile.html b/musician/templates/musician/profile.html
index e9da7be..fead18a 100644
--- a/musician/templates/musician/profile.html
+++ b/musician/templates/musician/profile.html
@@ -3,48 +3,56 @@
 
 {% block content %}
 
-<h1>Profile</h1>
-<p>Little description of what to be expected...</p>
+<h1 class="service-name">Profile</h1>
+<p class="service-description">Little description of what to be expected...</p>
 
-<div class="card">
-  <h5 class="card-header text-right">User information</h5>
-  <div class="card-body row">
-    <div class="col-md-4">
-      <div class="m-auto border border-secondary rounded-circle rounded-lg" style="width:125px; height:125px;">
-        {# <!-- <img class="" src="#" alt="User profile image"  /> -->#}
+<div class="card-deck">
+  <div class="card card-profile">
+    <h5 class="card-header">User information</h5>
+    <div class="card-body row">
+      <div class="col-md">
+        <div class="border-primary rounded-circle d-inline-block p-1" style="background-color: white; border: 5px solid grey">
+          <img id="user-avatar" width="160" height="160" src="/static/musician/images/default-profile-picture-primary-color.png" alt="user-profile-picture">
+        </div>
       </div>
-    </div>
-    <div class="col-md-8">
-      <p class="card-text">{{ profile.username }}</p>
-      <p class="card-text">{{ profile.type }}</p>
-      <p class="card-text">Preferred language: {{ profile.language }}</p>
+      <div class="col-md-9">
+        <p class="card-text">{{ profile.username }}</p>
+        <p class="card-text">{{ profile.type }}</p>
+        <p class="card-text">Preferred language: {{ profile.language }}</p>
+      </div>
+      {% comment %}
+      <!-- disabled until set_password is implemented -->
+      <div class="col-md-12 text-right">
+        <a class="btn btn-primary pl-5 pr-5" href="#">Set new password</a>
+      </div>
+      {% endcomment %}
     </div>
   </div>
-</div>
 
-{% with profile.billing as contact %}
-<div class="card mt-4">
-    <h5 class="card-header text-right">Billing information</h5>
-  <div class="card-body">
-    <div class="form-group">{{ contact.name }}</div>
-    <div class="form-group">{{ contact.address }}</div>
-    <div class="form-group">
-      {{ contact.zipcode }}
-      {{ contact.city }}
-      {{ contact.country }}
-    </div>
-    <div class="form-group">
-      {{ contact.vat }}
-    </div>
-    <!-- payment method -->
-    <div class="form-group">
-      payment method: {{ payment.method }}
-    </div>
-    <div class="form-group">
-      {# TODO(@slamora) format payment method details #}
-      {{ payment.data.data }}
-    </div>
+  {% with profile.billing as contact %}
+  <div class="card card-profile">
+      <h5 class="card-header">Billing information</h5>
+    <div class="card-body">
+      <div class="form-group">{{ contact.name }}</div>
+      <div class="form-group">{{ contact.address }}</div>
+      <div class="form-group">
+        {{ contact.zipcode }}
+        {{ contact.city }}
+        {{ contact.country }}
+      </div>
+      <div class="form-group">
+        {{ contact.vat }}
+      </div>
+      <!-- payment method -->
+      <div class="form-group">
+        payment method: {{ payment.method }}
+      </div>
+      <div class="form-group">
+        {# TODO(@slamora) format payment method details #}
+        {{ payment.data.data }}
+      </div>
 
+    </div>
   </div>
 </div>
 {% endwith %}