From 62745e89fa08450ff007ee70e1500a8d2ba793ec Mon Sep 17 00:00:00 2001
From: Skia <skia@libskia.so>
Date: Sat, 20 Aug 2016 13:57:27 +0200
Subject: [PATCH] User profile template fix

---
 core/static/core/style.css            | 25 +++++++++-----
 core/templates/core/macros.jinja      | 33 ++++++++++--------
 core/templates/core/user_detail.jinja | 50 +++++++++++++++------------
 3 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/core/static/core/style.css b/core/static/core/style.css
index 3537a882..6a43701c 100644
--- a/core/static/core/style.css
+++ b/core/static/core/style.css
@@ -110,7 +110,7 @@ p, pre {
 ul, ol {
     margin-top: 1em;
     margin-bottom: 1em;
-	list-style-type: disc;
+    list-style-type: disc;
     margin-left: 25px;
 }
 
@@ -182,21 +182,28 @@ tbody>tr:hover {
     overflow: auto;
 }
 #user_profile h4 { border-bottom: 1px solid grey; max-width: 60%; }
+#user_profile #left_column {
+    max-width: 59%;
+}
+#user_profile #right_column {
+    max-width: 40%;
+    float: right;
+    font-style: italic;
+}
 #user_profile #pictures {
-   max-width: 250px;
-   max-height: 300px;
-   float: right;
-   font-style: italic;
+    max-width: 250px;
+    max-height: 300px;
+    margin: 0px auto;
 }
 #user_profile #nickname {
-   font-style: italic;
+    font-style: italic;
 }
 #user_profile #pictures img {
-   max-width: 96%;
-   max-height: 96%;
+    max-width: 96%;
+    max-height: 96%;
 }
 #user_profile .promo_pict {
-   height: 45px;
+    height: 45px;
 }
 .mini_profile_link {
     display: block;
diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
index 87d39c2f..ac930514 100644
--- a/core/templates/core/macros.jinja
+++ b/core/templates/core/macros.jinja
@@ -10,21 +10,26 @@
 
 {% macro user_mini_profile(user) %}
 <div id="user_profile">
-    <div id="pictures">
-        {% if user.profile_pict %}
-        <img src="{{ user.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" />
+
+    <div id="right_column">
+        <div id="pictures">
+            {% if user.profile_pict %}
+            <img src="{{ user.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" />
+            {% endif %}
+        </div>
+    </div>
+    <div id="left_column">
+        <p>{{ user.get_full_name() }}</p>
+        {% if user.nick_name %}
+        <p id="nickname">&laquo; {{ user.nick_name }} &raquo;</p>
+        {% endif %}
+        {% if user.date_of_birth %}
+            <p>{% trans %}Born: {% endtrans %}{{ user.date_of_birth|date("d/m/Y") }} ({{ user.get_age() }})</p>
+        {% endif %}
+        {% if user.promo %}
+        <p><img src="{{ static('core/img/promo_%02d.png' % user.promo) }}" alt="Promo {{ user.promo }}" class="promo_pict" />
+        {% trans %}Promo: {% endtrans %}{{ user.promo }}</p>
         {% endif %}
     </div>
-    <p>{{ user.get_full_name() }}</p>
-    {% if user.nick_name %}
-    <p id="nickname">&laquo; {{ user.nick_name }} &raquo;</p>
-    {% endif %}
-    {% if user.date_of_birth %}
-        <p>{% trans %}Born: {% endtrans %}{{ user.date_of_birth|date("d/m/Y") }} ({{ user.get_age() }})</p>
-    {% endif %}
-    {% if user.promo %}
-    <p><img src="{{ static('core/img/promo_%02d.png' % user.promo) }}" alt="Promo {{ user.promo }}" class="promo_pict" />
-    {% trans %}Promo: {% endtrans %}{{ user.promo }}</p>
-    {% endif %}
 </div>
 {%- endmacro %}
diff --git a/core/templates/core/user_detail.jinja b/core/templates/core/user_detail.jinja
index 839c94ac..50e17853 100644
--- a/core/templates/core/user_detail.jinja
+++ b/core/templates/core/user_detail.jinja
@@ -8,30 +8,34 @@
 
 <div id="user_profile_container">
     <div id="user_profile">
-        <div id="pictures">
-            {% if profile.profile_pict %}
-            <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" />
-            {% endif %}
-            <p><em>{{ profile.quote }}</em></p>
+        <div id="right_column">
+            <div id="pictures">
+                {% if profile.profile_pict %}
+                <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" />
+                {% endif %}
+            </div>
+            <p id="quote"><em>{{ profile.quote }}</em></p>
+        </div>
+        <div id="left_column">
+            <h4>{{ profile.get_full_name() }}</h4>
+            {% if profile.nick_name %}
+            <p id="nickname">&laquo; {{ profile.nick_name }} &raquo;</p>
+            {% endif %}
+            {% if profile.date_of_birth %}
+            <p>{% trans %}Born: {% endtrans %}{{ profile.date_of_birth|date("d/m/Y") }}</p>
+            {% endif %}
+            {% if profile.department != "NA" %}
+            <p>{{ profile.department }}{{ profile.semester }}
+            {% endif %}
+            {% if profile.dpt_option %}
+            <br>{% trans %}Option: {% endtrans %}{{ profile.dpt_option }}
+            {% endif %}
+            </p>
+            {% if profile.promo %}
+            <p><img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}" alt="Promo {{ profile.promo }}" class="promo_pict" />
+            {% trans %}Promo: {% endtrans %}{{ profile.promo }}</p>
+            {% endif %}
         </div>
-        <h4>{{ profile.get_full_name() }}</h4>
-        {% if profile.nick_name %}
-        <p id="nickname">&laquo; {{ profile.nick_name }} &raquo;</p>
-        {% endif %}
-        {% if profile.date_of_birth %}
-        <p>{% trans %}Born: {% endtrans %}{{ profile.date_of_birth|date("d/m/Y") }}</p>
-        {% endif %}
-        {% if profile.department != "NA" %}
-        <p>{{ profile.department }}{{ profile.semester }}
-        {% endif %}
-        {% if profile.dpt_option %}
-        <br>{% trans %}Option: {% endtrans %}{{ profile.dpt_option }}
-        {% endif %}
-        </p>
-        {% if profile.promo %}
-        <p><img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}" alt="Promo {{ profile.promo }}" class="promo_pict" />
-        {% trans %}Promo: {% endtrans %}{{ profile.promo }}</p>
-        {% endif %}
     </div>
 </div>