From d1f28bbc782dfc6c1ca71149b3f7543813843de2 Mon Sep 17 00:00:00 2001
From: Tommy Parnell <tparnell8@gmail.com>
Date: Thu, 8 Oct 2015 19:06:41 -0400
Subject: [PATCH] fix ui

---
 src/DotNetMashup.Web/Views/Home/Index.cshtml  |  6 +-
 src/DotNetMashup.Web/Views/Home/Tiles.cshtml  |  2 +-
 .../BlogPostExternalData.cshtml               | 21 +++--
 .../GithubAnnouncement.cshtml                 | 14 +--
 .../Views/Shared/_Layout.cshtml               |  4 +-
 src/DotNetMashup.Web/wwwroot/css/site.css     | 87 +++++++++----------
 6 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/src/DotNetMashup.Web/Views/Home/Index.cshtml b/src/DotNetMashup.Web/Views/Home/Index.cshtml
index 24c7ba7..c66fda9 100644
--- a/src/DotNetMashup.Web/Views/Home/Index.cshtml
+++ b/src/DotNetMashup.Web/Views/Home/Index.cshtml
@@ -4,18 +4,14 @@
     ViewData["Title"] = "Dot Net Mashups!";
 }
 
-
 @await Html.PartialAsync("Tiles", Model.Posts)
 
 <br />
-<br/>
+<br />
 @if(Model.NextPage.HasValue)
 {
     <div class="row" style="min-height: 100px">
         <a asp-action="Index" asp-route-page="@Model.NextPage" class="pill col-md-offset-5 ">Next Page</a>
     </div>
-       
 
-
-   
 }
\ No newline at end of file
diff --git a/src/DotNetMashup.Web/Views/Home/Tiles.cshtml b/src/DotNetMashup.Web/Views/Home/Tiles.cshtml
index 0316578..18ccb08 100644
--- a/src/DotNetMashup.Web/Views/Home/Tiles.cshtml
+++ b/src/DotNetMashup.Web/Views/Home/Tiles.cshtml
@@ -3,7 +3,7 @@
 @{
     ViewData["Title"] = "Dot Net Mashups!";
 }
