Further report styling + jsdoc
This commit is contained in:
parent
24186eabbc
commit
29560c166f
33
css/ds.css
33
css/ds.css
@ -19,8 +19,19 @@ main {
|
||||
}
|
||||
footer {
|
||||
min-height: 40px;
|
||||
background-color: rgba(5, 5, 5, 0.6);
|
||||
padding: 3rem;
|
||||
background-color: #213B55;
|
||||
padding: 1rem 5rem;
|
||||
}
|
||||
footer a {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
footer .column > a {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
@ -28,7 +39,6 @@ ul {
|
||||
ul li {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
td ul {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
@ -37,7 +47,7 @@ td ul {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem 1rem;
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 2rem !important;
|
||||
@ -45,4 +55,19 @@ td ul {
|
||||
.key {
|
||||
min-width: 200px;
|
||||
}
|
||||
table.table td,
|
||||
table.table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.report-container {
|
||||
width: 100%;
|
||||
}
|
||||
.navbar,
|
||||
footer,
|
||||
#map {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
3
js/README.md
Normal file
3
js/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# DataSpace - JavaScript reference for custom frontend
|
||||
|
||||
Minimal documentation for a custom frontend implementation of ISPC DataSpace reports using Arches REST API to retrieve data.
|
||||
15
js/ds.js
15
js/ds.js
@ -2,6 +2,20 @@
|
||||
|
||||
export const BASE_URL = 'http://dataspace.ispc.cnr.it';
|
||||
const RES_ENDPOINT = '/resources/';
|
||||
/**
|
||||
* @todo Report shapes??
|
||||
*/
|
||||
/*
|
||||
export const OBJECT_ORDER = {
|
||||
"Object Type" : null,
|
||||
"Object ID" : null,
|
||||
"Object Chronology" : null,
|
||||
"Object Era" : null,
|
||||
};
|
||||
export const SAMPLE_ORDER = {
|
||||
|
||||
};
|
||||
*/
|
||||
|
||||
/**
|
||||
* @todo Query report links to determine resource type?
|
||||
@ -63,6 +77,7 @@ export function printReport() {
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @todo Use TS to define object shape
|
||||
* @param {object} resource The resource object (Arches JSON!)
|
||||
*
|
||||
* @return {string[]}
|
||||
|
||||
19
js/jsdoc.json
Normal file
19
js/jsdoc.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"source": {
|
||||
"include": ["ds.js", "views/report.js", "README.md"]
|
||||
},
|
||||
|
||||
"opts": {
|
||||
"encoding": "utf8",
|
||||
"readme" : "README.md",
|
||||
"destination": "docs/",
|
||||
"recurse": true,
|
||||
"verbose": true,
|
||||
"template": "/home/nicolo/node_modules/lib/node_modules/clean-jsdoc-theme",
|
||||
"theme_opts": {
|
||||
"theme": "light",
|
||||
"title": "DataSpace Custom Report",
|
||||
"create_style": ".description{padding:10px 0}.param-desc{padding:10px}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,7 +27,9 @@ document.addEventListener('readystatechange', async () => {
|
||||
}
|
||||
|
||||
resType = resKeys[0].split(' ')[0];
|
||||
// TODO use coordinates for map
|
||||
const coordinates = resource['Coordinates'];
|
||||
|
||||
resKeys = resKeys.filter(e => !e.includes('Coordinates'));
|
||||
|
||||
document.querySelector('#rep-tit')
|
||||
@ -61,27 +63,37 @@ document.addEventListener('readystatechange', async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO Pop coordinates before traversing the object
|
||||
let value = innerList !== null ?
|
||||
innerList.outerHTML : report.resource[key];
|
||||
|
||||
if (key.includes('Images')) {
|
||||
let images = '';
|
||||
|
||||
for (const src of files) {
|
||||
images += `<span style="max-width: 100px; padding: 5px">
|
||||
<img class="img-fit-contain img-responsive" src="${src}" />
|
||||
</span>`;
|
||||
}
|
||||
|
||||
value = images;
|
||||
}
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="text-bold key">${key.replace(resType, '')}</td>
|
||||
<td>${value}</td>
|
||||
`;
|
||||
|
||||
if (!key.includes('Images') && !key.includes('Photos')) {
|
||||
repTable.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length) {
|
||||
// Create image gallery
|
||||
// TODO refactor...
|
||||
let gallery = document.querySelector('#gallery');
|
||||
gallery.classList.remove('d-hide');
|
||||
|
||||
for (const src of files) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'img-responsive img-fit-contain';
|
||||
img.src = src;
|
||||
|
||||
const col = document.createElement('div');
|
||||
col.className = 'column col-4 c-hand spotlight';
|
||||
col.setAttribute('data-src', src);
|
||||
col.setAttribute('data-download', true);
|
||||
|
||||
col.appendChild(img);
|
||||
gallery.appendChild(col);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fontawesome-free": "^1.0.4",
|
||||
"spectre.css": "^0.5.9"
|
||||
"plotly.js": "^2.18.2",
|
||||
"spectre.css": "^0.5.9",
|
||||
"spotlight.js": "^0.7.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dataspace | Report</title>
|
||||
<title>DataSpace | Report</title>
|
||||
<link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
|
||||
<link href="../css/ds.css" rel="stylesheet" />
|
||||
<link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
|
||||
<script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
|
||||
<script src="../js/views/report.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -23,7 +24,7 @@
|
||||
<a href="http://dataspace.ispc.cnr.it/search" class="btn btn-link" title="Search">
|
||||
<i class="fa fa-search"></i>
|
||||
</a>
|
||||
<a class="btn btn-link" id="print">
|
||||
<a class="btn btn-link" title="Print this page" id="print">
|
||||
<i class="fa fa-print"></i>
|
||||
</a>
|
||||
<a class="btn btn-link"></a>
|
||||
@ -40,12 +41,60 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="column col-4 p-2">
|
||||
<img class="img-responsive mt-2" src="../img/map.png" />
|
||||
<img id="map" class="img-responsive mt-2" src="../img/map.png" />
|
||||
</div>
|
||||
<div class="container grid-md">
|
||||
<div class="columns d-hide mt-2" id="gallery">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="text-center text-light mt-2">Whatever...</div>
|
||||
<footer class="text-light">
|
||||
<h6 class="text-bold mt-2">Institute of Heritage Science</h6>
|
||||
<div class="columns mt-2">
|
||||
<div class="column col-6">
|
||||
<p class="mb-0">Find us</p>
|
||||
<p class="text-small pt-2">
|
||||
Via Cardinale Guglielmo Sanfelice 8, 80134 Napoli (NA), IT<br>
|
||||
Tel: 081-247-0966
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-3">
|
||||
<p class="mb-0">Useful links</p>
|
||||
<a class="text-small pt-2">About DataSpace</a>
|
||||
<a class="text-small pt-2">Contact us</a>
|
||||
</div>
|
||||
<div class="column col-3">
|
||||
<p class="mb-0">Disclaimer & Agreements</p>
|
||||
<a class="text-small pt-2">Cookies Policy</a>
|
||||
<a class="text-small pt-2">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns mt-1 mb-2" style="border-top: 1px solid #fff">
|
||||
<div class="column col-6 mt-1">
|
||||
<p class="mt-1 mb-0 text-small">
|
||||
<a href="https://www.cnr.it" title="CNR website">
|
||||
National Research Council
|
||||
</a> -
|
||||
<a href="https://www.ispc.cnr.it" title="ISPC website">
|
||||
Institute of Heritage Science
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-3">
|
||||
<div class="tile tile-centered text-small pt-2">
|
||||
<div class="tile-icon">
|
||||
<img height="30px" class="img-fit-contain" src="/img/favicon_dataspace.svg" />
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
2023 All rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 mt-1">
|
||||
<a href="https://archesproject.org" class="text-small pt-2">Powered by Arches</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<!-- Templates? -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user