From 233f0a22aff8cbf5aa11d9fc7926814a484ef8e9 Mon Sep 17 00:00:00 2001
From: Sam Light <samlight1994@gmail.com>
Date: Wed, 2 Apr 2025 00:04:42 +0100
Subject: Created icons for sorting

---
 resources/scss/main.scss        | 38 ++++++++++++++++++++++++++++++++++++++
 resources/svg/sortable-down.svg | 23 +++++++++++++++++++++++
 resources/svg/sortable-up.svg   | 23 +++++++++++++++++++++++
 resources/svg/sortable.svg      | 28 ++++++++++++++++++++++++++++
 resources/views/table.blade.php | 17 ++++++++++++-----
 5 files changed, 124 insertions(+), 5 deletions(-)
 create mode 100644 resources/svg/sortable-down.svg
 create mode 100644 resources/svg/sortable-up.svg
 create mode 100644 resources/svg/sortable.svg

(limited to 'resources')

diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index e69de29..1ba548e 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -0,0 +1,38 @@
+th {
+  .ordered {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    &::after {
+      display: block;
+      content: "";
+      width: 13px;
+      height: 16px;
+      opacity: 0.5;
+      background-image: url('../svg/sortable.svg');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+
+  .ordered-asc::after,
+  .ordered-desc::after
+  {
+    opacity: 1;
+  }
+
+  .ordered-asc::after {
+    background-image: url('../svg/sortable-down.svg');
+  }
+
+  .ordered-desc::after {
+    background-image: url('../svg/sortable-up.svg');
+  }
+}
diff --git a/resources/svg/sortable-down.svg b/resources/svg/sortable-down.svg
new file mode 100644
index 0000000..d4d5d19
--- /dev/null
+++ b/resources/svg/sortable-down.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="150.76077"
+   height="199.67154"
+   viewBox="0 0 39.888787 52.829761"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-6.5139393,-0.00342273)">
+    <path
+       style="fill:#000000;stroke:#000000;stroke-width:0.264583"
+       id="path1-5"
+       d="m 20.455914,9.8688898 -10.300609,0 5.150305,-8.92058944 z"
+       transform="matrix(3.6945189,0,0,-2.1968419,-30.088531,54.335204)" />
+  </g>
+</svg>
diff --git a/resources/svg/sortable-up.svg b/resources/svg/sortable-up.svg
new file mode 100644
index 0000000..9dae1ef
--- /dev/null
+++ b/resources/svg/sortable-up.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="150.76077"
+   height="199.67154"
+   viewBox="0 0 39.888787 52.829761"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-6.5139393,-0.00342273)">
+    <path
+       style="fill:#000000;stroke:#000000;stroke-width:0.264583"
+       id="path1"
+       d="m 20.455914,9.8688898 -10.300609,0 5.150305,-8.92058944 z"
+       transform="matrix(3.707522,0,0,2.2368556,-30.287552,-1.5259543)" />
+  </g>
+</svg>
diff --git a/resources/svg/sortable.svg b/resources/svg/sortable.svg
new file mode 100644
index 0000000..eb177ef
--- /dev/null
+++ b/resources/svg/sortable.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="150.76077"
+   height="199.67154"
+   viewBox="0 0 39.888787 52.829761"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-6.5139393,-0.00342273)">
+    <path
+       style="fill:#000000;stroke:#000000;stroke-width:0.264583"
+       id="path1"
+       d="m 20.455914,9.8688898 -10.300609,0 5.150305,-8.92058944 z"
+       transform="matrix(3.707522,0,0,2.2368556,-30.287552,-1.5259543)" />
+    <path
+       style="fill:#000000;stroke:#000000;stroke-width:0.264583"
+       id="path1-5"
+       d="m 20.455914,9.8688898 -10.300609,0 5.150305,-8.92058944 z"
+       transform="matrix(3.6945189,0,0,-2.1968419,-30.088531,54.335204)" />
+  </g>
+</svg>
diff --git a/resources/views/table.blade.php b/resources/views/table.blade.php
index 448a290..ec2cd25 100644
--- a/resources/views/table.blade.php
+++ b/resources/views/table.blade.php
@@ -11,12 +11,19 @@
                 @foreach($columns as $column)
                     <th
                         scope="col"
-                        @class(['sortable' => $column->isSortable()])
-                        @if($column->isSortable())
-                            wire:click="orderBy('{{ $column->name }}')"
-                        @endif
                     >
-                        {{ $column->getTitle() }}
+                        <div
+                            @class([
+                                'ordered' => $column->isSortable(),
+                                'ordered-asc' => $column->name === $order && $orderDirection === 'asc',
+                                'ordered-desc' => $column->name === $order && $orderDirection === 'desc',
+                            ])
+                            @if($column->isSortable())
+                                wire:click="orderBy('{{ $column->name }}')"
+                            @endif
+                        >
+                            {{ $column->getTitle() }}
+                        </div>
                     </th>
                 @endforeach
             </tr>
-- 
cgit v1.2.3