KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Pretty

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-02-12 14:49:58 +01:00
parent ebaaacb433
commit 52f4df3e2c
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/ui/Wines.vue
View File

@@ -20,11 +20,13 @@
>Les mer</a> >Les mer</a>
</li> </li>
</ol> </ol>
<div class="wine-window" v-if="wineOpen"> <div class="wine-window-outer" v-if="wineOpen" @click="closeWine">
<div class="wine-window">
<div class="close-modal" @click="closeWine">X</div> <div class="close-modal" @click="closeWine">X</div>
<Wine :wine="clickedWine" /> <Wine :wine="clickedWine" />
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -74,9 +76,11 @@ export default {
eventValue: `${wine.name} - ${wine.vivinoLink}` eventValue: `${wine.name} - ${wine.vivinoLink}`
}); });
}, },
closeWine: function() { closeWine: function(event) {
if (event.toElement.className.includes("wine-window-outer")) {
this.clickedWine = null; this.clickedWine = null;
this.wineOpen = false; this.wineOpen = false;
}
}, },
predicate: function() { predicate: function() {
@@ -145,6 +149,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/media-queries.scss"; @import "../styles/media-queries.scss";
.wine-window-outer {
position: fixed;
width: 100vw;
height: 100vh;
background: #000000aa;
top: 0;
left: 0;
}
.wine-window { .wine-window {
top: 0; top: 0;
left: 0; left: 0;