mirror of
https://github.com/yummy4friends/y4f.git
synced 2025-01-30 23:44:45 +01:00
Yum04 27 warenkorb (#9)
* Page: "Warenkorb" created * Fixed: Spacing between border rows * Update ShoppingCart.razor
This commit is contained in:
MET18937
GitHub
parent
901ec9f39a
commit
bfa440ac5e
129
Pages/ShoppingCart.razor
Normal file
129
Pages/ShoppingCart.razor
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
@page "/shopping_cart"
|
||||||
|
|
||||||
|
<PageTitle>Warenkorb</PageTitle>
|
||||||
|
|
||||||
|
<h1>Warenkorb</h1>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-lg-6">
|
||||||
|
@*Tabelle Ihre Bestellung*@
|
||||||
|
<div class="tbl-container">
|
||||||
|
<table class="table bdr">
|
||||||
|
<thead class="bg_green">
|
||||||
|
<tr>
|
||||||
|
<td>Ihre Bestellung</td>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg_lightgreen">
|
||||||
|
<tr>
|
||||||
|
<td class="br" style="padding-top:20px; padding-bottom:0px; border-bottom-width: 0px;">
|
||||||
|
1 Nudel mit Hühnerfleisch (groß)
|
||||||
|
<div style="font-size:0.7rem;padding-left:15px;">mit Knoblauchsoße</div>
|
||||||
|
</td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center" style="padding-top:20px; padding-bottom:0px;">9,10€</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;">1 Coca Cola</td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center" style="padding-top:0px;">2,50€</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="br" style=" padding-top:0px; border-bottom-width: 0px;"></td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center" style="border-bottom-width: 0px;"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot class="bg_lightgreen">
|
||||||
|
<tr style="border-top:solid 1px black;">
|
||||||
|
<th class="" style="text-align:right;">Summe</th>
|
||||||
|
<td class="d-flex justify-content-center align-items-center">11,60€</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-lg-6">
|
||||||
|
<div class="h-100">
|
||||||
|
@*Essen Abholen?*@
|
||||||
|
<div class="row h-25 w-100">
|
||||||
|
<div class="col">
|
||||||
|
<div class="d-flex flex-column align-items-center ">
|
||||||
|
<div class="tbl-container bdr w-100">
|
||||||
|
<!-- <== overflow: hidden applied to parent -->
|
||||||
|
<table class="table bdr" cellspacing="0" cellpadding="0">
|
||||||
|
<thead class="bg_green">
|
||||||
|
<tr>
|
||||||
|
<td class="d-flex justify-content-center align-items-center" style="border-bottom:0px;">
|
||||||
|
Wann wollen Sie Ihr Essen abholen?
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg_lightgreen">
|
||||||
|
<tr>
|
||||||
|
<td class="d-flex justify-content-center align-items-center" style="padding-top:0px;">
|
||||||
|
<div style="margin:20px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
|
<input type="number" style="width:80px" min="10" max="20" />
|
||||||
|
<input type="number" style="width:80px" min="0" max="59" />
|
||||||
|
|
||||||
|
Uhr
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@*Buttons*@
|
||||||
|
<div class="row h-75 w-100">
|
||||||
|
<div class="col mt-auto">
|
||||||
|
<div class="d-flex flex-column align-items-center ">
|
||||||
|
<button class="btn_back w-75">Zurück</button>
|
||||||
|
<button class="btn_forward w-75">Weiter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
41
wwwroot/css/shopping_cart.css
Normal file
41
wwwroot/css/shopping_cart.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
.tbl-container {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_green {
|
||||||
|
background-color: #89F9A5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bdr {
|
||||||
|
border-radius: 17px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-color: #C7FFD5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_lightgreen {
|
||||||
|
background-color: #C7FFD5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.br {
|
||||||
|
border-right: solid 1px black;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_back {
|
||||||
|
background-color: #F9BE89;
|
||||||
|
/*width: 60%;*/
|
||||||
|
margin-bottom: 13px;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 50px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_forward {
|
||||||
|
background-color: #89F9A5;
|
||||||
|
/*width: 60%;*/
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 50px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
@ -9,6 +9,7 @@
|
|||||||
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
||||||
<link href="css/Site.css" rel="stylesheet" />
|
<link href="css/Site.css" rel="stylesheet" />
|
||||||
<link href="css/app.css" rel="stylesheet" />
|
<link href="css/app.css" rel="stylesheet" />
|
||||||
|
<link href="css/shopping_cart.css" rel="stylesheet" />
|
||||||
<link rel="icon" type="image/png" href="favicon.png" />
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
<link href="y4f.styles.css" rel="stylesheet" />
|
<link href="y4f.styles.css" rel="stylesheet" />
|
||||||
<link href="manifest.json" rel="manifest" />
|
<link href="manifest.json" rel="manifest" />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user