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,25 +1,39 @@
{{range .}}
<div class="row">
<div class="span1">
<p class="pull-right"><a href="/book/{{.ID}}" title="{{.Description}}">{{if .Cover}}<img class="img-rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" />{{end}}</a></p>
</div>
<div class="span10 well">
<div class="row">
<div class="span7">
<p>
<span class="muted">[{{if .Lang}}{{.Lang}}{{end}}]</span>
<a href="/book/{{.ID}}" title="{{.Description}}"><strong>{{.Title}}</strong></a>
<span class="muted">{{if .Publisher}}{{.Publisher}}{{end}}</span><br />
{{range .Authors}}{{.}}, {{end}}
</p>
</div>
<div class="span3">
<div class="btn-group pull-right">
<a href="{{download_url .}}" class="btn btn-inverse"><i class="icon-download-alt icon-white"></i> download</a>
<a href="/read/{{.ID}}" class="btn btn-warning"><i class="icon-eye-open icon-white"></i> read it!</a>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-1 d-flex align-items-center justify-content-center">
<a href="/book/{{.ID}}" title="{{.Description}}">
{{if .Cover}}<img class="rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" />{{end}}
</a>
</div>
<div class="col-md-11">
<div class="card-body">
<p class="card-title">
<span class="text-muted">[{{if .Lang}}{{.Lang}}{{end}}]</span>
<a href="/book/{{.ID}}" title="{{.Description}}"><strong>{{.Title}}</strong></a>
<span class="text-muted">{{if .Publisher}}{{.Publisher}}{{end}}</span>
</p>
<div class="card-text row">
<p class="col-9">{{range .Authors}}{{.}}, {{end}}</p>
<div class="col-3">
<div class="btn-group d-flex justify-content-end">
<a href="{{download_url .}}" class="btn btn-dark btn-sm">
<svg class="bi" width="1em" height="1em" fill="currentColor">
<use xlink:href="/img/bootstrap-icons.svg#file-earmark-arrow-down"/>
</svg>
download
</a>
<a href="/read/{{.ID}}" class="btn btn-warning btn-sm">
<svg class="bi" width="1em" height="1em" fill="currentColor">
<use xlink:href="/img/bootstrap-icons.svg#eyeglasses"/>
</svg>
read it!
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}