Skip to content

Commit ee46b33

Browse files
andriumonandriumon
committed
Added legends to crosswalk table
1 parent ed4ffbc commit ee46b33

File tree

3 files changed

+175
-135
lines changed

3 files changed

+175
-135
lines changed

‎docs/consensus_summary.csv‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎website/crosswalk.html‎

Lines changed: 45 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -11,118 +11,13 @@
1111
<link rel="stylesheet" href="css/bootstrap.css">
1212
<link rel="stylesheet" href="css/flexslider.css">
1313
<link rel="stylesheet" href="css/style.css">
14+
<link rel="stylesheet" href="css/crosswalk.css">
1415
<link rel="icon" type="image/png" href="/website/images/everse_icon.png">
1516
<script src="js/modernizr-2.6.2.min.js"></script>
1617
<!--[if lt IE 9]>
1718
<script src="js/respond.min.js"></script>
1819
<![endif]-->
1920

20-
<style>
21-
table {
22-
width: 100%;
23-
border-collapse: separate;
24-
border-spacing: 0;
25-
margin-top: 15px;
26-
table-layout: fixed;
27-
}
28-
th, td {
29-
border: 1px solid #ddd;
30-
padding: 12px 18px;
31-
text-align: left;
32-
vertical-align: top;
33-
font-size: 14px;
34-
word-break: break-word;
35-
}
36-
th {
37-
background-color: #1E90FF;
38-
color: white;
39-
font-size: 17px;
40-
}
41-
tr:nth-child(even) {
42-
background-color: #f2f2f2;
43-
}
44-
45-
#search-wrapper {
46-
display: flex;
47-
gap: 10px;
48-
align-items: center;
49-
margin-bottom: 15px;
50-
}
51-
52-
#search-input {
53-
font-size: 16px;
54-
padding: 10px;
55-
width: 100%;
56-
border: 2px solid #005bb5;
57-
}
58-
59-
#search-input:focus {
60-
border-color: #1E90FF;
61-
box-shadow: 0 0 5px rgba(30, 144, 255, 0.6);
62-
outline: none;
63-
}
64-
65-
#clear-search {
66-
padding: 10px 15px;
67-
font-size: 16px;
68-
border: none;
69-
background-color: #ddd;
70-
cursor: pointer;
71-
}
72-
73-
#clear-search:hover {
74-
background-color: #bbb;
75-
}
76-
77-
#fh5co-about {
78-
padding-top: 20px;
79-
padding-bottom: 20px;
80-
}
81-
82-
#fh5co-about .container {
83-
padding-top: 0;
84-
padding-bottom: 0;
85-
margin-top: 0;
86-
margin-bottom: 0;
87-
position: relative;
88-
}
89-
90-
.fh5co-heading {
91-
margin-top: 20px;
92-
margin-bottom: 20px;
93-
}
94-
95-
#table-loading-overlay {
96-
position: absolute;
97-
top: 0;
98-
left: 0;
99-
width: 100%;
100-
min-height: 300px;
101-
background: rgba(255, 255, 255, 0.9);
102-
z-index: 999;
103-
display: none;
104-
flex-direction: column;
105-
justify-content: center;
106-
align-items: center;
107-
font-size: 18px;
108-
color: #333;
109-
}
110-
111-
.spinner {
112-
border: 6px solid #f3f3f3;
113-
border-top: 6px solid #1E90FF;
114-
border-radius: 50%;
115-
width: 40px;
116-
height: 40px;
117-
animation: spin 1s linear infinite;
118-
margin-bottom: 10px;
119-
}
120-
121-
@keyframes spin {
122-
0% { transform: rotate(0deg); }
123-
100% { transform: rotate(360deg); }
124-
}
125-
</style>
12621
</head>
12722

12823
<body>
@@ -155,15 +50,16 @@
15550
<div class="container">
15651
<div class="row animate-box">
15752
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
158-
<h2>Equivalent Indicators Crosswalk</h2>
53+
<h2>Indicators Crosswalk</h2>
15954
</div>
16055
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
16156
<p style="color: #333333;">
162-
Here you can find a table that shows equivalent indicators from other sources
57+
Here you can find a table that shows the relations between EVERSE indicators and those from other sources
16358
</p>
16459
</div>
16560
</div>
16661

62+
16763
<div id="search-wrapper">
16864
<input type="text" id="search-input" class="form-control" placeholder="Search in table...">
16965
<button id="clear-search" title="Clear search">✕</button>
@@ -200,6 +96,47 @@ <h2>Equivalent Indicators Crosswalk</h2>
20096
</div>
20197
</div>
20298

