Skip to content

Commit fb6165b

Browse files
w3bdesignw3bdesign
committed
Fix cart summary mobile
1 parent 008c46e commit fb6165b

File tree

4 files changed

+80
-46
lines changed

4 files changed

+80
-46
lines changed

‎public/css/app.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -883,6 +883,32 @@ video {
883883
height: 1rem;
884884
}
885885

886+
.min-h-fit {
887+
min-height: -webkit-fit-content;
888+
min-height: -moz-fit-content;
889+
min-height: fit-content;
890+
}
891+
892+
.min-h-max {
893+
min-height: -webkit-max-content;
894+
min-height: -moz-max-content;
895+
min-height: max-content;
896+
}
897+
898+
.min-h-full {
899+
min-height: 100%;
900+
}
901+
902+
.min-h-screen {
903+
min-height: 100vh;
904+
}
905+
906+
.min-h-min {
907+
min-height: -webkit-min-content;
908+
min-height: -moz-min-content;
909+
min-height: min-content;
910+
}
911+
886912
.w-full {
887913
width: 100%;
888914
}

‎public/js/app.js‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20949,16 +20949,13 @@ var _hoisted_5 = {
2094920949
"class": "text-white"
2095020950
};
2095120951
var _hoisted_6 = {
20952-
"class": "bg-gray-600 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0"
20953-
};
20954-
var _hoisted_7 = {
2095520952
"class": "flex-1 sm:flex-none"
2095620953
};
20957-
var _hoisted_8 = {
20958-
"class": "border-grey-light border hover:bg-gray-100"
20954+
var _hoisted_7 = {
20955+
"class": "border-grey-light border hover:bg-gray-100 h-12"
2095920956
};
2096020957

20961-
var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
20958+
var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
2096220959
"class": "mt-2 mx-auto cursor-pointer",
2096320960
alt: "Remove icon",
2096420961
"aria-label": "Remove",
@@ -20967,56 +20964,63 @@ var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementV
2096720964
/* HOISTED */
2096820965
);
2096920966

