From 10e79f3dbeb54b8eed1ac78f64fb22f7215e5c04 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Fri, 9 Dec 2022 19:00:29 +0100
Subject: [PATCH] Display image

---
 src/character/static/character/details.css    |  4 ++
 .../character/character_details.html          | 61 ++++++++++++-------
 2 files changed, 42 insertions(+), 23 deletions(-)
 create mode 100644 src/character/static/character/details.css

diff --git a/src/character/static/character/details.css b/src/character/static/character/details.css
new file mode 100644
index 0000000..45409f0
--- /dev/null
+++ b/src/character/static/character/details.css
@@ -0,0 +1,4 @@
+img.profile-pic {
+    max-width: 240px;
+    max-height: 240px;
+}
diff --git a/src/character/templates/character/character_details.html b/src/character/templates/character/character_details.html
index 8af0263..e97d1ed 100644
--- a/src/character/templates/character/character_details.html
+++ b/src/character/templates/character/character_details.html
@@ -3,32 +3,47 @@
 {% load django_bootstrap5 %}
 {% load character_extras %}
 
+{% block head_end %}
+    <link rel="stylesheet" href="{% static "character/details.css" %}">
+{% endblock %}
+
 {% block title %}{{ character.name }}{% endblock %}
 
 {% block content %}
-    <h1>{{ character.name }}</h1>
-    <p>
-        Joueur : {{ character.player.get_full_name|default:character.player.username }}
-    </p>
-    {% if party %}
-        <p>
-            Groupe : <a href="{{ party.get_absolute_url }}">{{ party }}</a>
-            &bullet;
-            Joueurs : {% for other in party.characters.all %}<a href="{% url "character:view" pk=other.pk %}?party={{ party.pk }}">{{ other }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
-        </p>
-    {% endif %}
-    {% if character|managed_by:user %}
-        <p>
-            <a href="{% url "character:change" pk=character.pk %}">Modifier</a>
-            &bullet;
-            <a href="{% url "character:reset_stats" pk=character.pk %}" id="reset-stats">Réinitialiser les stats</a>
-        </p>
-    {% endif %}
-    <p>
-        {{ character.race.name }} {{ character.profile.name }} niv. {{ character.level }}<br>
-        {{ character.get_gender_display }}, {{ character.age }} ans, {{ character.height_m }}m, {{ character.weight }}kg (IMC: {{ character.imc|floatformat }})
-    </p>
-    {% include "character/snippets/character_details/states.html" %}
+    <div class="d-flex flex-column flex-sm-row justify-content-between">
+        <div>
+            <h1>{{ character.name }}</h1>
+            <p>
+                Joueur : {{ character.player.get_full_name|default:character.player.username }}
+            </p>
+            {% if party %}
+                <p>
+                    Groupe : <a href="{{ party.get_absolute_url }}">{{ party }}</a>
+                    &bullet;
+                    Joueurs : {% for other in party.characters.all %}<a href="{% url "character:view" pk=other.pk %}?party={{ party.pk }}">{{ other }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
+                </p>
+            {% endif %}
+            {% if character|managed_by:user %}
+                <p>
+                    <a href="{% url "character:change" pk=character.pk %}">Modifier</a>
+                    &bullet;
+                    <a href="{% url "character:reset_stats" pk=character.pk %}" id="reset-stats">Réinitialiser les stats</a>
+                </p>
+            {% endif %}
+            <p>
+                {{ character.race.name }} {{ character.profile.name }} niv. {{ character.level }}<br>
+                {{ character.get_gender_display }}, {{ character.age }} ans, {{ character.height_m }}m, {{ character.weight }}kg (IMC: {{ character.imc|floatformat }})
+            </p>
+            {% include "character/snippets/character_details/states.html" %}
+        </div>
+        {% if character.profile_picture %}
+            <img class="rounded-5 profile-pic"
+                src="{{ character.profile_picture.url }}"
+                alt="Image de profil"
+            >
+        {% endif %}
+    </div>
+
     <div class="row">
         <div class="col-sm-12 col-md-6 col-lg-6 col-xl">
             <table id="fight-table" class="table table-hover table-sm">