Improving our Layout

Designer team notify us there are some changes in layout view. So, they give us a new mockup, download here: https://drive.google.com/file/d/0Bz2kPdGo45obVFg4RHlQZ09lQ00/view?usp=sharing

Copy those code to our View class. Then, convert the code like we used earlier.

<h2>@Model.DisplayText</h2>

<div class="row">
    <div class="col-md-6">
        <div class="well">
            <h5><label>Series Title:</label> @Model.SeriesTitle</h5>
            <h5><label>Issue #:</label> @Model.IssueNumber</h5>
            <h5><label>Favorite:</label> @Model.Favorite</h5>

Try to run the project. Look at favorite tag, we want to show either Yes or No. The idea is using conditional statement.

<h5><label>Favorite:</label> @(Model.Favorite ? "Yes" : "No") </h5>

Finally, our code should look like this.

<div class="col-md-6">
    <div class="well">
        <h5><label>Series Title:</label> @Model.SeriesTitle</h5>
        <h5><label>Issue #:</label> @Model.IssueNumber</h5>
        <h5><label>Favorite:</label> @(Model.Favorite ? "Yes" : "No")</h5>
        @if (Model.Artists.Length > 0)
        {
            <h5>Artist:</h5>
            <div>
                <ul>
                    @foreach (var artist in Model.Artists)
                    {
                        <li>@artist.Role : @artist.Name</li>
                    }
                </ul>
            </div>
        }
    </div>
    <h5>Description:</h5>
    <div>@Html.Raw(Model.DescriptionHTML)</div>
</div>

Don't forget with Image div tag.

<div class="col-md-6">
    <img src="/Images/@Model.CoverImageFileName"
         alt="@Model.DisplayText" class="img-responsive" />
</div>