mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 04:39:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

playing around with the recipe card

Browse Source
This commit is contained in:
vabene1111
2023-02-16 19:10:19 +01:00
parent c5ce197ed7
commit 900c28caba
2 changed files with 75 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
vue/src/apps/TestView/TestView.vue
View File

@@ -2,9 +2,43 @@
<div id="app">
DIV
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-12">
<b-img style="height: 15vh; width: 25vw; object-fit: cover"
src="http://127.0.0.1:8000/media/recipes/40527e70-82f4-4062-93cc-5d091f68279b_119.png"
rounded></b-img>
</div>
</div>
<div class="row mt-3">
<div class="col-2">
<div class="dot">
75%
</div>
</div>
<div class="col-9">
<h6><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></h6>
<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
</div>
<div class="col-1 align-items-end">
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
</div>
</div>
<hr class="mt-3"/>
Recipe Card
<b-checkbox v-model="recipe_detailed"></b-checkbox>
<div class="row">
<div class="row ">
<div class="col-md-3">
<recipe-card
v-if="recipe !== undefined"
@@ -28,6 +62,7 @@
</div>
</div>
</div>
</template>
@@ -67,4 +102,13 @@ export default {
}
</script>
<style></style>
<style>
.dot {
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>