comand-component-library 3.1.95 → 3.1.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
@@ -1,10 +1,13 @@
|
|
1
1
|
[
|
2
2
|
{
|
3
3
|
"name": "User name 1",
|
4
|
-
"image":
|
4
|
+
"image": {
|
5
|
+
"src": "/media/images/user-images/fake-user-1.jpg",
|
6
|
+
"alt": "Alternative text"
|
7
|
+
},
|
5
8
|
"profession": "User profession",
|
6
9
|
"position": "User position",
|
7
|
-
"description": "
|
10
|
+
"description": "User profile with image",
|
8
11
|
"links": [
|
9
12
|
{
|
10
13
|
"path": "mailto:",
|
@@ -15,7 +18,6 @@
|
|
15
18
|
},
|
16
19
|
{
|
17
20
|
"name": "User name 2",
|
18
|
-
"image": "",
|
19
21
|
"profession": "User profession",
|
20
22
|
"position": "User position",
|
21
23
|
"links": [
|
@@ -34,7 +36,6 @@
|
|
34
36
|
},
|
35
37
|
{
|
36
38
|
"name": "User name 3",
|
37
|
-
"image": "",
|
38
39
|
"profession": "User profession",
|
39
40
|
"position": "User position",
|
40
41
|
"links": [
|
@@ -58,7 +59,6 @@
|
|
58
59
|
},
|
59
60
|
{
|
60
61
|
"name": "User name 4",
|
61
|
-
"image": "",
|
62
62
|
"profession": "User profession",
|
63
63
|
"position": "User position",
|
64
64
|
"links": [
|
@@ -82,7 +82,6 @@
|
|
82
82
|
},
|
83
83
|
{
|
84
84
|
"name": "User name 5",
|
85
|
-
"image": "",
|
86
85
|
"profession": "User profession",
|
87
86
|
"position": "User position",
|
88
87
|
"links": [
|
@@ -67,19 +67,18 @@
|
|
67
67
|
<!-- begin boxType 'product' -->
|
68
68
|
<a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" href="#" @click.prevent="clickOnProduct(product)">
|
69
69
|
<div class="box-header flex-container vertical">
|
70
|
-
<
|
70
|
+
<figure v-if="product.image">
|
71
|
+
<img :src="product.image.src" :alt="product.image.alt"/>
|
72
|
+
<figcaption>{{ product.name }}</figcaption>
|
73
|
+
</figure>
|
74
|
+
<p v-else>{{ product.name }}</p>
|
75
|
+
|
71
76
|
<div class="ribbon-new" v-if="product.new">
|
72
77
|
<span>{{ getMessage("cmdbox.productbox.new") }}</span>
|
73
78
|
</div>
|
74
79
|
<div v-if="product.discount" class="ribbon-discount">
|
75
80
|
<span>{{ product.discount }}</span>
|
76
81
|
</div>
|
77
|
-
<!-- begin CmdHeadline -->
|
78
|
-
<CmdHeadline
|
79
|
-
v-if="cmdHeadline?.headlineText || product.name"
|
80
|
-
v-bind="cmdHeadline || {}"
|
81
|
-
:headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : product.name"/>
|
82
|
-
<!-- end CmdHeadline -->
|
83
82
|
</div>
|
84
83
|
<div class="box-body">
|
85
84
|
<p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
|
@@ -94,15 +93,14 @@
|
|
94
93
|
<!-- begin boxType 'user' -->
|
95
94
|
<div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
|
96
95
|
<div class="box-header flex-container vertical">
|
97
|
-
<
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
<!-- end CmdHeadline -->
|
96
|
+
<figure v-if="user.image">
|
97
|
+
<img :src="user.image.src" :alt="user.image.alt"/>
|
98
|
+
<figcaption>{{ user.name }}</figcaption>
|
99
|
+
</figure>
|
100
|
+
<div v-else>
|
101
|
+
<span :class="defaultProfileIconClass" :title="user.name"></span>
|
102
|
+
<p>{{ user.name }}</p>
|
103
|
+
</div>
|
106
104
|
</div>
|
107
105
|
<div class="box-body">
|
108
106
|
<p v-if="user.profession">{{ user.profession }}</p>
|
@@ -495,6 +493,8 @@ export default {
|
|
495
493
|
|
496
494
|
&.user {
|
497
495
|
> .box-header {
|
496
|
+
--icon-size: 6rem;
|
497
|
+
|
498
498
|
padding: var(--default-padding);
|
499
499
|
|
500
500
|
.cmd-headline {
|
@@ -504,14 +504,30 @@ export default {
|
|
504
504
|
}
|
505
505
|
}
|
506
506
|
|
507
|
-
|
507
|
+
img, > div:first-child > [class*="icon"] {
|
508
508
|
display: table;
|
509
|
-
margin: 0 auto;
|
509
|
+
margin: 0 auto var(--default-margin) auto;
|
510
510
|
padding: calc(var(--default-padding) * 3);
|
511
511
|
border-radius: var(--full-circle);
|
512
512
|
background: var(--primary-color);
|
513
|
-
font-size: 6rem;
|
514
513
|
color: var(--pure-white);
|
514
|
+
|
515
|
+
& + p, & + figcaption {
|
516
|
+
margin: 0 auto;
|
517
|
+
text-align: center;
|
518
|
+
font-weight: bold;
|
519
|
+
font-size: 2rem;
|
520
|
+
}
|
521
|
+
}
|
522
|
+
|
523
|
+
img {
|
524
|
+
padding: 0;
|
525
|
+
width: calc(var(--icon-size) * 2);
|
526
|
+
aspect-ratio: 1/1;
|
527
|
+
}
|
528
|
+
|
529
|
+
> div:first-child > [class*="icon"] {
|
530
|
+
font-size: var(--icon-size);
|
515
531
|
}
|
516
532
|
}
|
517
533
|
|