Skip to content

Commit 64d627c

Browse files
stainstain
committed
UI: Shrink workflow doc and in/step/out doc
Also smaller permalink (should not need <code> anymore)
1 parent b23cd02 commit 64d627c

File tree

2 files changed

+43
-41
lines changed

2 files changed

+43
-41
lines changed

‎src/main/resources/static/css/main-20170616.css

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -306,23 +306,25 @@ polygon.hover {
306306
}
307307

308308
#permalink {
309-
font-size: smaller;
310-
font-family: Consolas, Inconsolata, monospace;
311-
309+
font-size: x-small;
310+
color: #559cb7;
312311
overflow: hidden;
313312
white-space: nowrap;
314313
}
315314

315+
#workflow-doc {
316+
line-height: 1.9;
317+
letter-spacing: -0.04em;
318+
}
319+
320+
td.run, td.doc {
321+
letter-spacing: 0.02em;
322+
font-size: small;
323+
}
324+
316325
/**
317326
* Already showing HTML
318327
*/
319328
#format-html {
320329
display: none;
321330
}
322-
/**
323-
* Workaround (not really) for
324-
* https://github.com/common-workflow-language/cwlviewer/issues/166
325-
*/
326-
#format-json {
327-
display: none;
328-
}

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

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -131,31 +131,31 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
131131
<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="24" height="24" />
132132
<img th:unless="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/gitlogo.png" th:src="@{/img/gitlogo.png}" width="30" height="30" />
133133
</a>
134-
<i>Fetched <span th:text="${{workflow.retrievedOn}}">01/12/16 at 21:00</span></i>
134+
<i>Fetched <span th:text="${{workflow.retrievedOn}}">2017-09-14 22:30:37 GMT</span></i>
135135
<span class="hidden-print hidden-sm hidden-xs">
136136
<span th:if="${workflow.roBundlePath == null}" id="ajaxRequired"></span>
137137
<span th:class="${workflow.roBundlePath != null} ? hide : ''" id="generating"> - Generating download link <img alt="loading" src="../static/img/loading.svg" th:src="@{/img/loading.svg}" width="20" height="20" /></span>
138138
<span th:class="${workflow.roBundlePath == null} ? hide : ''" id="generated">
139139
- <a th:href="@{${workflow.getRoBundleLink()}}" id="download" href="#" download="bundle.zip">Download as Research Object Bundle</a>
140-
<a href="http://www.researchobject.org/" rel="noopener" class="help" target="_blank">[?]</a>
140+
<a href="http://www.researchobject.org/" rel="noopener" class="help" target="_blank" >[?]</a>
141141
</span>
142142
</span>
143143
</div>
144144
<div class="col-md-6 text-right hidden-xs">
145-
<img class="verification_icon" src="../static/img/tick.svg" th:src="@{/img/tick.svg}" width="20" height="22" /> Verified with cwltool version <span th:text="${workflow.cwltoolVersion}">1.0.20170622090721</span>
145+
<img class="verification_icon" src="../static/img/tick.svg" th:src="@{/img/tick.svg}" width="20" height="22" /> Verified with cwltool version <samp th:text="${workflow.cwltoolVersion}">1.0.20170622090721</samp>
146146
</div>
147147

148148
<div class="col-md-12" style="margin-top:5px;" th:if="${workflow.doc != null}">
149-
<p th:text="${workflow.doc}">Workflow Doc</p>
149+
<p id="workflow-doc" th:text="${workflow.doc}">This workflow documentation explains the purpose of the workflow and the main techniques used. Steps are documented individually further down. This is just an example documentation for the template, real documentation might be even longer than this!</p>
150150
</div>
151151
</div>
152152
<div class="row">
153153
<div class="col-lg-9 col-md-8 col-sm-6">
154-
<div class="permalink hidden-sm hidden-xs hidden-print" th:unless="${workflow.packed}">
154+
<div class="permalink hidden-sm hidden-xs hidden-print">
155155
Permalink:
156156
<a href="https://w3id.org/cwl/view/" rel="noopener" class="help" target="_blank">[?]</a>
157-
<code><a id="permalink" th:href="${workflow.permalink}" th:text="${workflow.permalink}"
158-
href="#">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</a></code>
157+
<a id="permalink" th:href="${workflow.permalink}" th:text="${workflow.permalink}"
158+
href="#">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</a>
159159
</div>
160160

