make ui fancy

master
Thomas L 2020-06-20 19:00:43 +02:00
parent 69ff0c24d4
commit 80b6fd3cf0
1 changed files with 16 additions and 16 deletions

View File

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