From 8753ec2db162d0e7a5ef856a34bff630e42045c1 Mon Sep 17 00:00:00 2001
From: NuwanJ <nuwanjaliyagoda@gmail.com>
Date: Fri, 8 Nov 2024 07:52:45 +0530
Subject: [PATCH] Contributors - UI changes

---
 .../frontend/pages/contributors.blade.php     | 93 ++++++++++---------
 1 file changed, 50 insertions(+), 43 deletions(-)

diff --git a/resources/views/frontend/pages/contributors.blade.php b/resources/views/frontend/pages/contributors.blade.php
index e934c1a..6ea70f5 100644
--- a/resources/views/frontend/pages/contributors.blade.php
+++ b/resources/views/frontend/pages/contributors.blade.php
@@ -10,7 +10,7 @@
                     <x-frontend.card>
                         <x-slot name="body">
 
-                            <h3>#{{ $key + 1 }} {{ $project['title'] }}</h3>
+                            <h3>Project {{ $key + 1 }} {{ $project['title'] }}</h3>
                             <p>{{ $project['description'] }}</p>
 
                             <ul>
@@ -18,58 +18,65 @@
                                 <li><a target="_blank" href="{{ $project['page_url'] }}">Project Details / Blog</a></li>
                             </ul>
 
-                            <h3 class="pt-3">Project Team</h3>
-                            <div class="row" id="teamCards">
-                                @foreach ($project['team'] as $teamMember)
-                                    <div class="col-4 col-sm-3 col-md-2 col-lg-2 d-flex" style="padding: 3px;">
-                                        <div class="card p-1 flex-fill">
-                                            <div class="overflow-hidden">
-                                                <img class="card-img-top img-fluid" src="{{ $teamMember['profile_image'] }}"
-                                                    alt="{{ $teamMember['name'] }}">
-                                            </div>
-                                            <div class="card-body p-0 d-flex flex-column">
-                                                <h4 class="profile-title card-title text-center pt-1 text-wrap">
-                                                    {{ $teamMember['name'] }}
-                                                </h4>
+                            <div class="d-flex flex-row flex-wrap mb-3">
+                                <div class="flex-shrink-1 mx-3">
+                                    <h3 class="pt-3">Project Team</h3>
+                                    <div class="d-flex flex-row flex-wrap justify-content-start" id="teamCards">
+                                        @foreach ($project['team'] as $teamMember)
+                                            <div class="d-flex" style="width: 120px; padding: 2px;">
+                                                <div class="card p-1 flex-fill">
+                                                    <div class="overflow-hidden">
+                                                        <img class="card-img-top img-fluid"
+                                                            src="{{ $teamMember['profile_image'] }}"
+                                                            alt="{{ $teamMember['name'] }}">
+                                                    </div>
+                                                    <div class="card-body p-0 d-flex flex-column">
+                                                        <h4 class="profile-title card-title text-center pt-1 text-wrap">
+                                                            {{ $teamMember['name'] }}
+                                                        </h4>
 
-                                                @if ($teamMember['profile_url'])
-                                                    <div class="d-grid mt-auto px-2 pb-2">
-                                                        <a href="{{ $teamMember['profile_url'] }}" target="_blank"
-                                                            class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                        @if ($teamMember['profile_url'])
+                                                            <div class="d-grid mt-auto px-2 pb-2">
+                                                                <a href="{{ $teamMember['profile_url'] }}" target="_blank"
+                                                                    class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                            </div>
+                                                        @endif
                                                     </div>
-                                                @endif
+                                                </div>
                                             </div>
-                                        </div>
+                                        @endforeach
                                     </div>
-                                @endforeach
-                            </div>
+                                </div>
 
-                            <h3 class="pt-3">Project Supervisors</h3>
-                            <div class="row" id="supervisorCards">
-                                @foreach ($project['supervisors'] as $supervisor)
-                                    <div class="col-4 col-sm-3 col-md-2 col-lg-2 d-flex" style="padding: 3px;">
-                                        <div class="card p-1 flex-fill">
-                                            <div class="overflow-hidden">
-                                                <img class="card-img-top img-fluid" src="{{ $supervisor['profile_image'] }}"
-                                                    alt="{{ $supervisor['name'] }}">
-                                            </div>
-                                            <div class="card-body p-0 d-flex flex-column">
-                                                <h4 class="profile-title card-title text-center pt-1 text-wrap">
-                                                    {{ $supervisor['name'] }}
-                                                </h4>
+                                <div class="flex-shrink-1 mx-3">
+                                    <h3 class="pt-3">Project Supervisors/Mentors</h3>
+                                    <div class="d-flex flex-row flex-wrap justify-content-start" id="supervisorCards">
+                                        @foreach ($project['supervisors'] as $supervisor)
+                                            <div class="d-flex" style="width: 120px; padding: 2px;">
+                                                <div class="card p-1 flex-fill">
+                                                    <div class="overflow-hidden">
+                                                        <img class="card-img-top img-fluid"
+                                                            src="{{ $supervisor['profile_image'] }}"
+                                                            alt="{{ $supervisor['name'] }}">
+                                                    </div>
+                                                    <div class="card-body p-0 d-flex flex-column">
+                                                        <h4 class="profile-title card-title text-center pt-1 text-wrap">
+                                                            {{ $supervisor['name'] }}
+                                                        </h4>
 
-                                                @if ($supervisor['profile_url'])
-                                                    <div class="d-grid mt-auto px-2 pb-2">
-                                                        <a href="{{ $supervisor['profile_url'] }}" target="_blank"
-                                                            class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                        @if ($supervisor['profile_url'])
+                                                            <div class="d-grid mt-auto px-2 pb-2">
+                                                                <a href="{{ $supervisor['profile_url'] }}" target="_blank"
+                                                                    class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                            </div>
+                                                        @endif
                                                     </div>
-                                                @endif
+                                                </div>
                                             </div>
-                                        </div>
+                                        @endforeach
                                     </div>
-                                @endforeach
+                                </div>
                             </div>
-
                         </x-slot>
                     </x-frontend.card>
                     <br />