Commit 87d42864 authored by Steve Sanderson's avatar Steve Sanderson
Browse files

Migrate some bootstrap styling to CSS rules

parent 1fd6b602
......@@ -23,7 +23,7 @@
<div class="sidebar">
@if (configuredPizzas.Any())
{
<div class="order-contents px-4">
<div class="order-contents">
<h2>Your order</h2>
@foreach (var configuredPizza in configuredPizzas)
......@@ -37,7 +37,7 @@
<div class="empty-cart">Choose a pizza<br>to get started</div>
}
<div class="order-total px-4 @(configuredPizzas.Any() ? "" : "hidden")">
<div class="order-total @(configuredPizzas.Any() ? "" : "hidden")">
Total:
<span class="total-price">@OrderPrice.ToString("0.00")</span>
<button class="btn btn-warning" disabled="@(configuredPizzas.Count == 0)" onclick="@PlaceOrder">
......
......@@ -14,23 +14,21 @@
}
else
{
<div class="list-group">
<div class="list-group orders-list">
@foreach (var item in ordersWithStatus)
{
<div class="list-group-item d-flex">
<div class="col m-auto">
<h5 class="mb-1">
@item.Order.CreatedTime.ToLongDateString()
</h5>
<div class="list-group-item">
<div class="col">
<h5>@item.Order.CreatedTime.ToLongDateString()</h5>
Items:
<strong>@item.Order.Pizzas.Count()</strong>;
Total price:
<strong>£@item.Order.Pizzas.Sum(p => p.GetTotalPrice()).ToString("0.00")</strong>
</div>
<div class="col m-auto">
<div class="col">
Status: <strong>@item.StatusText</strong>
</div>
<div class="col m-auto flex-grow-0">
<div class="col flex-grow-0">
<a href="myorders/@item.Order.OrderId" class="btn btn-success">
Track &gt;
</a>
......
......@@ -16,8 +16,8 @@
}
else
{
<div class="track-order d-flex flex-column">
<div class="track-order-title d-flex align-items-center px-5 py-3">
<div class="track-order">
<div class="track-order-title">
<h2>
Order placed @orderWithStatus.Order.CreatedTime.ToLongDateString()
</h2>
......@@ -25,8 +25,8 @@
Status: <strong>@orderWithStatus.StatusText</strong>
</p>
</div>
<div class="flex-grow-1 d-flex">
<div class="track-order-details px-5 py-3 flex-grow-1">
<div class="track-order-body">
<div class="track-order-details">
@foreach (var pizza in orderWithStatus.Order.Pizzas)
{
<p>
......@@ -52,7 +52,7 @@
</strong>
</p>
</div>
<div class="track-order-map flex-shrink-0">
<div class="track-order-map">
<Map Zoom="13" Markers="@orderWithStatus.MapMarkers" />
</div>
</div>
......
@inherits BlazorLayoutComponent
<div class="fixed-top top-bar container-fluid px-5">
<div class="top-bar">
<img class="logo" src="img/logo.svg" />
<NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
......
......@@ -27,6 +27,12 @@ form {
align-items: stretch;
color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
padding: 0 3rem;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.logo {
......@@ -198,7 +204,7 @@ form {
.order-contents {
overflow-y: auto;
padding: 2rem 0 1.5rem 0;
padding: 2rem 1.5rem 1.5rem 1.5rem;
flex-grow: 1;
}
......@@ -221,6 +227,7 @@ form {
color: white;
font-size: 1.2rem;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
padding: 0 1.5rem;
}
.order-total.hidden {
......@@ -406,19 +413,41 @@ form {
font-size: 1.5rem;
}
.orders-list .list-group-item {
display: flex;
}
.orders-list .col {
margin: auto;
}
.orders-list h5 {
color: #c03939;
font-size: 1.3rem;
font-weight: 300;
margin: 0.2rem 0 0 0;
font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.track-order {
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
height: 100%;
display: flex;
flex-direction: column;
}
.track-order > div {
overflow-y: hidden;
}
.track-order-title {
background-color: #eee;
}
.track-order-title {
background-color: #eee;
display: flex;
align-items: center;
padding: 1rem 3rem;
}
.track-order-title h2 {
color: #c03939;
......@@ -429,12 +458,20 @@ form {
text-transform: uppercase;
}
.track-order-details {
overflow-y: auto;
}
.track-order-body {
flex-grow: 1;
display: flex;
}
.track-order-details {
overflow-y: auto;
padding: 1.5rem 3rem;
flex-grow: 1;
}
.track-order-map {
width: 350px;
flex-shrink: 0;
}
button.sign-in {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment