Port the web to bootstrap5
So it is responsive in phones.
This commit is contained in:
parent
8af2ad3758
commit
6a3da59c75
40 changed files with 1131 additions and 849 deletions
|
@ -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}}
|
||||
|
||||
|
|
Reference in a new issue