@woosmap/ui 4.206.0 → 4.208.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "4.206.0",
3
+ "version": "4.208.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -394,16 +394,23 @@ export default class AutocompleteAddressDemo extends Component {
394
394
  const { withMap, error, selectedLocality } = this.state;
395
395
 
396
396
  return (
397
- <article className="showcase showcase--autocomplete" id="autocomplete-demo">
397
+ <article className="showcase showcase--autocomplete" id="autocomplete-demo-section">
398
398
  {withMap && <Script url={Constants.woosmapMapSdkUrl} />}
399
399
  <div className="showcase-wrapper">
400
400
  <h2 className="showcase-title">Autocomplete Demo</h2>
401
401
  <div className="showcase-header">{this.renderHeaderFilters()}</div>
402
- <div className="showcase-result">
402
+
403
+ <div className={`showcase-result ${!selectedLocality ? 'showcase-result--empty' : ''} `}>
403
404
  <Tab>
404
405
  <div title={tr('Result')} id={selectedLocality && 'click-result'}>
405
406
  <div className="showcase-result-wrapper showcase-result-wrapper-2cols">
406
- {this.renderAddress()}
407
+ {selectedLocality ? (
408
+ this.renderAddress()
409
+ ) : (
410
+ <div className="showcase-result-wrapper-col-empty">
411
+ {tr('Please enter a country and an address in the fields above.')}
412
+ </div>
413
+ )}
407
414
  </div>
408
415
  </div>
409
416
  {this.requestUrl ? (
@@ -49,6 +49,11 @@ $darkSec = $dark20
49
49
  flex-grow 1
50
50
  gap 2.2rem
51
51
  position relative
52
+ &-empty
53
+ flex-grow 1
54
+ text-align center
55
+ opacity .4
56
+ margin-bottom 2rem
52
57
  h4
53
58
  font-weight 400
54
59
  margin-bottom 1.6rem
@@ -68,6 +73,8 @@ $darkSec = $dark20
68
73
  top 0
69
74
  &-response
70
75
  background-color $dark2
76
+ &--empty
77
+ height auto
71
78
  .tab
72
79
  background-color $light
73
80
  &__content