archives/trantor
Archived
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Port the web to bootstrap5

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

132
templates/read.html
View file

@ -3,68 +3,80 @@
<div class="row">
<div class="span4">
{{range .Chapters}}
{{range .In}}
<ul id="bookMenu" class="nav nav-list hidden-phone">
{{end}}
<li {{if .Active}}class="active"{{end}}><a href="{{.Link}}">{{.Label}}</a></li>
{{range .Out}}
</ul>
{{end}}
{{end}}
{{if .Chapters}}
</ul>
{{end}}
</div>
<div class="span8">
<script type="text/javascript">
function resizeIframe() {
var contentHeight = $("#bookContent").contents().find("html").height();
$("#bookContent").height(ContentHeight);
}
</script>
{{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}}
<ul class="pager">
{{if .Prev}}
<li class="previous">
<a href="{{.Prev}}">&larr; Prev</a>
</li>
{{end}}
{{if .Book.Active}}
<li class="">
<a href="{{.Back}}">Back</a>
</li>
{{else}}
<span class="label label-warning">waiting for moderation</span>
{{end}}
{{if .Next}}
<li class="next">
<a href="{{.Next}}">Next &rarr;</a>
</li>
{{end}}
</ul>
<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>
<ul class="pager">
{{if .Prev}}
<li class="previous">
<a href="{{.Prev}}">&larr; Prev</a>
</li>
{{end}}
<li class="">
<a href="{{.Back}}">Back</a>
</li>
{{if .Next}}
<li class="next">
<a href="{{.Next}}">Next &rarr;</a>
</li>
{{end}}
</ul>
</div>
<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>