Skip to content

Commit 1469015

Browse files
w3bdesignw3bdesign
committed
Fix styling mobile search results
1 parent 7f0a698 commit 1469015

File tree

4 files changed

+50
-75
lines changed

4 files changed

+50
-75
lines changed

‎public/css/app.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -759,6 +759,10 @@ video {
759759
margin-top: 2rem;
760760
}
761761

762+
.mr-8 {
763+
margin-right: 2rem;
764+
}
765+
762766
.block {
763767
display: block;
764768
}
@@ -1896,6 +1900,14 @@ video {
18961900

18971901
@media (min-width: 768px) {
18981902

1903+
.md\:mt-0 {
1904+
margin-top: 0px;
1905+
}
1906+
1907+
.md\:mr-0 {
1908+
margin-right: 0px;
1909+
}
1910+
18991911
.md\:block {
19001912
display: block;
19011913
}

‎public/js/app.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22647,6 +22647,9 @@ var _hoisted_17 = /*#__PURE__*/_withScopeId(function () {
2264722647
var _hoisted_18 = {
2264822648
"class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
2264922649
};
22650+
var _hoisted_19 = {
22651+
"class": "mt-6 w-full block md:hidden"
22652+
};
2265022653
function render(_ctx, _cache) {
2265122654
var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
2265222655
var _component_cart_component = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("cart-component");
@@ -22682,7 +22685,7 @@ function render(_ctx, _cache) {
2268222685
return [_hoisted_17];
2268322686
}),
2268422687
_: 1 /* STABLE */
22685-
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])])]);
22688+
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_19, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_search)])]);
2268622689
}
2268722690

2268822691
/***/ }),
@@ -22704,7 +22707,7 @@ var _hoisted_1 = {
2270422707
key: 0
2270522708
};
2270622709
var _hoisted_2 = {
22707-
"class": "flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md"
22710+
"class": "mt-6 md:mt-0 flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md"
2270822711
};
2270922712
var _hoisted_3 = {
2271022713
"class": "w-full"
@@ -22713,7 +22716,7 @@ var _hoisted_4 = {
2271322716
"class": "flex justify-end"
2271422717
};
2271522718
var _hoisted_5 = {
22716-
"class": "h-[70px] w-[70px]"
22719+
"class": "mr-8 md:mr-0"
2271722720
};
2271822721
var _hoisted_6 = ["alt", "src"];
2271922722
var _hoisted_7 = {

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

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,61 @@
11
<template>
2-
<header
3-
role="banner"
4-
class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
5-
>
2+
<header role="banner" class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6">
63
<div class="flex flex-wrap justify-between">
74
<div class="pr-2 my-2 overflow-hidden">
85
<div class="ml-4 lg:ml-0 hidden md:block">
96
<router-link to="/">
10-
<img
11-
alt="Logo"
12-
class="h-20 lg:h-24"
13-
aria-label="Nettbutikk logo"
14-
src="../../../img/svg/Logo.svg"
15-
/>
7+
<img alt="Logo" class="h-20 lg:h-24" aria-label="Nettbutikk logo" src="../../../img/svg/Logo.svg" />
168
</router-link>
179
</div>
1810
<router-link to="/">
19-
<img
20-
alt="Mobile logo"
21-
class="h-16 md:hidden block w-32"
22-
aria-label="Nettbutikk logo"
23-
src="../../../img/svg/MobileLogo.svg"
24-
/>
11+
<img alt="Mobile logo" class="h-16 md:hidden block w-32" aria-label="Nettbutikk logo"
12+
src="../../../img/svg/MobileLogo.svg" />
2513
</router-link>
14+
15+
16+
17+
2618
</div>
2719
<div class="lg:hidden block">
2820
<cart-component />
2921
</div>
3022
<mobile-menu />
3123
<div class="hidden lg:w-1/12 lg:block" />
32-
<div
33-
id="nav-content"
34-
class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
35-
aria-expanded="false"
36-
>
24+
<div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
25+
aria-expanded="false">
3726
<div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
38-
<nav
39-
id="block-main"
40-
role="navigation"
41-
aria-labelledby="block-main-menu"
42-
>
43-
<ul
44-
class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
45-
>
46-
<li
47-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
48-
>
27+
<nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
28+
<ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
29+
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
4930
<search />
5031
</li>
51-
<li
52-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
53-
>
32+
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
5433
<router-link tabindex="0" to="/">
5534
<span
56-
class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
57-
>
35+
class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue">
5836
Home
5937
</span>
6038
</router-link>
6139
</li>
62-
<li
63-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
64-
>
40+
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
6541
<router-link tabindex="0" to="/products">
6642
<span
67-
class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
68-
>
43+
class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue">
6944
Products
7045
</span>
7146
</router-link>
7247
</li>
73-
<li
74-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
75-
>
48+
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
7649
<cart-component />
7750
</li>
7851
</ul>
7952
</nav>
8053
</div>
8154
</div>
8255
</div>
56+
<div class="mt-6 w-full block md:hidden">
57+
<search />
58+
</div>
8359
</header>
8460
</template>
8561

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

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,26 @@
11
<template>
22
<input
33
class="w-full px-3 py-2 my-2 border-2 border-gray-300 rounded-md text-sm focus:border-blue-500 focus:outline-none transition-all duration-300"
4-
type="text"
5-
v-model="searchTerm"
6-
placeholder="Search"
7-
/>
4+
type="text" v-model="searchTerm" placeholder="Search" />
85

96
<div v-if="data && data.length > 0 && searchTerm.length > 0">
107
<div
11-
class="flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md"
12-
>
8+
class="mt-6 md:mt-0 flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md">
139
<div class="w-full">
14-
<div
15-
v-for="product in data"
16-
:key="product.id"
17-
class="border-t-2 border-b-2 border-grey-500 py-4 w-full"
18-
>
19-
<RouterLink
20-
:to="{
21-
name: 'single.product',
22-
params: { slug: product.slug },
23-
}"
24-
>
10+
<div v-for="product in data" :key="product.id" class="border-t-2 border-b-2 border-grey-500 py-4 w-full">
11+
<RouterLink :to="{
12+
name: 'single.product',
13+
params: { slug: product.slug },
14+
}">
2515
<div class="flex justify-end">
26-
<div class="h-[70px] w-[70px]">
27-
<img
28-
v-if="product.imageUrl"
16+
<div class="mr-8 md:mr-0">
17+
<img v-if="product.imageUrl"
2918
class="transform scale-70 max-w-[90px] max-h-full transition ease-in-out duration-200 transform-origin-center left-0 w-65 h-auto object-contain"
30-
:alt="product.name"
31-
:src="product.imageUrl"
32-
/>
19+
:alt="product.name" :src="product.imageUrl" />
3320
</div>
3421
<div class="w-[170px]">
3522
<div class="product__name">
36-
<div
37-
class="product__title"
38-
:title="product.name"
39-
>
23+
<div class="product__title" :title="product.name">
4024
{{ product.name }}
4125
</div>
4226
</div>

0 commit comments

Comments
 (0)