Various additions
parent
4f0ae0098d
commit
d0bffca00a
|
|
@ -40,7 +40,9 @@ $('#placeBid').click(function () {
|
|||
|
||||
var update = function update() {
|
||||
var success = function success(data) {
|
||||
$('#highest').text('$' + (data.bid.highest || data.bid.starting));
|
||||
if (data.bid) {
|
||||
$('#highest').text('$' + (data.bid.highest || data.bid.starting));
|
||||
}
|
||||
};
|
||||
|
||||
var error = function error(xhr) {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
}
|
||||
|
||||
.images {
|
||||
margin: -1em;
|
||||
margin: -1rem;
|
||||
}
|
||||
.image {
|
||||
margin: 1em;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,26 @@
|
|||
.items {
|
||||
margin: -1em;
|
||||
margin: -1rem;
|
||||
}
|
||||
.item {
|
||||
margin: 1em;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
}
|
||||
.item:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-top: calc(10 / 16 * 100%);
|
||||
}
|
||||
.item a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.items {
|
||||
display: flex;
|
||||
|
|
@ -12,6 +28,10 @@
|
|||
}
|
||||
.item {
|
||||
flex: 1 0 auto;
|
||||
width: calc(50% - 4em);
|
||||
width: calc(50% - 4rem);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
padding-top: calc(4 / 3 * 100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,42 @@
|
|||
main {
|
||||
padding-top: 6vw;
|
||||
body {
|
||||
font-family: "Fira Sans",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"Roboto",
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
/* font-weight: 600; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
main,
|
||||
main.container-fluid {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
main,
|
||||
main.container-fluid {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar-brand {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,11 @@ routes.use(bodyparser.urlencoded({
|
|||
const logic = new Logic();
|
||||
const config = logic.getConfig();
|
||||
|
||||
routes.get('/*', (req, res, next) => {
|
||||
res.set('Cache-Control', 'no-cache, no-store');
|
||||
next();
|
||||
});
|
||||
|
||||
routes.get('/', (req, res, next) => {
|
||||
logic.getIndex().then((content) => {
|
||||
res.render('index', {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<main class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
{{{content}}}
|
||||
<div class="row">
|
||||
<div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
{{{content}}}
|
||||
|
||||
<div>
|
||||
<a href="/items/" class="btn btn-primary">Go to auction</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/items/" class="btn btn-primary">Browse items for auction</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,51 @@
|
|||
{{#if item}}
|
||||
{{#with item}}
|
||||
<main class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
<div class="alert alert-success" role="alert" id="success" style="display: none;"></div>
|
||||
<div class="alert alert-danger" role="alert" id="error" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
<div class="alert alert-success" role="alert" id="success" style="display: none;"></div>
|
||||
<div class="alert alert-danger" role="alert" id="error" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-2 mb-1">
|
||||
<div class="images">
|
||||
{{#each images}}
|
||||
<div class="image">
|
||||
<a href="https://{{@root.config.imgix}}/{{src}}?w=2048">
|
||||
<img class="crop-wide img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{src}}?w=480&h=640&fit=crop&crop=edges" />
|
||||
<img class="crop-narrow img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{src}}?w=768&h=480&fit=crop&crop=edges" />
|
||||
</a>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-2 mb-1">
|
||||
<div class="images">
|
||||
{{#each images}}
|
||||
<div class="image">
|
||||
<a href="https://{{@root.config.imgix}}/{{src}}?w=2048">
|
||||
<img class="crop-wide img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{src}}?w=480&h=640&fit=crop&crop=edges" />
|
||||
<img class="crop-narrow img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{src}}?w=768&h=480&fit=crop&crop=edges" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-0">
|
||||
<h6 class="text-muted">Description</h6>
|
||||
<p>{{description}}</p>
|
||||
<h6 class="text-muted">{{#if bid.highest}}Highest{{else}}Starting{{/if}} bid</h6>
|
||||
<h1 class="display-4" id="highest">${{#if bid.highest}}{{bid.highest}}{{else}}{{bid.starting}}{{/if}}</h1>
|
||||
<form action="#" method="get">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input class="form-control" type="number" id="amount" min="1" max="10000" placeholder="Amount" value="{{bid.next}}" />
|
||||
<span class="input-group-btn">
|
||||
<input class="btn btn-primary" type="button" value="Place bid" data-toggle="modal" data-target="#bidModal" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-0">
|
||||
<h6 class="text-muted">Description</h6>
|
||||
<p>{{description}}</p>
|
||||
<h6 class="text-muted">{{#if bid.highest}}Highest{{else}}Starting{{/if}} bid</h6>
|
||||
<span class="h1 display-4" id="highest">${{#if bid.highest}}{{bid.highest}}{{else}}{{bid.starting}}{{/if}}</span>
|
||||
<form action="#" method="get">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input class="form-control" type="number" id="amount" min="1" max="10000" placeholder="Amount" value="{{bid.next}}" />
|
||||
<span class="input-group-btn">
|
||||
<input class="btn btn-primary" type="button" value="Place bid" data-toggle="modal" data-target="#bidModal" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{/with}}
|
||||
{{else}}
|
||||
<main class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
|
||||
<div class="alert alert-danger">
|
||||
<strong>Error! </strong>Item not found.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
|
||||
<div class="alert alert-danger">
|
||||
<strong>Error! </strong>Item not found.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
||||
|
|
@ -60,7 +56,7 @@
|
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Place bid</h4>
|
||||
<h6 class="modal-title">Place bid</h6>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
<main class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-12 offset-md-0 col-lg-8 offset-lg-2">
|
||||
<div class="items">
|
||||
{{#each items}}
|
||||
<div class="item">
|
||||
<a href="/items/{{id}}">
|
||||
<img class="crop-wide img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{images.0.src}}?w=480&h=640&fit=crop&crop=edges" />
|
||||
<img class="crop-narrow img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{images.0.src}}?w=768&h=480&fit=crop&crop=edges" />
|
||||
</a>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-12 offset-md-0 col-lg-8 offset-lg-2">
|
||||
<div class="items">
|
||||
{{#each items}}
|
||||
<div class="item">
|
||||
<a href="/items/{{id}}">
|
||||
<img class="crop-wide img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{images.0.src}}?w=480&h=640&fit=crop&crop=edges" />
|
||||
<img class="crop-narrow img-fluid rounded" ix-src="https://{{@root.config.imgix}}/{{images.0.src}}?w=768&h=480&fit=crop&crop=edges" />
|
||||
</a>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,28 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{{#if title}}{{title}}{{else}}{{@root.config.title}}{{/if}}</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700" />
|
||||
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="/assets/main.css" />
|
||||
<link rel="stylesheet" href="/assets/items.css" />
|
||||
<link rel="stylesheet" href="/assets/item.css" />
|
||||
</head>
|
||||
<body>
|
||||
{{{body}}}
|
||||
<main class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 offset-sm-0 col-md-12 offset-md-0 col-lg-8 offset-lg-2">
|
||||
<nav class="navbar navbar-light">
|
||||
<a class="navbar-brand" href="/">{{@root.config.title}}</a>
|
||||
<div class="nav navbar-nav">
|
||||
<a class="nav-item nav-link" href="/">About</a>
|
||||
<a class="nav-item nav-link" href="/items/">Browse</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{{body}}}
|
||||
</main>
|
||||
<script src="/jquery/jquery.min.js"></script>
|
||||
<script src="/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/imgix.js/imgix.min.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue