Fossil SCM
|
1
|
<!DOCTYPE html> |
|
2
|
<head><!-- |
|
3
|
This file is intended to be loaded from a fossil |
|
4
|
repository, either using: |
|
5
|
|
|
6
|
fossil ui --extpage test/link-tester.html |
|
7
|
|
|
8
|
or by adding test/link-tester.* to uv and then: |
|
9
|
|
|
10
|
fossil ui -page uv/link-tester.html |
|
11
|
--></head> |
|
12
|
<style> |
|
13
|
body { |
|
14
|
width: 100%; |
|
15
|
height: 100%; |
|
16
|
margin: 0; |
|
17
|
padding: 0; |
|
18
|
display: flex; |
|
19
|
flex-direction: column; |
|
20
|
} |
|
21
|
header { |
|
22
|
margin: 0.5em 0 0 0; |
|
23
|
padding: 0 1em 0 1em; |
|
24
|
z-index: 1; |
|
25
|
} |
|
26
|
#controlWrapper { |
|
27
|
display: flex; |
|
28
|
flex-direction: row; |
|
29
|
border-bottom: 2px dotted; |
|
30
|
padding-bottom: 0.5em; |
|
31
|
} |
|
32
|
#controlWrapper > button { |
|
33
|
flex-grow: 1; |
|
34
|
margin: 0.5em; |
|
35
|
} |
|
36
|
#selectWrapper { |
|
37
|
display: flex; |
|
38
|
flex-direction: column; |
|
39
|
flex-grow: 8; |
|
40
|
} |
|
41
|
#selectPage { |
|
42
|
flex-grow: 1; |
|
43
|
margin: 1em; |
|
44
|
padding: 1em; |
|
45
|
} |
|
46
|
#currentUrl { |
|
47
|
font-family: monospace; |
|
48
|
text-align: center; |
|
49
|
} |
|
50
|
#iframe { |
|
51
|
flex-grow: 1; border: none; margin: 0; padding: 0; |
|
52
|
display: block; |
|
53
|
/* Absolute positioning is apparently the only way to get |
|
54
|
the iframe to stretch to fill the page, but we have to |
|
55
|
set its Y coordinate to something a bit below #controls. */ |
|
56
|
width: 100%; |
|
57
|
height: calc(100% - 5em); |
|
58
|
position: absolute; |
|
59
|
top: 4em; |
|
60
|
} |
|
61
|
</style> |
|
62
|
<body> |
|
63
|
<header> |
|
64
|
Fossil link test app. Select links from the list below to load |
|
65
|
them. Use the arrow keys to cycle through the list. The links are |
|
66
|
loaded within an iframe, so navigation within it will stay within |
|
67
|
that frame. |
|
68
|
</header> |
|
69
|
<header id='controlWrapper'> |
|
70
|
<button id='btn-prev'>←</button> |
|
71
|
<div id='selectWrapper'> |
|
72
|
<select id='selectPage'> |
|
73
|
<option>/timeline</option> |
|
74
|
<option>/dir</option> |
|
75
|
</select> |
|
76
|
<a target='_blank' id='currentUrl'></a> |
|
77
|
</div> |
|
78
|
<button id='btn-next'>→</button> |
|
79
|
</header> |
|
80
|
<iframe id='iframe'><!--populated via the UI--></iframe> |
|
81
|
<script src='link-tester.js'></script> |
|
82
|
<body> |
|
83
|
|