From c020daa37aaa4959381149e4f2fcc48d622dd103 Mon Sep 17 00:00:00 2001
From: rem <remi.arnal@etu.uca.fr>
Date: Thu, 13 Jun 2024 16:22:13 +0200
Subject: [PATCH] profile followers, following ui

---
 public/css/components/mini_profile.css  |  76 ++++++++++++++++++++++++
 templates/profil/follow-list.html.twig  |  49 +++------------
 templates/profil/mini_profile.html.twig |  21 +++++++
 var/data.db                             | Bin 114688 -> 114688 bytes
 4 files changed, 104 insertions(+), 42 deletions(-)
 create mode 100644 public/css/components/mini_profile.css
 create mode 100644 templates/profil/mini_profile.html.twig

diff --git a/public/css/components/mini_profile.css b/public/css/components/mini_profile.css
new file mode 100644
index 0000000..dcfe646
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/templates/profil/follow-list.html.twig b/templates/profil/follow-list.html.twig
index 4ade7db..3b712a1 100644
--- a/templates/profil/follow-list.html.twig
+++ b/templates/profil/follow-list.html.twig
@@ -1,53 +1,18 @@
-{# 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('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>
+<link rel="stylesheet" href="{{ asset('css/components/mini_profile.css') }}">
 {% endblock %}
 
 {% block body %}
-
-    <h1> {{title }} : </h1>
-    <div class="profile-list">
-        {% for profil in profils %}
-            <div class="profile-card">
-                <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>
+<div class="profile-list">
+    <h1 class="title"> {{title }} : </h1>
+    {% for profil in profils %}
+        {% include 'profil/mini_profile.html.twig' with { 'profil': profil } %}
+    {% endfor %}
+</div>
 {% endblock %}
 
 {% block javascripts %}
diff --git a/templates/profil/mini_profile.html.twig b/templates/profil/mini_profile.html.twig
new file mode 100644
index 0000000..9647ae3
--- /dev/null
+++ b/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>
diff --git a/var/data.db b/var/data.db
index c72125219906b5a30531ef0f421d047425ebe973..b7061f07ea1c0b8976f266796dada38590e00206 100644
GIT binary patch
delta 754
zcmZ{h&ubGw6vt;~-*%HtXTQ-#u_}motR;sEBC;Xs|KJa#qKF1dYD4Ko50VwU33juG
zcv1Xu5<%It63~lY0-^`S9|%!f3<Yh4*56PHIx|~;fI1HzvoqiKzMq{}tvc1JGro@Z
zhwFFo{`lbK{D7=5SNaSkZ1<+UvR9O!Wk)vTUg@jI%T0er9HeFB`vc?+vYla2h#LNN
zcvl(N?-i8`TM4I`9|qf^>B1FKSEs_@WTV)|KF71Hjr{P)@bHo2V~0jhtX7vPUF&kI
zmsdtdjvg!9E-o?`HHJ5Mi92|X7OvquZs8_sD$f2Z;@|-43*fZd&e;~{RuAs6jP9(K
zImqfvFxk^tNIYbAa+$$f=Kdj08G&PRmpWe)?#OL%aY1o~3>~~sEUz%BxLUZ4I>P@&
z91JF0d&qE65AL$=#3=z2S+dgHa0$a@X)a}|%`FY~ORj~>WP1A(tWn|FRajy+rWn5A
z1Ew&C866WVD)$rnsB^AYPl6ib*`n}@ad5_)sJ|ZKdUS*thEI5pMN{$&eYQ3yVOyF(
z*g`*-McP!jSX2dV{R$s3i?;H3064@=K^LW!l%m=1Yr9R`Ief*!a$7SXhiu)4^hZu<
zIt=r8r@DPnot`ALDPaHvHRm_*m6Z%0GcHO@ltd{G_KRkz#)qW-oqQPd)gDokF7Z@W
P(2Y1~QS<2}-<<gYO}eLa

delta 986
zcmZ{iO=uHA6vuaFciU{z*_SpcVn668)L!g|X|>pr67--qPl6zVn>3%@?Ji0BAqY*p
zcoA%yL%k?!FNz0AQ!VJlUPRD~A|j$~u?nSD+G?$!g3e5eo}AtN&zm=Y-v0K@=5m#}
zT;+H@YMy8~ikgdOZ?v~dlH?~r3Esji+=5GR0pifBFX{98v~KEW^bpx1%VdU}Ck{D9
zg2g-`g<!Drh`UCWG*pWd(S+Sqtx5>RWgIrFustM(X^26~Dbx5Hl=DmrGr>DRs(6`t
zc_bU7ZEbA@v#&eY;O4o*IBC+1V_395O6{Q-4W*+NyBjsW+lxo+5gKWUX0p_b(y*QG
zkD4?YNfws+ZjQNB=FxnES*uRrQFp|S*p$`d_H5dAXgF#Nxn;h$D{Tx9W%gknpBPAG
z;;H`8fjDK+XkyqL$i#-JWm%5HZ_C<?xbIlPU>6s<Gl_&j#Y9Rd^af5==(4;AMQqE8
z4rYz?IX`Q)i#?JX$-9x0wqr?Car6Geqy)d<JA8r9umaEF8O*~qc+bw{A-saea2uxK
z3fzOcFj>rpVN8_~QvF<IpCW6hMugQuy<8O#s&mDJTdKsShlg%1npnGpp;BlCPpe!M
zE;1J^%bHe3ocM>>v;xcUn$f(27mRgQ@Lgq`kKh4J!9+1{lo=JlsQ5&E0f_}9_VVI_
z5er6{2%H^AVRsAFxN(P)hyR6CSsyWM^Y%8tPuMPbolWquRRt`T$v0sUKEcOQweu7T
zi<cV}{%tek-cT`rQ7=s`q>u-Guo`O;e1$b;TLP-eyvJC@ypJ-k#!gSTRwZ^?tIV|k
zh1K76E({wIY{Lf2e1NG9Kz^25mtY;fvD7kuqdK?Mgoxu|WiXCQ@EpgB`O|nVK8aGK
zy%lMa)>5mvT%E`Hf0Z)I7yqLI9f7Xajzg^n0yGflIT+~a?7Dv)Re6i~C(7K*S+w8t
E2e`@VbpQYW

-- 
2.36.3