Port the web to bootstrap5

So it is responsive in phones.
This commit is contained in:
Las Zenow 2017-06-08 00:44:35 +00:00
parent 8af2ad3758
commit 6a3da59c75
40 changed files with 1131 additions and 849 deletions

View file

@ -1,45 +1,50 @@
{{template "header.html" .S}}
<ul class="pager">
{{if .Prev}}
<li class="previous">
<a href="{{.Prev}}">&larr; Prev</a>
</li>
{{else}}
<div class="span1"></div>
{{end}}
<p class="centered span9">Found {{.Found}} books. Page {{.Page}} <a href="{{.S.FullURL}}&fmt=rss"><img src="/img/feed.png"/></a> <br />
{{if .Next}}
<li class="next">
<a href="{{.Next}}">Next &rarr;</a>
</li>
{{end}}
</ul>
<p class="text-center">Found {{.Found}} books <a href="{{.S.FullURL}}&fmt=rss"><img src="/img/feed.png"/></a> <br />
<nav class="d-flex justify-content-center" arial-label="Book search page navigation">
<ul class="pagination">
<li class="page-item {{if not .Prev}}disabled{{end}}">
<a class="page-link" href="{{.Prev}}">&larr; Prev</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Page {{.Page}}</a>
</li>
<li class="page-item {{if not .Next}}disabled{{end}}">
<a class="page-link" href="{{.Next}}">Next &rarr;</a>
</li>
</ul>
</nav>
{{template "book_list.html" .Books}}
<ul class="pager">
{{if .Prev}}
<li class="previous">
<a href="{{.Prev}}">&larr; Prev</a>
</li>
{{else}}
<div class="span1"></div>
{{end}}
<form class="form-inline span9 centered">
<label>Books per page: </label>
<div class="input-append" action="/search/">
<input class="span1" name="num" type="text" value="{{.ItemsPage}}" />
<button type="submit" class="btn">Ok</button>
</div>
<input class="hidden span1" name="q" type="text" value="{{.S.Search}}" />
<nav class="d-flex justify-content-center" arial-label="Book search page navigation">
<ul class="pagination">
<li class="page-item {{if not .Prev}}disabled{{end}}">
<a class="page-link" href="{{.Prev}}">&larr; Prev</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Page {{.Page}}</a>
</li>
<li class="page-item {{if not .Next}}disabled{{end}}">
<a class="page-link" href="{{.Next}}">Next &rarr;</a>
</li>
</ul>
</nav>
<form class="d-flex justify-content-center" action="/search/">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputNum" class="col-form-label">Books per page: </label>
</div>
<div class="col-auto">
<input name="num" size="3" type="text" value="{{.ItemsPage}}" id="inputNum" class="form-control" />
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Ok</button>
</div>
</div>
<input name="q" type="hidden" value="{{.S.Search}}" />
</form>
{{if .Next}}
<li class="next">
<a href="{{.Next}}">Next &rarr;</a>
</li>
{{end}}
</ul>
{{template "footer.html" .S}}