-<div class="col-sm-12">
+<div class="col-sm-offset-1 col-sm-10">
 
     @foreach(var x in Model)
     {
diff --git a/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/BlogPostExternalData.cshtml b/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/BlogPostExternalData.cshtml
index 44dd3ed..a6085fc 100644
--- a/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/BlogPostExternalData.cshtml
+++ b/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/BlogPostExternalData.cshtml
@@ -1,15 +1,18 @@
 @model DotNetMashup.Web.Model.BlogPostExternalData
 
-
 <div class="tile">
-    <div class="row">
-        <div class="col-md-2"><img class="img-responsive img" src="@Model.Author.ImageUrl" /></div>
-        <div class="col-md-8"><h2><i class="fa fa-book" style="font-size:32px"></i> @Model.Author.Name </h2></div>
-    </div>
-    <div class="row">
-        <div class="col-md-12">
-            <h2><a href="@Model.OriginalLink">@Model.Title</a></h2>
-            <p>@Html.Raw(Model.Content)</p>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-2"><img class="img-responsive img" src="@Model.Author.ImageUrl" /></div>
+            <div class="col-md-8"><h2><i class="fa fa-book" style="font-size:32px"></i> @Model.Author.Name </h2></div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <h2><a href="@Model.OriginalLink">@Model.Title</a></h2>
+                @Html.Raw(Model.Content)<span>
+                    <a href="@Model.OriginalLink">Read Further</a>
+                </span>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml b/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml
index 293d705..c78e15d 100644
--- a/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml
+++ b/src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml
@@ -1,11 +1,13 @@
 @model DotNetMashup.Web.Model.GithubAnnouncement
 
 <div class="tile">
-    <div class="row">
-        <div class="col-md-2"><img class="img-responsive img" src="@Model.Author.ImageUrl" /></div>
-        <div class="col-md-6"><h2><i class="fa fa-github" style="font-size:32px"></i> @Model.Author.Name <a href="@Model.OriginalLink">#@Model.IssueNumber</a> </h2></div>
-    </div>
-    <div class="row">
-        <div class="col-md-12"><p>@Html.Raw(@Model.Content)</p></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-2"><img class="img-responsive img" src="@Model.Author.ImageUrl" /></div>
+            <div class="col-md-6"><h2><i class="fa fa-github" style="font-size:32px"></i> @Model.Author.Name <a href="@Model.OriginalLink">#@Model.IssueNumber</a> </h2></div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">@Html.Raw(@Model.Content)</div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/DotNetMashup.Web/Views/Shared/_Layout.cshtml b/src/DotNetMashup.Web/Views/Shared/_Layout.cshtml
index 3e3f373..15b2b05 100644
--- a/src/DotNetMashup.Web/Views/Shared/_Layout.cshtml
+++ b/src/DotNetMashup.Web/Views/Shared/_Layout.cshtml
@@ -10,6 +10,9 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 <body>
+    <div class="headerwrap">
+        <h2 style="color: #FFFFFF; text-align:center;">ASP.NET News Mashups</h2>
+    </div>
     <div class="container body-content">
         @RenderBody()
     </div>
@@ -26,7 +29,6 @@
 
     <script src="~/js/site.js" asp-append-version="true"></script>
 
-
     @RenderSection("scripts", required: false)
 </body>
 </html>
\ No newline at end of file
diff --git a/src/DotNetMashup.Web/wwwroot/css/site.css b/src/DotNetMashup.Web/wwwroot/css/site.css
index d3b5778..56b5359 100644
--- a/src/DotNetMashup.Web/wwwroot/css/site.css
+++ b/src/DotNetMashup.Web/wwwroot/css/site.css
@@ -1,59 +1,58 @@
-/* Wrapping element */
-/* Set some basic padding to keep content from hitting the edges */
-.body-content {
-    padding-left: 15px;
-    padding-right: 15px;
-}
-
-/* Set widths on the form inputs since otherwise they're 100% wide */
-input,
-select,
-textarea {
-    max-width: 280px;
-}
-
-/* Carousel */
-.carousel-caption {
-    z-index: 10 !important;
-}
-
-    .carousel-caption p {
-        font-size: 20px;
-        line-height: 1.4;
-    }
-
-@media (min-width: 768px) {
-    .carousel-caption {
-        z-index: 10 !important;
-    }
-}
-
-.tile {
-    border-radius: 25px;
+.tile {
+    border-radius: 5px;
     border: 1px solid #03A9F4;
-    background-color: #F5F5F5;
-    margin-bottom: 5px;
-    padding: 10px;
-    white-space: pre-wrap;
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    -webkit-box-shadow: 7px 10px 20px -7px rgba(0,0,0,0.75);
+    -moz-box-shadow: 7px 10px 20px -7px rgba(0,0,0,0.75);
+    box-shadow: 7px 10px 20px -7px rgba(0,0,0,0.75);
+    padding: 5px;
 }
 
 body {
-    padding-top: 50px;
-    background-color: #616161;
+    background-color: #f5f8fa;
 }
 
 footer {
     width: 100%;
     padding: 10px;
-    background-color: #F5F5F5;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0;
 }
 
 .img {
     border-radius: 50%;
 }
-.pill{
-     border-radius: 50%;
-     background-color: #F5F5F5;
-     padding: 10px;
-     border: 1px solid #03A9F4;
+
+.pill {
+    border-radius: 50%;
+    background-color: #ffffff;
+    padding: 10px;
+    border: 1px solid #03A9F4;
+}
+
+.headerwrap {
+    background-color: #00BCD4;
+    width: 100%;
+    height: 80px;
+    z-index: 1000;
+    -webkit-box-shadow: 0px 10px 9px -8px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 10px 9px -8px rgba(0,0,0,0.75);
+    box-shadow: 0px 10px 9px -8px rgba(0,0,0,0.75);
+}
+
+@media screen and (min-width: 480px) {
+    .headerwrap {
+        position: fixed;
+        top: 0;
+    }
+
+    .body-content {
+        margin-top: 180px;
+    }
+}
+
+.tile > * > p {
+    white-space: pre-line;
 }
\ No newline at end of file