Skip to content

Commit b4a8b52

Browse files
MarkRobboMarkRobbo
authored
Merge pull request #10 from common-workflow-language/copyright-text
Styling changes for uniformity with commonwl.org
2 parents 2124289 + ae80e81 commit b4a8b52

File tree

6 files changed

+165
-134
lines changed

6 files changed

+165
-134
lines changed

‎src/main/resources/favicon.ico

5.3 KB
Binary file not shown.

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

Lines changed: 12 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -18,82 +18,24 @@
1818
*/
1919

2020
body {
21-
font-family: 'Arial', sans-serif;
21+
padding-top: 61px;
2222
}
2323

24-
a {
25-
text-decoration: none;
24+
:target {
25+
padding-top: 61px;
26+
margin-top: -61px;
2627
}
2728

28-
h2 {
29-
font-family: 'Open Sans', sans-serif;
30-
font-size: 16px;
31-
margin-top: 0;
32-
margin-bottom: 3px;
29+
#logo {
30+
height: 61px;
31+
margin-top: -20px;
32+
margin-left: -20px
3333
}
3434

35-
table {
36-
border-collapse: collapse;
37-
}
38-
39-
table td, table th {
40-
border: 1px solid #ddd;
41-
}
42-
43-
.material-icons {
44-
display: inline;
45-
vertical-align: middle;
46-
margin-right: 3px;
47-
}
48-
49-
#header h1 {
50-
text-align: center;
51-
font-family: 'Open Sans', sans-serif;
52-
font-size: 30px;
53-
}
54-
55-
#container {
56-
margin: 0 auto;
57-
padding: 15px;
58-
width: 600px;
59-
background-color: #f8f8f8;
60-
border: 1px solid #e7e7e7;
61-
border-radius: 3px;
62-
-moz-border-radius: 3px;
63-
-webkit-border-radius: 3px;
64-
}
65-
66-
.error {
67-
font-size: 14px;
68-
margin: 7px 5px 0;
69-
padding: 5px;
70-
background-color: #ffc4c5;
71-
border: 1px solid #ff0000;
72-
border-radius: 3px;
73-
-moz-border-radius: 3px;
74-
-webkit-border-radius: 3px;
75-
}
76-
77-
h2#formTitle {
78-
margin-left: 10px;
79-
}
80-
81-
#add input[type=text] {
82-
padding-left: 5px;
83-
border: 1px solid #bebebe;
84-
width: 380px;
85-
height: 24px;
86-
margin-right: 5px;
87-
}
88-
89-
#add button {
90-
width: 140px;
91-
height: 30px;
92-
}
93-
94-
#add #githubLogo {
95-
vertical-align: -22px;
96-
margin: 10px;
35+
#githubURL {
36+
background: url("/img/GitHub-Mark-32px.png") no-repeat scroll 7px 4px;
37+
background-size: 25px 25px;
38+
padding-left: 45px;
9739
}
9840

9941
#footer {

‎src/main/resources/templates/fragments/footer.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<!--
3+
~ Licensed to the Apache Software Foundation (ASF) under one
4+
~ or more contributor license agreements. See the NOTICE file
5+
~ distributed with this work for additional information
6+
~ regarding copyright ownership. The ASF licenses this file
7+
~ to you under the Apache License, Version 2.0 (the
8+
~ "License"); you may not use this file except in compliance
9+
~ with the License. You may obtain a copy of the License at
10+
~
11+
~ http://www.apache.org/licenses/LICENSE-2.0
12+
~
13+
~ Unless required by applicable law or agreed to in writing,
14+
~ software distributed under the License is distributed on an
15+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
~ KIND, either express or implied. See the License for the
17+
~ specific language governing permissions and limitations
18+
~ under the License.
19+
-->
20+
21+
<html xmlns:th="http://www.thymeleaf.org">
22+
<body>
23+
<div th:fragment="copy" id="footer">
24+
<a href="https://github.com/common-workflow-language/cwlviewer" rel="noopener" target="_blank">CWL Viewer</a>
25+
&copy; 2016 <a href="https://github.com/common-workflow-language/" rel="noopener" target="_blank">Common Workflow Project</a>
26+
and <a href="https://github.com/orgs/common-workflow-language/people" rel="noopener" target="_blank">contributors</a>,
27+
distributed under <a href="https://www.apache.org/licenses/LICENSE-2.0" rel="noopener" target="_blank">Apache license, version 2.0</a>
28+
<br />
29+
<span th:if="${workflow != null}">
30+
<a th:href="@{'https://github.com/' + ${workflow.retrievedFrom.owner} + '/' + ${workflow.retrievedFrom.repoName}}" href="#" rel="noopener" target="_blank">Shown workflow</a> has separate copyright and license
31+
</span>
32+
</div>
33+
</body>
34+
</html>

