TerribleDev/DotNetMashup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
Tommy Parnell
2015-10-08 19:06:41 -04:00
parent 51a41da85c
commit d1f28bbc78
6 changed files with 68 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/DotNetMashup.Web/Views/Home/Index.cshtml
View File

@@ -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>
}

2
src/DotNetMashup.Web/Views/Home/Tiles.cshtml
View File

@@ -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)
{

21
src/DotNetMashup.Web/Views/Shared/DisplayTemplates/BlogPostExternalData.cshtml
View File

@@ -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>

14
src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml
View File

@@ -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>

4
src/DotNetMashup.Web/Views/Shared/_Layout.cshtml
View File

@@ -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>

87
src/DotNetMashup.Web/wwwroot/css/site.css
View File

@@ -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;
}