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

quite nice

Browse Source
This commit is contained in:
vabene1111
2023-02-16 20:23:46 +01:00
parent 900c28caba
commit e754b13340
5 changed files with 88 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@@ -832,7 +832,7 @@
<div class="row">
<div class="col col-md-12">
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.4rem">
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 0.6rem; grid-auto-rows: max-content;">
<template v-if="!searchFiltered()">
<recipe-card
v-bind:key="`mp_${m.id}`"

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

@@ -5,25 +5,43 @@
DIV
<div class="row">
<div class="col-md-12">
<div style="height: 25vh; width: 15vw;">
<b-img style="height: 15vh; width: 15vw; object-fit: cover"
src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
rounded></b-img>
<div style="height: 10vh">
<span style="font-size: 18px" class="two-row-text"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span>
<span style="font-size: 14px" class="two-row-text text-muted">
<a href="#">Import 1</a> -
<a href="#">Hauptgang</a> -
<a href="#">Backen</a> </span>
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
</div>
<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"
<b-img style="height: 15vh; width: 15vw; object-fit: cover"
src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_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-1">
<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-10">
<span style="font-size: 18px"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span> <br/>
<span style="font-size: 14px" class="text-muted text-small">
<a href="#">Import 1</a> -
<a href="#">Hauptgang</a> -
<a href="#">Backen</a> </span>
</div>
<div class="col-1 align-items-end">
<i class="fas fa-ellipsis-v"></i>
@@ -66,6 +84,11 @@
</div>
</template>
<!--
<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
-->
<script>
import Vue from "vue"
import {BootstrapVue} from "bootstrap-vue"
@@ -104,11 +127,20 @@ export default {
<style>
.dot {
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.two-row-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>