@lancom/shared 0.0.190 → 0.0.191
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/assets/js/utils/colors.js +2 -0
- package/components/product/gallery/gallery.vue +1 -1
- package/components/product/printed_product_images/printed-product-images.scss +32 -0
- package/components/product/printed_product_images/printed-product-images.vue +52 -0
- package/components/product/printed_product_images/printed_product_image/printed-product-image.scss +76 -0
- package/components/product/printed_product_images/printed_product_image/printed-product-image.vue +50 -0
- package/mixins/product-preview.js +1 -3
- package/nuxt.config.js +5 -1
- package/package.json +1 -1
|
@@ -47,6 +47,8 @@ export const getProductMediumCover = (product, type, color) => getProductCover(p
|
|
|
47
47
|
export const getProductLargeCover = (product, type, color) => getProductCover(product, 'large', type, color);
|
|
48
48
|
export const getProductOriginCover = (product, type, color) => getProductCover(product, 'origin', type, color);
|
|
49
49
|
|
|
50
|
+
export const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
|
|
51
|
+
|
|
50
52
|
export function getColorBackgroundStyle(color) {
|
|
51
53
|
const { rgb, pattern, name } = color || {};
|
|
52
54
|
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<div
|
|
39
39
|
v-if="image.print.pricing"
|
|
40
40
|
class="Gallery__big-print-price">
|
|
41
|
-
Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.
|
|
41
|
+
Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.pricing.min || 1 }}+)
|
|
42
42
|
</div>
|
|
43
43
|
<div class="Gallery__big-print-price-info">
|
|
44
44
|
example only
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
@import "@/assets/scss/variables";
|
|
2
|
+
|
|
3
|
+
.PrintedProductImages {
|
|
4
|
+
&__title {
|
|
5
|
+
margin: 30px 0;
|
|
6
|
+
text-align: center;
|
|
7
|
+
font-size: 28px;
|
|
8
|
+
color: #323232;
|
|
9
|
+
width: 100%;
|
|
10
|
+
font-weight: 800;
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
}
|
|
13
|
+
&__products {
|
|
14
|
+
display: flex;
|
|
15
|
+
margin: -32px 0 0 -32px;
|
|
16
|
+
width: calc(100% + 32px);
|
|
17
|
+
}
|
|
18
|
+
&__product {
|
|
19
|
+
margin: 32px 0 0 32px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
::v-deep {
|
|
24
|
+
.ProductList {
|
|
25
|
+
&__item-wrapper {
|
|
26
|
+
height: 330px !important;
|
|
27
|
+
}
|
|
28
|
+
&__item--active {
|
|
29
|
+
min-height: 330px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-if="hasImages"
|
|
4
|
+
class="PrintedProductImages__wrapper">
|
|
5
|
+
<div class="PrintedProductImages__title">
|
|
6
|
+
Print Gallery
|
|
7
|
+
</div>
|
|
8
|
+
<lancom-product-list
|
|
9
|
+
:products="images"
|
|
10
|
+
:placeholder="false">
|
|
11
|
+
<template #product="{ product, full }">
|
|
12
|
+
<div
|
|
13
|
+
:class="{
|
|
14
|
+
'ProductList__item--active': full
|
|
15
|
+
}">
|
|
16
|
+
<printed-product-image :image="product" />
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
</lancom-product-list>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
import PrintedProductImage from './printed_product_image/printed-product-image';
|
|
25
|
+
import LancomProductList from '@/components/products/product_list/product-list';
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
name: 'LancomPrintedProductImages',
|
|
29
|
+
components: {
|
|
30
|
+
LancomProductList,
|
|
31
|
+
PrintedProductImage
|
|
32
|
+
},
|
|
33
|
+
props: {
|
|
34
|
+
product: {
|
|
35
|
+
type: Object,
|
|
36
|
+
required: true
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
computed: {
|
|
40
|
+
hasImages() {
|
|
41
|
+
return this.images.length > 0;
|
|
42
|
+
},
|
|
43
|
+
images() {
|
|
44
|
+
return (this.product.images || []).filter(i => !!i.printType);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<style lang="scss" scoped>
|
|
51
|
+
@import 'printed-product-images';
|
|
52
|
+
</style>
|
package/components/product/printed_product_images/printed_product_image/printed-product-image.scss
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
@import "@/assets/scss/variables";
|
|
2
|
+
|
|
3
|
+
.PrintedProductImage {
|
|
4
|
+
&__wrapper {
|
|
5
|
+
border: 4px solid #fff;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
min-height: 100%;
|
|
8
|
+
.visible-full {
|
|
9
|
+
opacity: 0;
|
|
10
|
+
}
|
|
11
|
+
&--full {
|
|
12
|
+
.visible-full {
|
|
13
|
+
opacity: 1;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__content {
|
|
19
|
+
padding: 10px 10px 14px 10px;
|
|
20
|
+
text-align: center;
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
a {
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
color: $black;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
&__info {
|
|
28
|
+
padding-top: 0px;
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
&__link {
|
|
34
|
+
position: relative;
|
|
35
|
+
display: block;
|
|
36
|
+
transition: background-color 0.5s ease;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
background-color: white;
|
|
39
|
+
height: 240px;
|
|
40
|
+
&-cover,
|
|
41
|
+
&-cover-hover {
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 10px;
|
|
44
|
+
left: 14px;
|
|
45
|
+
right: 14px;
|
|
46
|
+
height: 220px;
|
|
47
|
+
z-index: 1;
|
|
48
|
+
background-size: contain;
|
|
49
|
+
background-repeat: no-repeat;
|
|
50
|
+
background-position: center center;
|
|
51
|
+
background-color: white;
|
|
52
|
+
}
|
|
53
|
+
&-cover {
|
|
54
|
+
transition: opacity 0.35s ease-in-out;
|
|
55
|
+
opacity: 1;
|
|
56
|
+
}
|
|
57
|
+
&-cover-hover {
|
|
58
|
+
transition: opacity 0.45s ease-in-out;
|
|
59
|
+
z-index: 2;
|
|
60
|
+
opacity: 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
.PrintedProductImage__wrapper--full {
|
|
67
|
+
.PrintedProductImage {
|
|
68
|
+
&__name {
|
|
69
|
+
display: block;
|
|
70
|
+
overflow: visible;
|
|
71
|
+
}
|
|
72
|
+
&__sku {
|
|
73
|
+
white-space: normal;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
package/components/product/printed_product_images/printed_product_image/printed-product-image.vue
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="PrintedProductImage__wrapper"
|
|
4
|
+
:class="{
|
|
5
|
+
'PrintedProductImage__wrapper--full': full
|
|
6
|
+
}">
|
|
7
|
+
<nuxt-link
|
|
8
|
+
:to="imageLink"
|
|
9
|
+
class="PrintedProductImage__link">
|
|
10
|
+
<div
|
|
11
|
+
v-if="productСover"
|
|
12
|
+
class="PrintedProductImage__link-cover"
|
|
13
|
+
:style="productСoverBg"></div>
|
|
14
|
+
</nuxt-link>
|
|
15
|
+
<div class="PrintedProductImage__content">
|
|
16
|
+
<nuxt-link :to="imageLink">
|
|
17
|
+
{{ image.description }}
|
|
18
|
+
</nuxt-link>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
import { getBgStyle } from '@lancom/shared/assets/js/utils/colors';
|
|
25
|
+
|
|
26
|
+
export default {
|
|
27
|
+
name: 'PrintedProductImage',
|
|
28
|
+
props: {
|
|
29
|
+
image: {
|
|
30
|
+
type: Object,
|
|
31
|
+
reqquired: true
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
computed: {
|
|
35
|
+
imageLink() {
|
|
36
|
+
return this.image.relatedLink || '#';
|
|
37
|
+
},
|
|
38
|
+
productСover() {
|
|
39
|
+
return this.image.medium;
|
|
40
|
+
},
|
|
41
|
+
productСoverBg() {
|
|
42
|
+
return getBgStyle(this.image.medium);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<style lang="scss" scoped>
|
|
49
|
+
@import 'printed-product-image';
|
|
50
|
+
</style>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { getColorBackgroundStyle, getProductMediumCover,
|
|
1
|
+
import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
|
|
2
2
|
import { staticLink } from '@lancom/shared/assets/js/utils/filters';
|
|
3
3
|
import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
|
|
4
4
|
|
|
5
|
-
const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
|
|
6
|
-
|
|
7
5
|
const loadHolder = {
|
|
8
6
|
canLoadImages: true,
|
|
9
7
|
canLoadColorImages: false,
|
package/nuxt.config.js
CHANGED
|
@@ -26,6 +26,7 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
|
|
|
26
26
|
priority: 1
|
|
27
27
|
},
|
|
28
28
|
exclude: [
|
|
29
|
+
// '/',
|
|
29
30
|
'/faq',
|
|
30
31
|
'/products/',
|
|
31
32
|
'/preview/**',
|
|
@@ -34,7 +35,10 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
|
|
|
34
35
|
],
|
|
35
36
|
routes: async () => {
|
|
36
37
|
const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
|
|
37
|
-
return
|
|
38
|
+
return [
|
|
39
|
+
...data.map(url => ({ url, priority: 0.8 })),
|
|
40
|
+
// { url: `https://${config.HOST_NAME}`, priority: 1 }
|
|
41
|
+
];
|
|
38
42
|
}
|
|
39
43
|
},
|
|
40
44
|
plugins: [
|