solid-vcard-business-card 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/business-card.js +26 -13
package/package.json
CHANGED
package/src/business-card.js
CHANGED
|
@@ -9,6 +9,7 @@ import { VCARD } from "@inrupt/vocab-common-rdf";
|
|
|
9
9
|
export class SolidBusinessCard extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
12
|
+
this.attachShadow({ mode: 'open' });
|
|
12
13
|
this._profile = null;
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -51,7 +52,7 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
animateGradient() {
|
|
54
|
-
const nameElement = this.querySelector('.business-card__name');
|
|
55
|
+
const nameElement = this.shadowRoot.querySelector('.business-card__name');
|
|
55
56
|
if (!nameElement) return;
|
|
56
57
|
|
|
57
58
|
let position = -200;
|
|
@@ -123,8 +124,11 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
123
124
|
|
|
124
125
|
|
|
125
126
|
renderLoading() {
|
|
126
|
-
this.innerHTML = `
|
|
127
|
+
this.shadowRoot.innerHTML = `
|
|
127
128
|
<style>
|
|
129
|
+
:host {
|
|
130
|
+
display: inline-block;
|
|
131
|
+
}
|
|
128
132
|
.business-card {
|
|
129
133
|
font-family: 'Georgia', 'Times New Roman', serif;
|
|
130
134
|
background:
|
|
@@ -138,7 +142,8 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
138
142
|
inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.8);
|
|
139
143
|
padding: 2rem;
|
|
140
144
|
width: 21.875rem;
|
|
141
|
-
height: 12.5rem;
|
|
145
|
+
min-height: 12.5rem;
|
|
146
|
+
box-sizing: border-box;
|
|
142
147
|
display: flex;
|
|
143
148
|
align-items: center;
|
|
144
149
|
justify-content: center;
|
|
@@ -163,8 +168,11 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
163
168
|
|
|
164
169
|
const {name, email, birthday, photoUrl} = this._profile;
|
|
165
170
|
|
|
166
|
-
this.innerHTML = `
|
|
171
|
+
this.shadowRoot.innerHTML = `
|
|
167
172
|
<style>
|
|
173
|
+
:host {
|
|
174
|
+
display: inline-block;
|
|
175
|
+
}
|
|
168
176
|
.business-card {
|
|
169
177
|
font-family: 'Georgia', 'Times New Roman', serif;
|
|
170
178
|
background:
|
|
@@ -179,7 +187,8 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
179
187
|
inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.8);
|
|
180
188
|
padding: 2.5rem;
|
|
181
189
|
width: 21.875rem;
|
|
182
|
-
height: 12.5rem;
|
|
190
|
+
min-height: 12.5rem;
|
|
191
|
+
box-sizing: border-box;
|
|
183
192
|
position: relative;
|
|
184
193
|
overflow: hidden;
|
|
185
194
|
transition: all 0.3s ease;
|
|
@@ -215,6 +224,7 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
215
224
|
flex-direction: column;
|
|
216
225
|
height: 100%;
|
|
217
226
|
justify-content: space-between;
|
|
227
|
+
padding-right: 6rem;
|
|
218
228
|
}
|
|
219
229
|
|
|
220
230
|
.business-card__header {
|
|
@@ -268,8 +278,8 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
268
278
|
|
|
269
279
|
.business-card__picture {
|
|
270
280
|
position: absolute;
|
|
271
|
-
top:
|
|
272
|
-
right:
|
|
281
|
+
top: 2.5rem;
|
|
282
|
+
right: 2.5rem;
|
|
273
283
|
width: 5rem;
|
|
274
284
|
height: 5rem;
|
|
275
285
|
border-radius: 50%;
|
|
@@ -317,16 +327,15 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
317
327
|
}
|
|
318
328
|
</style>
|
|
319
329
|
<div class="business-card">
|
|
330
|
+
<div class="business-card__picture">
|
|
331
|
+
<img src="${photoUrl}" alt="Profile picture">
|
|
332
|
+
</div>
|
|
320
333
|
<div class="business-card__content">
|
|
321
334
|
<div class="business-card__header">
|
|
322
335
|
<h3 class="business-card__name">${name}</h3>
|
|
323
336
|
<div class="business-card__divider"></div>
|
|
324
337
|
</div>
|
|
325
338
|
|
|
326
|
-
<div class="business-card__picture">
|
|
327
|
-
<img src="${photoUrl}" alt="Profile picture">
|
|
328
|
-
</div>
|
|
329
|
-
|
|
330
339
|
<div class="business-card__footer">
|
|
331
340
|
${email ? `
|
|
332
341
|
<div>
|
|
@@ -347,8 +356,11 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
347
356
|
}
|
|
348
357
|
|
|
349
358
|
renderError(error) {
|
|
350
|
-
this.innerHTML = `
|
|
359
|
+
this.shadowRoot.innerHTML = `
|
|
351
360
|
<style>
|
|
361
|
+
:host {
|
|
362
|
+
display: inline-block;
|
|
363
|
+
}
|
|
352
364
|
.business-card {
|
|
353
365
|
font-family: 'Georgia', 'Times New Roman', serif;
|
|
354
366
|
background:
|
|
@@ -361,7 +373,8 @@ export class SolidBusinessCard extends HTMLElement {
|
|
|
361
373
|
0 0.25rem 1rem rgba(0, 0, 0, 0.08);
|
|
362
374
|
padding: 2rem;
|
|
363
375
|
width: 21.875rem;
|
|
364
|
-
height: 12.5rem;
|
|
376
|
+
min-height: 12.5rem;
|
|
377
|
+
box-sizing: border-box;
|
|
365
378
|
display: flex;
|
|
366
379
|
flex-direction: column;
|
|
367
380
|
align-items: center;
|