add select2 for tags filter

Author: LordSimal

resources/css/style.css

@@ -119,3 +119,7 @@
     color: #d33d44;
     content: "\0057";
 }
+
+.ss-main {
+    height: 100%;
+}

templates/Packages/index.php

@@ -32,23 +32,20 @@
 
         <div class="grid grid-cols-4 gap-4">
             <?php foreach ($packages as $package): ?>
-                <div class="border-2 rounded-2xl border-black p-4 flex flex-col justify-between">
-                    <div>
-                        <div class="text-center text-xl mb-2"><?= h($package->package) ?></div>
-                        <div class="flex justify-center gap-4 mb-4">
-                            <a class="underline" target="_blank" href="<?= $package->repo_url ?>"><?= __('Repository') ?></a>
-                            <a class="underline" target="_blank" href="<?= $package->packagist_url ?>"><?= __('Packagist') ?></a>
-                        </div>
-                    </div>
-                    <div class="flex flex-wrap gap-2 mb-4">
+                <div class="border-2 rounded-2xl border-black flex flex-col justify-between">
+                    <a class="text-center text-xl py-2 mb-4 bg-gray-300 rounded-t-xl hover:underline"
+                       target="_blank" href="<?= $package->repo_url ?>">
+                        <?= h($package->package) ?>
+                    </a>
+                    <div class="flex flex-wrap gap-2 px-4">
                         <?php foreach($package->tags as $tag): ?>
                             <a href="?slug=<?= $tag->slug ?>" class="text-xs rounded-3xl px-2 py-1 text-white
                             <?= str_starts_with($tag->label, 'PHP') ? 'bg-blue-400' : 'bg-red-500' ?>">
                                 <?= $tag->label ?>
                             </a>
                         <?php endforeach; ?>
                     </div>
-                    <div class="flex justify-between [&_svg]:w-6">
+                    <div class="flex justify-between [&_svg]:w-6 p-4">
                         <div class="flex gap-2">
                             <?php include WWW_ROOT . 'img' . DS . 'download.svg'; ?>
                             <?= $this->Number->format($package->downloads) ?>

templates/layout/default.php

@@ -29,6 +29,9 @@
 
     <?= $this->Html->css(['cake']) ?>
 
+    <script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
+    <link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet"/>
+
     <?= $this->fetch('meta') ?>
     <?= $this->fetch('css') ?>
     <?= $this->fetch('script') ?>
@@ -53,5 +56,8 @@
             <?= $this->fetch('content') ?>
         </div>
     </main>
+    <script>
+        new SlimSelect({select: 'select'})
+    </script>
 </body>
 </html>