favesalon-embed 1.0.4 → 1.0.6
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/dist/custom-elements/index.d.ts +42 -0
- package/dist/{cjs/_commonjsHelpers-5cfcba41.js → favesalon-embed/_commonjsHelpers-a4f66ccd.js} +14 -6
- package/dist/favesalon-embed/activate-form.entry.js +70 -0
- package/dist/favesalon-embed/app-globals-74127f4b.js +7 -0
- package/dist/favesalon-embed/app-globals-f954a22f.js +7 -0
- package/dist/favesalon-embed/change-password-form.entry.js +81 -0
- package/dist/favesalon-embed/chat-box.entry.js +55 -0
- package/dist/{esm → favesalon-embed}/chat-button.entry.js +36 -13
- package/dist/favesalon-embed/chat-form.entry.js +39 -0
- package/dist/favesalon-embed/chat-messages.entry.js +71 -0
- package/dist/favesalon-embed/chat-rooms.entry.js +111 -0
- package/dist/favesalon-embed/css-shim-b7d3d95f.js +4 -0
- package/dist/favesalon-embed/dom-64053c71.js +73 -0
- package/dist/favesalon-embed/favesalon-embed.css +114 -1
- package/dist/favesalon-embed/favesalon-embed.esm.js +148 -1
- package/dist/{esm → favesalon-embed}/google-map.entry.js +1 -1
- package/dist/{esm/index-a1c7583c.js → favesalon-embed/index-00b83e1c.js} +425 -15
- package/dist/favesalon-embed/index-888e99e3.js +3371 -0
- package/dist/favesalon-embed/index-a229b3b5.js +3371 -0
- package/dist/favesalon-embed/index.esm.js +1 -0
- package/dist/{esm/chat-box_5.entry.js → favesalon-embed/lodash-d5526b38.js} +27 -243
- package/dist/favesalon-embed/login-form.entry.js +67 -0
- package/dist/{cjs/chat-button.cjs.entry.js → favesalon-embed/notify-sounds.entry.js} +20 -44
- package/dist/favesalon-embed/register-form.entry.js +88 -0
- package/dist/favesalon-embed/relativeTime-268e64b0.js +7 -0
- package/dist/favesalon-embed/reset-password-form.entry.js +47 -0
- package/dist/{esm → favesalon-embed}/salon-booking-modal.entry.js +1 -1
- package/dist/{esm → favesalon-embed}/salon-booking.entry.js +4 -4
- package/dist/{esm → favesalon-embed}/salon-gift-card-modal.entry.js +1 -1
- package/dist/{esm → favesalon-embed}/salon-gift-card.entry.js +4 -4
- package/dist/{esm → favesalon-embed}/salon-info.entry.js +3 -3
- package/dist/{esm → favesalon-embed}/salon-latest-reviews.entry.js +22 -6
- package/dist/{collection/components/salon-latest-styles/index.js → favesalon-embed/salon-latest-styles.entry.js} +27 -105
- package/dist/{collection/components/salon-locations/index.js → favesalon-embed/salon-locations.entry.js} +15 -95
- package/dist/{esm → favesalon-embed}/salon-lookbook.entry.js +18 -6
- package/dist/{esm → favesalon-embed}/salon-ranking.entry.js +1 -1
- package/dist/{esm → favesalon-embed}/salon-reviews.entry.js +20 -6
- package/dist/{collection/components/salon-schedules/index.js → favesalon-embed/salon-schedules.entry.js} +14 -95
- package/dist/{esm → favesalon-embed}/salon-services.entry.js +25 -13
- package/dist/{esm → favesalon-embed}/salon-stylists.entry.js +3 -3
- package/dist/{esm/services-257442e2.js → favesalon-embed/services-5a4c43a6.js} +2608 -188
- package/dist/{cjs/services-d1bdf299.js → favesalon-embed/services-d71be591.js} +2616 -191
- package/dist/favesalon-embed/shadow-css-98135883.js +387 -0
- package/dist/{esm → favesalon-embed}/style-detail.entry.js +29 -11
- package/dist/favesalon-embed/user-avatar.entry.js +52 -0
- package/dist/favesalon-embed/user-form.entry.js +44 -0
- package/dist/{collection/utils/utils.js → favesalon-embed/utils-fd30fb29.js} +14 -5
- package/dist/types/components/activate-form/activate-form.d.ts +12 -0
- package/dist/types/components/activate-form/test/activate-form.spec.d.ts +1 -0
- package/dist/types/components/change-password-form/change-password-form.d.ts +12 -0
- package/dist/types/components/chat-box/index.d.ts +1 -0
- package/dist/types/components/chat-button/index.d.ts +6 -2
- package/dist/types/components/chat-button/notify-sounds.d.ts +5 -0
- package/dist/types/components/chat-rooms/index.d.ts +6 -0
- package/dist/types/components/login-form/login-form.d.ts +10 -0
- package/dist/types/components/register-form/register-form.d.ts +13 -0
- package/dist/types/components/reset-password-form/reset-password-form.d.ts +9 -0
- package/dist/types/components/user-form/user-form.d.ts +7 -0
- package/dist/types/components.d.ts +127 -2
- package/dist/types/services/services.d.ts +17 -0
- package/dist/types/types/chat.d.ts +1 -0
- package/dist/types/types/user.d.ts +16 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/dist/types/utils/utils.spec.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/chat-box_5.cjs.entry.js +0 -17439
- package/dist/cjs/colors-38421769.js +0 -69
- package/dist/cjs/favesalon-embed.cjs.js +0 -23
- package/dist/cjs/google-map.cjs.entry.js +0 -52
- package/dist/cjs/index-7f190886.js +0 -4396
- package/dist/cjs/index-dd8176c4.js +0 -1531
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -22
- package/dist/cjs/relativeTime-3721080d.js +0 -9
- package/dist/cjs/salon-booking-modal.cjs.entry.js +0 -30
- package/dist/cjs/salon-booking.cjs.entry.js +0 -51
- package/dist/cjs/salon-gift-card-modal.cjs.entry.js +0 -29
- package/dist/cjs/salon-gift-card.cjs.entry.js +0 -51
- package/dist/cjs/salon-info.cjs.entry.js +0 -33
- package/dist/cjs/salon-latest-reviews.cjs.entry.js +0 -97
- package/dist/cjs/salon-latest-styles_3.cjs.entry.js +0 -241
- package/dist/cjs/salon-lookbook.cjs.entry.js +0 -222
- package/dist/cjs/salon-ranking.cjs.entry.js +0 -60
- package/dist/cjs/salon-reviews.cjs.entry.js +0 -193
- package/dist/cjs/salon-services.cjs.entry.js +0 -81
- package/dist/cjs/salon-stylists.cjs.entry.js +0 -118
- package/dist/cjs/style-detail.cjs.entry.js +0 -312
- package/dist/cjs/utils-c5a33b3c.js +0 -23
- package/dist/collection/collection-manifest.json +0 -33
- package/dist/collection/components/chat-box/index.css +0 -105
- package/dist/collection/components/chat-box/index.js +0 -138
- package/dist/collection/components/chat-button/index.css +0 -101
- package/dist/collection/components/chat-button/index.js +0 -155
- package/dist/collection/components/chat-form/index.css +0 -40
- package/dist/collection/components/chat-form/index.js +0 -79
- package/dist/collection/components/chat-messages/index.css +0 -48
- package/dist/collection/components/chat-messages/index.js +0 -142
- package/dist/collection/components/chat-rooms/index.css +0 -102
- package/dist/collection/components/chat-rooms/index.js +0 -157
- package/dist/collection/components/google-map/assets/map--placeholder.jpeg +0 -0
- package/dist/collection/components/google-map/index.css +0 -5
- package/dist/collection/components/google-map/index.js +0 -90
- package/dist/collection/components/salon-booking/index.css +0 -30
- package/dist/collection/components/salon-booking/index.js +0 -126
- package/dist/collection/components/salon-booking/salon-booking-modal.js +0 -92
- package/dist/collection/components/salon-gift-card/index.css +0 -30
- package/dist/collection/components/salon-gift-card/index.js +0 -126
- package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js +0 -73
- package/dist/collection/components/salon-info/index.css +0 -1
- package/dist/collection/components/salon-info/index.js +0 -77
- package/dist/collection/components/salon-latest-reviews/index.css +0 -11
- package/dist/collection/components/salon-latest-reviews/index.js +0 -163
- package/dist/collection/components/salon-latest-styles/index.css +0 -12
- package/dist/collection/components/salon-locations/index.css +0 -24
- package/dist/collection/components/salon-lookbook/index.css +0 -15
- package/dist/collection/components/salon-lookbook/index.js +0 -368
- package/dist/collection/components/salon-ranking/index.css +0 -3
- package/dist/collection/components/salon-ranking/index.js +0 -117
- package/dist/collection/components/salon-reviews/index.css +0 -18
- package/dist/collection/components/salon-reviews/index.js +0 -249
- package/dist/collection/components/salon-schedules/index.css +0 -18
- package/dist/collection/components/salon-services/index.css +0 -1
- package/dist/collection/components/salon-services/index.js +0 -146
- package/dist/collection/components/salon-stylists/index.css +0 -43
- package/dist/collection/components/salon-stylists/index.js +0 -184
- package/dist/collection/components/style-detail/index.css +0 -76
- package/dist/collection/components/style-detail/index.js +0 -386
- package/dist/collection/components/user-avatar/index.css +0 -0
- package/dist/collection/components/user-avatar/index.js +0 -159
- package/dist/collection/constants/colors.js +0 -65
- package/dist/collection/global/global.js +0 -0
- package/dist/collection/mocks/users.js +0 -10
- package/dist/collection/services/services.js +0 -295
- package/dist/collection/types/chat.js +0 -23
- package/dist/collection/types/common.js +0 -11
- package/dist/collection/types/review.js +0 -39
- package/dist/collection/types/salon.js +0 -58
- package/dist/collection/types/service.js +0 -24
- package/dist/collection/types/style.js +0 -128
- package/dist/collection/types/stylist.js +0 -30
- package/dist/collection/types/user.js +0 -10
- package/dist/custom-elements/index.js +0 -44974
- package/dist/esm/_commonjsHelpers-66ac50f5.js +0 -32
- package/dist/esm/favesalon-embed.js +0 -18
- package/dist/esm/index-0494771f.js +0 -1504
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -18
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/relativeTime-baa50aa2.js +0 -7
- package/dist/esm/salon-latest-styles_3.entry.js +0 -235
- package/dist/esm/utils-e97485e0.js +0 -19
- package/dist/favesalon-embed/p-05a1c88a.entry.js +0 -1
- package/dist/favesalon-embed/p-0acf0447.entry.js +0 -1
- package/dist/favesalon-embed/p-0bc4f624.js +0 -1
- package/dist/favesalon-embed/p-1af1515f.entry.js +0 -1
- package/dist/favesalon-embed/p-1cba5fc9.entry.js +0 -1
- package/dist/favesalon-embed/p-39a4ef15.entry.js +0 -1
- package/dist/favesalon-embed/p-3e2cb05b.entry.js +0 -1
- package/dist/favesalon-embed/p-47e646f8.js +0 -1
- package/dist/favesalon-embed/p-487b311f.entry.js +0 -1
- package/dist/favesalon-embed/p-55387c2f.entry.js +0 -1
- package/dist/favesalon-embed/p-566f05b4.entry.js +0 -1
- package/dist/favesalon-embed/p-862a0de0.entry.js +0 -1
- package/dist/favesalon-embed/p-9fe0cbeb.js +0 -2
- package/dist/favesalon-embed/p-a33331cc.js +0 -1
- package/dist/favesalon-embed/p-aeeb7b5f.entry.js +0 -1
- package/dist/favesalon-embed/p-b08e5b54.js +0 -6
- package/dist/favesalon-embed/p-b5cca5fc.entry.js +0 -1
- package/dist/favesalon-embed/p-c7fb7af5.js +0 -1580
- package/dist/favesalon-embed/p-ccab56d8.js +0 -1
- package/dist/favesalon-embed/p-d6e13053.entry.js +0 -1
- package/dist/favesalon-embed/p-dee42d34.entry.js +0 -1
- package/dist/favesalon-embed/p-e661ca1d.entry.js +0 -1
- package/dist/favesalon-embed/p-eeceab9c.entry.js +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- /package/dist/{esm → favesalon-embed}/colors-ea36347a.js +0 -0
- /package/dist/{collection/index.js → types/components/activate-form/test/activate-form.e2e.d.ts} +0 -0
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd8176c4.js');
|
|
6
|
-
const colors = require('./colors-38421769.js');
|
|
7
|
-
const services = require('./services-d1bdf299.js');
|
|
8
|
-
require('./_commonjsHelpers-5cfcba41.js');
|
|
9
|
-
|
|
10
|
-
const indexCss = ".view--salon-stylists{overflow:hidden;margin-left:-12px;margin-top:-12px}.view--salon-stylists .salon-stylist{float:left;padding-left:12px;padding-top:12px;width:50%}.view--salon-stylists .salon-stylist--avatar{height:180px}@media (min-width: 576px){.view--salon-stylists .salon-stylist{width:33.33%;max-width:240px}}@media (min-width: 768px){.view--salon-stylists{margin-left:-24px;margin-top:-24px}.view--salon-stylists .salon-stylist{padding-left:24px;padding-top:24px;width:264px;max-width:none}.view--salon-stylists .salon-stylist--avatar{height:240px}}";
|
|
11
|
-
|
|
12
|
-
const pageLimit = 20;
|
|
13
|
-
const SalonStylists = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
index.registerInstance(this, hostRef);
|
|
16
|
-
this.salonId = undefined;
|
|
17
|
-
this.salonStylists = undefined;
|
|
18
|
-
this.totalStylists = undefined;
|
|
19
|
-
this.page = 1;
|
|
20
|
-
this.isLoading = undefined;
|
|
21
|
-
this.isLoadingMore = undefined;
|
|
22
|
-
this.canLoadMore = undefined;
|
|
23
|
-
}
|
|
24
|
-
componentWillLoad() {
|
|
25
|
-
this.fetchData();
|
|
26
|
-
}
|
|
27
|
-
async fetchData() {
|
|
28
|
-
this.isLoading = true;
|
|
29
|
-
try {
|
|
30
|
-
const { total, data } = await services.HttpService().fetchSalonStylists(this.salonId, { page: 1, limit: pageLimit });
|
|
31
|
-
this.totalStylists = total;
|
|
32
|
-
this.salonStylists = data;
|
|
33
|
-
this.canLoadMore = data.length === pageLimit;
|
|
34
|
-
}
|
|
35
|
-
catch (e) {
|
|
36
|
-
this.totalStylists = 0;
|
|
37
|
-
this.salonStylists = [];
|
|
38
|
-
this.canLoadMore = false;
|
|
39
|
-
}
|
|
40
|
-
this.isLoading = false;
|
|
41
|
-
}
|
|
42
|
-
async onLoadMore() {
|
|
43
|
-
this.isLoadingMore = true;
|
|
44
|
-
try {
|
|
45
|
-
const { data } = await services.HttpService().fetchSalonStylists(this.salonId, { page: this.page + 1, limit: pageLimit });
|
|
46
|
-
this.salonStylists = this.salonStylists.concat(data || []);
|
|
47
|
-
this.canLoadMore = data.length === pageLimit;
|
|
48
|
-
this.page += 1;
|
|
49
|
-
}
|
|
50
|
-
catch (e) { }
|
|
51
|
-
this.isLoadingMore = false;
|
|
52
|
-
}
|
|
53
|
-
render() {
|
|
54
|
-
if (this.isLoading) {
|
|
55
|
-
return (index.h("div", null, index.h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index$1) => (index.h("div", { class: "salon-stylist" }, index.h("div", { class: "card", style: {
|
|
56
|
-
background: 'none',
|
|
57
|
-
border: 'none',
|
|
58
|
-
overflow: 'hidden',
|
|
59
|
-
} }, index.h("div", { class: "salon-stylist--avatar", style: {
|
|
60
|
-
backgroundColor: colors.Colors.Gray01,
|
|
61
|
-
backgroundRepeat: 'no-repeat',
|
|
62
|
-
backgroundPosition: 'center top',
|
|
63
|
-
backgroundSize: 'cover',
|
|
64
|
-
border: `1px solid ${colors.Colors.Gray01}`,
|
|
65
|
-
borderRadius: '8px',
|
|
66
|
-
position: 'relative',
|
|
67
|
-
display: 'flex',
|
|
68
|
-
width: '100%',
|
|
69
|
-
alignItems: 'center',
|
|
70
|
-
justifyContent: 'center',
|
|
71
|
-
} }), index.h("div", { class: "card-body" }, index.h("div", { key: `stylist--${fakeId}--${index$1}`, style: {
|
|
72
|
-
backgroundColor: colors.Colors.Gray01,
|
|
73
|
-
height: '16px',
|
|
74
|
-
width: '120px',
|
|
75
|
-
margin: 'auto',
|
|
76
|
-
} })))))))));
|
|
77
|
-
}
|
|
78
|
-
return (index.h("div", null, index.h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (index.h("div", { class: "salon-stylist" }, index.h("div", { class: "card", style: {
|
|
79
|
-
background: 'none',
|
|
80
|
-
border: 'none',
|
|
81
|
-
overflow: 'hidden',
|
|
82
|
-
} }, index.h("div", { class: "salon-stylist--avatar", style: {
|
|
83
|
-
backgroundImage: `url("${stylist.avatar}")`,
|
|
84
|
-
backgroundColor: colors.Colors.Gray01,
|
|
85
|
-
backgroundRepeat: 'no-repeat',
|
|
86
|
-
backgroundPosition: 'center top',
|
|
87
|
-
backgroundSize: 'cover',
|
|
88
|
-
border: `1px solid ${colors.Colors.Gray01}`,
|
|
89
|
-
borderRadius: '8px',
|
|
90
|
-
position: 'relative',
|
|
91
|
-
display: 'flex',
|
|
92
|
-
width: '100%',
|
|
93
|
-
alignItems: 'center',
|
|
94
|
-
justifyContent: 'center',
|
|
95
|
-
} }, !stylist.avatar && (index.h("span", { style: {
|
|
96
|
-
fontSize: '32px',
|
|
97
|
-
fontWeight: 'bold',
|
|
98
|
-
textTransform: 'uppercase',
|
|
99
|
-
} }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), index.h("div", { class: "card-body" }, index.h("div", { style: {
|
|
100
|
-
fontSize: '18px',
|
|
101
|
-
fontWeight: '600',
|
|
102
|
-
textAlign: 'center',
|
|
103
|
-
} }, stylist.fullName))))))), this.canLoadMore && (index.h("div", { class: "view-footer", style: {
|
|
104
|
-
textAlign: 'center',
|
|
105
|
-
paddingTop: '32px',
|
|
106
|
-
paddingBottom: '16px',
|
|
107
|
-
} }, index.h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, style: {
|
|
108
|
-
background: colors.Colors.White,
|
|
109
|
-
border: `1px solid ${colors.Colors.Gray02}`,
|
|
110
|
-
borderRadius: '4px',
|
|
111
|
-
paddingLeft: '24px',
|
|
112
|
-
paddingRight: '24px',
|
|
113
|
-
}, onClick: () => this.onLoadMore() }, "Load more")))));
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
SalonStylists.style = indexCss;
|
|
117
|
-
|
|
118
|
-
exports.salon_stylists = SalonStylists;
|
|
@@ -1,312 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd8176c4.js');
|
|
6
|
-
const services = require('./services-d1bdf299.js');
|
|
7
|
-
const relativeTime = require('./relativeTime-3721080d.js');
|
|
8
|
-
const colors = require('./colors-38421769.js');
|
|
9
|
-
require('./_commonjsHelpers-5cfcba41.js');
|
|
10
|
-
|
|
11
|
-
const indexCss = ".salon-modal.salon-modal--lookbook-detail .salon-modal--close{display:none !important}.salon-modal.salon-modal--lookbook-detail .salon-modal--content{background-color:#fff;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1000;overflow-y:auto}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:240px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnails{text-align:center}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{display:inline-block;margin-top:12px;margin-right:12px;height:40px;width:60px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--button{border:none;position:absolute;top:50%;z-index:20;height:40px;width:40px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--prev{left:24px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--next{right:24px}@media (min-width: 768px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:360px !important}}@media (min-width: 992px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:480px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{height:56px;width:72px}}";
|
|
12
|
-
|
|
13
|
-
services.dayjs_min.extend(relativeTime.relativeTime);
|
|
14
|
-
const StyleDetail = class {
|
|
15
|
-
constructor(hostRef) {
|
|
16
|
-
index.registerInstance(this, hostRef);
|
|
17
|
-
this.salonId = undefined;
|
|
18
|
-
this.salonLookbook = undefined;
|
|
19
|
-
this.lookbookInfo = undefined;
|
|
20
|
-
this.isModalOpen = true;
|
|
21
|
-
this.currentMediaIdx = 0;
|
|
22
|
-
this.currentMedia = undefined;
|
|
23
|
-
this.albumMedias = [];
|
|
24
|
-
this.similarStyles = [];
|
|
25
|
-
this.totalComments = 0;
|
|
26
|
-
this.lookbookComments = [];
|
|
27
|
-
this.isLayoutSetup = undefined;
|
|
28
|
-
}
|
|
29
|
-
componentWillLoad() {
|
|
30
|
-
this.injectSDK();
|
|
31
|
-
if (!!this.salonLookbook) {
|
|
32
|
-
this.lookbookInfo = JSON.parse(this.salonLookbook);
|
|
33
|
-
this.fetchData();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
componentDidRender() {
|
|
37
|
-
this.setupGridLayout();
|
|
38
|
-
}
|
|
39
|
-
injectSDK() {
|
|
40
|
-
return new Promise((resolve) => {
|
|
41
|
-
const script = document.createElement('script');
|
|
42
|
-
script.type = 'text/javascript';
|
|
43
|
-
script.src = 'https://cdn.jsdelivr.net/npm/macy@2';
|
|
44
|
-
document.body.appendChild(script);
|
|
45
|
-
return resolve(true);
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
setupGridLayout() {
|
|
49
|
-
if (!this.isLayoutSetup && this.similarStyles.length > 0 && document.querySelector('#similar-styles--grid')) {
|
|
50
|
-
const script = document.createElement('script');
|
|
51
|
-
script.type = 'text/javascript';
|
|
52
|
-
script.innerHTML = `
|
|
53
|
-
var masonry = new Macy({
|
|
54
|
-
container: '#similar-styles--grid',
|
|
55
|
-
useContainerForBreakpoints: true,
|
|
56
|
-
margin: 16,
|
|
57
|
-
columns: 2,
|
|
58
|
-
});
|
|
59
|
-
`;
|
|
60
|
-
document.body.appendChild(script);
|
|
61
|
-
this.isLayoutSetup = true;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
fetchData() {
|
|
65
|
-
try {
|
|
66
|
-
const promises = [
|
|
67
|
-
services.HttpService().fetchStyleDetail(this.lookbookInfo.id).then(response => {
|
|
68
|
-
const { styleInfo, similarStyles } = response;
|
|
69
|
-
this.similarStyles = similarStyles;
|
|
70
|
-
if (styleInfo) {
|
|
71
|
-
this.lookbookInfo = styleInfo;
|
|
72
|
-
this.albumMedias = styleInfo.albumMedias || [];
|
|
73
|
-
this.currentMedia = (styleInfo.albumMedias || [])[0];
|
|
74
|
-
}
|
|
75
|
-
}),
|
|
76
|
-
services.HttpService().fetchStyleComments(this.lookbookInfo.id).then(response => {
|
|
77
|
-
this.totalComments = response.total;
|
|
78
|
-
this.lookbookComments = response.data;
|
|
79
|
-
}),
|
|
80
|
-
];
|
|
81
|
-
return Promise.all(promises);
|
|
82
|
-
}
|
|
83
|
-
catch (e) { }
|
|
84
|
-
}
|
|
85
|
-
closeModal() {
|
|
86
|
-
this.isModalOpen = false;
|
|
87
|
-
const el = document.querySelector('style-detail');
|
|
88
|
-
el.remove();
|
|
89
|
-
}
|
|
90
|
-
onClickLookbook(style) {
|
|
91
|
-
const elLookbookModal = document.createElement('div');
|
|
92
|
-
elLookbookModal.innerHTML = `
|
|
93
|
-
<style-detail
|
|
94
|
-
salon-id=${this.salonId}
|
|
95
|
-
salon-lookbook='${JSON.stringify(style)}'
|
|
96
|
-
></style-detail>
|
|
97
|
-
`;
|
|
98
|
-
document.body.appendChild(elLookbookModal);
|
|
99
|
-
}
|
|
100
|
-
onClickPrev() {
|
|
101
|
-
if (this.currentMediaIdx === 0) {
|
|
102
|
-
this.currentMediaIdx = this.albumMedias.length - 1;
|
|
103
|
-
this.currentMedia = this.albumMedias[this.currentMediaIdx];
|
|
104
|
-
}
|
|
105
|
-
else {
|
|
106
|
-
this.currentMediaIdx = this.currentMediaIdx - 1;
|
|
107
|
-
this.currentMedia = this.albumMedias[this.currentMediaIdx];
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
onClickNext() {
|
|
111
|
-
if (this.currentMediaIdx === this.albumMedias.length - 1) {
|
|
112
|
-
this.currentMediaIdx = 0;
|
|
113
|
-
this.currentMedia = this.albumMedias[0];
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
this.currentMediaIdx = this.currentMediaIdx + 1;
|
|
117
|
-
this.currentMedia = this.albumMedias[this.currentMediaIdx];
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
const { createdDate, totalView, totalLike, totalBooking, album, salon, stylist, } = this.lookbookInfo;
|
|
122
|
-
if (this.isModalOpen) {
|
|
123
|
-
const { caption, description, mediaUrl } = this.currentMedia || {};
|
|
124
|
-
const isVideo = services.isVideoMedia((this.currentMedia || {}));
|
|
125
|
-
return (index.h("div", { class: "salon-modal salon-modal--lookbook-detail" }, index.h("div", { class: "salon-modal--inner" }, index.h("div", { class: "salon-modal--content" }, index.h("div", { class: "style-detail" }, index.h("div", { class: "style-detail--header" }, index.h("div", { style: {
|
|
126
|
-
position: 'relative',
|
|
127
|
-
overflow: 'hidden',
|
|
128
|
-
} }, index.h("div", { style: Object.assign({ backgroundColor: colors.Colors.Gray01, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0', filter: 'blur(30px)', position: 'absolute', inset: '0', zIndex: '1' }, this.currentMedia && !services.isVideoMedia(this.currentMedia) ? { backgroundImage: `url("${this.currentMedia.imageThumb}")` } : {}) }), index.h("div", { style: {
|
|
129
|
-
zIndex: '2',
|
|
130
|
-
position: 'relative',
|
|
131
|
-
width: '100%',
|
|
132
|
-
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
|
133
|
-
padding: '12px 16px',
|
|
134
|
-
overflow: 'hidden',
|
|
135
|
-
} }, index.h("span", { style: {
|
|
136
|
-
color: colors.Colors.White,
|
|
137
|
-
border: 'none',
|
|
138
|
-
display: 'flex',
|
|
139
|
-
alignItems: 'center',
|
|
140
|
-
justifyContent: 'center',
|
|
141
|
-
height: '32px',
|
|
142
|
-
} }, index.h("span", null, this.currentMediaIdx + 1, " / ", this.albumMedias.length)), index.h("div", { style: {
|
|
143
|
-
display: 'flex',
|
|
144
|
-
alignItems: 'center',
|
|
145
|
-
position: 'absolute',
|
|
146
|
-
right: '16px',
|
|
147
|
-
top: '50%',
|
|
148
|
-
transform: 'translate(0, -50%)',
|
|
149
|
-
} }, index.h("button", { type: "text", class: "btn btn-light", style: {
|
|
150
|
-
backgroundColor: colors.Colors.White,
|
|
151
|
-
borderColor: colors.Colors.White,
|
|
152
|
-
border: 'none',
|
|
153
|
-
borderRadius: '50px',
|
|
154
|
-
display: 'flex',
|
|
155
|
-
alignItems: 'center',
|
|
156
|
-
justifyContent: 'center',
|
|
157
|
-
height: '32px',
|
|
158
|
-
width: '32px',
|
|
159
|
-
marginLeft: '12px',
|
|
160
|
-
}, onClick: () => this.closeModal() }, index.h("i", { class: "ri-close-fill", style: { fontSize: '16px', lineHeight: '1' } })))), index.h("div", { style: { position: 'relative', zIndex: "3" } }, index.h("div", { class: "style-detail--slides", style: {
|
|
161
|
-
marginTop: '16px',
|
|
162
|
-
marginBottom: '12px',
|
|
163
|
-
} }, index.h("div", { class: "style-detail--slides--image", style: {
|
|
164
|
-
width: '100%',
|
|
165
|
-
position: 'relative',
|
|
166
|
-
height: '360px',
|
|
167
|
-
} }, isVideo && (index.h("video", { muted: true, controls: true, width: "100%", height: "100%" }, index.h("source", { src: mediaUrl, type: "video/mp4" }))), !isVideo && (index.h("div", { style: {
|
|
168
|
-
position: 'absolute',
|
|
169
|
-
inset: '0',
|
|
170
|
-
zIndex: '2',
|
|
171
|
-
display: 'flex',
|
|
172
|
-
alignItems: 'center',
|
|
173
|
-
justifyContent: 'center',
|
|
174
|
-
} }, index.h("img", { src: mediaUrl, alt: caption, style: {
|
|
175
|
-
objectFit: 'contain',
|
|
176
|
-
maxHeight: '100%',
|
|
177
|
-
maxWidth: '100%',
|
|
178
|
-
} })))), index.h("div", { class: "style-detail--slides--thumbnails", style: {
|
|
179
|
-
width: '100%',
|
|
180
|
-
position: 'relative',
|
|
181
|
-
} }, this.albumMedias.map((media, idx) => {
|
|
182
|
-
const isStyleVideo = services.isVideoMedia(media);
|
|
183
|
-
return (index.h("div", { class: "style-detail--slides--thumbnail", style: Object.assign(Object.assign({ backgroundColor: colors.Colors.Gray01, borderRadius: '4px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, this.currentMediaIdx !== idx ? { opacity: '0.75' } : {}), !isStyleVideo ? {
|
|
184
|
-
backgroundImage: `url("${media.imageThumb || media.imageThumbMedium}")`,
|
|
185
|
-
backgroundRepeat: 'no-repeat',
|
|
186
|
-
backgroundPosition: 'center center',
|
|
187
|
-
backgroundSize: 'cover',
|
|
188
|
-
} : {}), onClick: () => {
|
|
189
|
-
this.currentMedia = media;
|
|
190
|
-
this.currentMediaIdx = idx;
|
|
191
|
-
} }, isStyleVideo && (index.h("div", null, index.h("video", { muted: true, width: "100%", height: "100%", poster: media.imageThumb }, index.h("source", { src: media.mediaUrl, type: "video/mp4" })), index.h("i", { class: "ri-play-circle-fill", style: {
|
|
192
|
-
fontSize: '48px',
|
|
193
|
-
color: colors.Colors.TextColor,
|
|
194
|
-
position: 'absolute',
|
|
195
|
-
left: '50%',
|
|
196
|
-
top: '50%',
|
|
197
|
-
transform: 'translate(-50%, -50%)',
|
|
198
|
-
} })))));
|
|
199
|
-
}))), this.albumMedias.length > 1 && (index.h("div", null, index.h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--prev", onClick: () => this.onClickPrev() }, index.h("i", { class: "ri-arrow-left-line", style: { color: colors.Colors.TextColor, fontSize: '18px' } })), index.h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--next", onClick: () => this.onClickNext() }, index.h("i", { class: "ri-arrow-right-line", style: { color: colors.Colors.TextColor, fontSize: '18px' } }))))))), index.h("div", { class: "style-detail--content" }, index.h("div", { class: "container" }, index.h("div", { style: {
|
|
200
|
-
paddingBottom: '24px',
|
|
201
|
-
paddingTop: '24px',
|
|
202
|
-
} }, index.h("div", { class: "row" }, index.h("div", { class: this.similarStyles.length > 0 ? 'col-md-8' : 'col-md-12', style: { marginBottom: '24px' } }, index.h("div", { class: "row" }, salon && (index.h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, index.h("div", { style: {
|
|
203
|
-
backgroundColor: colors.Colors.Red01,
|
|
204
|
-
borderRadius: '4px',
|
|
205
|
-
padding: '8px',
|
|
206
|
-
display: 'flex',
|
|
207
|
-
alignItems: 'center',
|
|
208
|
-
justifyContent: 'space-between',
|
|
209
|
-
} }, index.h("div", { style: { paddingLeft: '8px' } }, index.h("div", { style: { color: colors.Colors.Gray05, fontSize: '12px' } }, "At salon"), index.h("div", { style: {
|
|
210
|
-
color: colors.Colors.Secondary,
|
|
211
|
-
fontSize: '20px',
|
|
212
|
-
lineHeight: '24px',
|
|
213
|
-
} }, salon.businessName)), index.h("div", { style: {
|
|
214
|
-
backgroundImage: `url("${services.getSalonImage(salon)}")`,
|
|
215
|
-
backgroundColor: colors.Colors.Red02,
|
|
216
|
-
backgroundSize: 'cover',
|
|
217
|
-
backgroundRepeat: 'no-repeat',
|
|
218
|
-
backgroundPosition: '0 0',
|
|
219
|
-
borderRadius: '4px',
|
|
220
|
-
height: '48px',
|
|
221
|
-
width: '48px',
|
|
222
|
-
} })))), stylist && stylist.id && (index.h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, index.h("div", { style: {
|
|
223
|
-
backgroundColor: colors.Colors.Yellow01,
|
|
224
|
-
borderRadius: '4px',
|
|
225
|
-
padding: '8px',
|
|
226
|
-
display: 'flex',
|
|
227
|
-
alignItems: 'center',
|
|
228
|
-
justifyContent: 'space-between',
|
|
229
|
-
} }, index.h("div", { style: { paddingLeft: '8px' } }, index.h("div", { style: { color: colors.Colors.Gray05, fontSize: '12px' } }, "By stylist"), index.h("div", { style: {
|
|
230
|
-
color: colors.Colors.Secondary,
|
|
231
|
-
fontSize: '20px',
|
|
232
|
-
lineHeight: '24px',
|
|
233
|
-
} }, stylist.fullName)), index.h("div", { style: {
|
|
234
|
-
backgroundImage: `url("${stylist.avatar}")`,
|
|
235
|
-
backgroundColor: colors.Colors.Yellow02,
|
|
236
|
-
backgroundSize: 'cover',
|
|
237
|
-
backgroundRepeat: 'no-repeat',
|
|
238
|
-
backgroundPosition: '0 0',
|
|
239
|
-
borderRadius: '4px',
|
|
240
|
-
height: '48px',
|
|
241
|
-
width: '48px',
|
|
242
|
-
} }))))), index.h("div", { style: {
|
|
243
|
-
borderBottom: `1px solid ${colors.Colors.Gray02}`,
|
|
244
|
-
borderTop: `1px solid ${colors.Colors.Gray02}`,
|
|
245
|
-
display: 'flex',
|
|
246
|
-
alignItems: 'center',
|
|
247
|
-
justifyContent: 'space-between',
|
|
248
|
-
paddingBottom: '16px',
|
|
249
|
-
paddingTop: '16px',
|
|
250
|
-
} }, index.h("div", { style: {
|
|
251
|
-
display: 'flex',
|
|
252
|
-
alignItems: 'center',
|
|
253
|
-
justifyContent: 'space-around',
|
|
254
|
-
flexShrink: '1',
|
|
255
|
-
flexGrow: '1',
|
|
256
|
-
} }, index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalLike), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "faves")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalBooking), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "booked")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalView), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "views")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, this.totalComments), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "comments")))), (caption || description) && (index.h("div", { style: { paddingTop: '24px' } }, index.h("div", { style: { color: colors.Colors.Gray04, fontSize: '14px' } }, createdDate && services.dayjs_min(createdDate).format(services.shortDateYearFormat)), index.h("div", { style: { fontSize: '24px' } }, caption), index.h("div", { style: {
|
|
257
|
-
fontSize: '16px',
|
|
258
|
-
paddingTop: caption ? '16px' : '0',
|
|
259
|
-
} }, description))), album && album.tags.length > 0 && (index.h("div", { style: {
|
|
260
|
-
paddingTop: '24px',
|
|
261
|
-
marginBottom: '-12px',
|
|
262
|
-
} }, album.tags.map((tag, idx) => (index.h("button", { class: "btn btn-light", key: `album--tag-${idx}`, style: {
|
|
263
|
-
backgroundColor: colors.Colors.Gray01,
|
|
264
|
-
borderColor: colors.Colors.Gray01,
|
|
265
|
-
borderRadius: '4px',
|
|
266
|
-
marginRight: '12px',
|
|
267
|
-
marginBottom: '12px',
|
|
268
|
-
} }, tag))))), index.h("div", { style: { marginTop: '32px' } }, this.lookbookComments && this.lookbookComments.length > 0 && (index.h("div", null, index.h("div", { style: { fontWeight: '600', marginBottom: '8px' } }, this.totalComments, " ", this.totalComments === 1 ? 'comment' : 'comments'), index.h("div", { class: "view view--style-comments", style: {
|
|
269
|
-
borderTop: `1px solid ${colors.Colors.Gray02}`,
|
|
270
|
-
paddingTop: '24px',
|
|
271
|
-
paddingBottom: '24px',
|
|
272
|
-
} }, this.lookbookComments.map((comment, idx) => {
|
|
273
|
-
const { user, title, description, createdDate } = comment;
|
|
274
|
-
return (index.h("div", { key: `style-info--comment-${idx}`, style: idx > 0 ? {
|
|
275
|
-
borderTop: `1px solid ${colors.Colors.Gray02}`,
|
|
276
|
-
marginTop: '24px',
|
|
277
|
-
paddingTop: '24px',
|
|
278
|
-
} : {} }, index.h("div", { style: { overflow: 'hidden' } }, index.h("user-avatar", { size: 48, avatar: user.avatar, name: index.h("div", null, index.h("div", { style: { color: colors.Colors.Gray04, lineHeight: '1', fontSize: '12px', fontWeight: '400' } }, services.dayjs_min(createdDate).fromNow()), index.h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName)), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), index.h("div", { style: {
|
|
279
|
-
color: colors.Colors.Black,
|
|
280
|
-
fontSize: '16px',
|
|
281
|
-
paddingTop: '16px',
|
|
282
|
-
} }, title), description && (index.h("div", { style: {
|
|
283
|
-
color: colors.Colors.Gray05,
|
|
284
|
-
paddingTop: '8px',
|
|
285
|
-
} }, description))));
|
|
286
|
-
})))))), index.h("div", { class: "col-md-4", style: { marginBottom: '24px' } }, index.h("div", { class: "block block--similar-styles" }, this.similarStyles.length > 0 && (index.h("div", { class: "block--content" }, index.h("h3", { style: {
|
|
287
|
-
lineHeight: '1.2',
|
|
288
|
-
fontSize: '24px',
|
|
289
|
-
color: colors.Colors.Secondary,
|
|
290
|
-
} }, "More like this"), index.h("div", { style: { marginTop: '16px' } }, index.h("div", { class: "similar-styles--grid", id: "similar-styles--grid" }, this.similarStyles.slice(0, 6).map(style => {
|
|
291
|
-
const { caption, imageThumbMedium, owner } = style;
|
|
292
|
-
return (index.h("div", { class: "similar-styles--grid-item", onClick: () => {
|
|
293
|
-
this.closeModal();
|
|
294
|
-
this.onClickLookbook(style);
|
|
295
|
-
} }, index.h("div", { class: "card", style: {
|
|
296
|
-
background: 'none',
|
|
297
|
-
border: 'none',
|
|
298
|
-
cursor: 'pointer',
|
|
299
|
-
} }, index.h("div", { class: "similar-styles--grid-item--image", style: {
|
|
300
|
-
borderRadius: '8px',
|
|
301
|
-
overflow: 'hidden',
|
|
302
|
-
minHeight: '80px',
|
|
303
|
-
background: colors.Colors.Gray01,
|
|
304
|
-
} }, index.h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (index.h("div", { class: "card-body", style: { paddingLeft: '0' } }, index.h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
|
|
305
|
-
}))))))))))))))));
|
|
306
|
-
}
|
|
307
|
-
return null;
|
|
308
|
-
}
|
|
309
|
-
};
|
|
310
|
-
StyleDetail.style = indexCss;
|
|
311
|
-
|
|
312
|
-
exports.style_detail = StyleDetail;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
function formatWebsiteUrl(website) {
|
|
4
|
-
return !!website ? website.indexOf('http') > -1 ? website : `http://${website}` : null;
|
|
5
|
-
}
|
|
6
|
-
function formatFullAddress(salon) {
|
|
7
|
-
const { businessAddress, city, state, zipcode, } = salon || {};
|
|
8
|
-
const stateFields = [state, zipcode].filter(field => !!field);
|
|
9
|
-
if (businessAddress) {
|
|
10
|
-
return [businessAddress, city]
|
|
11
|
-
.filter(field => !!field)
|
|
12
|
-
.concat(stateFields.length > 0 ? [stateFields.join(' ')] : [])
|
|
13
|
-
.join(', ');
|
|
14
|
-
}
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
function getRatingText() {
|
|
18
|
-
return ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
exports.formatFullAddress = formatFullAddress;
|
|
22
|
-
exports.formatWebsiteUrl = formatWebsiteUrl;
|
|
23
|
-
exports.getRatingText = getRatingText;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"entries": [
|
|
3
|
-
"./components/chat-box/index.js",
|
|
4
|
-
"./components/chat-button/index.js",
|
|
5
|
-
"./components/chat-form/index.js",
|
|
6
|
-
"./components/chat-messages/index.js",
|
|
7
|
-
"./components/chat-rooms/index.js",
|
|
8
|
-
"./components/google-map/index.js",
|
|
9
|
-
"./components/salon-booking/index.js",
|
|
10
|
-
"./components/salon-booking/salon-booking-modal.js",
|
|
11
|
-
"./components/salon-gift-card/index.js",
|
|
12
|
-
"./components/salon-gift-card/salon-gift-card-modal.js",
|
|
13
|
-
"./components/salon-info/index.js",
|
|
14
|
-
"./components/salon-latest-reviews/index.js",
|
|
15
|
-
"./components/salon-latest-styles/index.js",
|
|
16
|
-
"./components/salon-locations/index.js",
|
|
17
|
-
"./components/salon-lookbook/index.js",
|
|
18
|
-
"./components/salon-ranking/index.js",
|
|
19
|
-
"./components/salon-reviews/index.js",
|
|
20
|
-
"./components/salon-schedules/index.js",
|
|
21
|
-
"./components/salon-services/index.js",
|
|
22
|
-
"./components/salon-stylists/index.js",
|
|
23
|
-
"./components/style-detail/index.js",
|
|
24
|
-
"./components/user-avatar/index.js"
|
|
25
|
-
],
|
|
26
|
-
"compiler": {
|
|
27
|
-
"name": "@stencil/core",
|
|
28
|
-
"version": "2.22.3",
|
|
29
|
-
"typescriptVersion": "4.9.4"
|
|
30
|
-
},
|
|
31
|
-
"collections": [],
|
|
32
|
-
"bundles": []
|
|
33
|
-
}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
.chat-widget,
|
|
2
|
-
.chat-widget--sidebar,
|
|
3
|
-
.chat-widget--content {
|
|
4
|
-
display: flex;
|
|
5
|
-
height: 100%;
|
|
6
|
-
width: 100%;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.chat-widget {
|
|
10
|
-
font-size: 16px;
|
|
11
|
-
position: relative;
|
|
12
|
-
font-family: 'Roboto', sans-serif;
|
|
13
|
-
-webkit-font-smoothing: antialiased;
|
|
14
|
-
-moz-osx-font-smoothing: grayscale;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.chat-widget--sidebar,
|
|
18
|
-
.chat-widget--content {
|
|
19
|
-
background-color: #fff;
|
|
20
|
-
border: 1px solid #EFEFEF;
|
|
21
|
-
position: absolute;
|
|
22
|
-
inset: 0;
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.chat-widget .chat-widget--sidebar {
|
|
27
|
-
z-index: 10;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.chat-widget .chat-widget--content {
|
|
31
|
-
z-index: 5;
|
|
32
|
-
}
|
|
33
|
-
.chat-widget.has-chat-room .chat-widget--content {
|
|
34
|
-
z-index: 10;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.chat-widget--content-header {
|
|
38
|
-
background-color: #001529;
|
|
39
|
-
border-bottom: 1px solid #EFEFEF;
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: space-between;
|
|
43
|
-
padding: 16px;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.chat-widget--content-title {
|
|
47
|
-
font-size: 20px;
|
|
48
|
-
font-weight: 600;
|
|
49
|
-
line-height: 1;
|
|
50
|
-
margin: 0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.chat-widget--content-close {
|
|
54
|
-
border: 1px solid #fff;
|
|
55
|
-
cursor: pointer;
|
|
56
|
-
display: block;
|
|
57
|
-
position: absolute;
|
|
58
|
-
z-index: 1000;
|
|
59
|
-
top: 50%;
|
|
60
|
-
right: 0;
|
|
61
|
-
width: 30px;
|
|
62
|
-
height: 30px;
|
|
63
|
-
transform: translate(0, -50%);
|
|
64
|
-
|
|
65
|
-
-moz-border-radius: 30px;
|
|
66
|
-
-webkit-border-radius: 30px;
|
|
67
|
-
border-radius: 30px;
|
|
68
|
-
|
|
69
|
-
background-size: contain;
|
|
70
|
-
background-repeat: no-repeat;
|
|
71
|
-
background-position: center center;
|
|
72
|
-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
@media (min-width: 992px) {
|
|
78
|
-
.chat-widget--sidebar,
|
|
79
|
-
.chat-widget--content {
|
|
80
|
-
position: static;
|
|
81
|
-
width: auto;
|
|
82
|
-
|
|
83
|
-
-moz-border-radius: 8px;
|
|
84
|
-
-webkit-border-radius: 8px;
|
|
85
|
-
border-radius: 8px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.chat-widget--sidebar {
|
|
89
|
-
min-width: 320px;
|
|
90
|
-
max-width: 320px;
|
|
91
|
-
margin-right: 24px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.chat-widget--content {
|
|
95
|
-
flex-grow: 1;
|
|
96
|
-
flex-shrink: 1;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.chat-rooms--search,
|
|
100
|
-
.chat-widget--content-header {
|
|
101
|
-
-moz-border-radius: 8px 8px 0 0;
|
|
102
|
-
-webkit-border-radius: 8px 8px 0 0;
|
|
103
|
-
border-radius: 8px 8px 0 0;
|
|
104
|
-
}
|
|
105
|
-
}
|