20970-
var _hoisted_10 = [_hoisted_9];
20967+
var _hoisted_9 = [_hoisted_8];
20968+
var _hoisted_10 = {
20969+
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
20970+
};
2097120971
var _hoisted_11 = {
20972-
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center"
20972+
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
2097320973
};
2097420974
var _hoisted_12 = {
20975-
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center"
20975+
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
2097620976
};
2097720977
var _hoisted_13 = {
20978-
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center"
20979-
};
20980-
var _hoisted_14 = {
2098120978
key: 0,
2098220979
"class": "container mx-auto flex flex-wrap flex-row justify-end items-end content-center"
2098320980
};
20984-
var _hoisted_15 = {
20981+
var _hoisted_14 = {
2098520982
"class": "p-4 text-xl font-bold text-right"
2098620983
};
2098720984
function render(_ctx, _cache, $props, $setup, $data, $options) {
20988-
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("table", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("thead", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("tr", _hoisted_6, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.tableHeaders, function (header) {
20989-
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("th", {
20990-
key: header,
20991-
scope: "col",
20992-
"class": "p-3 text-center"
20993-
}, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(header), 1
20994-
/* TEXT */
20995-
);
20996-
}), 64
20997-
/* STABLE_FRAGMENT */
20998-
))])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("tbody", _hoisted_7, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.getCartContent, function (_ref) {
20985+
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("table", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("thead", _hoisted_5, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.getCartContent, function (_content) {
20986+
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("tr", {
20987+
key: _ctx.content,
20988+
"class": "bg-gray-600 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0"
20989+
}, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.tableHeaders, function (header) {
20990+
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("th", {
20991+
key: header,
20992+
scope: "col",
20993+
"class": "p-3 text-center h-12"
20994+
}, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(header), 1
20995+
/* TEXT */
20996+
);
20997+
}), 64
20998+
/* STABLE_FRAGMENT */
20999+
))]);
21000+
}), 128
21001+
/* KEYED_FRAGMENT */
21002+
))]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("tbody", _hoisted_6, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.getCartContent, function (_ref) {
2099921003
var name = _ref.name,
2100021004
quantity = _ref.quantity,
2100121005
price = _ref.price;
2100221006
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("tr", {
2100321007
key: _ctx.id,
2100421008
"class": "flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0"
21005-
}, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("a", {
21009+
}, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("a", {
2100621010
tabindex: "0",
2100721011
onClick: _cache[0] || (_cache[0] = function ($event) {
2100821012
return _ctx.removeProductFromCart(_ctx.product);
2100921013
})
21010-
}, _hoisted_10)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(name), 1
21014+
}, _hoisted_9)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(name), 1
2101121015
/* TEXT */
21012-
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(quantity), 1
21016+
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(quantity), 1
2101321017
/* TEXT */
21014-
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice(price)), 1
21018+
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice(price)), 1
2101521019
/* TEXT */
2101621020
)]);
2101721021
}), 128
2101821022
/* KEYED_FRAGMENT */
21019-
))])]), $setup.getCartQuantity ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_15, "Total: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice($setup.getCartTotal)), 1
21023+
))])]), $setup.getCartQuantity ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_14, "Total: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice($setup.getCartTotal)), 1
2102021024
/* TEXT */
2102121025
)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])], 64
2102221026
/* STABLE_FRAGMENT */
@@ -21537,7 +21541,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2153721541
/* CLASS */
2153821542
)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
2153921543
id: "nav-toggle",
21540-
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["burger burger-squeeze", {
21544+
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["mt-2 burger burger-squeeze", {
2154121545
open: _ctx.expandedMenu
2154221546
}]),
2154321547
"aria-haspopup": "true",

‎resources/js/components/Checkout/CartSummary.vue‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,30 @@
22
<div class="w-full">
33
<h3 class="h-12 py-4 mt-2 text-2xl font-bold text-center">Cart summary</h3>
44
</div>
5+
56
<div class="relative mt-2 overflow-x-auto">
67
<table
78
class="w-full flex flex-row flex-no-wrap sm:bg-white rounded-lg overflow-hidden sm:shadow-lg my-5"
89
>
910
<caption class="sr-only">
1011
Cart summary
1112
</caption>
13+
1214
<thead class="text-white">
13-
<tr
14-
class="bg-gray-600 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0"
15-
>
16-
<th
17-
v-for="header in tableHeaders"
18-
:key="header"
19-
scope="col"
20-
class="p-3 text-center"
15+
<template v-for="_content in getCartContent" :key="content">
16+
<tr
17+
class="bg-gray-600 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0"
2118
>
22-
{{ header }}
23-
</th>
24-
</tr>
19+
<th
20+
v-for="header in tableHeaders"
21+
:key="header"
22+
scope="col"
23+
class="p-3 text-center h-12"
24+
>
25+
{{ header }}
26+
</th>
27+
</tr>
28+
</template>
2529
</thead>
2630
<tbody class="flex-1 sm:flex-none">
2731
<template
@@ -30,7 +34,7 @@
3034
class="border-grey-light border hover:bg-gray-100 p-3 text-center"
3135
>
3236
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
33-
<td class="border-grey-light border hover:bg-gray-100">
37+
<td class="border-grey-light border hover:bg-gray-100 h-12">
3438
<a tabindex="0" @click="removeProductFromCart(product)">
3539
<img
3640
class="mt-2 mx-auto cursor-pointer"
@@ -40,13 +44,13 @@
4044
/>
4145
</a>
4246
</td>
43-
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center">
47+
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center h-12">
4448
{{ name }}
4549
</td>
46-
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center">
50+
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center h-12">
4751
{{ quantity }}
4852
</td>
49-
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center">
53+
<td class="border-grey-light border hover:bg-gray-100 p-3 text-center h-12">
5054
{{ formatPrice(price) }}
5155
</td>
5256
</tr>

‎resources/js/components/Header/MobileMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="self-center block w-full mr-4">
2727
<button
2828
id="nav-toggle"
29-
class="burger burger-squeeze"
29+
class="mt-2 burger burger-squeeze"
3030
aria-haspopup="true"
3131
:aria-expanded="expandedMenu"
3232
aria-controls="menu"

0 commit comments

Comments
 (0)