make ui fancy

This commit is contained in:
Thomas L 2020-06-20 19:00:43 +02:00
parent 69ff0c24d4
commit 80b6fd3cf0

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
@ -13,30 +13,30 @@
<title>Pizzatool</title>
</head>
<body>
<div id="app">
<div id="app" class="container">
<h2>Ingredients</h2>
<ul>
<li v-for="ingredient in ingredients">
<ul class="list-group">
<li v-for="ingredient in ingredients" class="list-group-item d-flex justify-content-between align-items-center">
{{ ingredient.name }}
<button v-on:click="delete_ingredient(ingredient.id)">-</button>
<button v-on:click="delete_ingredient(ingredient.id)" class="btn btn-primary">-</button>
</li>
<li>
<form v-on:submit.prevent="create_ingredient">
<input v-model="ingredient_name">
<button type="submit">+</button>
<li class="list-group-item">
<form v-on:submit.prevent="create_ingredient" class="form-inline">
<input v-model="ingredient_name" placeholder="New Ingredient" class="form-control">
<button type="submit" class="btn btn-primary">+</button>
</form>
</li>
</ul>
<h2>Pizzas</h2>
<ul>
<li v-for="pizza in pizzas">
<ul class="list-group">
<li v-for="pizza in pizzas" class="list-group-item d-flex justify-content-between align-items-center">
{{ pizza.name }}
<button v-on:click="delete_pizza(pizza.id)">-</button>
<button v-on:click="delete_pizza(pizza.id)" class="btn btn-primary">-</button>
</li>
<li>
<form v-on:submit.prevent="create_pizza">
<input v-model="pizza_name">
<button type="submit">+</button>
<li class="list-group-item">
<form v-on:submit.prevent="create_pizza" class="form-inline">
<input v-model="pizza_name" placeholder="New Pizza" class="form-control">
<button type="submit" class="btn btn-primary">+</button>
</form>
</li>
</ul>