From a9a1c780db29dfdb9345c4c9885f85279344aaeb Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 20 Dec 2023 11:33:14 +0530
Subject: [PATCH] refactor: temporarily remove details button and update styles
of order history page
---
assets/css/theme.css | 124 +++++++++------------------------
templates/customer/history.tpl | 12 ++--
2 files changed, 40 insertions(+), 96 deletions(-)
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 8d79c9a..274f908 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -949,14 +949,14 @@ select {
margin-top: 1rem;
}
-.mt-8 {
- margin-top: 2rem;
-}
-
.mt-6 {
margin-top: 1.5rem;
}
+.mt-8 {
+ margin-top: 2rem;
+}
+
.block {
display: block;
}
@@ -1021,6 +1021,10 @@ select {
height: 100%;
}
+.h-\[3rem\] {
+ height: 3rem;
+}
+
.max-h-\[40px\] {
max-height: 40px;
}
@@ -1094,8 +1098,8 @@ select {
width: max-content;
}
-.w-1\/5 {
- width: 20%;
+.max-w-6xl {
+ max-width: 72rem;
}
.max-w-\[100px\] {
@@ -1122,18 +1126,6 @@ select {
max-width: 100%;
}
-.max-w-6xl {
- max-width: 72rem;
-}
-
-.max-w-2xl {
- max-width: 42rem;
-}
-
-.max-w-3xl {
- max-width: 48rem;
-}
-
.flex-1 {
flex: 1 1 0%;
}
@@ -1156,6 +1148,21 @@ select {
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
+.border-spacing-y-\[16px\] {
+ --tw-border-spacing-y: 16px;
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.border-spacing-y-\[1rem\] {
+ --tw-border-spacing-y: 1rem;
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.border-spacing-x-\[4px\] {
+ --tw-border-spacing-x: 4px;
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1328,6 +1335,11 @@ select {
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
+.border-gray-400 {
+ --tw-border-opacity: 1;
+ border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
.bg-black\/70 {
background-color: rgb(0 0 0 / 0.7);
}
@@ -1644,11 +1656,6 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-.text-slate-500 {
- --tw-text-opacity: 1;
- color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
.underline {
text-decoration-line: underline;
}
@@ -1657,22 +1664,10 @@ select {
text-decoration-line: line-through;
}
-.no-underline {
- text-decoration-line: none;
-}
-
.underline-offset-2 {
text-underline-offset: 2px;
}
-.underline-offset-auto {
- text-underline-offset: auto;
-}
-
-.underline-offset-1 {
- text-underline-offset: 1px;
-}
-
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1738,10 +1733,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-right: 1rem;
}
-.file\:w-full::file-selector-button {
- width: 100%;
-}
-
.file\:rounded-full::file-selector-button {
border-radius: 9999px;
}
@@ -1750,11 +1741,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
border-width: 0px;
}
-.file\:bg-violet-50::file-selector-button {
- --tw-bg-opacity: 1;
- background-color: rgb(245 243 255 / var(--tw-bg-opacity));
-}
-
.file\:bg-transparent::file-selector-button {
background-color: transparent;
}
@@ -1764,11 +1750,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 1rem;
}
-.file\:py-2::file-selector-button {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
.file\:py-1::file-selector-button {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
@@ -1788,26 +1769,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
font-weight: 600;
}
-.file\:text-violet-700::file-selector-button {
- --tw-text-opacity: 1;
- color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
.file\:text-blue-950::file-selector-button {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
}
-.placeholder\:text-gray-500::-moz-placeholder {
- --tw-text-opacity: 1;
- color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.placeholder\:text-gray-500::placeholder {
- --tw-text-opacity: 1;
- color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
.last\:hidden:last-child {
display: none;
}
@@ -1873,16 +1839,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
text-decoration-line: none;
}
-.hover\:file\:bg-violet-100::file-selector-button:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-}
-
-.hover\:file\:bg-blue-900::file-selector-button:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
.hover\:file\:text-blue-900::file-selector-button:hover {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1986,18 +1942,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 0.5rem;
}
- .max-md\:leading-4 {
- line-height: 1rem;
- }
-
- .max-md\:leading-8 {
- line-height: 2rem;
- }
-
- .max-md\:leading-6 {
- line-height: 1.5rem;
- }
-
.max-md\:leading-5 {
line-height: 1.25rem;
}
@@ -2007,10 +1951,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.max-sm\:hidden {
display: none;
}
-
- .max-sm\:max-w-full {
- max-width: 100%;
- }
}
@media (min-width: 640px) {
@@ -2044,6 +1984,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
+ .md\:h-\[3rem\] {
+ height: 3rem;
+ }
+
.md\:w-1\/2 {
width: 50%;
}
diff --git a/templates/customer/history.tpl b/templates/customer/history.tpl
index c3d3e61..3a22d65 100644
--- a/templates/customer/history.tpl
+++ b/templates/customer/history.tpl
@@ -34,7 +34,7 @@
<h6 class='text-lg'>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
{if $orders}
- <table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[12px]">
+ <table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[1rem]">
<thead class="thead-default">
<tr>
<th>{l s='Order reference' d='Shop.Theme.Checkout'}</th>
@@ -48,7 +48,7 @@
</thead>
<tbody>
{foreach from=$orders item=order}
- <tr class="even:bg-gray-200 text-sm md:text-base">
+ <tr class="even:bg-gray-200 text-sm md:text-base md:h-[3rem]">
<td class="text-center">{$order.details.reference}</th>
<td class="text-center">{$order.details.order_date}</td>
<td class="text-center">{$order.totals.total.value}</td>
@@ -65,17 +65,17 @@
-
{/if}
</td>
- <td class="text-center md:flex gap-2 items-center justify-center">
- <a href="{$order.details.details_url}" data-link-action="view-order-details">
+ <td class="text-center">
+ <a href="{$order.details.details_url}" class="hidden" data-link-action="view-order-details">
<svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 17h6" /><path d="M9 13h6" /></svg>
<h2 class="text-sm md:text-base max-md:hidden">
{l s='Details' d='Shop.Theme.Customeraccount'}
</h2>
</a>
{if $order.details.reorder_url}
- <a href="{$order.details.reorder_url}">
+ <a href="{$order.details.reorder_url}" class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-reorder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3" /><path d="M16.5 8.5l2.5 2.5l2.5 -2.5" /></svg>
- <h2 class="text-sm md:text-sm max-md:hidden">
+ <h2 class="text-sm md:text-sm max-md:hidden font-medium border border-blue-950 px-2 py-1 hover:border-blue-900">
{l s='Reorder' d='Shop.Theme.Actions'}
</h2>
</a>