interim checkin. Styles

All styles are in place.

src/Web/Catalog.WebForms/Catalog.WebForms/Catalog.WebForms.csproj

@@ -131,8 +131,11 @@
   <ItemGroup>
     <Content Include="About.aspx" />
     <Content Include="Contact.aspx" />
+    <Content Include="Content\app.component.css" />
     <Content Include="Content\bootstrap.css" />
     <Content Include="Content\bootstrap.min.css" />
+    <Content Include="Content\brand_dark.png" />
+    <Content Include="Content\catalog.component.css" />
     <Content Include="Content\fake_product_01.png" />
     <Content Include="Content\fake_product_02.png" />
     <Content Include="Content\fake_product_03.png" />

src/Web/Catalog.WebForms/Catalog.WebForms/Content/app.component.css

@@ -0,0 +1,20 @@
+.esh-app-footer {
+    background-color: #000000;
+    border-top: 1px solid #EEEEEE;
+    margin-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    padding-top: 2.5rem;
+    width: 100%;
+}
+
+.esh-app-footer-brand {
+    height: 50px;
+    width: 230px;
+}
+
+.esh-app-footer-text {
+    color: #83D01B;
+    line-height: 50px;
+    text-align: right;
+    width: 100%;
+}

src/Web/Catalog.WebForms/Catalog.WebForms/Content/catalog.component.css

