inviton-powerduck 0.0.67 → 0.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.mohf-search-wrap {
|
|
2
|
+
position: sticky;
|
|
3
|
+
top: -1px;
|
|
4
|
+
z-index: 9999;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mohf-input-outer .mohf-input-inner {
|
|
8
|
+
min-height: 54px;
|
|
9
|
+
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.15);
|
|
10
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
11
|
+
border-radius: 15px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
background: white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.mohf-input-searchicon-wrap {
|
|
17
|
+
text-align: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mohf-input-flexwrap {
|
|
21
|
+
height: 100%;
|
|
22
|
+
min-height: 52px;
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.mohf-input-searchicon,
|
|
27
|
+
.mohf-input-filtercon-wrap {
|
|
28
|
+
font-size: 20px;
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.mohf-serach-preview-spacer {
|
|
33
|
+
height: 60px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.mohf-input-main-inner {
|
|
37
|
+
text-align: left;
|
|
38
|
+
max-width: 800px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.mohf-input-inner {
|
|
42
|
+
max-width: 800px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mohf-input-first-line-text,
|
|
46
|
+
.mohf-input-second-line-text {
|
|
47
|
+
line-height: 17px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.mohf-input-second-line-text {
|
|
51
|
+
font-size: 13px;
|
|
52
|
+
font-size: 12.4px;
|
|
53
|
+
letter-spacing: 0.1px;
|
|
54
|
+
color: #777373;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mohf-mobile-root {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.mohf-desktop-root {
|
|
62
|
+
display: block;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
@media (max-width: 991.98px) {
|
|
67
|
+
.mohf-mobile-root {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mohf-desktop-root {
|
|
72
|
+
display: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.mohf-search-wrap[data-stuck] {
|
|
76
|
+
background: #393562;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mohf-search-wrap[data-stuck] .mohf-input {
|
|
80
|
+
margin-top: -10px;
|
|
81
|
+
padding-bottom: 5px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width:768px) {
|
|
86
|
+
.mohf-input {
|
|
87
|
+
padding-bottom: 40px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mohf-search-wrap[data-stuck] {
|
|
91
|
+
margin-left: -12px;
|
|
92
|
+
padding-left: 12px;
|
|
93
|
+
margin-right: -12px;
|
|
94
|
+
padding-right: 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.mohf-input-first-line-text {
|
|
98
|
+
display: inline-block;
|
|
99
|
+
padding-right: 30px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.mohf-input-second-line-text {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media(min-width:992px) {
|
|
108
|
+
.mohf-input {
|
|
109
|
+
padding-left: 0;
|
|
110
|
+
padding-right: 0;
|
|
111
|
+
padding-bottom: 40px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.mohf-search-wrap {
|
|
115
|
+
position: static;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.mohf-search-wrap.mohf-search-desktop-hidden {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.hotel-infotainment-mobsearch-desktop-hidden .mohf-serach-preview-spacer {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@media(max-width:440px) {
|
|
128
|
+
.mohf-input {
|
|
129
|
+
padding-left: 12px;
|
|
130
|
+
padding-right: 12px;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { toNative, Prop } from "vue-facing-decorator";
|
|
2
|
+
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
3
|
+
import FlexContainer from "../form/flex-container";
|
|
4
|
+
import FlexFormItem from "../form/form-item-flex";
|
|
5
|
+
import PowerduckState from "../../app/powerduck-state";
|
|
6
|
+
import Modal, { ModalSize } from "../modal/modal";
|
|
7
|
+
import ModalBody from "../modal/modal-body";
|
|
8
|
+
import ModalFooter from "../modal/modal-footer";
|
|
9
|
+
import Button from "../button/button";
|
|
10
|
+
import { ButtonLayout } from "../button/button-layout";
|
|
11
|
+
import './css/mobile-optimized-hero-filter.css';
|
|
12
|
+
|
|
13
|
+
interface MobileOptimizedHeroFilterArgs {
|
|
14
|
+
caption: string
|
|
15
|
+
isLoading?: boolean
|
|
16
|
+
cssClass?: string
|
|
17
|
+
clearFilterText?: string
|
|
18
|
+
submitText?: string
|
|
19
|
+
clickedClear?: () => void
|
|
20
|
+
clickedSubmit?: () => void
|
|
21
|
+
mobileModalCssClass?: string
|
|
22
|
+
mobileShowClearFilters?: boolean
|
|
23
|
+
mobileModalSize?: ModalSize
|
|
24
|
+
mobileFirstLineText: string
|
|
25
|
+
mobileSecondLineText: string
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@Component
|
|
30
|
+
class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHeroFilterArgs> implements MobileOptimizedHeroFilterArgs {
|
|
31
|
+
@Prop() caption: string
|
|
32
|
+
@Prop() isLoading: boolean
|
|
33
|
+
@Prop() cssClass?: string
|
|
34
|
+
@Prop() clearFilterText?: string
|
|
35
|
+
@Prop() clickedClear?: () => void
|
|
36
|
+
@Prop() clickedSubmit?: () => void
|
|
37
|
+
@Prop() mobileModalCssClass?: string
|
|
38
|
+
@Prop() mobileShowClearFilters?: boolean
|
|
39
|
+
@Prop() mobileFirstLineText: string
|
|
40
|
+
@Prop() mobileSecondLineText: string
|
|
41
|
+
@Prop() mobileModalSize?: ModalSize
|
|
42
|
+
|
|
43
|
+
showFilterModal() {
|
|
44
|
+
this.getModal().show();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
hideFilterModal() {
|
|
48
|
+
this.getModal().hide();
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
private getModal(): typeof Modal.prototype {
|
|
52
|
+
return this.$refs.mobileModal as typeof Modal.prototype;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
render(h) {
|
|
56
|
+
return (
|
|
57
|
+
<div class="mohf-root">
|
|
58
|
+
<div class="mohf-mobile-root">
|
|
59
|
+
<div class="mohf-upper-spacer"></div>
|
|
60
|
+
<div class="mohf-input">
|
|
61
|
+
<div class="mohf-input-outer" onClick={() => { this.showFilterModal() }}>
|
|
62
|
+
<div class="mohf-input-inner">
|
|
63
|
+
<FlexContainer cssClass="mohf-input-flexwrap" fullWidthOnMobile={false}>
|
|
64
|
+
<FlexFormItem cssClass="mohf-input-searchicon-wrap" width={50} flexFill={false}>
|
|
65
|
+
<i class="icon icon-magnifier mohf-input-searchicon"></i>
|
|
66
|
+
</FlexFormItem>
|
|
67
|
+
|
|
68
|
+
<FlexFormItem cssClass="mohf-input-main-wrap" flexFill={true}>
|
|
69
|
+
<div class="mohf-input-main-inner">
|
|
70
|
+
<div class="mohf-input-first-line-text">{this.mobileFirstLineText || (PowerduckState.getResourceValue('search') + '...')}</div>
|
|
71
|
+
|
|
72
|
+
{this.mobileSecondLineText?.length > 0 &&
|
|
73
|
+
<div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
</div>
|
|
77
|
+
</FlexFormItem>
|
|
78
|
+
|
|
79
|
+
<FlexFormItem cssClass="mohf-input-filtercon-wrap" width={50} flexFill={false}>
|
|
80
|
+
<i class="icon icon-options mohf-input-filtericon"></i>
|
|
81
|
+
</FlexFormItem>
|
|
82
|
+
</FlexContainer>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="mohf-desktop-root">
|
|
88
|
+
{this.$slots.default?.()}
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<Modal title={this.caption} ref="mobileModal" size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
|
|
92
|
+
<ModalBody>
|
|
93
|
+
<div class="mohf-modal-body-wrap">
|
|
94
|
+
{this.$slots.default?.()}
|
|
95
|
+
</div>
|
|
96
|
+
</ModalBody>
|
|
97
|
+
<ModalFooter>
|
|
98
|
+
{this.mobileShowClearFilters &&
|
|
99
|
+
<Button
|
|
100
|
+
layout={ButtonLayout.Secondary}
|
|
101
|
+
text={this.clearFilterText}
|
|
102
|
+
fullWidth={true}
|
|
103
|
+
clicked={() => {
|
|
104
|
+
this.clickedClear();
|
|
105
|
+
}}
|
|
106
|
+
/>
|
|
107
|
+
}
|
|
108
|
+
<Button
|
|
109
|
+
layout={ButtonLayout.Primary}
|
|
110
|
+
text={PowerduckState.getResourceValue('search')}
|
|
111
|
+
fullWidth={true}
|
|
112
|
+
cssClass="submit text-center"
|
|
113
|
+
clicked={() => {
|
|
114
|
+
this.clickedSubmit();
|
|
115
|
+
this.hideFilterModal();
|
|
116
|
+
}}
|
|
117
|
+
/>
|
|
118
|
+
</ModalFooter>
|
|
119
|
+
</Modal>
|
|
120
|
+
</div>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const MobileOptimizedHeroFilter = toNative(MobileOptimizedHeroFilterComponent)
|
|
126
|
+
export default MobileOptimizedHeroFilter
|