artist page responsive

haarlem-festival-gr2 · Apr 7, 2024 · ed78801 · ed78801
1 parent f4900d5
commit ed78801
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 127 deletions.
diff --git a/app/controller/artistDetails.php b/app/controller/artistDetails.php
@@ -16,8 +16,15 @@
     $artist = $jazzService->getArtistById($artistId);
     $performances = $jazzService->getPerformancesByArtist($artist);
 
+    $words = explode(' ', $artist->Bio);
+    $wordsPerPart = ceil(count($words) / 2);
+    $bioPart1 = implode(' ', array_slice($words, 0, $wordsPerPart));
+    $bioPart2 = implode(' ', array_slice($words, $wordsPerPart));
+
     Route::render('jazz.artist.main', [
         'artist' => $artist,
         'performances' => $performances,
+        'bioPart1' => $bioPart1,
+        'bioPart2' => $bioPart2,
     ]);
 });
diff --git a/app/pages/jazz/artist/albums.blade.php b/app/pages/jazz/artist/albums.blade.php
@@ -0,0 +1,12 @@
+<div class="p-4">
+    <div class="text-center mb-4 md:mb-0">
+        <div class="p-8 text-center bg-pink-200 rounded-lg overflow-hidden cursor-pointer">
+            <iframe style="border-radius: 12px"
+                    src="https://open.spotify.com/embed/album/{{ $album }}?utm_source=generator"
+                    width="100%" height="352" allowfullscreen=""
+                    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                    loading="lazy">
+            </iframe>
+        </div>
+    </div>
+</div>
diff --git a/app/pages/jazz/artist/header.blade.php b/app/pages/jazz/artist/header.blade.php
@@ -0,0 +1,7 @@
+<div class="w-full relative bg-center min-h-[10vh] sm:min-h-[30vh] md:min-h-[70vh]" style="background-image: url('{{ $artist->HeaderImg }}'); background-size: cover;">
+    <div class="absolute inset-0 flex flex-col justify-center items-center p-4 sm:p-8 text-center text-white">
+        <h1 class="text-2xl sm:text-4xl md:text-7xl font-medium mb-2 font-noto-serif uppercase">
+            {{ $artist->Name }}
+        </h1>
+    </div>
+</div>
diff --git a/app/pages/jazz/artist/main.blade.php b/app/pages/jazz/artist/main.blade.php
@@ -14,154 +14,77 @@
 <body class="font-montserrat">
 
 @include('main.navbar')
-<!-- header-->
-<div class="relative w-full">
-    @if ($artist->HeaderImg)
-        <img src="{{ $artist->HeaderImg }}" alt="{{ $artist->Name }}" class="w-full"/>
-    @else
-        <!-- remove?-->
-        <p class="text-gray-500">Header Image</p>
-    @endif
 
-    <div class="absolute inset-0 flex flex-col justify-center items-center p-8 text-center text-white">
-        <h1 class="text-7xl font-medium mb-2 font-noto-serif uppercase">
-            {{ $artist->Name }}
-        </h1>
-    </div>
+@include('jazz.artist.header')
+
+<div class="text-center pt-6">
+    <h2 class="text-xl sm:text-2xl md:text-4xl font-noto-serif">
+        Biography of {{ $artist->Name }}
+    </h2>
 </div>
 
-<!-- bio with img-->
-<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-    <div class="flex flex-col bg-[#FCC040] p-8 m-10">
-        <div class="text-left mx-auto">
-            @php
-                $bioPart1 = 'Some bio';
-                $bioPart2 = 'Some bio';
-                if($artist->Bio){
-                    $words = explode(' ', $artist->Bio);
-                    $wordsPerPart = ceil(count($words) / 2);
-                    $bioPart1 = implode(' ', array_slice($words, 0, $wordsPerPart));
-                    $bioPart2 = implode(' ', array_slice($words, $wordsPerPart));
-                }
-            @endphp
-            <p class="mt-4 leading-relaxed">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-2 p-2">
+
+    <div class="flex flex-col items-center justify-center bg-[#FCC040] p-4 md:p-8 m-8 rounded-lg">
+        <div class="text-left mx-auto overflow-hidden">
+            <p class="leading-relaxed">
                 {{ $bioPart1 }}
             </p>
         </div>
     </div>
-    <div class="p-6 m-4 overflow-hidden text-center">
-        @if($artist->ArtistImg1)
-            <img src="{{ $artist->ArtistImg1 }}" alt="{{ $artist->Name }}"
-                 class="object-contain max-h-80 mx-auto"/>
-        @else
-            <p class="text-gray-500">Image</p>
-        @endif
+
+    <div class="p-4 mx-2 my-4 overflow-hidden text-center">
+        <div class="bg-pink-500 p-4 inline-block max-h-[60vh] overflow-hidden rounded-lg">
+            <img src="{{ $artist->ArtistImg2 }}" alt="{{ $artist->Name }}" class="max-h-[50vh] w-auto rounded-lg shadow-lg"/>
+        </div>
     </div>
-    <div class="p-6 m-4 overflow-hidden text-center">
-        @if($artist->ArtistImg2)
-            <img src="{{ $artist->ArtistImg2 }}" alt="{{ $artist->Name }}"
-                 class="object-contain max-h-80 mx-auto"/>
-        @else
-            <p class="text-gray-500">Image</p>
-        @endif
+
+    <div class="p-4 mx-2 my-4 overflow-hidden text-center">
+        <div class="bg-pink-500 p-4 inline-block max-h-[60vh] overflow-hidden rounded-lg">
+            <img src="{{ $artist->ArtistImg1 }}" alt="{{ $artist->Name }}" class="max-h-[50vh] w-auto rounded-lg shadow-lg "/>
+        </div>
     </div>
-    <div class="flex flex-col p-8 m-10 bg-[#FCC040]">
+
+    <div class="flex flex-col items-center justify-center bg-[#FCC040] p-4 md:p-8 m-8 rounded-lg">
         <div class="text-left mx-auto overflow-hidden">
-            <p class="mt-4 leading-relaxed">
+            <p class="leading-relaxed">
                 {{ $bioPart2 }}
             </p>
         </div>
     </div>
-</div>
 
-<!-- albums-->
-<div class="text-center py-6">
-    <h2 class="text-4xl font-noto-serif">
-        Discover albums of {{ $artist->Name }}!
-    </h2>
 </div>
-<div class="container mx-auto p-6">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        @foreach ($artist->Albums as $album)
-            <div class="p-4">
-                <div class="p-4 text-center bg-pink-200 rounded-lg overflow-hidden cursor-pointer block">
-                    <iframe style="border-radius: 12px"
-                            src="https://open.spotify.com/embed/album/{{ $album }}?utm_source=generator"
-                            width="100%" height="352" allowfullscreen=""
-                            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-                            loading="lazy">
-                    </iframe>
-                </div>
-            </div>
-        @endforeach
+    <!-- albums-->
+    <div class="text-center py-6">
+        <h2 class="text-3xl md:text-4xl font-noto-serif">
+            Discover albums of {{ $artist->Name }}
+        </h2>
     </div>
-</div>
-
-<!-- songs-->
-<div class="text-center py-6">
-    <h2 class="text-4xl font-noto-serif">
-        Discover most popular songs of {{ $artist->Name }}!
-    </h2>
-</div>
-<div class="container mx-auto p-6">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        @foreach ($artist->Songs as $song)
-            <div class="p-4">
-                <div class="text-center mb-4 md:mb-0">
-                    <div class="p-4 text-center overflow-hidden cursor-pointer block">
-                        <iframe style="border-radius: 12px"
-                                src="https://open.spotify.com/embed/track/{{ $song }}?utm_source=generator"
-                                width="100%" height="352" allowfullscreen=""
-                                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-                                loading="lazy">
-                        </iframe>
-                    </div>
-                </div>
-            </div>
-        @endforeach
+    <div class="container mx-auto p-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            @foreach ($artist->Albums as $album)
+                @include('jazz.artist.albums')
+            @endforeach
+        </div>
     </div>
-</div>
 
-<!-- performances and btn-->
-@foreach ($performances as $performance)
-    <div class="text-center">
-        <div class="flex flex-col bg-pink-200 items-center p-8 m-6">
-            <p>
-                Come to {{ $performance->Day->Venue->Name }}
-                on {{ date('j F', strtotime($performance->StartDateTime)) }}
-                to enjoy {{ $artist->Name }}'s music!<br/>
-                {{ date('H:i', strtotime($performance->StartDateTime)) }}
-                - {{ date('H:i', strtotime($performance->EndDateTime)) }}
-                @if (trim($performance->Details) !== '')
-                    | {{ $performance->Details }}
-                @endif
-                @if ($performance->Price != '0.00')
-                    - € {{ number_format($performance->Price, 2) }}
-                @endif
-            </p>
-            @if ($performance->Price != '0.00')
-                <div class="mt-4 flex justify-center w-full">
-                    @if ($performance->AvailableTickets > 0)
-                        <a href="/agenda/purchase?name={{$artist->Name}}" class="p-3 rounded-md font-semibold uppercase cursor-pointer text-xs w-48 bg-yellow-400 text-black">
-                            Buy Tickets!</a>
-                    @else
-                        <button class="p-3 rounded-md font-semibold uppercase cursor-pointer text-xs w-48 bg-red-500 text-white" disabled>
-                            Sold Out
-                        </button>
-                    @endif
-                </div>
-            @else
-                <div class="mt-4 flex justify-center">
-                    <span class="inline-block p-3 rounded-md font-semibold uppercase cursor-pointer text-xs text-black">
-                        For free!
-                    </span>
-                </div>
-            @endif
+    <!-- songs-->
+    <div class="text-center py-6">
+        <h2 class="text-3xl font-noto-serif">
+            Discover most popular songs of {{ $artist->Name }}!
+        </h2>
+    </div>
+    <div class="container mx-auto p-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            @foreach ($artist->Songs as $song)
+                @include('jazz.artist.songs')
+            @endforeach
         </div>
     </div>
