This repository has been archived on 2025-03-01. You can view files and clone it, but cannot push or open issues or pull requests.
trantor/templates/read.html
Las Zenow 6a3da59c75 Port the web to bootstrap5
So it is responsive in phones.
2021-05-01 11:08:35 +00:00

84 lines
2.7 KiB
HTML

{{template "header.html" .S}}
<div class="row">
{{if .Chapters}}
<div class="col-md-4">
<nav id="index" class="navbar navbar-expand-md navbar-light bg-light flex-column">
<div class="row">
<div class="col d-flex justify-content-start">
<a class="navbar-brand" href="#">Index</a>
</div>
<div class="d-block d-md-none col d-flex justify-content-end">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#indexContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse" id="indexContent">
{{range .Chapters}}
{{range .In}}
<nav class="nav nav-pills flex-column">
{{end}}
<a class="nav-link ms-{{mul 2 .Depth}}{{if .Active}} active{{end}}" href="{{.Link}}">{{.Label}}</a>
{{range .Out}}
</nav>
{{end}}
{{end}}
</div>
</nav>
</div>
{{end}}
<div class="col">
<script type="text/javascript">
function resizeIframe() {
var contentHeight = $("#bookContent").contents().find("html").height();
$("#bookContent").height(ContentHeight);
}
</script>
{{if not .Book.Active}}
<div class="text-center">
<p class="badge bg-warning">waiting for moderation</p>
</div>
{{end}}
<nav class="d-flex justify-content-center" arial-label="Book navigation">
<ul class="pagination">
<li class="page-item {{if not .Prev}}disabled{{end}}">
<a class="page-link" href="{{.Prev}}">&larr; Prev</a>
</li>
<li class="page-item">
<a class="page-link" href="{{.Back}}">Back</a>
</li>
<li class="page-item {{if not .Next}}disabled{{end}}">
<a class="page-link" href="{{.Next}}">Next &rarr;</a>
</li>
</ul>
</nav>
<iframe id="bookContent" onload="resizeIframe();" style="width: 100%; height: 1080px; border: 0;" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
<nav class="d-flex justify-content-center" arial-label="Book navigation">
<ul class="pagination">
<li class="page-item {{if not .Prev}}disabled{{end}}">
<a class="page-link" href="{{.Prev}}">&larr; Prev</a>
</li>
<li class="page-item">
<a class="page-link" href="{{.Back}}">Back</a>
</li>
<li class="page-item {{if not .Next}}disabled{{end}}">
<a class="page-link" href="{{.Next}}">Next &rarr;</a>
</li>
</ul>
</nav>
</div>
</div>
{{template "footer.html" .S}}