Commit 3ec0a5f3 authored by Ryan Nowak's avatar Ryan Nowak
Browse files

Code dump for 02 starter

This is the same as the 01 ending code. The next commit will show the
changes that take place in 02.
parent 8200af54
<Router AppAssembly=typeof(Program).Assembly />
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Exe</OutputType>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" PrivateAssets="all" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\BlazingPizza.ComponentsLibrary\BlazingPizza.ComponentsLibrary.csproj" />
<ProjectReference Include="..\BlazingPizza.Shared\BlazingPizza.Shared.csproj" />
</ItemGroup>
</Project>
@page "/"
@inject HttpClient HttpClient
<div class="main">
<ul class="pizza-cards">
@if (specials != null)
{
@foreach (var special in specials)
{
<li style="background-image: url('@special.ImageUrl')">
<div class="pizza-info">
<span class="title">@special.Name</span>
@special.Description
<span class="price">@special.GetFormattedBasePrice()</span>
</div>
</li>
}
}
</ul>
</div>
@functions {
List<PizzaSpecial> specials;
protected async override Task OnInitAsync()
{
specials = await HttpClient.GetJsonAsync<List<PizzaSpecial>>("/specials");
}
}
using Microsoft.AspNetCore.Blazor.Hosting;
namespace BlazingPizza.Client
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>();
}
}
@inherits BlazorLayoutComponent
<div class="top-bar">
<img class="logo" src="img/logo.svg" />
<NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
<img src="img/pizza-slice.svg" />
<div>Get Pizza</div>
</NavLink>
</div>
<div class="content">
@Body
</div>
using Microsoft.AspNetCore.Blazor.Builder;
using Microsoft.Extensions.DependencyInjection;
namespace BlazingPizza.Client
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IBlazorApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
}
@using System.Net.Http
@using Microsoft.AspNetCore.Blazor.Layouts
@using Microsoft.AspNetCore.Blazor.Routing
@using Microsoft.AspNetCore.Blazor.Services
@using Microsoft.JSInterop
@using BlazingPizza.Client
@using BlazingPizza.Client.Shared
@using BlazingPizza.ComponentsLibrary.Authentication
@addTagHelper "*, BlazingPizza.ComponentsLibrary"
/* quicksand-300 - latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
src: local('Quicksand Light'), local('Quicksand-Light'),
url('quicksand-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('quicksand-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-regular - latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'),
url('quicksand-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('quicksand-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-500 - latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
src: local('Quicksand Medium'), local('Quicksand-Medium'),
url('quicksand-v8-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('quicksand-v8-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-700 - latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
src: local('Quicksand Bold'), local('Quicksand-Bold'),
url('quicksand-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('quicksand-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
\ No newline at end of file
@import url('font/quicksand.css');
body, html {
height: 100%;
}
body {
padding-top: 5rem;
flex-direction: column;
font-family: 'quicksand';
overflow-y: hidden;
}
form {
width: 100%;
}
.form-group.row > .col-form-label {
text-align: right;
}
.top-bar {
height: 5rem;
background-color: rgb(192,0,0);
background-image: linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 70%);
display: flex;
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 {
margin-right: 3rem;
width: 9rem;
}
.content {
display: flex;
height: 100%;
z-index: 1;
background-color: white;
}
.main {
flex-grow: 1;
overflow-y: auto;
background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 80%);
padding: 1.5rem !important;
}
.nav-tab {
margin: 0;
padding: 0.3rem 1.8rem;
display: inline-block;
background-color: rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: white;
position: relative;
text-transform: uppercase;
transition: 0.2s ease-out;
}
.nav-tab:hover {
color: white;
text-decoration: none;
background-color: rgba(255,255,255,0.3);
}
.nav-tab.active {
background-color: rgba(255,255,255,0.2);
color: #fff2cc;
}
.nav-tab img {
height: 2rem;
margin-bottom: 0.25rem;
}
.nav-tab.active img {
filter: brightness(0) saturate(100%) invert(93%) sepia(18%) saturate(797%) hue-rotate(316deg) brightness(109%) contrast(101%);
}
.nav-tab.active:after {
content: "";
position: absolute;
bottom: -1rem;
z-index: 1;
width: 0px;
height: 0px;
border-left: 0.6rem solid transparent;
border-right: 0.6rem solid transparent;
border-top: 1rem solid rgb(205,51,51);
}
.user-info {
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.user-info img {
margin-right: 0.7rem;
width: 2.6rem;
}
.user-info .username {
display: block;
font-weight: 700;
line-height: 0.7rem;
margin-top: 0.5rem;
}
.user-info a {
color: #fff2cc;
font-size: 0.8rem;
}
.pizza-cards {
display: grid;
grid-template-columns: repeat(auto-fill, 20rem);
grid-gap: 2rem;
justify-content: center;
padding-left: 0;
}
.pizza-cards > li {
height: 10rem;
position: relative;
background-size: cover;
border-radius: 0.5rem;
list-style-type: none;
box-shadow: 0 3px 4px rgba(0,0,0,0.4);
transition: 0.1s ease-out;
}
.pizza-cards > li:hover {
transform: scale(1.02);
}
.pizza-info {
border-radius: 0.5rem;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.7) 30%, rgba(0,0,0,0) 80%);
padding: 1rem 1rem;
color: #fff2cc;
cursor: pointer;
text-shadow: 0 2px 2px rgba(0,0,0,0.5);
line-height: 1.25rem;
}
.pizza-info .title {
color: white;
font-size: 1.4rem;
display: block;
margin: 0.2rem 0 0.4rem 0;
font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.pizza-info .price {
position: absolute;
bottom: 0.5rem;
right: 1rem;
font-size: 1.5rem;
font-weight: 700;
padding: 0rem 0.7rem;
border-radius: 4px;
background-color: #08af08;
color: white;
line-height: 2rem;
}
.price::before {
content: '£';
font-weight: 300;
font-size: 1.2rem;
margin-right: 0.2rem;
}
.sidebar {
background-color: #2b2b2b;
width: 20rem;
display: flex;
flex-direction: column;
color: white;
}
.order-contents {
overflow-y: auto;
padding: 2rem 1.5rem 1.5rem 1.5rem;
flex-grow: 1;
}
.order-contents h2 {
color: #fff2cc;
font-size: 1.3rem;
font-weight: 300;
margin-bottom: 1rem;
font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.order-total {
background-color: rgb(191, 52, 52);
height: 4rem;
flex-shrink: 0;
display: flex;
flex-direction: row;
align-items: center;
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 {
transform: translate3d(0, 4rem, 0);
}
.order-total .total-price {
font-weight: 700;
font-size: 1.5rem;
}
.order-total .total-price::before {
content: '£';
font-weight: 300;
margin: 0 0.1rem 0 0.4rem;
}
.order-total button {
margin-left: auto;
font-weight: 700;
border-radius: 20px;
padding: 0.4rem 1.2rem;
}
.cart-item {
background-color: #333333;
padding: 0.8rem 1.2rem;
border-radius: 6px;
font-weight: 100;
margin-top: 1rem;
position: relative;
}
.cart-item .title {
font-weight: 700;
}
.cart-item ul {
padding: 0;
margin: 0.4rem 0.6rem;
}
.cart-item li {
list-style-type: none;
margin-left: 0rem;
font-size: 0.8rem;
}
.empty-cart {
text-align: center;
margin: auto;
font-size: 1.5rem;
font-weight: 100;
color: #676767;
}
.item-price {
font-weight: 500;
}
.item-price::before {
content: '£';
font-weight: 100;
margin-right: 0.3rem;
}
.delete-item {
position: absolute;
top: 0;
right: 0;
content: 'X';
color: #fff2cc;
width: 2rem;
height: 2rem;
text-align: center;
}
.delete-item:hover {
text-decoration: none;
color: #fff2cc;
background-color: rgba(255,255,255,0.1);
}
.configured-pizza-item {
display: flex;
flex-direction: row;
}
.dialog-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2000;
display: flex;
}
.dialog {
background-color: white;
box-shadow: 0 0 12px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
z-index: 2000;
align-self: center;
margin: auto;
width: 700px;
max-height: calc(100% - 3rem);
}
.dialog-title {
background-color: #444;
color: #fff2cc;
padding: 1.3rem 2rem;
}
.dialog-title h2 {
color: white;
font-size: 1.4rem;
margin: 0;
font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 1.3rem;
}
.dialog-body {
flex-grow: 1;
padding: 0.5rem 3rem 1rem 0;
}
.dialog-buttons {
height: 4rem;
flex-shrink: 0;
display: flex;
align-items: center;
background-color: #eee;
padding: 0 1rem;
}
.dialog-body > div {
display: flex;
margin-top: 1rem;
align-items: center;
}
.dialog-body label {
text-align: right;
width: 200px;
margin: 0 1.5rem;
}
.dialog-body input, .dialog-body select {
flex-grow: 1;
width: unset;
}
.dialog-body .size-label {
min-width: 110px;
text-align: right;
}
.dialog .toppings {
text-align: center;
display: block;
padding-left: 4rem;
}
.dialog .topping {
display: inline-block;
background-color: #a04343;