-@endforeach
 
-@include('main.footer')
+        @include('jazz.artist.performances')
+
+    @include('main.footer')
 
 </body>
 </html>
diff --git a/app/pages/jazz/artist/performances.blade.php b/app/pages/jazz/artist/performances.blade.php
@@ -0,0 +1,39 @@
+
+<!-- performances and btn-->
+@foreach ($performances as $performance)
+    <div class="text-center">
+        <div class="flex flex-col bg-[#FCC040] items-center p-4 md:p-8 m-6">
+            <p class=" text-base sm:text-lg">
+                Come to {{ $performance->Day->Venue->Name }}
+                on {{ date('j F', strtotime($performance->StartDateTime)) }}
+                to enjoy {{ $artist->Name }}'s music!<br/>
+                {{ date('H:i', strtotime($performance->StartDateTime)) }}
+                - {{ date('H:i', strtotime($performance->EndDateTime)) }}
+                @if (trim($performance->Details) !== '')
+                    | {{ $performance->Details }}
+                @endif
+                @if ($performance->Price != '0.00')
+                    - € {{ number_format($performance->Price, 2) }}
+                @endif
+            </p>
+            @if ($performance->Price != '0.00')
+                <div class="mt-4 flex justify-center w-full">
+                    @if ($performance->AvailableTickets > 0)
+                        <a href="/agenda/purchase?name={{$artist->Name}}" class="p-2 sm:p-3 rounded-md font-semibold uppercase cursor-pointer text-sm sm:text-base w-48 bg-pink-500 text-black">
+                            Buy Tickets!</a>
+                    @else
+                        <button class="p-2 sm:p-3 rounded-md font-semibold uppercase cursor-pointer text-sm sm:text-base w-48 bg-red-500 text-white" disabled>
+                            Sold Out
+                        </button>
+                    @endif
+                </div>
+            @else
+                <div class="mt-4 flex justify-center">
+                    <span class="inline-block p-2 sm:p-3 rounded-md font-semibold uppercase cursor-pointer text-sm sm:text-base text-black">
+                        For free!
+                    </span>
+                </div>
+            @endif
+        </div>
+    </div>
+@endforeach
diff --git a/app/pages/jazz/artist/songs.blade.php b/app/pages/jazz/artist/songs.blade.php
@@ -0,0 +1,12 @@
+<div class="p-4">
+    <div class="text-center mb-4 md:mb-0">
+        <div class="p-8  bg-pink-200  text-center overflow-hidden cursor-pointer block">
+            <iframe style="border-radius: 12px"
+                    src="https://open.spotify.com/embed/track/{{ $song }}?utm_source=generator"
+                    width="100%" height="352" allowfullscreen=""
+                    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                    loading="lazy">
+            </iframe>
+        </div>
+    </div>
+</div>
diff --git a/app/pages/jazz/overview/header.blade.php b/app/pages/jazz/overview/header.blade.php
@@ -1,7 +1,7 @@
 <div class="relative w-full">
     <img src="{{ $festivalEvent->getImgPath() }}" alt="{{ $festivalEvent->getFestivalEventName() }}" class="w-full object-cover"/>
     <div class="absolute inset-0 flex flex-col justify-center items-center p-4 sm:p-8 text-center text-white">
-        <h1 class="text-3xl sm:text-5xl md:text-7xl font-bold mb-2 font-serif">
+        <h1 class="text-2xl sm:text-4xl md:text-7xl font-medium mb-2 font-serif">
             {{ $festivalEvent->getFestivalEventName() }}
         </h1>
         <p class="text-xl sm:text-2xl md:text-2xl mb-2 font-bold">