99+
<div id="mapping-legend">
100+
<div class="legend-section">
101+
<div class="legend-title">Relations</div>
102+
<ul>
103+
<li>
104+
<span class="legend-term equivalent">Equivalent</span>:
105+
Same meaning or scope as the EVERSE indicator.
106+
</li>
107+
<li>
108+
<span class="legend-term broader">Broader</span>:
109+
Covers a wider concept than the EVERSE indicator.
110+
</li>
111+
<li>
112+
<span class="legend-term narrower">Narrower</span>:
113+
Covers a more specific aspect of the EVERSE indicator.
114+
</li>
115+
</ul>
116+
</div>
117+
118+
<div class="legend-section">
119+
<div class="legend-title">Sources</div>
120+
<ul>
121+
<li>
122+
<span class="legend-term">FAIRSOFT</span>:
123+
Set of indicators in the biomedical sciences. URL:
124+
<a href="https://inab.github.io/FAIRsoft_indicators/indicators/" target="_blank">
125+
https://inab.github.io/FAIRsoft_indicators/indicators/
126+
</a>
127+
</li>
128+
<li>
129+
<span class="legend-term">FAIR-Impact</span>:
130+
Set of metrics for FAIR principles compliance. URL:
131+
<a href="https://fair-impact.eu/metrics-software" target="_blank">
132+
https://fair-impact.eu/metrics-software
133+
</a>
134+
</li>
135+
</ul>
136+
</div>
137+
</div>
138+
139+
203140
<script>
204141
let allData = [];
205142
let crosswalkByIndicatorId = {};

‎website/css/crosswalk.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
table {
2+
width: 100%;
3+
border-collapse: separate;
4+
border-spacing: 0;
5+
margin-top: 15px;
6+
table-layout: fixed;
7+
}
8+
th, td {
9+
border: 1px solid #ddd;
10+
padding: 12px 18px;
11+
text-align: left;
12+
vertical-align: top;
13+
font-size: 14px;
14+
word-break: break-word;
15+
}
16+
th {
17+
background-color: #1E90FF;
18+
color: white;
19+
font-size: 17px;
20+
}
21+
tr:nth-child(even) {
22+
background-color: #f2f2f2;
23+
}
24+
25+
#search-wrapper {
26+
display: flex;
27+
gap: 10px;
28+
align-items: center;
29+
margin-bottom: 15px;
30+
}
31+
32+
#search-input {
33+
font-size: 16px;
34+
padding: 10px;
35+
width: 100%;
36+
border: 2px solid #005bb5;
37+
}
38+
39+
#search-input:focus {
40+
border-color: #1E90FF;
41+
box-shadow: 0 0 5px rgba(30, 144, 255, 0.6);
42+
outline: none;
43+
}
44+
45+
#clear-search {
46+
padding: 10px 15px;
47+
font-size: 16px;
48+
border: none;
49+
background-color: #ddd;
50+
cursor: pointer;
51+
}
52+
53+
#clear-search:hover {
54+
background-color: #bbb;
55+
}
56+
57+
#fh5co-about {
58+
padding-top: 20px;
59+
padding-bottom: 20px;
60+
}
61+
62+
#fh5co-about .container {
63+
padding-top: 0;
64+
padding-bottom: 0;
65+
margin-top: 0;
66+
margin-bottom: 0;
67+
position: relative;
68+
}
69+
70+
.fh5co-heading {
71+
margin-top: 20px;
72+
margin-bottom: 20px;
73+
}
74+
75+
#table-loading-overlay {
76+
position: absolute;
77+
top: 0;
78+
left: 0;
79+
width: 100%;
80+
min-height: 300px;
81+
background: rgba(255, 255, 255, 0.9);
82+
z-index: 999;
83+
display: none;
84+
flex-direction: column;
85+
justify-content: center;
86+
align-items: center;
87+
font-size: 18px;
88+
color: #333;
89+
}
90+
91+
.spinner {
92+
border: 6px solid #f3f3f3;
93+
border-top: 6px solid #1E90FF;
94+
border-radius: 50%;
95+
width: 40px;
96+
height: 40px;
97+
animation: spin 1s linear infinite;
98+
margin-bottom: 10px;
99+
}
100+
101+
@keyframes spin {
102+
0% { transform: rotate(0deg); }
103+
100% { transform: rotate(360deg); }
104+
}
105+
106+
#mapping-legend {
107+
max-width: 1100px;
108+
margin: 0 auto 20px auto;
109+
border: 1px solid #1E90FF;
110+
padding: 12px 16px 14px 16px;
111+
font-size: 13px;
112+
}
113+
114+
#mapping-legend .legend-title {
115+
background-color: #1E90FF;
116+
color: #ffffff;
117+
font-weight: 600;
118+
padding: 8px 12px;
119+
border-bottom: 1px solid #1E90FF;
120+
margin-bottom: 10px;
121+
}
122+
123+
#mapping-legend ul {
124+
margin: 0;
125+
padding-left: 18px;
126+
}
127+
128+
#mapping-legend li {
129+
margin-bottom: 6px;
130+
}

0 commit comments

Comments
 (0)