@woosmap/ui 3.17.0 → 3.18.0
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.
- package/package.json +1 -1
- package/src/components/Demo/MerchantDemo.js +2 -10
- package/src/components/Demo/SkeletonDemo.js +23 -10
- package/src/styles/next-website/MerchantDemo.styl +221 -0
- package/src/styles/next-website/colors.styl +8 -0
- package/src/styles/next-website/demo.styl +28 -20
- package/src/styles/next-website/mixins.styl +2 -0
- package/src/styles/next-website/variables.styl +9 -0
- package/src/styles/style-next-website.styl +1 -0
package/package.json
CHANGED
|
@@ -7,7 +7,6 @@ import Marker from '../Map/Marker';
|
|
|
7
7
|
import Button from '../Button/Button';
|
|
8
8
|
import { viewport, boundsFromViewport } from '../Map/drawOnMap';
|
|
9
9
|
import Constants from '../../Constants';
|
|
10
|
-
import geolocationSuccessImg from '../../images/geolocation-success.png';
|
|
11
10
|
import { tr } from '../utils/locale';
|
|
12
11
|
import IphoneTime from '../../images/iphone-time.png';
|
|
13
12
|
import IphoneIcons from '../../images/iphone-right-icons.png';
|
|
@@ -576,7 +575,7 @@ export default class MerchantDemo extends Component {
|
|
|
576
575
|
renderResult = () => {
|
|
577
576
|
const { transaction } = this.state;
|
|
578
577
|
return (
|
|
579
|
-
<div className="
|
|
578
|
+
<div className="merchant__wrapper">
|
|
580
579
|
<div className="merchant__mobilewrapper">
|
|
581
580
|
<div className="merchant__mobilecontainer__title">Transactions</div>
|
|
582
581
|
<div className="merchant__mobilecontainer" style={{ zIndex: 2 }}>
|
|
@@ -599,12 +598,6 @@ export default class MerchantDemo extends Component {
|
|
|
599
598
|
|
|
600
599
|
render() {
|
|
601
600
|
const { noheader } = this.props;
|
|
602
|
-
const headerTagline = (
|
|
603
|
-
<>
|
|
604
|
-
<img alt="Success" src={geolocationSuccessImg} />
|
|
605
|
-
<span>{tr("Look at some transactions we've cleaned for you!")}</span>
|
|
606
|
-
</>
|
|
607
|
-
);
|
|
608
601
|
const headerLabels = {
|
|
609
602
|
title: tr('Merchant API'),
|
|
610
603
|
desc: tr(
|
|
@@ -617,14 +610,13 @@ export default class MerchantDemo extends Component {
|
|
|
617
610
|
className="demo--merchant"
|
|
618
611
|
id="merchant-demo"
|
|
619
612
|
docLink="https://developers.woosmap.com/products/merchant-api/get-started/"
|
|
620
|
-
headerTagline={headerTagline}
|
|
621
613
|
header={headerLabels}
|
|
622
614
|
request={this.getRequestUrl()}
|
|
623
615
|
params={this.getRequestparams()}
|
|
624
616
|
body={this.getRequestBody()}
|
|
625
617
|
method="POST"
|
|
626
618
|
response={this.getResponse()}
|
|
627
|
-
|
|
619
|
+
mainContent={this.renderResult()}
|
|
628
620
|
/>
|
|
629
621
|
);
|
|
630
622
|
}
|
|
@@ -160,25 +160,34 @@ export default class SkeletonDemo extends Component {
|
|
|
160
160
|
};
|
|
161
161
|
|
|
162
162
|
render() {
|
|
163
|
-
const { result, request, response, renderCode } = this.props;
|
|
163
|
+
const { result, request, response, renderCode, withMap, mainContent } = this.props;
|
|
164
164
|
const { copied } = this.state;
|
|
165
|
+
const filters = this.renderHeaderFilters();
|
|
166
|
+
const filters2 = this.renderFooterFilters();
|
|
167
|
+
const tagLine = this.renderHeaderTagline();
|
|
165
168
|
return (
|
|
166
169
|
<article className="demo">
|
|
167
170
|
<div className="demo__content">
|
|
168
171
|
<div className="demo__showcase">
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
172
|
+
{(tagLine || filters || filters2) && (
|
|
173
|
+
<div className="demo__filters">
|
|
174
|
+
{tagLine}
|
|
175
|
+
{filters}
|
|
176
|
+
{filters2}
|
|
177
|
+
</div>
|
|
178
|
+
)}
|
|
173
179
|
<div className="demo__map">
|
|
174
|
-
<div className="map" ref={this.mapDivRef} />
|
|
180
|
+
{withMap && <div className="map" ref={this.mapDivRef} />}
|
|
181
|
+
{mainContent}
|
|
175
182
|
</div>
|
|
176
183
|
</div>
|
|
177
184
|
<div className="demo__data">
|
|
178
|
-
|
|
179
|
-
<div className="
|
|
180
|
-
|
|
181
|
-
|
|
185
|
+
{result && (
|
|
186
|
+
<div className="demo__results">
|
|
187
|
+
<div className="demo__results__header">{tr('Results')}</div>
|
|
188
|
+
<div className="demo__results__content">{result}</div>
|
|
189
|
+
</div>
|
|
190
|
+
)}
|
|
182
191
|
<div className="demo__code">
|
|
183
192
|
<Tab
|
|
184
193
|
actions={[
|
|
@@ -229,6 +238,7 @@ SkeletonDemo.contextType = TrackEventContext;
|
|
|
229
238
|
SkeletonDemo.defaultProps = {
|
|
230
239
|
renderCode: null,
|
|
231
240
|
headerFilters: null,
|
|
241
|
+
mainContent: null,
|
|
232
242
|
headerTagline: null,
|
|
233
243
|
footerFilters: null,
|
|
234
244
|
result: null,
|
|
@@ -238,6 +248,7 @@ SkeletonDemo.defaultProps = {
|
|
|
238
248
|
referer: '',
|
|
239
249
|
body: '',
|
|
240
250
|
method: '',
|
|
251
|
+
withMap: false,
|
|
241
252
|
};
|
|
242
253
|
SkeletonDemo.propTypes = {
|
|
243
254
|
renderCode: PropTypes.func,
|
|
@@ -246,8 +257,10 @@ SkeletonDemo.propTypes = {
|
|
|
246
257
|
headerFilters: PropTypes.array,
|
|
247
258
|
footerFilters: PropTypes.array,
|
|
248
259
|
result: PropTypes.node,
|
|
260
|
+
mainContent: PropTypes.node,
|
|
249
261
|
request: PropTypes.string,
|
|
250
262
|
referer: PropTypes.string,
|
|
263
|
+
withMap: PropTypes.bool,
|
|
251
264
|
body: PropTypes.string,
|
|
252
265
|
method: PropTypes.string,
|
|
253
266
|
response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
.merchant
|
|
2
|
+
&__wrapper
|
|
3
|
+
trans()
|
|
4
|
+
display flex
|
|
5
|
+
justify-content center
|
|
6
|
+
width 100%
|
|
7
|
+
zoom .9
|
|
8
|
+
padding 2rem
|
|
9
|
+
background-color #d5eaff
|
|
10
|
+
&__mobilewrapper
|
|
11
|
+
trans()
|
|
12
|
+
position relative
|
|
13
|
+
height 100%
|
|
14
|
+
margin 3rem
|
|
15
|
+
&__mobilecontainer
|
|
16
|
+
position relative
|
|
17
|
+
height 51.9rem
|
|
18
|
+
width 28rem
|
|
19
|
+
margin auto
|
|
20
|
+
box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
|
|
21
|
+
br(1)
|
|
22
|
+
&__title
|
|
23
|
+
text-align center
|
|
24
|
+
font-size 1.2rem
|
|
25
|
+
font-weight 600
|
|
26
|
+
margin 0 0 1rem 0
|
|
27
|
+
&__mobile
|
|
28
|
+
br(1)
|
|
29
|
+
font-size 1.3rem
|
|
30
|
+
width 100%
|
|
31
|
+
background-color $light
|
|
32
|
+
overflow hidden
|
|
33
|
+
&--dirty
|
|
34
|
+
&--details--dirty
|
|
35
|
+
.merchant__mobile__header
|
|
36
|
+
background #666767
|
|
37
|
+
&--clean
|
|
38
|
+
&--details
|
|
39
|
+
.merchant__mobile__header
|
|
40
|
+
background #4F70FF
|
|
41
|
+
&--details
|
|
42
|
+
position relative
|
|
43
|
+
&__header
|
|
44
|
+
padding 1.1rem
|
|
45
|
+
color #fff
|
|
46
|
+
text-transform uppercase
|
|
47
|
+
font-weight 600
|
|
48
|
+
&__nav
|
|
49
|
+
&__icons
|
|
50
|
+
flexSpread()
|
|
51
|
+
&__icons
|
|
52
|
+
img
|
|
53
|
+
max-height .8rem
|
|
54
|
+
&__nav
|
|
55
|
+
font-weight 700
|
|
56
|
+
margin-top 1.4rem
|
|
57
|
+
position relative
|
|
58
|
+
.merchant__mobile--details &
|
|
59
|
+
.merchant__mobile--details--dirty &
|
|
60
|
+
flexAxis()
|
|
61
|
+
&__avatar
|
|
62
|
+
max-width 2.4rem
|
|
63
|
+
&__back
|
|
64
|
+
max-width 1rem
|
|
65
|
+
opacity 0
|
|
66
|
+
.merchant__mobile--details &
|
|
67
|
+
.merchant__mobile--details--dirty &
|
|
68
|
+
opacity 1
|
|
69
|
+
&__button
|
|
70
|
+
sq(3)
|
|
71
|
+
position absolute
|
|
72
|
+
background-color transparent
|
|
73
|
+
left -.6rem
|
|
74
|
+
padding 0
|
|
75
|
+
display flex
|
|
76
|
+
align-items center
|
|
77
|
+
justify-content center
|
|
78
|
+
flex-shrink 0
|
|
79
|
+
&:hover
|
|
80
|
+
background-color $dark30
|
|
81
|
+
|
|
82
|
+
&__section
|
|
83
|
+
padding 1.4rem 2rem
|
|
84
|
+
background-color #f5f5f5
|
|
85
|
+
border-radius 0 0 1rem 1rem
|
|
86
|
+
height 45rem
|
|
87
|
+
.merchant__mobile--clean &
|
|
88
|
+
background-color #f3f7ff
|
|
89
|
+
.merchant__mobile--details &
|
|
90
|
+
background-color $light
|
|
91
|
+
padding 0
|
|
92
|
+
.merchant__mobile--details--dirty &
|
|
93
|
+
background-color $light
|
|
94
|
+
padding 2rem
|
|
95
|
+
&__map
|
|
96
|
+
overflow hidden
|
|
97
|
+
height 20rem
|
|
98
|
+
&__no-map
|
|
99
|
+
height 6rem
|
|
100
|
+
&__date
|
|
101
|
+
color #b7b7b7
|
|
102
|
+
margin-bottom .6rem
|
|
103
|
+
.merchant__mobile--clean &
|
|
104
|
+
color #8697b1
|
|
105
|
+
.merchant__mobile--details &
|
|
106
|
+
.merchant__mobile--details--dirty &
|
|
107
|
+
text-align center
|
|
108
|
+
margin .4rem 0 0 0
|
|
109
|
+
.merchant__mobile--details--dirty &
|
|
110
|
+
margin 0 0 2rem 0
|
|
111
|
+
&__transaction
|
|
112
|
+
flexSpread()
|
|
113
|
+
br(.6)
|
|
114
|
+
trans()
|
|
115
|
+
background-color $light
|
|
116
|
+
font-size 1.3rem
|
|
117
|
+
cursor pointer
|
|
118
|
+
height 4.8rem
|
|
119
|
+
padding 0 .8rem
|
|
120
|
+
box-shadow 0 0 .3rem .1rem $dark10
|
|
121
|
+
width 100%
|
|
122
|
+
margin-bottom .8rem
|
|
123
|
+
&:hover
|
|
124
|
+
background-color #666767
|
|
125
|
+
transform translateX(.5rem)
|
|
126
|
+
.merchant__mobile--clean &
|
|
127
|
+
background-color #4F70FF
|
|
128
|
+
.merchant__mobile__section__transaction
|
|
129
|
+
&__link
|
|
130
|
+
color $light
|
|
131
|
+
&__info
|
|
132
|
+
&__name
|
|
133
|
+
color $light
|
|
134
|
+
&__date
|
|
135
|
+
color $light50
|
|
136
|
+
&__price
|
|
137
|
+
color $light
|
|
138
|
+
&__link
|
|
139
|
+
color #999
|
|
140
|
+
margin 0 .6rem 0 1.4rem
|
|
141
|
+
img
|
|
142
|
+
max-width .7rem
|
|
143
|
+
&__info
|
|
144
|
+
width 100%
|
|
145
|
+
min-width 0
|
|
146
|
+
margin-right 1.2rem
|
|
147
|
+
.merchant__mobile--clean &
|
|
148
|
+
flexMiddle()
|
|
149
|
+
.merchant__mobile--details &
|
|
150
|
+
margin 0
|
|
151
|
+
&__address
|
|
152
|
+
padding 1rem 2rem
|
|
153
|
+
color#999
|
|
154
|
+
text-align center
|
|
155
|
+
&__logo
|
|
156
|
+
sq(3)
|
|
157
|
+
br(50)
|
|
158
|
+
position relative
|
|
159
|
+
margin-right 1.2rem
|
|
160
|
+
flex-shrink 0
|
|
161
|
+
.merchant__mobile--details &
|
|
162
|
+
width 100%
|
|
163
|
+
height 5rem
|
|
164
|
+
img
|
|
165
|
+
ellipsis()
|
|
166
|
+
br(50)
|
|
167
|
+
sq(3)
|
|
168
|
+
background #fff
|
|
169
|
+
border .1rem solid #f1f1f1
|
|
170
|
+
box-shadow 0 0 .6rem $dark10
|
|
171
|
+
|
|
172
|
+
.merchant__mobile--details &
|
|
173
|
+
sq(8)
|
|
174
|
+
position absolute
|
|
175
|
+
left calc(50% - 4rem)
|
|
176
|
+
top -4rem
|
|
177
|
+
box-shadow 0 0 1rem $dark25
|
|
178
|
+
border .3rem solid #fff
|
|
179
|
+
&__name
|
|
180
|
+
ellipsis()
|
|
181
|
+
font-weight 500
|
|
182
|
+
line-height 1.6rem
|
|
183
|
+
margin-bottom .3rem
|
|
184
|
+
.merchant__mobile--details &
|
|
185
|
+
.merchant__mobile--details--dirty &
|
|
186
|
+
text-align center
|
|
187
|
+
font-size 2rem
|
|
188
|
+
&__date
|
|
189
|
+
color #a1a1a1
|
|
190
|
+
font-size 1.2rem
|
|
191
|
+
line-height 1.4rem
|
|
192
|
+
&__price
|
|
193
|
+
font-weight 700
|
|
194
|
+
font-size 1.5rem
|
|
195
|
+
.merchant__mobile--details &
|
|
196
|
+
.merchant__mobile--details--dirty &
|
|
197
|
+
margin-top 1rem
|
|
198
|
+
font-size 5rem
|
|
199
|
+
line-height 1
|
|
200
|
+
text-align center
|
|
201
|
+
font-weight 400
|
|
202
|
+
.merchant__mobile--details--dirty &
|
|
203
|
+
font-size 3.5rem
|
|
204
|
+
|
|
205
|
+
@media screen and (max-width 760px)
|
|
206
|
+
.merchant
|
|
207
|
+
&__mobilewrapper
|
|
208
|
+
margin 0 1rem
|
|
209
|
+
@media screen and (max-width 660px)
|
|
210
|
+
.merchant
|
|
211
|
+
&__wrapper
|
|
212
|
+
zoom .7
|
|
213
|
+
@media screen and (max-width 469px)
|
|
214
|
+
.merchant
|
|
215
|
+
&__wrapper
|
|
216
|
+
zoom .6
|
|
217
|
+
@media screen and (max-width 400px)
|
|
218
|
+
.merchant
|
|
219
|
+
&__wrapper
|
|
220
|
+
zoom .45
|
|
221
|
+
|
|
@@ -71,6 +71,14 @@ $favorite = #ffc200
|
|
|
71
71
|
|
|
72
72
|
$modalBg = rgba(0, 11, 31, .85)
|
|
73
73
|
|
|
74
|
+
//new version of demos
|
|
75
|
+
$inputBgColor = #f6f7f8
|
|
76
|
+
$inputBorderColor = #bcc4d7
|
|
77
|
+
$inputPlaceholderColor = #818ca5
|
|
78
|
+
|
|
79
|
+
$activeColor = #7f98b3
|
|
80
|
+
$activeColorDark = #4c657e
|
|
81
|
+
|
|
74
82
|
// Labels
|
|
75
83
|
$labelBlue = #52a6e2
|
|
76
84
|
$labelMauve = #7d74c7
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
$demofilterWidth = 27.4rem
|
|
2
|
-
$fontSizeDemo = 1.3rem
|
|
3
|
-
$demoPadding = 1.6rem
|
|
4
|
-
$demoBr = .3rem
|
|
5
|
-
$inputFontSizeDemo = 1.1rem
|
|
6
|
-
$inputDemoHeight = 3rem
|
|
7
|
-
$inputBgColor = #f6f7f8
|
|
8
|
-
$inputBorderColor = #bcc4d7
|
|
9
|
-
$inputPlaceholderColor = #818ca5
|
|
10
|
-
|
|
11
|
-
$activeColor = #7f98b3
|
|
12
|
-
$activeColorDark = #4c657e
|
|
13
|
-
$footerHeight = 4rem
|
|
14
|
-
|
|
15
|
-
inputFont()
|
|
16
|
-
font-family 'Roboto Mono', monospace
|
|
17
1
|
|
|
18
2
|
.demo
|
|
19
3
|
fullwh()
|
|
@@ -46,12 +30,19 @@ inputFont()
|
|
|
46
30
|
mbib(1.6)
|
|
47
31
|
&__data
|
|
48
32
|
max-height 45rem
|
|
33
|
+
border-top .1rem solid rgba($secondary, .1)
|
|
49
34
|
&__showcase
|
|
50
35
|
min-height 50rem
|
|
51
36
|
max-height 71rem
|
|
52
37
|
&__map
|
|
38
|
+
display flex
|
|
39
|
+
align-items center
|
|
40
|
+
justify-content center
|
|
53
41
|
flex-grow 1
|
|
54
42
|
background-color $light
|
|
43
|
+
.map
|
|
44
|
+
width 100%
|
|
45
|
+
height 100%
|
|
55
46
|
&__results
|
|
56
47
|
width $demofilterWidth
|
|
57
48
|
display flex
|
|
@@ -64,8 +55,8 @@ inputFont()
|
|
|
64
55
|
flex-shrink 0
|
|
65
56
|
font-size $fontSizeDemo - .1
|
|
66
57
|
padding 0 $demoPadding
|
|
67
|
-
height $
|
|
68
|
-
background-color
|
|
58
|
+
height $footerDemoHeight
|
|
59
|
+
background-color $inputBgColor
|
|
69
60
|
font-weight 600
|
|
70
61
|
&__content
|
|
71
62
|
font-weight 400
|
|
@@ -211,8 +202,8 @@ inputFont()
|
|
|
211
202
|
&__code
|
|
212
203
|
.tab
|
|
213
204
|
&__header
|
|
214
|
-
height $
|
|
215
|
-
background-color
|
|
205
|
+
height $footerDemoHeight
|
|
206
|
+
background-color $inputBgColor
|
|
216
207
|
&__content
|
|
217
208
|
padding $demoPadding
|
|
218
209
|
overflow auto
|
|
@@ -233,3 +224,20 @@ inputFont()
|
|
|
233
224
|
font-size $inputFontSizeDemo
|
|
234
225
|
border .1rem solid $activeColor
|
|
235
226
|
color darken($activeColor, 20%)
|
|
227
|
+
@media screen and (max-width 769px)
|
|
228
|
+
.demo__showcase
|
|
229
|
+
max-height 100%
|
|
230
|
+
min-height auto
|
|
231
|
+
@media screen and (max-width 696px)
|
|
232
|
+
.demo
|
|
233
|
+
&__data
|
|
234
|
+
&__showcase
|
|
235
|
+
flex-direction column
|
|
236
|
+
max-height 100%
|
|
237
|
+
&__results
|
|
238
|
+
&__filters
|
|
239
|
+
width auto
|
|
240
|
+
border-bottom .1rem solid rgba($secondary, .1)
|
|
241
|
+
border-right 0
|
|
242
|
+
&__map
|
|
243
|
+
height 32rem
|
|
@@ -8,6 +8,15 @@ $fontWeight = 400
|
|
|
8
8
|
$fontSizeHeader = 1.3rem
|
|
9
9
|
$fontSizeFooter = 1.6rem
|
|
10
10
|
|
|
11
|
+
//new version of demos
|
|
12
|
+
$demofilterWidth = 27.4rem
|
|
13
|
+
$fontSizeDemo = 1.3rem
|
|
14
|
+
$demoPadding = 1.6rem
|
|
15
|
+
$demoBr = .3rem
|
|
16
|
+
$inputFontSizeDemo = 1.1rem
|
|
17
|
+
$inputDemoHeight = 3rem
|
|
18
|
+
$footerDemoHeight = 4rem
|
|
19
|
+
|
|
11
20
|
|
|
12
21
|
$title = 4.6rem
|
|
13
22
|
$title2 = 4rem
|