Ch. 10 SportsStore Mobile

SportsStore.WebUI/Controllers/NavController.cs

@@ -15,7 +15,7 @@ namespace SportsStore.WebUI.Controllers
 			repository = repo;
 		}
 
-		public PartialViewResult Menu(string category = null)
+		public PartialViewResult Menu(string category = null /*, bool horizontalLayout = false */)
 		{
 			ViewBag.SelectedCategory = category;
 			IEnumerable<string> categories = repository.Products
@@ -23,7 +23,9 @@ namespace SportsStore.WebUI.Controllers
 									.Distinct()
 									.OrderBy(x => x);
 
-			return PartialView(categories);
+			//string viewName = horizontalLayout ? "MenuHorizontal" : "Menu";
+
+			return PartialView("FlexMenu", categories);
 		}
 
 		//public string Menu()

SportsStore.WebUI/SportsStore.WebUI.csproj

@@ -163,6 +163,11 @@
     <Content Include="Views\Cart\Summary.cshtml" />
     <Content Include="Views\Cart\Checkout.cshtml" />
     <Content Include="Views\Cart\Completed.cshtml" />
+    <Content Include="Views\Nav\MenuHorizontal.cshtml" />
+    <Content Include="Views\Nav\FlexMenu.cshtml" />
+    <Content Include="Views\Shared\_Layout.Mobile.cshtml" />
+    <Content Include="Views\Nav\FlexMenu.Mobile.cshtml" />
+    <Content Include="Views\Shared\ProductSummary.Mobile.cshtml" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

SportsStore.WebUI/Views/Cart/Summary.cshtml

@@ -1,6 +1,6 @@
 @model SportsStore.Domain.Entities.Cart
 
-<div class="navbar-right">
+<div class="navbar-right hidden-xs">
 	@Html.ActionLink("Checkout", "Index", "Cart",
 		new { returnUrl = Request.Url.PathAndQuery },
 		new { @class = "btn btn-default navbar-btn" }
@@ -8,8 +8,15 @@
 		
 </div>
 
+<div class="navbar-right visible-xs">
+	<a href=@Url.Action("Index", "Cart", new { returnUrl = Request.Url.PathAndQuery })
+	   class="btn btn-default navbar-btn">
+		<span class="glyphicon glyphicon-shopping-cart"></span>
+	</a>
+</div>
+
 <div class="navbar-text navbar-right">
-	<b>Your cart:</b>
+	<b class="hidden-xs">Your cart:</b>
 	@Model.Lines.Sum(x => x.Quantity) item(s),
 	@Model.ComputeTotalValue().ToString("c")
 </div>

SportsStore.WebUI/Views/Nav/FlexMenu.Mobile.cshtml

@@ -0,0 +1,15 @@
+@model IEnumerable<string>
+
+<div data-role="navbar">
+	<ul>
+		@foreach (var link in Model)
+		{
+			<li>
+				@Html.RouteLink(link,
+						new { controller = "Product", action = "List", category = link, page = 1 },
+						new { data_transition = "fade", @class = (link == ViewBag.SelectedCategory ? " ui-btn-active" : null) }
+				)
+			</li>
+		}
+	</ul>
+</div>

SportsStore.WebUI/Views/Nav/FlexMenu.cshtml

@@ -0,0 +1,17 @@
+@model IEnumerable<string>
+
+@{ 
+	bool horizontal = ((bool)(ViewContext.RouteData.Values["horizontalLayout"] ?? false));
+	string wrapperClasses = horizontal ? "btn-group btn-group-sm btn-group-justified" : null;
+}
+
+<div class="@wrapperClasses">
+	@Html.ActionLink("Home", "List", "Product", null, new { @class = horizontal ? "btn btn-default btn-sm" : "btn btn-block btn-default btn-lg" })
+
+	@foreach (var link in Model)
+	{
+		@Html.RouteLink(link, 
+			new { controller = "Product", action = "List", category = link, page = 1 },
+			new { @class = (horizontal ? "btn btn-default btn-sm" : "btn btn-block btn-default btn-lg") + (link == ViewBag.SelectedCategory ? " btn-primary" : "") })
+	}
+</div>

SportsStore.WebUI/Views/Nav/MenuHorizontal.cshtml

@@ -0,0 +1,13 @@
+@model IEnumerable<string>
+
+<div class="btn-group btn-group-sm btn-group-justified">
+	@Html.ActionLink("Home", "List", "Product", null, new { @class = "btn btn-default btn-sm"})
+
+	@foreach (var link in Model)
+	{
+		@Html.RouteLink(link, 
+				new { controller = "Product", action = "List", category = link, page = 1 },
+				new { @class = "btn btn-default btn-xs" + (link == ViewBag.SelectedCategory ? " btn-primary" : "")}
+	   )
+	}
+</div>

SportsStore.WebUI/Views/Shared/ProductSummary.Mobile.cshtml

@@ -0,0 +1,22 @@
+@model SportsStore.Domain.Entities.Product
+
+<div data-role="collapsible" data-collapsed="false" data-content-theme="c">
+	<h2>
+		@Model.Name
+	</h2>
+	<div class="ui-grid-b">
+		<div class="ui-block-a">
+			@Model.Description
+		</div>
+		<div class="ui-block-b">
+			<strong>(@Model.Price.ToString("c"))</strong>
+		</div>
+		<div class="ui-block-c">
+			@using (Html.BeginForm("AddToCart", "Cart"))
+			{
+				@Html.HiddenFor(x => x.ProductID)
+				@Html.Hidden("returnUrl", Request.Url.PathAndQuery)
+				<input type="submit" data-inline="true" data-mini="true" value="Add to Cart" />
+			}
+		</div>
+</div>

SportsStore.WebUI/Views/Shared/_Layout.Mobile.cshtml

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
+	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.3.2./jquery.moblile-1.3.2.min.js" ></script>
+    <title>@ViewBag.Title</title>
+</head>
+<body>
+    <div data-role="page" id="page1">
+		<div data-theme="false" data-role="header" data-position="fixed" >
+			<h3>SportsStore</h3>
+			@Html.Action("Menu", "Nav")
+		</div>
+		<div data-role="content">
+			<ul data-role="listview" data-dividertheme="b" data-inset="false" >
+				@RenderBody()
+			</ul>
+		</div>
+    </div>
+</body>
+</html>

SportsStore.WebUI/Views/Shared/_Layout.cshtml

@@ -7,17 +7,30 @@
 	<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
 	<link href="~/Content/ErrorStyles.css" rel="stylesheet" />
     <title>@ViewBag.Title</title>
+	<style>
+		.navbar-right{
+			float: right !important;
+			margin-right: 15px; margin-left: 15px;
+		}
+	</style>
 </head>
 <body>
 	<div class="navbar navbar-inverse" role="navigation">
-		<a class="navbar-brand" href="#">SPORTS STORE</a>
+		<a class="navbar-brand" href="#">
+			<span class="hidden-xs">SPORTS STORE</span>
+			<div class="visible-xs">SPORTS</div>
+			<div class="visible-xs">SPTORE</div>
+		</a>
 		@Html.Action("Summary", "Cart")
 	</div>
+	<div class="visible-xs">
+		@Html.Action("Menu", "Nav", new { horizontalLayout = true })
+	</div>
 	<div class="row panel">
-		<div id="categories" class="col-xs-3">
+		<div id="categories" class="col-sm-3 hidden-xs">
 			@Html.Action("Menu", "Nav")
 		</div>
-		<div class="col-xs-8">
+		<div class="col-xs-12 col-sm-8">
 			@RenderBody()
 		</div>
 	</div>