From a2334fa1448160f38bf837931470c2ee1d214d23 Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Wed, 1 May 2024 13:49:13 +0200
Subject: [PATCH] Brandlist styling (#61)

---
 .../views/page_builder/brandlist.blade.php    | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/resources/views/page_builder/brandlist.blade.php b/resources/views/page_builder/brandlist.blade.php
index 065791e..784a370 100644
--- a/resources/views/page_builder/brandlist.blade.php
+++ b/resources/views/page_builder/brandlist.blade.php
@@ -10,28 +10,41 @@
     });
 @endphp
 
-<div class="lg:container">
-    <div class="flex flex-col">
-        @if($include_table_of_contents)
-            <ul class="flex">
-                @foreach($grouped->keys() as $letter)
-                    <li><a href="#{{ $letter }}">{{ $letter }}</a></li>
-                @endforeach
-            </ul>
-        @endif
-
-        <div class="flex flex-col">
-            @foreach($grouped as $letter => $group)
-                <div class="flex w-full">
-                    <span id="{{ $letter }}" class="text-xl">
-                        {{ $letter }}
-                    </span>
-                    <ul class="flex row-wrap">
-                        @foreach($group as $brand)
-                            <li>
-                                <a href="{{ $brand->url() }}">
-                                    @if(!$brand->image->isEmpty())
-                                        @responsive($brand->image->first())
+<div class="container mb-16">
+    <h1 class="text-3xl font-bold mb-4">@lang('All brands')</h1>
+    <div class="bg-inactive-100 p-4 rounded-xl">
+        @foreach(array_merge(['0-9'], range('A','Z')) as $letter)
+            <a class="px-1 text-inactive hover:text-neutral transition" href="#{{ $letter }}" v-smooth-scroll="{}">{{ $letter }}</a>
+        @endforeach
+    </div>
+    
+    <div class="mt-6">
+        @foreach(array_merge(['0-9'], range('A','Z')) as $letter)
+            @php
+                if ($letter === '0-9') {
+                    $brandsByLetter = $brands->filter(function ($brand) {
+                        return !ctype_alpha(substr($brand->title, 0, 1));
+                    });
+                } else {
+                    $brandsByLetter = $brands->filter(function ($brand) use ($letter) {
+                        return strtoupper(substr($brand->title, 0, 1)) === $letter;
+                    });
+                }
+            @endphp
+            @if ($brandsByLetter->count() > 0)
+                <div id="{{ $letter }}" class="mt-6">
+                    <div class="mb-1 text-xl font-bold">{{ $letter }}</div>
+                    <ul class="grid grid-cols-2 sm:grid-cols-4 xl:grid-cols-6 gap-3 text-neutral text-sm">
+                        @foreach($brandsByLetter as $brand)
+                            <li class="col-span-1">
+                                <a
+                                    href="{{ $brand->url() }}"
+                                    class="flex flex-1 items-center justify-center text-sm w-full border rounded-xl p-4 hover:border-primary h-32 md:text-base lg:h-40"
+                                >
+                                    @if($brand->image)
+                                        <div class="flex w-full h-full *:flex *:flex-1">
+                                            @responsive($brand->image, ['class' => 'object-contain w-full h-full max-h-44'])
+                                        </div>
                                     @else
                                         {{ $brand->title }}
                                     @endif
@@ -40,7 +53,7 @@
                         @endforeach
                     </ul>
                 </div>
-            @endforeach
-        </div>
+            @endif
+        @endforeach
     </div>
 </div>