Small layout tweaks (#43)

This commit is contained in:
Robert Sandu
2017-09-01 16:15:42 +03:00
committed by Steve Smith
parent 19c10ed0e5
commit b90bd08d11
4 changed files with 98 additions and 89 deletions

View File

@@ -1,32 +1,38 @@
@model PaginationInfoViewModel @model PaginationInfoViewModel
<div class="esh-pager"> <div class="esh-pager">
<div class="container"> <div class="container-fluid">
<article class="esh-pager-wrapper row"> <article class="esh-pager-wrapper row">
<nav> <nav>
<a class="esh-pager-item esh-pager-item--navigable @Model.Previous" <div class="col-md-2 col-xs-12">
id="Previous" <a class="esh-pager-item-left esh-pager-item--navigable @Model.Previous"
asp-controller="Catalog" id="Previous"
asp-action="Index" asp-controller="Catalog"
asp-route-page="@(Model.ActualPage -1)" asp-action="Index"
aria-label="Previous"> asp-route-page="@(Model.ActualPage - 1)"
Previous aria-label="Previous">
</a> Previous
</a>
<span class="esh-pager-item"> </div>
Showing @Model.ItemsPerPage of @Model.TotalItems products - Page @(Model.ActualPage + 1) - @Model.TotalPages
</span> <div class="col-md-8 col-xs-12">
<span class="esh-pager-item">
<a class="esh-pager-item esh-pager-item--navigable @Model.Next" Showing @Model.ItemsPerPage of @Model.TotalItems products - Page @(Model.ActualPage + 1) - @Model.TotalPages
id="Next" </span>
asp-controller="Catalog" </div>
asp-action="Index"
asp-route-page="@(Model.ActualPage + 1)" <div class="col-md-2 col-xs-12">
aria-label="Next"> <a class="esh-pager-item-right esh-pager-item--navigable @Model.Next"
Next id="Next"
</a> asp-controller="Catalog"
</nav> asp-action="Index"
</article> asp-route-page="@(Model.ActualPage + 1)"
</div> aria-label="Next">
Next
</a>
</div>
</nav>
</article>
</div>
</div> </div>

View File

@@ -1,77 +1,76 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Microsoft.eShopOnWeb</title> <title>@ViewData["Title"] - Microsoft.eShopOnWeb</title>
<environment names="Development"> <environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/app.css" /> <link rel="stylesheet" href="~/css/app.css" />
</environment> </environment>
<environment names="Staging,Production"> <environment names="Staging,Production">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" /> <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" />
</environment> </environment>
<link rel="stylesheet" href="~/css/catalog/pager.css" /> <link rel="stylesheet" href="~/css/catalog/pager.css" />
<link rel="stylesheet" href="~/css/catalog/catalog.component.css" /> <link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
</head> </head>
<body> <body>
<header class="navbar navbar-light navbar-static-top"> <header class="navbar navbar-light navbar-static-top">
<div class="container"> <div class="container">
<article class="row"> <article class="row">
<section class="col-lg-7 col-md-6 col-xs-12"> <section class="col-lg-7 col-md-6 col-xs-12">
<a class="navbar-brand" routerLink="catalog"> <a asp-area="" asp-controller="Catalog" asp-action="Index" class="navbar-brand">
<a asp-area="" asp-controller="Catalog" asp-action="Index"> <img src="../images/brand.png" alt="eShop On Web"/>
<img src="../images/brand.png" /> </a>
</a> </section>
</section> @await Html.PartialAsync("_LoginPartial")
@await Html.PartialAsync("_LoginPartial") <section class="col-lg-1 col-md-3 col-xs-6"><a asp-controller="Basket" asp-action="Index">Basket</a></section>
<section class="col-lg-1 col-xs-12"><a asp-controller="Basket" asp-action="Index">Basket</a></section>
</article> </article>
</div> </div>
</header> </header>
@RenderBody() @RenderBody()
<footer class="esh-app-footer"> <footer class="esh-app-footer">
<div class="container"> <div class="container">
<article class="row"> <article class="row">
<section class="col-sm-6"> <section class="col-sm-6">
<img class="esh-app-footer-brand" src="../images/brand_dark.png" /> <img class="esh-app-footer-brand" src="../images/brand_dark.png" />
</section> </section>
<section class="col-sm-6"> <section class="col-sm-6">
<div class="esh-app-footer-text hidden-xs"> e-ShopOnWeb. All right reserved </div> <div class="esh-app-footer-text hidden-xs"> e-ShopOnWeb. All right reserved </div>
</section> </section>
</article> </article>
</div> </div>
</footer> </footer>
<environment names="Development"> <environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/site.js" asp-append-version="true"></script>
</environment> </environment>
<environment names="Staging,Production"> <environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"> asp-fallback-test="window.jQuery">
</script> </script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js" <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script> </script>
<script src="~/js/site.min.js" asp-append-version="true"></script> <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment> </environment>
@RenderSection("scripts", required: false) @RenderSection("scripts", required: false)
</body> </body>
</html> </html>

View File

@@ -40,7 +40,7 @@
} }
else else
{ {
<section class="col-lg-4 col-md-5 col-xs-12"> <section class="col-lg-1 col-lg-offset-3 col-md-3 col-xs-6">
<div class="esh-identity"> <div class="esh-identity">
<section class="esh-identity-section"> <section class="esh-identity-section">
<div class="esh-identity-item"> <div class="esh-identity-item">

View File

@@ -3,8 +3,12 @@
text-align: center; text-align: center;
} }
.esh-pager-item { .esh-pager-item-left {
margin: 0 5vw; float: left;
}
.esh-pager-item-right {
float: right;
} }
.esh-pager-item--navigable { .esh-pager-item--navigable {