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

@@ -1,9 +1,15 @@
 <%@ 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="4"
+            DataKeyNames="Id" GroupItemCount="2"
             ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem">
             <EmptyDataTemplate>
                 <table >
@@ -26,19 +32,19 @@
                         <tr>
                             <td>
                                 <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
-                                    <img src="<%#:Item.PictureUri%>"
+                                    <img  class="esh-catalog-thumbnail"  src="<%#:Item.PictureUri%>"
                                         style="border: solid" /></a>
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
-                                    <span>
+                                    <span class="esh-catalog-name">
                                         <%#:Item.Name%>
                                     </span>
                                 </a>
                                 <br />
-                                <span>
+                                <span class="esh-catalog-price">
                                     <b>Price: </b><%#:String.Format("{0:c}", Item.Price)%>
                                 </span>
                                 <br />
@@ -48,7 +54,6 @@
                             <td>&nbsp;</td>
                         </tr>
                     </table>
-                    </p>
                 </td>
             </ItemTemplate>
             <LayoutTemplate>
@@ -69,5 +74,14 @@
                 </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

@@ -20,5 +20,14 @@ namespace Microsoft.eShopOnContainers.Catalog.WebForms {
         /// 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

@@ -14,7 +14,8 @@
 
     <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">
@@ -39,32 +40,37 @@
             </Scripts>
         </asp:ScriptManager>
 
-        <div class="navbar navbar-inverse navbar-fixed-top">
+    <header class="navbar navbar-light navbar-static-top">
-            <div class="container">
+        <div class="container">
-                <div class="navbar-header">
+            <article class="row">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
-                        <span class="icon-bar"></span>
+                <section class="col-lg-7 col-md-6 col-xs-12">
-                        <span class="icon-bar"></span>
+                    <a class="navbar-brand" href="Default.aspx">
-                        <span class="icon-bar"></span>
+                        <img src="/Content/brand.png" />
-                    </button>
+                    </a>
-                    <a class="navbar-brand" runat="server" href="~/">Application name</a>
+                </section>
-                </div>
+            </article>
-                <div class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav">
-                        <li><a runat="server" href="~/">Home</a></li>
-                        <li><a runat="server" href="~/About">About</a></li>
-                        <li><a runat="server" href="~/Contact">Contact</a></li>
-                    </ul>
-                </div>
-            </div>
         </div>
+    </header>
         <div class="container body-content">
             <asp:ContentPlaceHolder ID="MainContent" runat="server">
             </asp:ContentPlaceHolder>
             <hr />
-            <footer>
+    <footer class="esh-app-footer">
-                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
+        <div class="container">
-            </footer>
+            <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>