Port the web to bootstrap5
So it is responsive in phones.
This commit is contained in:
Las Zenow
parent
8af2ad3758
commit
6a3da59c75
40 changed files with 1131 additions and 849 deletions
|
|
@ -5,111 +5,165 @@
|
|||
{{with .Book}}
|
||||
<script>
|
||||
function delBook(){
|
||||
var div = document.getElementById('delete');
|
||||
div.innerHTML =
|
||||
'<div class="alert alert-error fade in"> \
|
||||
<a class="close" data-dismiss="alert">×</a> \
|
||||
<h4 class="alert-heading">Do you really want to delete it?</h4> \
|
||||
<p>Remove a book is permanent, you won\'t be able to get it back</p> \
|
||||
<a class="btn btn-danger" href="/delete/{{.ID}}/">Remove it</a> \
|
||||
<a class="btn" href="#" data-dismiss="alert">Cancel</a> \
|
||||
</div>';
|
||||
const div = document.getElementById('delete');
|
||||
div.classList.remove("visually-hidden");
|
||||
}
|
||||
function closeAlert() {
|
||||
const div = document.getElementById('delete');
|
||||
div.classList.add("visually-hidden");
|
||||
}
|
||||
</script>
|
||||
<div id="delete"></div>
|
||||
<div id="delete" class="alert alert-danger fade visually-hidden show" role="alert">
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
<h4 class="alert-heading">Do you really want to delete it?</h4>
|
||||
<p>Remove a book is permanent, you won't be able to get it back</p>
|
||||
<a class="btn btn-danger" href="/delete/{{.ID}}/">Remove it</a>
|
||||
<a class="btn" href="#" onClick="closeAlert();">Cancel</a>
|
||||
</div>
|
||||
<div class="col-1 justify-content-end">
|
||||
<button type="button" class="btn-close" onClick="closeAlert();"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="row">
|
||||
<div class="span8 offset4">
|
||||
<header class="row justify-content-end">
|
||||
<h1>{{.Title}}
|
||||
{{if not .Active}}
|
||||
<span class="label label-warning">waiting for moderation</span>
|
||||
<span class="badge label-warning text-dark">waiting for moderation</span>
|
||||
{{end}}
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div class="row">
|
||||
{{if .Cover}}
|
||||
<div class="span4">
|
||||
<img src="/cover/{{.ID}}/big/{{.Title}}.jpg" alt="{{.Title}}" class="pull-right" />
|
||||
{{if .Cover}}
|
||||
<div class="col-sm-4 text-center">
|
||||
<img src="/cover/{{.ID}}/big/{{.Title}}.jpg" alt="{{.Title}}" class="float-sm-end img-fluid" />
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
<div class="span8">
|
||||
<div class="row"><p></p></div>
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<dl class="dl-horizontal">
|
||||
{{if .Authors}}<dt>Authors</dt> <dd>{{range .Authors}}<a href="/search/?q=author:{{.}}">{{.}}</a>, {{end}}</dd>{{end}}
|
||||
{{if .Publisher}}<dt>Publisher</dt> <dd><a href="/search/?q=publisher:{{.Publisher}}">{{.Publisher}}</a></dd>{{end}}
|
||||
{{if .Tags}}<dt>Tags</dt> <dd>{{range .Tags}}<a href="/search/?q=tag:{{.}}">{{.}}</a>, {{end}}</dd>{{end}}
|
||||
{{if .Isbn}}<dt>ISBN</dt> <dd>{{.Isbn}}</dd>{{end}}
|
||||
{{if .Date}}<dt>Date</dt> <dd>{{.Date}}</dd>{{end}}
|
||||
{{if .FileSize}}<dt>Size</dt> <dd>{{printf "%.2f" (size2mb .FileSize)}} MB</dd>{{end}}
|
||||
{{if .Lang}}<dt>Lang</dt> <dd><a href="/search/?q=lang:{{.Lang}}">{{.Lang}}</a> </dd>{{end}}
|
||||
</dl>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="row">
|
||||
<div class="btn-group pull-right">
|
||||
<a href="{{download_url .}}" class="btn btn-large btn-inverse"><i class="icon-download-alt icon-white"></i> download</a>
|
||||
<a href="/read/{{.ID}}" class="btn btn-large btn-warning"><i class="icon-eye-open icon-white"></i> read it!</a>
|
||||
<div class="col-sm-8">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<dl class="row">
|
||||
{{if .Authors}}
|
||||
<dt class="col-sm-3 text-sm-end">Authors</dt>
|
||||
<dd class="col-sm-9 text-start">{{range .Authors}}<a href="/search/?q=author:{{.}}">{{.}}</a>, {{end}}</dd>
|
||||
{{end}}
|
||||
{{if .Publisher}}
|
||||
<dt class="col-sm-3 text-sm-end">Publisher</dt>
|
||||
<dd class="col-sm-9 text-start"><a href="/search/?q=publisher:{{.Publisher}}">{{.Publisher}}</a></dd>
|
||||
{{end}}
|
||||
{{if .Tags}}
|
||||
<dt class="col-sm-3 text-sm-end">Tags</dt>
|
||||
<dd class="col-sm-9 text-start">{{range .Tags}}<a href="/search/?q=tag:{{.}}">{{.}}</a>, {{end}}</dd>
|
||||
{{end}}
|
||||
{{if .Isbn}}
|
||||
<dt class="col-sm-3 text-sm-end">ISBN</dt>
|
||||
<dd class="col-sm-9 text-start">{{.Isbn}}</dd>
|
||||
{{end}}
|
||||
{{if .Date}}
|
||||
<dt class="col-sm-3 text-sm-end">Date</dt>
|
||||
<dd class="col-sm-9 text-start">{{.Date}}</dd>
|
||||
{{end}}
|
||||
{{if .FileSize}}
|
||||
<dt class="col-sm-3 text-sm-end">Size</dt>
|
||||
<dd class="col-sm-9 text-start">{{printf "%.2f" (size2mb .FileSize)}} MB</dd>
|
||||
{{end}}
|
||||
{{if .Lang}}
|
||||
<dt class="col-sm-3 text-sm-end">Lang</dt>
|
||||
<dd class="col-sm-9 text-start"><a href="/search/?q=lang:{{.Lang}}">{{.Lang}}</a> </dd>
|
||||
{{end}}
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<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 class="pull-right">
|
||||
<small>Downloaded: {{$downloadCounter}} times</small>
|
||||
</div>
|
||||
</div>
|
||||
{{if eq $role "admin" "moderator"}}
|
||||
<div class="row"><p></p></div>
|
||||
<div class="row">
|
||||
<div class="btn-group pull-right">
|
||||
<a href="/edit/{{.ID}}" class="btn btn-primary"><i class="icon-pencil"></i> Edit</a>
|
||||
<a href="#" onClick="delBook();" class="btn btn-danger"><i class="icon-trash"></i> Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small>Downloaded: {{$downloadCounter}} times</small>
|
||||
</div>
|
||||
{{if eq $role "admin" "moderator"}}
|
||||
<div class="row"><p></p></div>
|
||||
<div class="btn-group d-flex justify-content-end">
|
||||
<a href="/edit/{{.ID}}" class="btn btn-primary btn-sm">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor">
|
||||
<use xlink:href="/img/bootstrap-icons.svg#pencil"/>
|
||||
</svg>
|
||||
edit
|
||||
</a>
|
||||
<a href="#" onClick="delBook();" class="btn btn-danger btn-sm">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor">
|
||||
<use xlink:href="/img/bootstrap-icons.svg#trash"/>
|
||||
</svg>
|
||||
delete
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
{{range .Description}}
|
||||
<p>{{.}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .Lists}}
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="span10 offset1">
|
||||
<h4>Book in lists:</h4>
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
{{range .Lists}}
|
||||
<li><a href="/list/{{.ListID}}">{{.Title}} ({{len .Books}})
|
||||
<span class="pull-right">By {{.User.Username}}</span></a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<h4>Book in lists:</h4>
|
||||
<ul class="nav flex-column">
|
||||
{{range .Lists}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/list/{{.ListID}}">
|
||||
<div class="row">
|
||||
<div class="col">{{.Title}} ({{len .Books}})</div>
|
||||
<div class="col text-end">By {{.User.Username}}</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<br />
|
||||
{{end}}
|
||||
|
||||
<br />
|
||||
{{if .S.User}}
|
||||
<div class="row">
|
||||
<h5 class="offset1 span2">Add book to a list:</h5>
|
||||
<form class="form-inline" method="POST" action="/list/">
|
||||
<form method="POST" action="/list/">
|
||||
<div class="row g-3 align-items-start">
|
||||
<h6 class="col-sm-2 text-sm-end col-form-label">Add book to a list:</h6>
|
||||
<input type="hidden" id="book_id" name="book_id" value="{{.Book.ID}}">
|
||||
<div class="input-append">
|
||||
<input type="text" data-provide="typeahead" data-source='["{{strings_join .UserLists}}"]' data-items="4" id="list" name="list" autocomplete="off">
|
||||
<button type="submit" class="btn btn-primary">Add</button>
|
||||
<div class="col-sm-5">
|
||||
<div class="input-group">
|
||||
<input class="form-control" list="bookListOptions" id="list" name="list" placeholder="Write a name of a list to create or add">
|
||||
<datalist id="bookListOptions">
|
||||
{{range .UserLists}}
|
||||
<option value="{{.}}">
|
||||
{{end}}
|
||||
</datalist>
|
||||
<button type="submit" class="btn btn-primary">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{end}}
|
||||
|
||||
{{template "footer.html" .S}}
|
||||
|
|
|
|||
Reference in a new issue