3
chap10
Jason Zhu edited this page 2021-09-22 23:07:45 +10:00
Chapter 10: SportsStore: Mobile
10.1 Putting Mobile Web Development in Context
10.2 Using Responsive Design
Responsive design: one technique good for mobile app and different browser window size (Maybe outdated)
- CSS standard has features that let people change the styling applied to elements based on capabilities of the device (i.e. alter layout of content based on screen width)
- Responsive design is handled by client using CSS, not directly managed by MVC.
10.2.1 Creating a Responsive Header
Page Header of SportsStreo (i.e. navbar) contains SportsStore name, cart summary and Checkout button. Although we can hide it, but usually we won't as it's important for company brands and navigation
Steps:
- Modify header in
_Layout.cshtmlto make navbar responsive for window width change. (Listing 10-1) - Fix
/Views/Cart/Summary.cshtml, the view provides summary of the cart and its content. As_Layout.cshtmlhas changed.
Listing 10-1 Adding Responsive Content to the _Layout.cshtml File
<!DOCTYPE html>
<html>
<head>
...
<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="#">
<span class="hidden-xs">SPORTS STORE</span>
<span class="visible-xs">SPORTS</span>
<span class="visible-xs">STORE</span>
</a>
@Html.Action("Summary", "Cart")
</div>
...
Where:
.navbar-rightandclass="navbar-brand"where we changed. We use Bootstrap's classes which can show or hide elements based on width of the device screen- In spans below
class="navbar-brand", we usevisiable-xs&hidden-xsclasses to switch to text (from one line) to virtically two lines when window size is below 768 pixels.- Bootstrap provide
visible-*&hidden-*classes as pairs to show and hide element at diferent browser window size *after the pair works for different window width*-sm: window width > 768 pixels*-md: window width > 992 pixels*-lg: window width > 1200 pixels
- Bootstrap provide
Listing 10-2. Adding Responsive Content to the Summary.cshtml File
@model SportsStore.Domain.Entities.Cart
<div class="navbar-right hidden-xs">
@Html.ActionLink("Checkout", "Index", "Cart",
new { returnUrl = Request.Url.PathAndQuery },
new { @class = "btn btn-default navbar-btn" } )
</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 class="hidden-xs">Your cart:</b>
@Model.Lines.Sum(x => x.Quantity) item(s),
@Model.ComputeTotalValue().ToString("c")
</div>
Where:
- We use
Url.Actionhelper method (detailed in chap23) to generate a URL for thehrefattribute. And we can use Bootstrapglyphiconto replace text of checkout button when screenwidth shrink. - Detail of explanation is in book. TODO: fix the explain here (current one is too bad)
10.2.2 Creating a Responsive Product List
Objective: modify produt list so it display on narrow device responsively, by moving category buttons (in sidebar) out when window is narrow.
Steps:
- Edit
_Layout.cshmtl
Listing 10-3. Creating a Responsive Product List in the _Layout.cshtml File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet"/>
...
<div class="row panel">
<div class="col-sm-3 hidden-xs">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-12 col-sm-8">
@RenderBody()
</div>
</div>
</body>
</html>
Where:
- Changed are in `". Details are not explained here, as I don't understand right now. TODO: Understand responsive design here.