FUH22860/y4f
1
0
Fork 0
mirror of https://github.com/yummy4friends/y4f.git synced 2025-01-30 00:34:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Yum04 27 warenkorb (#9)

Browse Source 
* Page: "Warenkorb" created

* Fixed: Spacing between border rows

* Update ShoppingCart.razor
This commit is contained in:
MET18937 2023-04-20 17:29:50 +02:00 committed by GitHub
parent 901ec9f39a
commit bfa440ac5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
Pages/ShoppingCart.razor Normal file
View 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" />
&nbsp;
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
View 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;
}

1
wwwroot/index.html
View File

@ -9,6 +9,7 @@
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/Site.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 href="y4f.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />