<!DOCTYPE html>
<head><!--
This file is intended to be loaded from a fossil
repository, either using:
fossil ui --extpage test/link-tester.html
or by adding test/link-tester.* to uv and then:
fossil ui -page uv/link-tester.html
--></head>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
margin: 0.5em 0 0 0;
padding: 0 1em 0 1em;
z-index: 1;
}
#controlWrapper {
display: flex;
flex-direction: row;
border-bottom: 2px dotted;
padding-bottom: 0.5em;
}
#controlWrapper > button {
flex-grow: 1;
margin: 0.5em;
}
#selectWrapper {
display: flex;
flex-direction: column;
flex-grow: 8;
}
#selectPage {
flex-grow: 1;
margin: 1em;
padding: 1em;
}
#currentUrl {
font-family: monospace;
text-align: center;
}
#iframe {
flex-grow: 1; border: none; margin: 0; padding: 0;
display: block;
/* Absolute positioning is apparently the only way to get
the iframe to stretch to fill the page, but we have to
set its Y coordinate to something a bit below #controls. */
width: 100%;
height: calc(100% - 5em);
position: absolute;
top: 4em;
}
</style>
<body>
<header>
Fossil link test app. Select links from the list below to load
them. Use the arrow keys to cycle through the list. The links are
loaded within an iframe, so navigation within it will stay within
that frame.
</header>
<header id='controlWrapper'>
<button id='btn-prev'>←</button>
<div id='selectWrapper'>
<select id='selectPage'>
<option>/timeline</option>
<option>/dir</option>
</select>
<a target='_blank' id='currentUrl'></a>
</div>
<button id='btn-next'>→</button>
</header>
<iframe id='iframe'><!--populated via the UI--></iframe>
<script src='link-tester.js'></script>
<body>