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

Cleaup, grid replaced with flex for new Wine.vue..

Browse Source
This commit is contained in:
Kevin
2020-10-11 23:37:19 +02:00
committed by KevinMidboe
parent ba522c350a
commit 3344af6e90
1 changed files with 8 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/AllRequestedWines.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<main> <main class="container">
<h1> <h1>Alle foreslåtte viner</h1>
Alle foreslåtte viner
</h1>
<section class="requested-wines-container"> <section class="requested-wines-container">
<p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p> <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
<RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/> <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
</section> </section>
</main> </main>
@@ -42,39 +42,9 @@ export default {
@import "../styles/media-queries.scss"; @import "../styles/media-queries.scss";
.requested-wines-container{ .requested-wines-container{
display: grid; display: flex;
grid-gap: 1.5rem; flex-wrap: wrap;
justify-items: center; justify-content: space-evenly;
align-items: flex-start;
@include mobile {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
row-gap: 1.5rem;
margin: 2rem;
}
@include tablet {
margin: 1em;
grid: 1fr / 1fr 1fr;
justify-items: center;
}
@include desktop {
margin: 1em;
grid: 1fr / repeat(4, 1fr);
}
@include widescreen {
width: 80%;
margin: auto;
grid: 1fr / repeat(5, 1fr);
justify-items: center;
}
} }
h1{
text-align: center;
}
</style> </style>