arhuako/tayronafoods-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding cards

Browse Source
This commit is contained in:
José Conde
2023-06-12 19:21:22 +02:00
parent 783b0f18c8
commit ce649bc711
11 changed files with 504 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/DifferentBox.vue
View File

@ -5,16 +5,11 @@ export default {
title: String,
description: String
},
methods: {
getImage(image) {
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
},
}
}
</script>
<template>
<div class="different-box">
<img :src="getImage(image)" class="image" />
<img :src="$helper.getImage(image)" class="image" />
<h3 class="title">{{ title }}</h3>
<p class="description">{{ description }}</p>
</div>

7
src/components/Employee.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="employee-box">
<img :src="getImage(image)" class="image">
<img :src="$helper.getImage(image)" class="image">
<h3 class="name">{{ name }}</h3>
<h4 class="role">{{ role }}</h4>
</div>
@ -13,11 +13,6 @@ export default {
name: String,
role: String,
},
methods: {
getImage(image) {
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
},
}
}
</script>

7
src/components/OriginBox.vue
View File

@ -5,16 +5,11 @@ export default {
title: String,
description: String
},
methods: {
getImage(image) {
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
},
}
}
</script>
<template>
<div class="origin-box">
<img :src="getImage(image)" class="image" />
<img :src="$helper.getImage(image)" class="image" />
<h3 class="title">{{ title }}</h3>
<p class="description">{{ description }}</p>
</div>

357
src/components/ProductFlipCard.vue Normal file
View File

@ -0,0 +1,357 @@
<script>
const kinds = {
earth: 'common.earth',
water: 'common.water',
air: 'common.air',
fire: 'common.fire',
}
export default {
props: {
product: Object
},
data() {
return {
flipped: false,
kinds,
}
},
methods: {
toggle() {
this.flipped = !this.flipped;
}
}
}
</script>
<template>
<div class="flip-card" :class="{flipped}" @click="toggle">
<div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
<div class="flip-card-front">
<img class="logo" :src="$helper.getImage(product.image)" />
<div>
<h3 class="title">{{ $t(kinds[product.kind])}}</h3>
<h3 class="slogan">{{ $t(product.slogan) }}</h3>
</div>
<div class="description">{{ $t(product.description) }}</div>
</div>
<div class="flip-card-back">
<div class="info">
<div class="info-header">
<h3 class="title centered">{{ $t(product.info.name) }}</h3>
<h3>- {{ $t(product.info.farm) }} -</h3>
<p class="strain">{{ $t(product.info.strain) }}</p>
</div>
<div class="info-data">
<div class="info-data-left">
<img class="logo" :src="$helper.getImage(product.image)" />
<p class="kind">{{ $t(kinds[product.kind]) }}</p>
<p class="slogan">{{ $t(product.slogan) }}</p>
</div>
<div class="info-data-right">
<div class="info-data-row">
<div class="info-data-box land">
<div class="info-data-box-label">{{ $t('Land / region') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Brasil') }}/{{ $t('Cerrado, Carmo do paranaiba') }}</div>
</div>
</div>
<div class="info-data-box height">
<div class="info-data-box-label">{{ $t('Altura') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('1.100 m') }}</div>
</div>
</div>
</div>
<div class="info-data-row">
<div class="info-data-box revision">
<div class="info-data-box-label">{{ $t('Revisión') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Secado al sol') }}</div>
</div>
</div>
<div class="info-data-box harvest">
<div class="info-data-box-label">{{ $t('Cosecha') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Seleccionado') }}</div>
</div>
</div>
<div class="info-data-box profile">
<div class="info-data-box-label">{{ $t('Perfil') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('1/4') }}</div>
</div>
</div>
</div>
<div class="info-data-row">
<div class="info-data-box taste">
<div class="info-data-box-label">{{ $t('Sabor') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">
{{ $t('Chocolate, ligero ácido de frutas') }}
</div>
</div>
</div>
<div class="info-data-box mouthfeel">
<div class="info-data-box-label">{{ $t('Gusto') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Ligeramente picante') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
No product
</div>
</div>
</template>
<style lang="scss" scoped>
h3 {
font-weight: 500;
font-size: 36px;
line-height: 50px;
text-align: left;
}
.flip-card {
cursor: pointer;
height: 444px;
width: 600px;
color: #000;
font-size: 20px;
border-radius: 40px;
perspective: 1000px;
&.flipped &-inner {
transform: rotateY(180deg);
}
&-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
border-radius: 40px;
&.earth {
background-color: #A6AF94;
}
&.water {
background-color: #889CA7;
}
&.air {
background-color: #F4EEB0;
}
&.fire {
background-color: #D58C83;
}
&.no-product {
background-color: #fff;
}
}
&-front {
display: grid;
grid-template-columns: 180px auto;
grid-template-rows: 160px auto;
justify-items: start;
align-items: center;
.description {
grid-column-start: 1;
grid-column-end: 3;
font-weight: 500;
font-size: 22px;
line-height: 35px;
text-align: justify;
padding: 0 44px;
align-self: flex-start;
}
.logo {
height: 184px;
width: 147px;
}
}
&-front, &-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
&-back {
transform: rotateY(180deg);
border-radius: 40px;
padding-top: 16px;
h3, h4 {
font-family: 'Righteous', cursive;
text-align: center;
}
.info {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 35% 65%;
.strain {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
}
&-data {
display: grid;
grid-template-columns: 30% 70%;
margin: 20px;
border-style: solid;
border-width: 2px;
&-left {
padding-top: 16px;
}
&-right {
display: grid;
grid-template-rows: repeat(3, 1fr);
height: 100%;
width: 100%;
.earth & {
background-color: #babfa9;
}
.water & {
background-color: #92a7b1;
}
.air & {
background-color: #f4f4cc;
}
.fire & {
background-color: #d59c95;
}
}
&-row {
border-top-style: solid;
border-top-width: 2px;
border-bottom-style: solid;
border-bottom-width: 2px;
display: inline-flex;
// flex-wrap: nowrap;
// justify-content: space-around;
min-width: 100%;
height: 100%;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
.earth & {
border-color: #A6AF94;
}
.water & {
border-color: #889CA7;
}
.air & {
border-color: #F4EEB0;
}
.fire & {
border-color: #D58C83;
}
}
&-box {
padding: 8px 0 0 8px;
border-right-style: solid;
border-right-width: 2px;
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
.text-overflow {
width: 98%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&:last-child {
border-right: none;
}
.earth & {
border-color: #A6AF94;
}
.water & {
border-color: #889CA7;
}
.air & {
border-color: #F4EEB0;
}
.fire & {
border-color: #D58C83;
}
&-label{
font-family: 'Righteous', cursive;
font-size: 20px;
text-transform: uppercase;
}
&-value{
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
}
}
p {
&.kind {
font-family: 'Righteous', cursive;
text-align: left;
line-height: 20px;
margin-left: 20px;
text-transform: uppercase;
letter-spacing: 1.3px;
}
&.slogan {
font-family: 'Cormorant Garamond', serif;
font-size: 90%;
text-align: left;
line-height: 25px;
margin-left: 20px;
}
}
.earth & {
border-color: #babfa9;
}
.water & {
border-color: #92a7b1;
}
.air & {
border-color: #f4f4cc;
}
.fire & {
border-color: #d59c95;
}
}
}
}
}
</style>