Merge pull request 'profile followers, following ui' (#24) from PostController into master

Reviewed-on: #24

public/css/components/mini_profile.css

@@ -0,0 +1,76 @@
+.profile-list {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  margin: 0 auto;
+}
+
+.profile-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 1rem;
+  margin: 5px;
+  background-color: white;
+
+  .profile-user {
+    display: flex;
+    flex-direction: rows;
+    justify-content: space-around;
+    align-items: center;
+
+    .profile-name {
+      font-size: 2em;
+      font-weight: bold;
+    }
+
+    a {
+      font-size: 2em;
+      font-weight: bold;
+      margin: 0;
+    }
+  }
+
+  .profile-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .profile-info-element {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.profile-card img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+
+.profile-card a {
+  display: block;
+  margin-top: 10px;
+  text-decoration: none;
+  color: #333;
+}
+
+.profile-card a:hover {
+  text-decoration: underline;
+}
+
+.title {
+  color: white;
+  font-size: 2em;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}

templates/profil/follow-list.html.twig

@@ -1,51 +1,16 @@
-{# templates/profil/list.html.twig #}
-
 {% extends 'base.html.twig' %}
 
 {% block title %}Liste des Profils{% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+<link rel="stylesheet" href="{{ asset('css/components/mini_profile.css') }}">
-    <link rel="stylesheet" href="{{ asset('public/css/components/profil.css') }}">
-    <style>
-        .profile-list {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        .profile-card {
-            width: calc(100% / 5);
-            padding: 10px;
-            box-sizing: border-box;
-            text-align: center;
-            border: 1px solid #ddd;
-            margin: 5px;
-        }
-        .profile-card img {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-        }
-        .profile-card a {
-            display: block;
-            margin-top: 10px;
-            text-decoration: none;
-            color: #333;
-        }
-        .profile-card a:hover {
-            text-decoration: underline;
-        }
-    </style>
 {% endblock %}
 
 {% block body %}
-
-    <h1> {{title }} : </h1>
 <div class="profile-list">
+    <h1 class="title"> {{title }} : </h1>
     {% for profil in profils %}
-            <div class="profile-card">
+        {% include 'profil/mini_profile.html.twig' with { 'profil': profil } %}
-                <img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ profil.name }}" alt="Profile Image">
-                <a href="{{ path('profil_show', {id: profil.id}) }}">{{ profil.name }}</a>
-            </div>
     {% endfor %}
 </div>
 {% endblock %}

templates/profil/mini_profile.html.twig

@@ -0,0 +1,21 @@
+<a href="{{ path('profil_show', {id: profil.id}) }}">
+    <div class="profile-card">
+        <div class="profile-user">
+            <img src="https://api.dicebear.com/8.x/big-smile/svg?translateY=-5&seed={{ profil.name }}" alt="Profile Image">
+            <span class="profile-name">{{ profil.name }}</span>
+            
+			<div class="profile-info-element">
+                <span>{{ profil.posts|length }}</span>
+                <span>Posts</span>
+            </div>
+            <div class="profile-info-element">
+                <span>{{ profil.followers|length }}</span>
+                <span>Followers</span>
+            </div>
+            <div class="profile-info-element">
+                <span>{{ profil.following|length }}</span>
+                <span>Following</span>
+            </div>
+        </div>
+    </div>
+</a>