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,80 +1,43 @@
{{template "header.html" .S}}
{{range .News}}
<div class="row">
<div class="offset2 span8 alert alert-info">
<div class="row justify-content-center">
<div class="col-sm-10 alert alert-info">
<a href="/news/"><strong>News!</strong></a> {{.Text}}
</div>
</div>
</div>
{{end}}
<div class="row">
<p class="centered">There are {{.Count}} books on the library.</p>
<p class="text-center">There are {{.Count}} books on the library.</p>
</div>
<div class="row">
<h4>Last books added:
<span class="pull-right">
<small>(<a href="/search/?q=">more</a>)</small>
<a href="/search/?fmt=rss&q="><img src="/img/feed.png"/></a>
</span>
</h4>
<div class="col">
<h4>Last books added:</h4>
</div>
<div class="col text-end title">
<small>(<a href="/search/?q=">more</a>)</small>
<a href="/search/?fmt=rss&q="><img src="/img/feed.png"/></a>
</div>
</div>
<ul class="row thumbnails">
<div class="row">
{{with .Books}}
{{range .}}
<li class="span2">
<div class="thumbnail centered" style="border:none;">
<div class="col-sm-2">
<div class="thumbnail text-center" style="border:none;">
<a href="/book/{{.ID}}" title="{{.Description}}">
{{if .Cover}}<div class="down"><img class="img-rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" /></div>{{end}}
{{if .Cover}}<div class="down"><img class="rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" /></div>{{end}}
<p><strong>{{.Title}}</strong></p>
</a>
</div>
</li>
</div>
{{end}}
{{end}}
</ul>
<!--
<div class="row">
<h4>Most visited books:</h4>
</div>
<ul class="row thumbnails">
{{with .VisitedBooks}}
{{range .}}
<li class="span2">
<div class="thumbnail centered" style="border:none;">
<a href="/book/{{.ID}}" title="{{.Description}}">
{{if .Cover}}<div class="down"><img class="img-rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" /></div>{{end}}
<p><strong>{{.Title}}</strong></p>
</a>
</div>
</li>
{{end}}
{{end}}
</ul>
<div class="row">
<h4>Most downloaded books:</h4>
</div>
<ul class="row thumbnails">
{{with .DownloadedBooks}}
{{range .}}
<li class="span2">
<div class="thumbnail centered" style="border:none;">
<a href="/book/{{.ID}}" title="{{.Description}}">
{{if .Cover}}<div class="down"><img class="img-rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" /></div>{{end}}
<p><strong>{{.Title}}</strong></p>
</a>
</div>
</li>
{{end}}
{{end}}
</ul>
-->
<div class="row">
<p class="centered">{{range .Tags}}<a class="label" href="/search/?q=tag:{{.}}">{{.}}</a> {{end}}</p>
<p class="text-center">{{range .Tags}}<a class="badge bg-secondary" href="/search/?q=tag:{{.}}">{{.}}</a> {{end}}</p>
</div>
{{template "footer.html" .S}}