‎src/main/resources/templates/fragments/header.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<!--
3+
~ Licensed to the Apache Software Foundation (ASF) under one
4+
~ or more contributor license agreements. See the NOTICE file
5+
~ distributed with this work for additional information
6+
~ regarding copyright ownership. The ASF licenses this file
7+
~ to you under the Apache License, Version 2.0 (the
8+
~ "License"); you may not use this file except in compliance
9+
~ with the License. You may obtain a copy of the License at
10+
~
11+
~ http://www.apache.org/licenses/LICENSE-2.0
12+
~
13+
~ Unless required by applicable law or agreed to in writing,
14+
~ software distributed under the License is distributed on an
15+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
~ KIND, either express or implied. See the License for the
17+
~ specific language governing permissions and limitations
18+
~ under the License.
19+
-->
20+
21+
<html xmlns:th="http://www.thymeleaf.org">
22+
<head>
23+
<link rel="stylesheet" type="text/css" href="../../static/css/main.css" />
24+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
25+
</head>
26+
<body>
27+
<nav th:fragment="navbar" class="navbar navbar-default navbar-fixed-top">
28+
<div class="container">
29+
<div class="navbar-header">
30+
<a class="navbar-brand" href="/">
31+
<img id="logo" src="http://www.commonwl.org/CWL-Logo-Header.png"></img>
32+
</a>
33+
</div>
34+
</div>
35+
</nav>
36+
</body>
37+
</html>

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

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,43 @@
2222
<head>
2323
<meta charset="UTF-8" />
2424
<title>Common Workflow Language Viewer</title>
25-
<link rel="stylesheet" type="text/css" href="/css/main.css" />
26-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" />
27-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
28-
rel="stylesheet" />
25+
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css" />
26+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
2927
</head>
3028
<body>
31-
<div id="header">
32-
<h1>Common Workflow Language Viewer</h1>
33-
</div>
34-
<div id="container">
35-
<h2 id="formTitle">Workflow from Github URL</h2>
36-
<form id="add" action="#" th:action="@{/}" th:object="${workflowForm}" method="POST">
37-
<p class="error" th:if="${#fields.hasErrors('githubURL')}">
38-
<i class="material-icons">error_outline</i>
39-
<strong>Error:</strong>
40-
<span th:errors="*{githubURL}">URL cannot be empty</span>
41-
</p>
42-
<label for="githubURL"><img id="githubLogo" src="/img/GitHub-Mark-32px.png" /></label>
43-
<input type="text" id="githubURL" name="githubURL" th:field="*{githubURL}" />
44-
<button type="submit">Parse Workflow</button>
45-
</form>
46-
</div>
47-
<div id="footer">
48-
Copyright here or links to <a href="http://commonwl.org">commonwl.org</a>, <a href="http://researchobject.org">researchobject.org</a> etc
29+
30+
<nav th:replace="fragments/header :: navbar"></nav>
31+
32+
<div class="container">
33+
<div class="row">
34+
<div class="col-md-12" role="main" id="main">
35+
<h1>Common Workflow Language Viewer</h1>
36+
<p>This tool visualises and lists the details of a workflow with its inputs, outputs and steps and
37+
packages the files into a downloadable
38+
<a href="https://researchobject.github.io/specifications/bundle/" rel="noopener" target="_blank">
39+
Research Object Bundle</a>
40+
(zip file with metadata in a manifest), allowing it to be easily viewed and shared.</p>
41+
<div class="alert alert-warning">
42+
<p><strong>Caution:</strong> This viewer is currently experimental and may not work for all valid workflows</p>
43+
</div>
44+
45+
<h2>Workflow from Github URL</h2>
46+
<p>Provide a link to the directory of files making up your workflow here</p>
47+
<form id="add" action="#" th:action="@{/}" th:object="${workflowForm}" method="POST">
48+
<div class="alert alert-danger" th:if="${#fields.hasErrors('githubURL')}">
49+
<strong>Error:</strong> <span th:errors="*{githubURL}">Error message here</span>
50+
</div>
51+
<div class="input-group">
52+
<input type="text" class="form-control" placeholder="Github URL" id="githubURL" name="githubURL" th:field="*{githubURL}" />
53+
<span class="input-group-btn">
54+
<button class="btn btn-primary" type="submit">Parse Workflow</button>
55+
</span>
56+
</div>
57+
</form>
58+
</div>
59+
</div>
4960
</div>
61+
62+
<div th:replace="fragments/footer :: copy"></div>
5063
</body>
5164
</html>

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

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,50 +21,55 @@
2121
<html xmlns:th="http://www.thymeleaf.org">
2222
<head>
2323
<meta charset="UTF-8" />
24-
<title>Common Workflow Language Viewer - Name Here</title>
25-
<link rel="stylesheet" type="text/css" href="/css/main.css" />
26-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" />
27-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
28-
rel="stylesheet" />
24+
<title>Common Workflow Language Viewer</title>
25+
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css" />
26+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
2927
</head>
3028
<body>
31-
<div id="header">
32-
<h1>Common Workflow Language Viewer</h1>
33-
</div>
34-
<div id="container">
35-
<h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
36-
<p th:text="${workflow.doc}">Workflow Doc</p>
37-
<h2>Inputs</h2>
38-
<table>
39-
<tr>
40-
<th>ID</th>
41-
<th>Type</th>
42-
<th>Label</th>
43-
<th>Doc</th>
44-
</tr>
45-
<tr th:each="input : ${workflow.inputs}">
46-
<td th:text="${input.key}">ID</td>
47-
<td th:text="${input.value.type}">Type</td>
48-
<td th:text="${input.value.label}">Label</td>
49-
<td th:text="${input.value.doc}">Description</td>
50-
</tr>
51-
</table>
52-
<h2>Outputs</h2>
53-
<table>
54-
<tr>
55-
<th>ID</th>
56-
<th>Label</th>
57-
<th>Doc</th>
58-
</tr>
59-
<tr th:each="output : ${workflow.outputs}">
60-
<td th:text="${output.key}">ID</td>
61-
<td th:text="${output.value.label}">Label</td>
62-
<td th:text="${output.value.doc}">Description</td>
63-
</tr>
64-
</table>
65-
</div>
66-
<div id="footer">
67-
Copyright here or links to <a href="http://commonwl.org">commonwl.org</a>, <a href="http://researchobject.org">researchobject.org</a> etc
29+
30+
<nav th:replace="fragments/header :: navbar"></nav>
31+
32+
<div class="container">
33+
<div class="row">
34+
<div class="col-md-12" role="main" id="main">
35+
<h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
36+
<p th:text="${workflow.doc}">Workflow Doc</p>
37+
<h2>Inputs</h2>
38+
<table class="table table-striped">
39+
<thead>
40+
<th>ID</th>
41+
<th>Type</th>
42+
<th>Label</th>
43+
<th>Doc</th>
44+
</thead>
45+
<tbody>
46+
<tr th:each="input : ${workflow.inputs}">
47+
<td th:text="${input.key}">ID</td>
48+
<td th:text="${input.value.type}">Type</td>
49+
<td th:text="${input.value.label}">Label</td>
50+
<td th:text="${input.value.doc}">Description</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
<h2>Outputs</h2>
55+
<table class="table table-striped">
56+
<thead>
57+
<th>ID</th>
58+
<th>Label</th>
59+
<th>Doc</th>
60+
</thead>
61+
<tbody>
62+
<tr th:each="output : ${workflow.outputs}">
63+
<td th:text="${output.key}">ID</td>
64+
<td th:text="${output.value.label}">Label</td>
65+
<td th:text="${output.value.doc}">Description</td>
66+
</tr>
67+
</tbody>
68+
</table>
69+
</div>
70+
</div>
6871
</div>
72+
73+
<div th:replace="fragments/footer :: copy"></div>
6974
</body>
7075
</html>

0 commit comments

Comments
 (0)