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,54 +1,56 @@
{{template "header.html" .S}}
{{with .List}}
<form class="form-horizontal" method="POST" action="/list/{{.ListID}}">
<fieldset>
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input class="input-xlarge" type="text" id="title" value="{{.Title}}" name="title">
</div>
<form method="POST" action="/list/{{.ListID}}">
<div class="mb-3">
<label class="form-label" for="title">Title</label>
<input class="form-control" type="text" id="title" value="{{.Title}}" name="title">
</div>
</fieldset>
<fieldset>
<div class="control-group">
<label class="control-label" for="description">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="description" rows="5" name="description">{{range .Description}}{{.}}
{{end}}</textarea>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" id="description" rows="5" name="description">{{range .Description}}{{.}}{{end}}</textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<a href="/list/{{.ListID}}" class="btn">Cancel</a>
<div class="text-end">
<button type="submit" class="btn btn-primary">Save</button>
<a href="/list/{{.ListID}}" class="btn btn-secondary">Cancel</a>
</div>
</fieldset>
</form>
{{end}}
<br />
{{$listID := .List.ListID}}
{{range .List.Books}}
<div class="row">
<div class="span1">
<p class="pull-right"><a href="/book/{{.ID}}">{{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}}"><strong>{{.Title}}</strong></a>
<span class="muted">{{if .Publisher}}{{.Publisher}}{{end}}</span><br />
{{range .Authors}}{{.}}, {{end}}
</p>
</div>
<div class="span3">
<div class="pull-right">
<a href="/list/{{$listID}}/remove/{{.ID}}" class="btn btn-danger"><i class="icon-remove"></i> remove</a>
</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="/list/{{$listID}}/remove/{{.ID}}" class="btn btn-danger">
<svg class="bi" width="1em" height="1em" fill="currentColor">
<use xlink:href="/img/bootstrap-icons.svg#trash"/>
</svg>
remove
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}