mirror of
				https://github.com/mealie-recipes/mealie.git
				synced 2025-10-30 17:53:31 -04:00 
			
		
		
		
	Printview columns (#572)
* Printview with multiple columns, depending on list length. * Printview with multiple columns, depending on list length.
This commit is contained in:
		| @@ -31,7 +31,7 @@ | |||||||
|       <vue-markdown :source="recipe.description"> </vue-markdown> |       <vue-markdown :source="recipe.description"> </vue-markdown> | ||||||
|       <h2>{{ $t("recipe.ingredients") }}</h2> |       <h2>{{ $t("recipe.ingredients") }}</h2> | ||||||
|       <ul> |       <ul> | ||||||
|         <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index"> |         <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index" > | ||||||
|           <v-icon> |           <v-icon> | ||||||
|             {{ $globals.icons.checkboxBlankOutline }} |             {{ $globals.icons.checkboxBlankOutline }} | ||||||
|           </v-icon> |           </v-icon> | ||||||
| @@ -67,6 +67,7 @@ export default { | |||||||
|   components: { |   components: { | ||||||
|     RecipeTimeCard, |     RecipeTimeCard, | ||||||
|     VueMarkdown, |     VueMarkdown, | ||||||
|  |  | ||||||
|   }, |   }, | ||||||
|   props: { |   props: { | ||||||
|     recipe: Object, |     recipe: Object, | ||||||
| @@ -102,6 +103,13 @@ h3 { | |||||||
|  |  | ||||||
| ul { | ul { | ||||||
|   padding-left: 1rem; |   padding-left: 1rem; | ||||||
|  |   display: -ms-flexbox; | ||||||
|  |   display: -webkit-flex; | ||||||
|  |   display: flex; | ||||||
|  |   -webkit-flex-flow: wrap column; | ||||||
|  |   flex-flow: wrap column; | ||||||
|  |   max-height: 300px; | ||||||
|  |   column-gap: 25px; | ||||||
| } | } | ||||||
|  |  | ||||||
| li { | li { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user