Skip to content

Commit d418f0f

Browse files
MarkRobboMarkRobbo
committed
Add responsive table wrappers to workflow pages
1 parent acd063d commit d418f0f

File tree

2 files changed

+108
-100
lines changed

2 files changed

+108
-100
lines changed

‎src/main/resources/templates/workflow.html

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -191,87 +191,93 @@ <h2>Inputs</h2>
191191
<p>There are no inputs in this workflow</p>
192192
</div>
193193
<div th:unless="${workflow.inputs.isEmpty()}">
194-
<table class="table table-striped table-hover">
195-
<thead>
196-
<th>ID</th>
197-
<th>Type</th>
198-
<th>Label</th>
199-
<th>Doc</th>
200-
</thead>
201-
<tbody>
202-
<tr th:each="input : ${workflow.inputs}">
203-
<td th:text="${input.key}">ID</td>
204-
<td>
205-
<a th:if="${input.value.format != null}" th:href="@{${input.value.format}}" th:text="${input.value.type}" target="_blank" rel="noopener">Type</a>
206-
<span th:if="${input.value.format == null}" th:text="${input.value.type}"></span>
207-
</td>
208-
<td th:text="${input.value.label}">Label</td>
209-
<td>
210-
<p th:if="${input.value.doc != null}" th:utext="${#strings.replace( #strings.escapeXml(input.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
211-
</td>
212-
</tr>
213-
</tbody>
214-
</table>
194+
<div class="table-responsive">
195+
<table class="table table-striped table-hover">
196+
<thead>
197+
<th>ID</th>
198+
<th>Type</th>
199+
<th>Label</th>
200+
<th>Doc</th>
201+
</thead>
202+
<tbody>
203+
<tr th:each="input : ${workflow.inputs}">
204+
<td th:text="${input.key}">ID</td>
205+
<td>
206+
<a th:if="${input.value.format != null}" th:href="@{${input.value.format}}" th:text="${input.value.type}" target="_blank" rel="noopener">Type</a>
207+
<span th:if="${input.value.format == null}" th:text="${input.value.type}"></span>
208+
</td>
209+
<td th:text="${input.value.label}">Label</td>
210+
<td>
211+
<p th:if="${input.value.doc != null}" th:utext="${#strings.replace( #strings.escapeXml(input.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
212+
</td>
213+
</tr>
214+
</tbody>
215+
</table>
216+
</div>
215217
</div>
216218
<h2>Steps</h2>
217219
<div th:if="${workflow.steps.isEmpty()}" class="alert alert-info">
218220
<p>There are no steps in this workflow</p>
219221
</div>
220222
<div th:unless="${workflow.steps.isEmpty()}">
221-
<table class="table table-striped table-hover">
222-
<thead>
223-
<th>ID</th>
224-
<th>Runs</th>
225-
<th>Label</th>
226-
<th>Doc</th>
227-
</thead>
228-
<tbody>
229-
<tr th:each="step : ${workflow.steps}" th:with="workflowURL=@{${workflow.retrievedFrom.getUrl()}}">
230-
<td th:text="${step.key}">ID</td>
231-
<td>
232-
<div th:if="${step.value.runType != null}">
233-
<a th:if="${step.value.runType.name() == 'WORKFLOW'}" th:href="${step.value.run}" th:text="${step.value.run}" class="subworkflow">workflow.cwl</a>
234-
<span th:unless="${step.value.runType.name() == 'WORKFLOW'}" th:text="${step.value.run}">cmdlinetool.cwl</span>
235-
(<span th:text="${step.value.runType}">Workflow</span>)
236-
</div>
237-
<div th:if="${step.value.run != null and step.value.runType == null}">
238-
<span th:text="${step.value.run} + ' (?)'" class="notFound" data-tooltip="true" title="Not Found - Must be somewhere within this repository">workflow.cwl (?)</span>
239-
</div>
240-
</td>
241-
<td th:text="${step.value.label}">Label</td>
242-
<td>
243-
<p th:if="${step.value.doc != null}" th:utext="${#strings.replace( #strings.escapeXml(step.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
244-
</td>
245-
</tr>
246-
</tbody>
247-
</table>
248-
</div>
249-
<h2>Outputs</h2>
250-
<div th:if="${workflow.outputs.isEmpty()}" class="alert alert-info">
251-
<p>There are no outputs in this workflow</p>
252-
</div>
253-
<div th:unless="${workflow.outputs.isEmpty()}">
254-
<table class="table table-striped table-hover">
255-
<thead>
223+
<div class="table-responsive">
224+
<table class="table table-striped table-hover">
225+
<thead>
256226
<th>ID</th>
257-
<th>Type</th>
227+
<th>Runs</th>
258228
<th>Label</th>
259229
<th>Doc</th>
260-
</thead>
261-
<tbody>
262-
<tr th:each="output : ${workflow.outputs}">
263-
<td th:text="${output.key}">ID</td>
230+
</thead>
231+
<tbody>
232+
<tr th:each="step : ${workflow.steps}" th:with="workflowURL=@{${workflow.retrievedFrom.getUrl()}}">
233+
<td th:text="${step.key}">ID</td>
264234
<td>
265-
<a th:if="${output.value.format != null}" th:href="@{${output.value.format}}" th:text="${output.value.type}" target="_blank" rel="noopener">Type</a>
266-
<span th:if="${output.value.format == null}" th:text="${output.value.type}"></span>
235+
<div th:if="${step.value.runType != null}">
236+
<a th:if="${step.value.runType.name() == 'WORKFLOW'}" th:href="${step.value.run}" th:text="${step.value.run}" class="subworkflow">workflow.cwl</a>
237+
<span th:unless="${step.value.runType.name() == 'WORKFLOW'}" th:text="${step.value.run}">cmdlinetool.cwl</span>
238+
(<span th:text="${step.value.runType}">Workflow</span>)
239+
</div>
240+
<div th:if="${step.value.run != null and step.value.runType == null}">
241+
<span th:text="${step.value.run} + ' (?)'" class="notFound" data-tooltip="true" title="Not Found - Must be somewhere within this repository">workflow.cwl (?)</span>
242+
</div>
267243
</td>
268-
<td th:text="${output.value.label}">Label</td>
244+
<td th:text="${step.value.label}">Label</td>
269245
<td>
270-
<p th:if="${output.value.doc != null}" th:utext="${#strings.replace(#strings.escapeXml(output.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
246+
<p th:if="${step.value.doc != null}" th:utext="${#strings.replace( #strings.escapeXml(step.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
271247
</td>
272248
</tr>
273-
</tbody>
274-
</table>
249+
</tbody>
250+
</table>
251+
</div>
252+
</div>
253+
<h2>Outputs</h2>
254+
<div th:if="${workflow.outputs.isEmpty()}" class="alert alert-info">
255+
<p>There are no outputs in this workflow</p>
256+
</div>
257+
<div th:unless="${workflow.outputs.isEmpty()}">
258+
<div class="table-responsive">
259+
<table class="table table-striped table-hover">
260+
<thead>
261+
<th>ID</th>
262+
<th>Type</th>
263+
<th>Label</th>
264+
<th>Doc</th>
265+
</thead>
266+
<tbody>
267+
<tr th:each="output : ${workflow.outputs}">
268+
<td th:text="${output.key}">ID</td>
269+
<td>
270+
<a th:if="${output.value.format != null}" th:href="@{${output.value.format}}" th:text="${output.value.type}" target="_blank" rel="noopener">Type</a>
271+
<span th:if="${output.value.format == null}" th:text="${output.value.type}"></span>
272+
</td>
273+
<td th:text="${output.value.label}">Label</td>
274+
<td>
275+
<p th:if="${output.value.doc != null}" th:utext="${#strings.replace(#strings.escapeXml(output.value.doc),T(java.lang.System).getProperty('line.separator')+T(java.lang.System).getProperty('line.separator'),'&lt;br /&gt;&lt;br /&gt;')}">Description</p>
276+
</td>
277+
</tr>
278+
</tbody>
279+
</table>
280+
</div>
275281
</div>
276282
</div>
277283
</div>

