From 243dc87f06197ccad16f789fb3d4b8827bb0ce58 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Fri, 20 Mar 2020 00:19:58 +0700 Subject: [PATCH] Google Maps IMPROVEMENT: Single marker positioning + scss styling variables --- ...SilverShop.Page.CheckoutPageController.css | 29 ++++++------ ...erShop.Page.CheckoutPageController.css.map | 2 +- ..._Site.Controllers.MapElementController.css | 29 ++++++------ ...e.Controllers.MapElementController.css.map | 2 +- dist/js/app.js | 2 +- dist/js/app.js.map | 2 +- ..._SilverShop.Page.CheckoutPageController.js | 2 +- ...verShop.Page.CheckoutPageController.js.map | 2 +- ...p_Site.Controllers.MapElementController.js | 2 +- ...te.Controllers.MapElementController.js.map | 2 +- package.json | 2 +- src/js/_components/drivers/_map.google.js | 24 +++++----- src/scss/_components/_ui.map.scss | 45 ++++++++++++------- 13 files changed, 82 insertions(+), 63 deletions(-) diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css b/dist/css/app_SilverShop.Page.CheckoutPageController.css index 3f8b726..ebf22d6 100644 --- a/dist/css/app_SilverShop.Page.CheckoutPageController.css +++ b/dist/css/app_SilverShop.Page.CheckoutPageController.css @@ -39,10 +39,14 @@ .mapAPI-map { height: 30rem; - margin-bottom: 1rem; + margin-bottom: 4rem; } .mapboxgl-popup { + width: 16rem; + height: 7rem; + font-size: 0.8rem; + line-height: 1.2em; position: absolute; top: 0; left: 0; @@ -50,9 +54,7 @@ display: -ms-flexbox; display: flex; pointer-events: none; - font-size: 0.8rem; z-index: 4; - line-height: 20px; } .mapboxgl-popup-anchor-bottom, @@ -65,15 +67,16 @@ } .mapboxgl-popup-content { + min-width: 16rem; + background: #fff; + color: #212121; position: relative; pointer-events: auto; - padding: 10px 10px 15px; - border-radius: 3px; - background: #fff; - min-width: 240px; + padding: 0.8rem; + border-radius: 0.25rem; 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); + -webkit-box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); } .mapboxgl-popup-close-button { @@ -82,7 +85,7 @@ top: 0; font-size: 2rem; padding: 0.5rem; - border-top-right-radius: 3px; + border-top-right-radius: 0.25rem; } .mapboxgl-popup-close-button:hover, @@ -94,24 +97,24 @@ .mapboxgl-popup-tip { width: 0; height: 0; - border: 10px solid transparent; + border: 0.8rem solid transparent; z-index: 1; } .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { + border-top-color: #fff; -ms-flex-item-align: center; align-self: center; border-bottom: none; - border-top-color: #fff; } .mapboxgl-marker { width: 30px; height: 30px; font-size: 30px; + color: #2196f3; cursor: pointer; text-align: center; - color: #2196f3; } .mapboxgl-marker .marker-icon, diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css.map b/dist/css/app_SilverShop.Page.CheckoutPageController.css.map index a66a54c..5fd275f 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":"AA4CA;;;ECzCE;;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$field-gutter-height: $grid-gutter-height / 2 !default;\n$col-block-gutter-height: $grid-gutter-height / 4 !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 +{"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":"AA4CA;;;ECzCE;;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;;AEtBA;EACI;EACA;AFyBJ;;AErBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;AF0BR;;AEvBI;;;EAGI;EAAA;MAAA;UAAA;AF6BR;;AE1BI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AF8BR;;AE3BI;EACI;EACA;EACA;EACA;EACA;EACA;AF8BR;;AEpCK;;EAUO;EACA;AF+BZ;;AE3BI;EACI;EACA;EACA;EACA;AF8BR;;AE3BI;EACI;EACA;MAAA;EACA;AF+BR;;AE5BI;EACI;EACA;EACA;EACA;EACA;EACA;AF+BR;;AErCK;;;;EAYO;UAAA;AFiCZ","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$field-gutter-height: $grid-gutter-height / 2 !default;\n$col-block-gutter-height: $grid-gutter-height / 4 !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: 4rem;\n}\n\n.mapboxgl-popup {\n width: 16rem;\n height: 7rem;\n font-size: 0.8rem;\n line-height: 1.2em;\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 z-index: 4;\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 min-width: 16rem;\n background: #fff;\n color: #212121;\n position: relative;\n pointer-events: auto;\n padding: 0.8rem;\n border-radius: 0.25rem;\n min-height: 5rem;\n -webkit-box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);\n box-shadow: 0 0.1rem 0.8rem 0 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: 0.25rem;\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: 0.8rem solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n border-top-color: #fff;\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n color: #2196f3;\n cursor: pointer;\n text-align: center;\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: 4rem;\n}\n\n.mapboxgl-popup {\n width: 16rem;\n height: 7rem;\n font-size: 0.8rem;\n line-height: 1.2em;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n z-index: 4;\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 min-width: 16rem;\n background: #fff;\n color: #212121;\n position: relative;\n pointer-events: auto;\n padding: 0.8rem;\n border-radius: 0.25rem;\n min-height: 5rem;\n box-shadow: 0 0.1rem 0.8rem 0 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: 0.25rem;\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: 0.8rem solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n border-top-color: #fff;\n align-self: center;\n border-bottom: none;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n color: #2196f3;\n cursor: pointer;\n text-align: center;\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 2bed932..24d379e 100644 --- a/dist/css/app_Site.Controllers.MapElementController.css +++ b/dist/css/app_Site.Controllers.MapElementController.css @@ -39,10 +39,14 @@ .mapAPI-map { height: 30rem; - margin-bottom: 1rem; + margin-bottom: 4rem; } .mapboxgl-popup { + width: 16rem; + height: 7rem; + font-size: 0.8rem; + line-height: 1.2em; position: absolute; top: 0; left: 0; @@ -50,9 +54,7 @@ display: -ms-flexbox; display: flex; pointer-events: none; - font-size: 0.8rem; z-index: 4; - line-height: 20px; } .mapboxgl-popup-anchor-bottom, @@ -65,15 +67,16 @@ } .mapboxgl-popup-content { + min-width: 16rem; + background: #fff; + color: #212121; position: relative; pointer-events: auto; - padding: 10px 10px 15px; - border-radius: 3px; - background: #fff; - min-width: 240px; + padding: 0.8rem; + border-radius: 0.25rem; 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); + -webkit-box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); } .mapboxgl-popup-close-button { @@ -82,7 +85,7 @@ top: 0; font-size: 2rem; padding: 0.5rem; - border-top-right-radius: 3px; + border-top-right-radius: 0.25rem; } .mapboxgl-popup-close-button:hover, @@ -94,24 +97,24 @@ .mapboxgl-popup-tip { width: 0; height: 0; - border: 10px solid transparent; + border: 0.8rem solid transparent; z-index: 1; } .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { + border-top-color: #fff; -ms-flex-item-align: center; align-self: center; border-bottom: none; - border-top-color: #fff; } .mapboxgl-marker { width: 30px; height: 30px; font-size: 30px; + color: #2196f3; cursor: pointer; text-align: center; - color: #2196f3; } .mapboxgl-marker .marker-icon, diff --git a/dist/css/app_Site.Controllers.MapElementController.css.map b/dist/css/app_Site.Controllers.MapElementController.css.map index 5901372..2a9d518 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":"AA4CA;;;ECzCE;;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$field-gutter-height: $grid-gutter-height / 2 !default;\n$col-block-gutter-height: $grid-gutter-height / 4 !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 +{"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":"AA4CA;;;ECzCE;;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;;AEtBA;EACI;EACA;AFyBJ;;AErBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;AF0BR;;AEvBI;;;EAGI;EAAA;MAAA;UAAA;AF6BR;;AE1BI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AF8BR;;AE3BI;EACI;EACA;EACA;EACA;EACA;EACA;AF8BR;;AEpCK;;EAUO;EACA;AF+BZ;;AE3BI;EACI;EACA;EACA;EACA;AF8BR;;AE3BI;EACI;EACA;MAAA;EACA;AF+BR;;AE5BI;EACI;EACA;EACA;EACA;EACA;EACA;AF+BR;;AErCK;;;;EAYO;UAAA;AFiCZ","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$field-gutter-height: $grid-gutter-height / 2 !default;\n$col-block-gutter-height: $grid-gutter-height / 4 !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: 4rem;\n}\n\n.mapboxgl-popup {\n width: 16rem;\n height: 7rem;\n font-size: 0.8rem;\n line-height: 1.2em;\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 z-index: 4;\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 min-width: 16rem;\n background: #fff;\n color: #212121;\n position: relative;\n pointer-events: auto;\n padding: 0.8rem;\n border-radius: 0.25rem;\n min-height: 5rem;\n -webkit-box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);\n box-shadow: 0 0.1rem 0.8rem 0 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: 0.25rem;\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: 0.8rem solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n border-top-color: #fff;\n -ms-flex-item-align: center;\n align-self: center;\n border-bottom: none;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n color: #2196f3;\n cursor: pointer;\n text-align: center;\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: 4rem;\n}\n\n.mapboxgl-popup {\n width: 16rem;\n height: 7rem;\n font-size: 0.8rem;\n line-height: 1.2em;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n pointer-events: none;\n z-index: 4;\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 min-width: 16rem;\n background: #fff;\n color: #212121;\n position: relative;\n pointer-events: auto;\n padding: 0.8rem;\n border-radius: 0.25rem;\n min-height: 5rem;\n box-shadow: 0 0.1rem 0.8rem 0 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: 0.25rem;\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: 0.8rem solid transparent;\n z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n border-top-color: #fff;\n align-self: center;\n border-bottom: none;\n}\n\n.mapboxgl-marker {\n width: 30px;\n height: 30px;\n font-size: 30px;\n color: #2196f3;\n cursor: pointer;\n text-align: center;\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/js/app.js b/dist/js/app.js index 86518ac..096050e 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -1,3 +1,3 @@ /*! For license information please see app.js.LICENSE.txt */ -!function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/dist",n(n.s="./src/js/app.js")}({"./node_modules/@a2nt/meta-lightbox/src/js/meta-lightbox.js":function(t,e){function n(t){return(n="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e,i){var o={effect:"fade",theme:"default",keyboardNav:!0,clickOverlayToClose:!0,onInit:function(){},beforeShowLightbox:function(){},afterShowLightbox:function(t){},beforeHideLightbox:function(){},afterHideLightbox:function(){},onPrev:function(t){},onNext:function(t){},errorMessage:"The requested content cannot be loaded. Please try again later."};function r(e,n){this.options=t.extend({},o,n),this._defaults=o,this._name="metaLightbox",this.init()}r.prototype={init:function(){var e=this,n=t("html");this.ajaxLoaded=!1,i.MetaLightbox=this,n.hasClass("meta-lightbox-notouch")||n.addClass("meta-lightbox-notouch"),"ontouchstart"in i&&n.removeClass("meta-lightbox-notouch"),t(i).on("click",'[data-toggle="lightbox"],[data-lightbox-gallery]',(function(t){return t.preventDefault(),t.stopPropagation(),e.showLightbox(this),!1})),this.options.keyboardNav&&t("body").off("keyup").on("keyup",(function(n){var i=n.keyCode?n.keyCode:n.which;27===i&&e.destructLightbox(),37===i&&t(".meta-lightbox-prev").trigger("click"),39===i&&t(".meta-lightbox-next").trigger("click")})),this.options.onInit.call(this)},showLightbox:function(e){this.el=e,this.$el=t(this.el);var n,i,o,r,s=this;this.options.beforeShowLightbox.call(this),(n=this.constructLightbox())&&(i=n.find(".meta-lightbox-content"))&&(o=this.$el,t("body").addClass("meta-lightbox-body-effect-".concat(this.options.effect)),this.processContent(i,o),this.$el.data("lightbox-gallery")&&(1===(r=t('[data-lightbox-gallery="'.concat(this.$el.data("lightbox-gallery"),'"]'))).length?t(".meta-lightbox-nav").hide():t(".meta-lightbox-nav").show(),t(".meta-lightbox-prev").off("click").on("click",(function(e){e.preventDefault();var n=r.index(o);o=r.eq(n-1),t(o).length||(o=r.last()),s.processContent(i,o),s.options.onPrev.call(this,[o])})),t(".meta-lightbox-next").off("click").on("click",(function(e){e.preventDefault();var n=r.index(o);o=r.eq(n+1),t(o).length||(o=r.first()),s.processContent(i,o),s.options.onNext.call(this,[o])}))),setTimeout((function(){n.addClass("meta-lightbox-open"),s.options.afterShowLightbox.call(this,[n])}),1))},processContent:function(o,r){var s,a,l,c,u,d,h=this;href=r.attr("href"),href||(href=r.data("href")),o.html("").addClass("meta-lightbox-loading"),this.isHidpi()&&r.data("lightbox-hidpi")&&(href=r.data("lightbox-hidpi")),null!=href.match(/\.(jpeg|jpg|gif|png)$/i)?((s=t("",{src:href})).on("load",(function(){var n=t('
'),i=t(".meta-lightbox-content"),r=t('');r.append(s),n.append(r),n.css({"line-height":"".concat(i.height(),"px"),height:"".concat(i.height(),"px")}),t(e).resize((function(){n.css({"line-height":"".concat(i.height(),"px"),height:"".concat(i.height(),"px")})})),"undefined"!==typeof r.zoom&&r.zoom(),o.html(n).removeClass("meta-lightbox-loading"),h.contentLoaded()})),s.on("error",(function(){var e=t('

'.concat(h.options.errorMessage,"

"));o.html(e).removeClass("meta-lightbox-loading"),h.contentLoaded()})),r.data("title")?h.setTitle(r.data("title")):r.attr("title")?h.setTitle(r.attr("title")):t(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&ga("send","event","meta","Image Click",href)):(a=href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/))?(l="",c="meta-lightbox-video","youtube"==a[1]&&(l="https://www.youtube.com/embed/".concat(a[4]),c="meta-lightbox-youtube"),"youtu"==a[1]&&(l="https://www.youtube.com/embed/".concat(a[3]),c="meta-lightbox-youtube"),"youtube-nocookie"==a[1]&&(l="https://www.youtube-nocookie.com/embed/".concat(a[4]),c="nivo-lightbox-youtube"),"vimeo"==a[1]&&(l="https://player.vimeo.com/video/".concat(a[3]),c="meta-lightbox-vimeo"),l&&(u=t("