@@ -0,0 +1,156 @@
+.esh-catalog-hero {
+    background-image: url("../Content/main_banner.png");
+    background-size: cover;
+    height: 260px;
+    width: 100%;
+}
+
+.esh-catalog-title {
+    position: relative;
+    top: 74.28571px;
+}
+
+/* 
+.esh-catalog-filters {
+    background-color: #00A69C;
+    height: 65px;
+}
+
+.esh-catalog-filter {
+    background-color: transparent;
+    border-color: #00d9cc;
+    color: #FFFFFF;
+    cursor: pointer;
+    margin-right: 1rem;
+    margin-top: .5rem;
+    outline-color: #83D01B;
+    padding-bottom: 0;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 1.5rem;
+    min-width: 140px;
+    -webkit-appearance: none;
+}
+
+    .esh-catalog-filter option {
+        background-color: #00A69C;
+    }
+
+.esh-catalog-label {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+}
+
+    .esh-catalog-label::before {
+        color: rgba(255, 255, 255, 0.5);
+        content: attr(data-title);
+        font-size: 0.65rem;
+        margin-top: 0.65rem;
+        margin-left: 0.5rem;
+        position: absolute;
+        text-transform: uppercase;
+        z-index: 1;
+    }
+
+    .esh-catalog-label::after {
+        background-image: url("../../images/arrow-down.png");
+        height: 7px;
+        content: '';
+        position: absolute;
+        right: 1.5rem;
+        top: 2.5rem;
+        width: 10px;
+        z-index: 1;
+    }
+
+.esh-catalog-send {
+    background-color: #83D01B;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 1rem;
+    transform: translateY(.5rem);
+    padding: 0.5rem;
+    transition: all 0.35s;
+}
+
+    .esh-catalog-send:hover {
+        background-color: #4a760f;
+        transition: all 0.35s;
+    }
+
+.esh-catalog-items {
+    margin-top: 1rem;
+}
+
+.esh-catalog-item {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    width: 33%;
+    display: inline-block;
+    float: none !important;
+}
+
+@media screen and (max-width: 1024px) {
+    .esh-catalog-item {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .esh-catalog-item {
+        width: 100%;
+    }
+}
+
+        */
+
+.esh-catalog-thumbnail {
+    max-width: 370px;
+    width: 100%;
+}
+
+/*
+.esh-catalog-button {
+    background-color: #83D01B;
+    border: none;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 1rem;
+    height: 3rem;
+    margin-top: 1rem;
+    transition: all 0.35s;
+    width: 80%;
+}
+
+    .esh-catalog-button.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+
+    .esh-catalog-button:hover {
+        background-color: #4a760f;
+        transition: all 0.35s;
+    }
+    */
+
+.esh-catalog-name {
+    font-size: 1rem;
+    font-weight: 300;
+    margin-top: .5rem;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.esh-catalog-price {
+    text-align: center;
+    font-weight: 900;
+    font-size: 28px;
+}
+
+/*
+    .esh-catalog-price::before {
+        content: '$';
+    }
+
+*/

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx

@@ -0,0 +1,87 @@
+<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Microsoft.eShopOnContainers.Catalog.WebForms._Default" Async="true" %>
+
+<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
+    <section class="esh-catalog-hero">
+        <div class="container">
+            <img class="esh-catalog-title" src="/Content/main_banner_text.png" />
+        </div>
+    </section>
+
+    <div class="row">
+        <asp:ListView ID="catalogList" runat="server"
+            DataKeyNames="Id" GroupItemCount="2"
+            ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem">
+            <EmptyDataTemplate>
+                <table >
+                    <tr>
+                        <td>Well, there's nothing in the catalog.</td>
+                    </tr>
+                </table>
+            </EmptyDataTemplate>
+            <EmptyItemTemplate>
+                <td/>
+            </EmptyItemTemplate>
+            <GroupTemplate>
+                <tr id="itemPlaceholderContainer" runat="server">
+                    <td id="itemPlaceholder" runat="server"></td>
+                </tr>
+            </GroupTemplate>
+            <ItemTemplate>
+                <td runat="server">
+                    <table>
+                        <tr>
+                            <td>
+                                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
+                                    <img  class="esh-catalog-thumbnail"  src="<%#:Item.PictureUri%>"
+                                        style="border: solid" /></a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
+                                    <span class="esh-catalog-name">
+                                        <%#:Item.Name%>
+                                    </span>
+                                </a>
+                                <br />
+                                <span class="esh-catalog-price">
+                                    <b>Price: </b><%#:String.Format("{0:c}", Item.Price)%>
+                                </span>
+                                <br />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>&nbsp;</td>
+                        </tr>
+                    </table>
+                </td>
+            </ItemTemplate>
+            <LayoutTemplate>
+                <table style="width:100%;">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <table id="groupPlaceholderContainer" runat="server" style="width:100%">
+                                    <tr id="groupPlaceholder"></tr>
+                                </table>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                        </tr>
+                        <tr></tr>
+                    </tbody>
+                </table>
+            </LayoutTemplate>
+        </asp:ListView>
+        <asp:DataPager 
+            ID="DataPager1" 
+            PagedControlID="catalogList"
+            PageSize="4"
+            runat="server">
+            <Fields>
+                <asp:NextPreviousPagerField ButtonType="Button" />
+            </Fields>
+        </asp:DataPager>
+    </div>
+</asp:Content>

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx.designer.cs

@@ -0,0 +1,33 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated. 
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace Microsoft.eShopOnContainers.Catalog.WebForms {
+    
+    
+    public partial class _Default {
+        
+        /// <summary>
+        /// catalogList control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::System.Web.UI.WebControls.ListView catalogList;
+        
+        /// <summary>
+        /// DataPager1 control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::System.Web.UI.WebControls.DataPager DataPager1;
+    }
+}

src/Web/Catalog.WebForms/Catalog.WebForms/Modules/AutoFacHttpModule.cs

@@ -15,9 +15,9 @@ namespace Microsoft.eShopOnContainers.Catalog.WebForms.Modules
 
     public class AutoFacHttpModule : IHttpModule
     {
-        private static IContainer Container => lazyContainer.Value;
+        private IContainer Container => lazyContainer.Value;
 
-        private static Lazy<IContainer> lazyContainer = new Lazy<IContainer>(() => CreateContainer());
+        private Lazy<IContainer> lazyContainer = new Lazy<IContainer>(() => CreateContainer());
 
         private static IContainer CreateContainer()
         {
@@ -44,6 +44,7 @@ namespace Microsoft.eShopOnContainers.Catalog.WebForms.Modules
         public void Dispose()
         {
             Container.Dispose();
+
         }
 
         public void Init(HttpApplication context)

src/Web/Catalog.WebForms/Catalog.WebForms/Site.Master

@@ -0,0 +1,78 @@
+<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Microsoft.eShopOnContainers.Catalog.WebForms.SiteMaster" %>
+
+<!DOCTYPE html>
+
+<html lang="en">
+<head runat="server">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%: Page.Title %> - My ASP.NET Application</title>
+
+    <asp:PlaceHolder runat="server">
+        <%: Scripts.Render("~/bundles/modernizr") %>
+    </asp:PlaceHolder>
+
+    <webopt:bundlereference runat="server" path="~/Content/css" />
+    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+    <link href="~/Content/catalog.component.css" rel="stylesheet" />
+    <link href="~/Content/app.component.css" rel="stylesheet" />
+</head>
+<body>
+    <form runat="server">
+        <asp:ScriptManager runat="server">
+            <Scripts>
+                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
+                <%--Framework Scripts--%>
+                <asp:ScriptReference Name="MsAjaxBundle" />
+                <asp:ScriptReference Name="jquery" />
+                <asp:ScriptReference Name="bootstrap" />
+                <asp:ScriptReference Name="respond" />
+                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
+                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
+                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
+                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
+                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
+                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
+                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
+                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
+                <asp:ScriptReference Name="WebFormsBundle" />
+                <%--Site Scripts--%>
+            </Scripts>
+        </asp:ScriptManager>
+
+    <header class="navbar navbar-light navbar-static-top">
+        <div class="container">
+            <article class="row">
+
+                <section class="col-lg-7 col-md-6 col-xs-12">
+                    <a class="navbar-brand" href="Default.aspx">
+                        <img src="/Content/brand.png" />
+                    </a>
+                </section>
+            </article>
+        </div>
+    </header>
+        <div class="container body-content">
+            <asp:ContentPlaceHolder ID="MainContent" runat="server">
+            </asp:ContentPlaceHolder>
+            <hr />
+    <footer class="esh-app-footer">
+        <div class="container">
+            <article class="row">
+
+                <section class="col-sm-6">
+                    <img class="esh-app-footer-brand" src="/Content/brand_dark.png" />
+                </section>
+
+                <section class="col-sm-6">
+                    <div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
+                </section>
+
+            </article>
+        </div>
+    </footer>
+        </div>
+
+    </form>
+</body>
+</html>