‎src/main/resources/templates/workflows.html

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -49,39 +49,41 @@ <h1>Explore Workflows</h1>
4949
<h3>Showing results for "<span th:text="${search}">query</span>" <a href="/workflows">(Show all)</a></h3>
5050
</div>
5151

52-
<table class="table table-striped">
53-
<thead>
54-
<tr>
55-
<th style="width: 40%;">Graph</th>
56-
<th>Name</th>
57-
<th>Retrieved From</th>
58-
<th>View</th>
59-
</tr>
60-
</thead>
61-
<tbody>
62-
<tr th:each="workflow : ${workflows}">
63-
<td>
64-
<a th:href="@{${workflow.retrievedFrom.getInternalUrl()}}">
65-
<img class="workflow-thumb" th:src="@{${workflow.getVisualisationSvg()}}" alt="workflow graph" />
66-
</a>
67-
</td>
68-
<td>
69-
<span th:text="${workflow.label}">Name</span>
70-
<p><i th:text="${workflow.doc}">Description</i></p>
71-
</td>
72-
<td>
73-
<a th:href="@{${workflow.retrievedFrom.getUrl()}}" rel="noopener" target="_blank">
74-
<img th:if="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/GitHub-Mark-32px.png" th:src="@{/img/GitHub-Mark-32px.png}" width="20" height="20" />
75-
<img th:unless="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/gitlogo.png" th:src="@{/img/gitlogo.png}" width="24" height="24" />
76-
<span th:text="@{${workflow.retrievedFrom.repoUrl}}">https://github.com/test/test2/repo.git</span>
77-
</a>
78-
<p th:if="${workflow.retrievedFrom.path != null}">Path: <i th:text="${workflow.retrievedFrom.path}">/path/to/workflow.cwl</i></p>
79-
<p>Branch/Commit ID: <i th:text="${workflow.retrievedFrom.branch}">master</i></p>
80-
</td>
81-
<td><a th:href="@{${workflow.retrievedFrom.getInternalUrl()}}"><span class="icon-view glyphicon glyphicon-chevron-right"></span></a></td>
82-
</tr>
83-
</tbody>
84-
</table>
52+
<div class="table-responsive">
53+
<table class="table table-striped">
54+
<thead>
55+
<tr>
56+
<th style="width: 40%;">Graph</th>
57+
<th>Name</th>
58+
<th>Retrieved From</th>
59+
<th>View</th>
60+
</tr>
61+
</thead>
62+
<tbody>
63+
<tr th:each="workflow : ${workflows}">
64+
<td>
65+
<a th:href="@{${workflow.retrievedFrom.getInternalUrl()}}">
66+
<img class="workflow-thumb" th:src="@{${workflow.getVisualisationSvg()}}" alt="workflow graph" />
67+
</a>
68+
</td>
69+
<td>
70+
<span th:text="${workflow.label}">Name</span>
71+
<p><i th:text="${workflow.doc}">Description</i></p>
72+
</td>
73+
<td>
74+
<a th:href="@{${workflow.retrievedFrom.getUrl()}}" rel="noopener" target="_blank">
75+
<img th:if="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/GitHub-Mark-32px.png" th:src="@{/img/GitHub-Mark-32px.png}" width="20" height="20" />
76+
<img th:unless="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/gitlogo.png" th:src="@{/img/gitlogo.png}" width="24" height="24" />
77+
<span th:text="@{${workflow.retrievedFrom.repoUrl}}">https://github.com/test/test2/repo.git</span>
78+
</a>
79+
<p th:if="${workflow.retrievedFrom.path != null}">Path: <i th:text="${workflow.retrievedFrom.path}">/path/to/workflow.cwl</i></p>
80+
<p>Branch/Commit ID: <i th:text="${workflow.retrievedFrom.branch}">master</i></p>
81+
</td>
82+
<td><a th:href="@{${workflow.retrievedFrom.getInternalUrl()}}"><span class="icon-view glyphicon glyphicon-chevron-right"></span></a></td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
</div>
8587

8688
<nav th:replace="fragments/pagination :: workflowControl"></nav>
8789

0 commit comments

Comments
 (0)