From eac2332c3de43840eebf177bf2d72e4e6891356c Mon Sep 17 00:00:00 2001 From: Tony Air Date: Sat, 1 Feb 2020 01:53:29 +0700 Subject: [PATCH] FIX: _ui.map.google markers sizing --- ..._SilverShop.Page.CheckoutPageController.css | 4 ++-- ...verShop.Page.CheckoutPageController.css.map | 2 +- ...p_Site.Controllers.MapElementController.css | 4 ++-- ...te.Controllers.MapElementController.css.map | 2 +- package.json | 2 +- src/js/_components/_ui.map.api.js | 10 +++++++--- src/js/_components/drivers/_map.google.js | 18 +++++++++--------- .../_components/drivers/_map.google.marker.js | 16 +++++++--------- src/scss/_components/_ui.main.scss | 5 +++++ 9 files changed, 35 insertions(+), 28 deletions(-) diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css b/dist/css/app_SilverShop.Page.CheckoutPageController.css index 8e81933..3f8b726 100644 --- a/dist/css/app_SilverShop.Page.CheckoutPageController.css +++ b/dist/css/app_SilverShop.Page.CheckoutPageController.css @@ -70,8 +70,8 @@ padding: 10px 10px 15px; border-radius: 3px; background: #fff; - width: 240px; - height: 5rem; + min-width: 240px; + min-height: 5rem; -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4); } diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css.map b/dist/css/app_SilverShop.Page.CheckoutPageController.css.map index cd82387..eccdaf3 100644 --- a/dist/css/app_SilverShop.Page.CheckoutPageController.css.map +++ b/dist/css/app_SilverShop.Page.CheckoutPageController.css.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_SilverShop.Page.CheckoutPageController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -ms-flex-direction: column-reverse;\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n width: 240px;\n height: 5rem;\n -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n -webkit-animation: pulse 0.8s linear infinite;\n animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n width: 240px;\n height: 5rem;\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_SilverShop.Page.CheckoutPageController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -ms-flex-direction: column-reverse;\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n min-width: 240px;\n min-height: 5rem;\n -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n -webkit-animation: pulse 0.8s linear infinite;\n animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n min-width: 240px;\n min-height: 5rem;\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/css/app_Site.Controllers.MapElementController.css b/dist/css/app_Site.Controllers.MapElementController.css index fdce60b..2bed932 100644 --- a/dist/css/app_Site.Controllers.MapElementController.css +++ b/dist/css/app_Site.Controllers.MapElementController.css @@ -70,8 +70,8 @@ padding: 10px 10px 15px; border-radius: 3px; background: #fff; - width: 240px; - height: 5rem; + min-width: 240px; + min-height: 5rem; -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4); } diff --git a/dist/css/app_Site.Controllers.MapElementController.css.map b/dist/css/app_Site.Controllers.MapElementController.css.map index 039c2ea..3f88f4a 100644 --- a/dist/css/app_Site.Controllers.MapElementController.css.map +++ b/dist/css/app_Site.Controllers.MapElementController.css.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_Site.Controllers.MapElementController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -ms-flex-direction: column-reverse;\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n width: 240px;\n height: 5rem;\n -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n -webkit-animation: pulse 0.8s linear infinite;\n animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n width: 240px;\n height: 5rem;\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_Site.Controllers.MapElementController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.8);\n transform: scale(0.8);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -ms-flex-direction: column-reverse;\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n min-width: 240px;\n min-height: 5rem;\n -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n -webkit-animation: pulse 0.8s linear infinite;\n animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.mapAPI-map {\n height: 30rem;\n margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n font-size: 0.8rem;\n z-index: 4;\n line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n position: relative;\n pointer-events: auto;\n padding: 10px 10px 15px;\n border-radius: 3px;\n background: #fff;\n min-width: 240px;\n min-height: 5rem;\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n position: absolute;\n right: 0;\n top: 0;\n font-size: 2rem;\n padding: 0.5rem;\n border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n background: #2196f3;\n color: #fff;\n}\n\n.mapboxgl-popup-tip {\n width: 0;\n height: 0;\n border: 10px solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n align-self: center;\n border-bottom: none;\n border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n cursor: pointer;\n text-align: center;\n color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json index 6f5d812..24661d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", - "version": "1.6.7", + "version": "1.6.8", "author": "Tony Air ", "license": "MIT", "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", diff --git a/src/js/_components/_ui.map.api.js b/src/js/_components/_ui.map.api.js index d1aca66..fa83147 100755 --- a/src/js/_components/_ui.map.api.js +++ b/src/js/_components/_ui.map.api.js @@ -7,7 +7,7 @@ import '../../scss/_components/_ui.map.scss'; import CONSTS from 'js/_consts'; -const MapAPI = (($) => { +const MapAPI = ($ => { // Constants const NAME = 'jsMapAPI'; const DATA_KEY = NAME; @@ -32,13 +32,17 @@ const MapAPI = (($) => { config['lat'] ? config['lat'] : $BODY.data('default-lat'), ]; + config['style'] = config['style'] + ? jQuery.parseJSON(config['style']) + : null; + config['font-family'] = $BODY.css('font-family'); console.log(`${NAME}: initializing ${Drv.getName()}...`); Drv.init($el, config); ui.drv = Drv; - $el.on(Events.MAPAPILOADED, (e) => { + $el.on(Events.MAPAPILOADED, e => { ui.map = Drv.getMap(); if (config['geojson']) { @@ -47,7 +51,7 @@ const MapAPI = (($) => { } else if (config['address']) { console.log(config['address']); console.log(`${NAME}: setting up address marker`); - Drv.geocode(config['address'], (result) => { + Drv.geocode(config['address'], result => { console.log(result); }); } else if (config['lat'] && config['lng']) { diff --git a/src/js/_components/drivers/_map.google.js b/src/js/_components/drivers/_map.google.js index 31b3b68..8e3560d 100755 --- a/src/js/_components/drivers/_map.google.js +++ b/src/js/_components/drivers/_map.google.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import Events from '../../_events'; import MarkerUI from './_map.google.marker'; -const GoogleMapsDriver = (($) => { +const GoogleMapsDriver = ($ => { class GoogleMapsDriver { getName() { return 'GoogleMapsDriver'; @@ -39,13 +39,13 @@ const GoogleMapsDriver = (($) => { const zoom = config['mapZoom'] ? config['mapZoom'] : 10; const center = config['center'] ? { - lat: config['center'][1], - lng: config['center'][0], - } + lat: config['center'][1], + lng: config['center'][0], + } : { - lat: 0, - lng: 0, - }; + lat: 0, + lng: 0, + }; const style = config['style'] ? config['style'] : null; console.log(`${ui.getName()}: API is loaded`); @@ -122,7 +122,7 @@ const GoogleMapsDriver = (($) => { $popup.find('.mapboxgl-popup-content .html').html(content); - $popup.find('.mapboxgl-popup-close-button').on('click', (e) => { + $popup.find('.mapboxgl-popup-close-button').on('click', e => { e.preventDefault(); ui.hidePopup(); }); @@ -205,7 +205,7 @@ const GoogleMapsDriver = (($) => { const bounds = new google.maps.LatLngBounds(); // add markers to map - config['geojson'].features.forEach((marker) => { + config['geojson'].features.forEach(marker => { const id = marker.id; const crds = marker.geometry.coordinates; const content = marker.properties.content; diff --git a/src/js/_components/drivers/_map.google.marker.js b/src/js/_components/drivers/_map.google.marker.js index a7a7378..258b381 100755 --- a/src/js/_components/drivers/_map.google.marker.js +++ b/src/js/_components/drivers/_map.google.marker.js @@ -16,7 +16,7 @@ const Obj = { ui.onClick = options.onClick; ui.onMouseOver = options.onMouseOver; - ui.isBoolean = (arg) => { + ui.isBoolean = arg => { if (typeof arg === 'boolean') { return true; } else { @@ -24,7 +24,7 @@ const Obj = { } }; - ui.isNotUndefined = (arg) => { + ui.isNotUndefined = arg => { if (typeof arg !== 'undefined') { return true; } else { @@ -32,7 +32,7 @@ const Obj = { } }; - ui.hasContent = (arg) => { + ui.hasContent = arg => { if (arg.length > 0) { return true; } else { @@ -40,7 +40,7 @@ const Obj = { } }; - ui.isString = (arg) => { + ui.isString = arg => { if (typeof arg === 'string') { return true; } else { @@ -48,7 +48,7 @@ const Obj = { } }; - ui.isFunction = (arg) => { + ui.isFunction = arg => { if (typeof arg === 'function') { return true; } else { @@ -97,13 +97,13 @@ const Obj = { ui.getPanes().overlayMouseTarget.appendChild(ui.div); // Add listeners to the element. - google.maps.event.addDomListener(ui.div, 'click', (event) => { + google.maps.event.addDomListener(ui.div, 'click', event => { google.maps.event.trigger(ui, 'click'); if (ui.isFunction(ui.onClick)) ui.onClick(); event.stopPropagation(); }); - google.maps.event.addDomListener(ui.div, 'mouseover', (event) => { + google.maps.event.addDomListener(ui.div, 'mouseover', event => { google.maps.event.trigger(ui, 'mouseover'); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); event.stopPropagation(); @@ -131,8 +131,6 @@ const Obj = { }; const divWidth = $div.outerWidth(); const divHeight = $div.outerHeight(); - console.log(divWidth); - console.log(divHeight); switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') { case 'left top': diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss index 489b37e..fe76460 100755 --- a/src/scss/_components/_ui.main.scss +++ b/src/scss/_components/_ui.main.scss @@ -371,3 +371,8 @@ textarea, padding-right: $grid-gutter-xs-width / 2; } } + +#ForgotPassword { + margin: 1rem 0; + width: 100%; +}