Styling views with bootstrap

gorohoroh · Jul 14, 2018 · 0b80714 · 0b80714
1 parent 1ece66e
commit 0b80714
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 57 deletions.
diff --git a/OdeToFoodRider/OdeToFoodRider/Views/Home/Index.cshtml b/OdeToFoodRider/OdeToFoodRider/Views/Home/Index.cshtml
@@ -11,4 +11,4 @@
     @Html.Partial("_Summary", restaurant)
 }
 
-<div ><a asp-action="Create">Add Restaurant</a></div>
+<div ><a class="btn btn-primary" asp-action="Create">Add Restaurant</a></div>
diff --git a/OdeToFoodRider/OdeToFoodRider/Views/Home/_Summary.cshtml b/OdeToFoodRider/OdeToFoodRider/Views/Home/_Summary.cshtml
@@ -1,13 +1,13 @@
 @model Restaurant
 
-<section>
-    <h3>@Model.Name</h3>
-    <div>
+<section class="panel panel-default">
+    <h3 class="panel-heading">@Model.Name</h3>
+    <div class="panel-body">
         Cuisine: @Model.Cuisine
     </div>
-    <div>
-        <a asp-action="Details" asp-route-id="@Model.Id">More</a>
-        <a asp-page="/Restaurants/Edit" asp-route-id="@Model.Id">Edit</a>
+    <div class="panel-footer">
+        <a class="btn btn-default" asp-action="Details" asp-route-id="@Model.Id">More</a>
+        <a class="btn btn-default" asp-page="/Restaurants/Edit" asp-route-id="@Model.Id">Edit</a>
     </div>
 
 </section>

diff --git a/OdeToFoodRider/OdeToFoodRider/Views/Shared/_Layout.cshtml b/OdeToFoodRider/OdeToFoodRider/Views/Shared/_Layout.cshtml
@@ -6,29 +6,40 @@
     <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
 </head>
 <body>
-<div>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="/">OdeToFood Rider</a>
+        </div>
+        <div class="navbar-right">
+            <a class="btn btn-default" href="#">Login</a>
+        </div>
+    </div>
+</nav>
+<div class="container">
     @RenderBody()
-</div>
-<footer>
-    @RenderSection("footer", required: false)
-    @await Component.InvokeAsync("Greeter")
-    <vc:greeter></vc:greeter>
-    @if (User.Identity.IsAuthenticated)
-    {
-        foreach (var identity in User.Identities)
+    <footer>
+        @RenderSection("footer", required: false)
+        @await Component.InvokeAsync("Greeter")
+        @if (User.Identity.IsAuthenticated)
+        {
+            foreach (var identity in User.Identities)
+            {
+                <h3>@identity.Name</h3>
+                <ul>
+                    @foreach (var claim in identity.Claims)
+                    {
+                        <li>@claim.Type - @claim.Value</li>
+                    }
+                </ul>
+            }
+        }
+        else
         {
-            <h3>@identity.Name</h3>
-            <ul>
-                @foreach (var claim in identity.Claims)
-                {
-                    <li>@claim.Type - @claim.Value</li>
-                }
-            </ul>
+            <div>You are anonymous</div>
         }
-    }
-    else {
-        <div>You are anonymous</div>
-    }
-</footer>
+    </footer>
+
+</div>
 </body>
 </html>
diff --git a/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/Index.cshtml b/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/Index.cshtml
@@ -12,5 +12,5 @@
 }
 
 <div>
-    <a asp-action="Create">Add Restaurant</a>
+    <a class="btn btn-primary" asp-action="Create">Add Restaurant</a>
 </div>
diff --git a/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/_Summary.cshtml b/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/_Summary.cshtml
@@ -1,13 +1,13 @@
 @model Restaurant
 
-<section>
-    <h3>@Model.Name</h3>
-    <div>
+<section class="panel panel-default">
+    <h3 class="panel-heading">@Model.Name</h3>
+    <div class="panel-body">
         Cuisine: @Model.Cuisine
     </div>
-    <div>
-        <a asp-action="Details" asp-route-id="@Model.Id">More</a>
-        <a asp-page="/Restaurants/Edit" asp-route-id="@Model.Id">Edit</a>
+    <div class="panel-footer">
+        <a class="btn btn-default" asp-action="Details" asp-route-id="@Model.Id">More</a>
+        <a class="btn btn-default" asp-page="/Restaurants/Edit" asp-route-id="@Model.Id">Edit</a>
     </div>
 
 </section>
diff --git a/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Shared/_Layout.cshtml b/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Shared/_Layout.cshtml
@@ -7,30 +7,40 @@
     <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
 </head>
 <body>
-    <div>
+    <nav class="navbar navbar-default">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="/">OdeToFood Visual Studio</a>
+            </div>
+            <div class="navbar-right">
+                <a class="btn btn-default" href="#">Login</a>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
         @RenderBody()
-    </div>
-    <footer>
-        @RenderSection("footer", required: false)
-        @await Component.InvokeAsync("Greeter")
-        <vc:greeter></vc:greeter>
-        @if (User.Identity.IsAuthenticated)
-        {
-            foreach (var identity in User.Identities)
+        <footer>
+            @RenderSection("footer", required: false)
+            @await Component.InvokeAsync("Greeter")
+            @if (User.Identity.IsAuthenticated)
+            {
+                foreach (var identity in User.Identities)
+                {
+                    <h3>@identity.Name</h3>
+                    <ul>
+                        @foreach (var claim in identity.Claims)
+                        {
+                            <li>@claim.Type - @claim.Value</li>
+                        }
+                    </ul>
+                }
+            }
+            else
             {
-                <h3>@identity.Name</h3>
-                <ul>
-                    @foreach (var claim in identity.Claims)
-                    {
-                        <li>@claim.Type - @claim.Value</li>
-                    }
-                </ul>
+                <div>You are anonymous</div>
             }
-        }
-        else
-        {
-            <div>You are anonymous</div>
-        }
-    </footer>
+        </footer>
+
+    </div>
 </body>
 </html>