Skip to content

Commit af087c1

Browse files
line-oline-o
committed
style: improve page layout and smallter tweaks
- footer sticks to the bottom of the window - improve module info display - info icon size and alignment - module info boottom and right margin - module description foont size - improve function info display - remove duplicate function name
1 parent 1d36cb6 commit af087c1

File tree

7 files changed

+143
-139
lines changed

7 files changed

+143
-139
lines changed

‎src/main/frontend/sass/_doc.scss‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ select[name='module'] {
3030
.module .module-head {
3131
background-color: var(--lightgrey);
3232
border-radius: .25rem;
33+
padding-block-end: 1rem;
3334
}
3435

3536
.module .module-head-inner {
@@ -39,17 +40,16 @@ select[name='module'] {
3940

4041
.module-info-icon {
4142
display: block;
42-
text-align: center;
43+
text-align: right;
4344
margin-top: 1em;
4445
}
4546

4647
.module-info-icon .glyphicon-info-sign {
47-
font-size: 3rem;
48+
font-size: 2.5rem;
4849
}
4950

50-
.module-head p {
51-
font-size: 1.33em;
52-
line-height: 1.5em;
51+
.module-description {
52+
margin-inline-end: 1rem;
5353
}
5454

5555
.module-head td {
@@ -62,17 +62,15 @@ select[name='module'] {
6262
}
6363

6464
.module-head h3 {
65-
margin-block-start: 1rem;
65+
margin-block-start: 1.25rem;
6666
}
6767

6868
.module-head h4 {
6969
word-wrap: break-word;
7070
}
7171

72-
.function-head h4 {
73-
font-size: 1.25em;
74-
margin-block-end: .8rem;
75-
margin-inline-start: 1rem;
72+
.function-head {
73+
margin-block-start: 2rem;
7674
}
7775

7876
.module .extended {

‎src/main/frontend/sass/_layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
#main {
1919
margin-block-start: 1.75rem;
20-
min-height: 40vh;
20+
min-height: calc(100vh - 18.5rem);
2121
}
2222

2323
.navbar-dark {

‎src/main/xar-resources/browse.html‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<div data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
3-
<h1>XQuery Function Documentation</h1>
4-
<p>
5-
<a href="index.html">
6-
<i class="glyphicon glyphicon-chevron-left"/> Back to Search Page</a>
7-
</p>
8-
<form class="form-inline">
9-
<div class="row mb-3 col-auto">
10-
<div class="checkbox">
11-
<label>
12-
<input data-template="templates:form-control" type="checkbox" name="w3c" value="true"/> W3C XPath functions
13-
</label>
14-
</div>
15-
<div class="checkbox">
16-
<label>
17-
<input data-template="templates:form-control" type="checkbox" name="extensions" value="true"/> Extension functions
18-
</label>
19-
</div>
20-
<div class="checkbox">
21-
<label>
22-
<input data-template="templates:form-control" type="checkbox" name="appmodules" value="true"/> Application modules
23-
</label>
3+
<article class="col-12-md">
4+
<h1>XQuery Function Documentation</h1>
5+
<p>
6+
<a href="index.html">
7+
<i class="glyphicon glyphicon-chevron-left"/> Back to Search Page</a>
8+
</p>
9+
<form class="form-inline">
10+
<div class="row mb-3 col-auto">
11+
<div class="checkbox">
12+
<label>
13+
<input data-template="templates:form-control" type="checkbox" name="w3c" value="true"/> W3C XPath functions
14+
</label>
15+
</div>
16+
<div class="checkbox">
17+
<label>
18+
<input data-template="templates:form-control" type="checkbox" name="extensions" value="true"/> Extension functions
19+
</label>
20+
</div>
21+
<div class="checkbox">
22+
<label>
23+
<input data-template="templates:form-control" type="checkbox" name="appmodules" value="true"/> Application modules
24+
</label>
25+
</div>
2426
</div>
27+
<button class="btn btn-primary">Filter</button>
28+
</form>
29+
<div id="modules">
30+
<table class="table table-striped table-hover table-condensed">
31+
<thead>
32+
<tr>
33+
<th>Namespace</th>
34+
<th>Location</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<tr data-template="app:showmodules"></tr>
39+
</tbody>
40+
</table>
2541
</div>
26-
<button class="btn btn-primary">Filter</button>
27-
</form>
28-
<div id="modules">
29-
<table class="table table-striped table-hover table-condensed">
30-
<thead>
31-
<tr>
32-
<th>Namespace</th>
33-
<th>Location</th>
34-
</tr>
35-
</thead>
36-
<tbody>
37-
<tr data-template="app:showmodules"></tr>
38-
</tbody>
39-
</table>
40-
</div>
42+
</article>
43+
4144
</div>

‎src/main/xar-resources/error-page.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<div data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
3-
<h1>An error has occurred</h1>
4-
<p>An error has been generated by the application.</p>
5-
<pre class="error" data-template="templates:error-description"></pre>
3+
<article class="col-12-md">
4+
<h1>An error has occurred</h1>
5+
<p>An error has been generated by the application.</p>
6+
<pre class="error" data-template="templates:error-description"></pre>
7+
</article>
68
</div>

‎src/main/xar-resources/index.html‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,58 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<div data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
3-
<h1>XQuery Function Documentation</h1>
4-
<form id="fun-query-form" name="f-query" class="form-horizontal" action="?" method="GET">
5-
<div class="row mb-3">
6-
<label class="col-form-label col-md-2 hidden-xs">Search</label>
7-
<div class="col-md-4 col-xs-12">
8-
<span class="input-group">
9-
<input id="query-field" name="q" type="text" data-template="templates:form-control" class="form-control"/>
10-
<span class="input-group-btn">
11-
<button id="f-btn-search" type="submit" name="action" value="search" class="btn btn-primary">
12-
<span class="glyphicon glyphicon-search"></span> Search
13-
</button>
3+
<article class="col-12-md">
4+
<h1>XQuery Function Documentation</h1>
5+
<form id="fun-query-form" name="f-query" class="form-horizontal" action="?" method="GET">
6+
<div class="row mb-3">
7+
<label class="col-form-label col-md-2 hidden-xs">Search</label>
8+
<div class="col-md-4 col-xs-12">
9+
<span class="input-group">
10+
<input id="query-field" name="q" type="text" data-template="templates:form-control" class="form-control"/>
11+
<span class="input-group-btn">
12+
<button id="f-btn-search" type="submit" name="action" value="search" class="btn btn-primary">
13+
<span class="glyphicon glyphicon-search"></span> Search
14+
</button>
15+
</span>
1416
</span>
15-
</span>
17+
</div>
1618
</div>
17-
</div>
18-
<div class="row mb-3">
19-
<label class="col-form-label col-md-2 hidden-xs">Search in</label>
20-
<div class="col-md-4 col-xs-12">
21-
<select name="type" data-template="templates:form-control" class="form-select">
22-
<option value="name">Name</option>
23-
<option value="signature">Signature</option>
24-
<option value="desc">Description</option>
25-
</select>
26-
</div>
27-
</div>
28-
<div class="btn-toolbar">
29-
<div class="btn-group me-2" role="group" aria-label="browse action">
30-
<a id="browse" class="btn btn-primary" href="browse.html?extensions=true">
31-
<span class="glyphicon glyphicon-globe"></span> Browse</a>
19+
<div class="row mb-3">
20+
<label class="col-form-label col-md-2 hidden-xs">Search in</label>
21+
<div class="col-md-4 col-xs-12">
22+
<select name="type" data-template="templates:form-control" class="form-select">
23+
<option value="name">Name</option>
24+
<option value="signature">Signature</option>
25+
<option value="desc">Description</option>
26+
</select>
27+
</div>
3228
</div>
33-
<div class="btn-group me-2" role="group" aria-label="generate action">
34-
<button id="f-btn-reindex-regen" class="btn btn-warning" data-template="app:check-dba-user-and-data" data-toggle="tooltip" data-placement="top" title="Regenerate XQuery Function Documentation after modification or addition of functions">
35-
<span class="glyphicon glyphicon-refresh"></span> Regenerate</button>
36-
<button id="f-btn-reindex" class="btn btn-warning" data-template="app:check-not-data" data-toggle="tooltip" data-placement="top" title="Generate XQuery Function Documentation after installation">
37-
<span class="glyphicon glyphicon-import"></span> Generate</button>
38-
<img id="f-load-indicator" src="resources/images/ajax-loader.gif"/>
29+
<div class="btn-toolbar">
30+
<div class="btn-group me-2" role="group" aria-label="browse action">
31+
<a id="browse" class="btn btn-primary" href="browse.html?extensions=true">
32+
<span class="glyphicon glyphicon-globe"></span> Browse</a>
33+
</div>
34+
<div class="btn-group me-2" role="group" aria-label="generate action">
35+
<button id="f-btn-reindex-regen" class="btn btn-warning" data-template="app:check-dba-user-and-data" data-toggle="tooltip" data-placement="top" title="Regenerate XQuery Function Documentation after modification or addition of functions">
36+
<span class="glyphicon glyphicon-refresh"></span> Regenerate</button>
37+
<button id="f-btn-reindex" class="btn btn-warning" data-template="app:check-not-data" data-toggle="tooltip" data-placement="top" title="Generate XQuery Function Documentation after installation">
38+
<span class="glyphicon glyphicon-import"></span> Generate</button>
39+
<img id="f-load-indicator" src="resources/images/ajax-loader.gif"/>
40+
</div>
3941
</div>
42+
</form>
43+
<div class="alert alert-warning" data-template="app:check-dba-user-and-not-data">
44+
The function documentation has not been generated yet. Click on the <code>Generate</code> button
45+
above to index all XQuery modules. This should take less than a minute.
4046
</div>
41-
</form>
42-
<div class="alert alert-warning" data-template="app:check-dba-user-and-not-data">
43-
The function documentation has not been generated yet. Click on the <code>Generate</code> button
44-
above to index all XQuery modules. This should take less than a minute.
45-
</div>
46-
<div class="alert alert-warning" data-template="app:check-not-dba-user-and-not-data">
47-
The function documentation has not been generated yet. Please contact the database administrator in order to have the function documentation generated.
48-
49-
</div>
50-
<div id="messages"></div>
51-
<div id="results">
52-
<div data-template="app:action">
53-
<div data-template="app:module"></div>
47+
<div class="alert alert-warning" data-template="app:check-not-dba-user-and-not-data">
48+
The function documentation has not been generated yet. Please contact the database administrator in order to have the function documentation generated.
49+
50+
</div>
51+
<div id="messages"></div>
52+
<div id="results">
53+
<div data-template="app:action">
54+
<div data-template="app:module"></div>
55+
</div>
5456
</div>
55-
</div>
57+
</article>
5658
</div>

‎src/main/xar-resources/modules/app.xql‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -115,41 +115,39 @@ function app:print-module(
115115
return
116116
<div class="module" data-xqdoc="{document-uri(root($module))}">
117117
<div class="module-head">
118-
<div class="module-head-inner">
119-
<div class="row">
120-
<div class="col-md-1 hidden-xs">
121-
<a href="view.html?uri={$uri}&amp;location={$location}&amp;details=true"
122-
class="module-info-icon"><span class="glyphicon glyphicon-info-sign"/></a>
123-
</div>
124-
<div class="col-md-11 col-xs-12">
125-
<h3><a href="view.html?uri={$uri}&amp;location={$location}&amp;details=true">{ $uri }</a></h3>
126-
{
127-
if (empty($location)) then (
128-
) else if (starts-with($location, '/db')) then (
129-
<h4><a href="../eXide/index.html?open={$location}">{$location}</a></h4>
118+
<div class="module-head-inner row">
119+
<div class="col-md-1 hidden-xs">
120+
<a href="view.html?uri={$uri}&amp;location={$location}&amp;details=true"
121+
class="module-info-icon"><span class="glyphicon glyphicon-info-sign"/></a>
122+
</div>
123+
<div class="col-md-11 col-xs-12">
124+
<h3><a href="view.html?uri={$uri}&amp;location={$location}&amp;details=true">{ $uri }</a></h3>
125+
{
126+
if (empty($location)) then (
127+
) else if (starts-with($location, '/db')) then (
128+
<h4><a href="../eXide/index.html?open={$location}">{$location}</a></h4>
129+
) else (
130+
<h4>{$location}</h4>
131+
)
132+
}
133+
<p class="module-description">{ $parsed }</p>
134+
{
135+
let $metadata := $module/xqdoc:module/xqdoc:comment/(xqdoc:author|xqdoc:version|xqdoc:since)
136+
return
137+
if (empty($metadata)) then (
130138
) else (
131-
<h4>{$location}</h4>
139+
<table>
140+
{
141+
for $meta in $metadata
142+
return
143+
<tr>
144+
<td>{local-name($meta)}</td>
145+
<td>{$meta/string()}</td>
146+
</tr>
147+
}
148+
</table>
132149
)
133-
}
134-
<p class="module-description">{ $parsed }</p>
135-
{
136-
let $metadata := $module/xqdoc:module/xqdoc:comment/(xqdoc:author|xqdoc:version|xqdoc:since)
137-
return
138-
if (empty($metadata)) then (
139-
) else (
140-
<table>
141-
{
142-
for $meta in $metadata
143-
return
144-
<tr>
145-
<td>{local-name($meta)}</td>
146-
<td>{$meta/string()}</td>
147-
</tr>
148-
}
149-
</table>
150-
)
151-
}
152-
</div>
150+
}
153151
</div>
154152
</div>
155153
</div>
@@ -209,10 +207,9 @@ function app:print-function(
209207
let $extDocs := app:get-extended-doc($function)[1]
210208
return
211209
<div class="function" id="{$function-identifier}">
212-
<div class="function-head">
213-
<h4>{$function-name/node()}</h4>
210+
<header class="function-head">
214211
<pre class="signature"><code class="language-xquery">{ $function/xqdoc:signature/node() }</code></pre>
215-
</div>
212+
</header>
216213
<div class="function-detail">
217214
<p class="description">{ $parsed }</p>
218215
{

‎src/main/xar-resources/view.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<div data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
3-
<h1>XQuery Function Documentation</h1>
4-
<p>
5-
<a href="index.html">
6-
<i class="glyphicon glyphicon-chevron-left"/> Search and Browse</a>
7-
</p>
8-
<div data-template="app:view" data-template-details="true"></div>
3+
<article class="col-12-md">
4+
<h1>XQuery Function Documentation</h1>
5+
<p>
6+
<a href="index.html">
7+
<i class="glyphicon glyphicon-chevron-left"/> Search and Browse</a>
8+
</p>
9+
<div data-template="app:view" data-template-details="true"></div>
10+
</article>
911
</div>

0 commit comments

Comments
 (0)