cato447/EIST-Teamprojekt
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Alignment issues and what not

Browse Source 
More commits incoming
This commit is contained in:
Karthik Vempati
2022-07-22 20:44:29 +02:00
parent 2b8eab1f16
commit a12f43ca05
1 changed files with 75 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/components/RecipeModel.vue
View File

@@ -30,56 +30,74 @@
</ul> </ul>
</div> </div>
<div class="nav-background"/>
<!-- input field --> <!-- input field -->
<div> <div>
<v-item-group> <v-app>
<v-container>
<v-row> </v-app>
<v-container
fluid
dark
style="background-color: transparent; height: 100%"
>
<v-row
align="align">
<v-col <v-col
v-for="recipe in recipes" v-for="recipe in recipes"
:key="recipe.id" :key="recipe.id"
cols="4" cols="4"
md="3" sm="3"
> >
<v-item> <v-item>
<v-card <v-card
class="mx-auto" class="pa-2"
max-width="400" min-width="350"
max-width="350"
min-height="400"
max-height="400"
tile
rounded = true
color="#385F73"
dark
> >
<v-img <v-img
class="white--text align-end" class="white--text align-end"
height="200px" height="200px"
:src="recipe.image" :src="recipe.image"
> >
<v-card-title>{{recipe.title}}</v-card-title>
</v-img> </v-img>
<v-card-title
style="word-break: break-word"
>{{ recipe.title }}</v-card-title>
<v-card-subtitle class="pb-0"> <v-card-subtitle class="pb-0">
{{ recipe.spoonacularSourceUrl }} Ready in {{ recipe.readyInMinutes }} minutes
</v-card-subtitle> </v-card-subtitle>
<v-card-text class="text--primary"> <!-- <v-card-text class="text&#45;&#45;primary">-->
<div>Whitehaven Beach</div> <!-- <div>Whitehaven Beach</div>-->
<div>Whitsunday Island, Whitsunday Islands</div> <!-- <div>Whitsunday Island, Whitsunday Islands</div>-->
</v-card-text> <!-- </v-card-text>-->
<v-card-actions> <v-card-actions>
<v-btn <!-- <v-btn-->
color="orange" <!-- color="orange"-->
text <!-- text-->
> <!-- >-->
Share <!-- Share-->
</v-btn> <!-- </v-btn>-->
<v-btn <v-btn
color="orange"
:href="recipe.sourceUrl"
text text
> >
Explore <!-- @click = ""-->
Cook
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@@ -87,9 +105,8 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</v-item-group>
</div>
</div>
</div> </div>
</section> </section>
@@ -98,43 +115,6 @@
</body> </body>
</template> </template>
<!-- input field -->
<!-- <div class="field-header-box">-->
<!-- <div class="inputField-header">-->
<!-- <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
<!-- @keyup.enter="addItem"/>-->
<!-- <label for="inputTextField" class="formLabel">-->
<!-- Add here ...-->
<!-- </label>-->
<!-- </div>-->
<!-- </div>-->
<!-- Recipe element -->
<!-- response element -->
<!-- <div class="item-section" v-show="items.length" v-cloak>-->
<!-- <ul class="item-list">-->
<!-- <li v-for="item in items"-->
<!-- class="item"-->
<!-- :key="item.id">-->
<!-- <div class="view">-->
<!-- <label class="item-name" @dblclick="editItem(item)">-->
<!-- <span class="item-name-fame">{{ item.name.toUpperCase() }} </span>-->
<!-- <span class="item-information-frame">{{ item.quantity }} {{ item.unit.toLowerCase() }}</span>-->
<!-- </label>-->
<!-- <button class="destroy" @click="removeItem(item)"></button>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<script> <script>
import api from '../Api'; import api from '../Api';
@@ -148,6 +128,7 @@ const Recipes = {
// app initial state // app initial state
data: function () { data: function () {
return { return {
items: [],
recipes: [], recipes: [],
loading: true, loading: true,
error: null, error: null,
@@ -314,12 +295,14 @@ body{
/* item section */ /* item section */
.item-section{ .item-section{
z-index: 0; z-index: 2;
position: center; position: absolute;
top: 80%;
left: 50%;
width: 0; width: 0;
height: 0; height: 0;
font-size: 20px; font-size: 20px;
margin-left: 0px; margin-left: 30px;
border: 1px solid black; border: 1px solid black;
} }