161161
</div>
@@ -204,7 +204,7 @@ <h2>Inputs</h2>
204204
</div>
205205
<div th:unless="${workflow.inputs.isEmpty()}">
206206
<div class="table-responsive">
207-
<table class="table table-striped table-hover">
207+
<table class="table table-striped table-hover input">
208208
<thead>
209209
<th>ID</th>
210210
<th>Type</th>
@@ -213,14 +213,14 @@ <h2>Inputs</h2>
213213
</thead>
214214
<tbody>
215215
<tr th:each="input : ${workflow.inputs}">
216-
<td th:text="${input.key}">ID</td>
217-
<td>
216+
<td class="id" th:text="${input.key}">ID</td>
217+
<td class="type" >
218218
<a th:if="${input.value.format != null}" th:href="@{${input.value.format}}" th:text="${input.value.type}" target="_blank" rel="noopener">Type</a>
219219
<span th:if="${input.value.format == null}" th:text="${input.value.type}"></span>
220220
</td>
221-
<td th:text="${input.value.label}">Label</td>
222-
<td>
223-
<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>
221+
<td class="label" th:text="${input.value.label}">Label</td>
222+
<td class="doc" >
223+
<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 might be a bit longer</p>
224224
</td>
225225
</tr>
226226
</tbody>
@@ -233,17 +233,17 @@ <h2>Steps</h2>
233233
</div>
234234
<div th:unless="${workflow.steps.isEmpty()}">
235235
<div class="table-responsive">
236-
<table class="table table-striped table-hover">
236+
<table class="table table-striped table-hover steps">
237237
<thead>
238-
<th>ID</th>
239-
<th>Runs</th>
240-
<th>Label</th>
241-
<th>Doc</th>
238+
<th>ID</th>
239+
<th>Runs</th>
240+
<th>Label</th>
241+
<th>Doc</th>
242242
</thead>
243243
<tbody>
244244
<tr th:each="step : ${workflow.steps}" th:with="workflowURL=@{${workflow.retrievedFrom.getUrl()}}">
245-
<td th:text="${step.key}">ID</td>
246-
<td>
245+
<td class="id" th:text="${step.key}">ID</td>
246+
<td class="run">
247247
<div th:if="${step.value.runType != null}">
248248
<a th:if="${step.value.runType.name() == 'WORKFLOW'}" th:href="@{${step.value.run.replace('#', '%23')}}" th:text="${step.value.run}" class="subworkflow">workflow.cwl</a>
249249
<span th:unless="${step.value.runType.name() == 'WORKFLOW'}" th:text="${step.value.run}">cmdlinetool.cwl</span>
@@ -253,9 +253,9 @@ <h2>Steps</h2>
253253
<span th:text="${step.value.run} + ' (?)'" class="notFound" data-tooltip="true" title="Not Found - Must be somewhere within this repository">workflow.cwl (?)</span>
254254
</div>
255255
</td>
256-
<td th:text="${step.value.label}">Label</td>
257-
<td>
258-
<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>
256+
<td class="label" th:text="${step.value.label}">Label</td>
257+
<td class="doc">
258+
<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 might be a bit longer</p>
259259
</td>
260260
</tr>
261261
</tbody>
@@ -268,7 +268,7 @@ <h2>Outputs</h2>
268268
</div>
269269
<div th:unless="${workflow.outputs.isEmpty()}">
270270
<div class="table-responsive">
271-
<table class="table table-striped table-hover">
271+
<table class="table table-striped table-hover output">
272272
<thead>
273273
<th>ID</th>
274274
<th>Type</th>
@@ -277,14 +277,14 @@ <h2>Outputs</h2>
277277
</thead>
278278
<tbody>
279279
<tr th:each="output : ${workflow.outputs}">
280-
<td th:text="${output.key}">ID</td>
281-
<td>
280+
<td class="id" th:text="${output.key}">ID</td>
281+
<td class="type">
282282
<a th:if="${output.value.format != null}" th:href="@{${output.value.format}}" th:text="${output.value.type}" target="_blank" rel="noopener">Type</a>
283283
<span th:if="${output.value.format == null}" th:text="${output.value.type}"></span>
284284
</td>
285-
<td th:text="${output.value.label}">Label</td>
286-
<td>
287-
<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>
285+
<td class="label" th:text="${output.value.label}">Label</td>
286+
<td class="doc">
287+
<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 might be a bit longer</p>
288288
</td>
289289
</tr>
290290
</tbody>
@@ -293,15 +293,15 @@ <h2>Outputs</h2>
293293
</div>
294294
</div>
295295
</div>
296-
<div class="row hidden-print" th:unless="${workflow.packed}">
296+
<div class="row hidden-print">
297297
<div class="col-md-12 text-center" id="formats">
298298
<span th:each="format : ${formats}">
299299
<a th:id="|format-${format}|" role="button" class="btn btn-default btn-sm" th:href="${workflow.getPermalink(format.name())}" th:text="${format}"
300300
href="#">html</a>
301301
</span>
302302
</div>
303303
</div>
304-
<div class="visible-print-block" th:unless="${workflow.packed}">
304+
<div class="visible-print-block">
305305
<address>Permalink:
306306
<code th:text="${workflow.permalink}">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</code>
307307
</address>

0 commit comments

Comments
 (0)