Large image when on mobile.

This commit is contained in:
2020-02-14 15:00:54 +01:00
parent eed8a84092
commit ad6478edf8
2 changed files with 13 additions and 3 deletions

View File

@@ -1,14 +1,14 @@
<template>
<div class="inner-wine-container">
<div class="left">
<img :src="wine.image" class="wine-image" />
<img :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }"/>
</div>
<div class="right">
<h2>{{ wine.name }}</h2>
<span v-if="wine.rating">{{ wine.rating }} rating</span>
<a :href="wine.vivinoLink" class="wine-link">Les mer</a>
<span class="name-wins">
<span class="name-wins" v-if="wine.winners">
Vunnet av:
{{wine.winners.join(", ")}}
</span>
@@ -28,6 +28,10 @@ export default {
wine: {
type: Object,
required: true
},
fullscreen: {
type: Boolean,
required: false
}
}
};
@@ -37,6 +41,12 @@ export default {
@import "./src/styles/media-queries";
.wine-image {
height: 250px;
&.fullscreen {
@include desktop {
height: unset;
}
}
}
.name-wins,