Browse Source

Restyling grafica pagina persona (wip)

Giulia Cacioli 2 năm trước cách đây
mục cha
commit
224535771e
5 tập tin đã thay đổi với 547 bổ sung522 xóa
  1. 6 6
      OA.html
  2. 437 452
      Persona.html
  3. 0 29
      css/OA.css
  4. 97 28
      css/place_people.css
  5. 7 7
      js/people.js

+ 6 - 6
OA.html

@@ -51,7 +51,7 @@
 							<a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
 						</li>
 						<li class="nav-item active">
-							<a class="nav-link" href="#">Ricerca</a>
+							<a class="nav-link" href="ricerca.html">Ricerca</a>
 						</li>
 						<li class="nav-item">
 							<a class="nav-link" href="#">Indici</a>
@@ -102,17 +102,17 @@
 
 			<div class="w-content section-small">
 				<div class="container-fluid">
-					<div class="col oa-box-info">
+					<div class="col box-info">
 						<div class="container-fluid">
-							<div class="row oa-title">
+							<div class="row box-info-title">
 								<div class="col">
 									<span id="time"></span>
-									<h1 id="nome_oggetto"></h1>
+									<h1 id="nome_oggetto" class="box-info-main-title"></h1>
 									<span id="artist_name"></span>
 								</div>
 							</div>
 
-							<div class="row">
+							<div class="row box-info-container">
 								<div class="col" id="info_OA">
 									<div class="row" id="NCT" style="display:none;">
 										<div class="col-sm-4">
@@ -207,7 +207,7 @@
 
 							<div id="placeholder_luoghi" class="row">
 								<h2 class="section_box col">
-									Luoghi collegati a <span id="nome1"></span>
+									Luoghi collegati a <span id="nome1" class="font-italic"></span>
 								</h2>
 							</div>
 

+ 437 - 452
Persona.html

@@ -1,464 +1,449 @@
 <!doctype html>
 <html>
+
 <head>
-<meta charset="utf-8">
-<title>MOCKY - Il mockup di RESTORE</title>
-<link href="Untitled1.css" rel="stylesheet">
-<link href="index.css" rel="stylesheet">
-<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
-<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
-<link href="css/place_people.css" rel="stylesheet">
-<link href="css/datafilter.css" rel="stylesheet">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
-<script src="https://d3js.org/d3.v3.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>
-<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
-
-<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
-  <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="screen.css" />
-
-  <link rel="stylesheet" href="js/dist/MarkerCluster.css" />
-  <link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
-  <script src="js/dist/leaflet.markercluster-src.js"></script>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="">
+	<meta name="author" content="">
+
+	<title>Restore - Persona</title>
+
+	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
+	<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+
+	<link href="css/place_people.css" rel="stylesheet">
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
+	<script src="https://d3js.org/d3.v3.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>
 
+	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+	<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
 
+	<link rel="stylesheet" href="js/dist/MarkerCluster.css" />
+	<link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
+	<script src="js/dist/leaflet.markercluster-src.js"></script>
+
+	<link href="css/styles.min.css" rel="stylesheet">
 </head>
-<body>
 
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container-fluid">
-      <img src="img/Logo.png" style="width:100px;">
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="navbar-nav" style="margin-left:auto;">
-          <a class="button-link" href="index.html"><button class="btn btn-menu" type="button">Home</button></a>
-          <a class="button-link" href="http://restore.ovi.cnr.it/"><button class="btn btn-menu" type="button">Progetto</button></a>
-          <a class="button-link" href="ricerca.html"><button class="btn btn-menu" type="button">Ricerca</button></a>
-          <a class="button-link" href="#"><button class="btn btn-menu" type="button">Indici</button></a>
-          <a class="button-link" href="#"><button class="btn btn-menu" type="button">Percorsi</button></a>
-          <a class="button-link" href="standard.html"><button class="btn btn-menu" type="button">Standard</button></a>
-          <div class="dropdown">
-            <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql
-            </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
-              <a class="dropdown-item" href="sparql.html">Query</a>
-            </div>
-          </div>
-          <a class="button-link" href="download.html"><button class="btn btn-menu" type="button">Download</button></a>
-          <div class="dropdown">
-            <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni
-            </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/">CKAN</a>
-              <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/">LOD</a>
-            </div>
-          </div>
-        </div>
-    </div>
-  </nav>
-
-	<div id="container_persona">
-		<div class="row" id="col_graph">
-		    <div class="col-2">
-		      dataset: 
-		    </div>  
-		    <div class="col-10" id="grafo"></div>
+<body>
+	<header class="sticky-top">
+		<nav class="navbar navbar-expand-lg navbar-light bg-white">
+			<div class="container-fluid">
+				<div class="navbar-brand">
+					<img src="img/Logo.png" width="100" alt="Restore" />
+				</div>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" href="index.html">Home</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
+						</li>
+						<li class="nav-item active">
+							<a class="nav-link" href="ricerca.html">Ricerca</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Indici</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Percorsi</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="standard.html">Standard</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
+								<a class="dropdown-item" href="sparql.html">Query</a>
+							</div>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="download.html">Download</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
+								<a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/" target="_blank">CKAN</a>
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/" target="_blank">LOD</a>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+	</header>
+
+	<main>
+		<section id="container_persona">
+			<div id="col_graph">
+				<div class="w-content">
+					<div class="container-fluid">
+						<div class="row">
+							<div class="col-auto">
+								<span>Dataset:</span>
+							</div>
+							<div class="col-auto" id="grafo"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="w-content section-small">
+				<div class="container-fluid">
+					<div class="col box-info">
+						<div class="container-fluid">
+							<div class="row box-info-title">
+								<div class="col">
+									<h1 id="nome_persona" class="box-info-main-title"></h1>
+								</div>
+							</div>
+
+							<!-- <div class="row btn-group" id="map_buttons">
+								<a href="#placeholder_luoghi"><button type="button" id="btn_info" class="btn btn-outline-dark">Luoghi</button></a>
+								<a href="#placeholder_persone"><button type="button" id="btn_toponimi" class="btn btn-outline-dark">Persone</button></a>
+								<a href="#placeholder_documenti"><button type="button" id="btn_riferimenti" class="btn btn-outline-dark">Documenti</button></a>
+							</div> -->
+
+							<div class="row box-info-container">
+								<div class="col" id="info_persona">
+									<div class="row" id="PersonId" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Person id:</span>
+										</div>
+										<div class="col" id="aspo_id"></div>
+									</div>
+
+									<div class="row" id="PersonName">
+										<div class="col-sm-4">
+											<span class="label">Nome:</span>
+										</div>
+										<div class="col" id="nome"></div>
+									</div>
+
+									<div class="row" id="givenName" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Nome proprio:</span>
+										</div>
+										<div class="col" id="nome_proprio"></div>
+									</div>
+
+									<div class="row" id="familyName" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Nome di famiglia:</span>
+										</div>
+										<div class="col" id="nome_famiglia"></div>
+									</div>
+
+									<div class="row" id="gender" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Genere:</span>
+										</div>
+										<div class="col" id="genere"></div>
+									</div>
+
+									<div class="row" id="patronymic" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Patronimico/Matronimico:</span>
+										</div>
+										<div class="col" id="patronimico"></div>
+									</div>
+
+									<div class="row" id="relatives" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Avi:</span>
+										</div>
+										<div class="col" id="avi"></div>
+									</div>
+
+									<div class="row" id="otherNames" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Varianti nome:</span>
+										</div>
+										<div class="col" id="variants"></div>
+									</div>
+
+									<div class="row" id="aliasName" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Alias:</span>
+										</div>
+										<div class="col" id="alias"></div>
+									</div>
+
+									<div class="row" id="BirthDate" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Data di Nascita:</span>
+										</div>
+										<div class="col" id="data_nascita"></div>
+									</div>
+
+									<div class="row" id="BirthPlace" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Luogo di Nascita:</span>
+										</div>
+										<div class="col" id="luogo_nascita"></div>
+									</div>
+
+									<div class="row" id="DeathDate" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Data di Morte:</span>
+										</div>
+										<div class="col" id="data_morte"></div>
+									</div>
+
+									<div class="row" id="DeathPlace" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Luogo di Morte:</span>
+										</div>
+										<div class="col" id="luogo_morte"></div>
+									</div>
+
+									<div class="row" id="spouse" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Coniuge:</span>
+										</div>
+										<div class="col" id="coniuge"></div>
+									</div>
+
+									<div class="row" id="PlaceProvenence" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Provenienza:</span>
+										</div>
+										<div class="col" id="provenienza"></div>
+									</div>
+
+									<div class="row" id="honorific" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Qualifica:</span>
+										</div>
+										<div class="col" id="qualifica"></div>
+									</div>
+
+									<div class="row" id="occupation" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Occupazione:</span>
+										</div>
+										<div class="col" id="occupazione"></div>
+									</div>
+
+									<div class="row" id="roles" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Ruoli:</span>
+										</div>
+										<div class="col" id="ruoli"></div>
+									</div>
+
+									<div class="row" id="groups" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Gruppi di appartenenza:</span>
+										</div>
+										<div class="col" id="gruppi_appartenenza"></div>
+									</div>
+
+									<div class="row" id="BioDescription" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Note:</span>
+										</div>
+										<div class="col" id="bioghist"></div>
+									</div>
+								</div>
+
+								<div class="col-3">
+									<span class="label-ref">Riferimenti</span>
+								</div>
+							</div>
+
+							<hr />
+
+							<div class="placeholder_container">
+								<div id="placeholder_luoghi" class="row">
+									<h2 class="section_box col-12">
+										Luoghi collegati a <span id="nome1" class="font-italic"></span>
+									</h2>
+								</div>
+
+								<div class="row">
+									<div class="col-9">
+										<div id="people_map">
+											<div id="map"></div>
+										</div>
+									</div>
+
+									<div class="col-3" id="references_persona">
+										<p class="head_box_person"><b>Luoghi</b></p>
+										<div id="list_places_person"></div>
+									</div>
+								</div>
+							</div>
+
+							<div class="placeholder_container">
+								<div id="placeholder_persone" class="row">
+									<p class="section_box col-12">Persone collegate a <span id="nome2" class="font-italic"></span></p>
+									<p class="placeholder_info col-12">
+										In questa sezione vengono mostrati massimo 30 collegamenti in considerazione della leggibilità del grafo stesso. <br />
+										Per avere maggiori informazioni sul network clicca <a href="#">qui</a>.
+									</p>
+								</div>
+
+								<div class="row">
+									<div class="col-9">
+										<div id="person_map" style="background-color: #fff; min-height:300px; margin-left:15px; margin-right:15px;">
+											<div id="myWordCloud"></div>
+										</div>
+									</div>
+
+									<div class="col-3" id="references_network">
+										<p class="head_box_person"><b>Persone</b></p>
+										<div id="list_person_network"></div>
+									</div>
+								</div>
+							</div>
+
+							<div class="placeholder_container">
+								<div id="placeholder_documenti" class="row" id="references_documents">
+									<div class="box_results col-12" id="sent">
+										<div class="inner_results container-fluid">
+											<div class="row def_res">
+												<div class="col">
+													<b>Lettere inviate da <span id="nome_au"></span></b>
+												</div>
+												<div class="col num_res">
+													<span><span id="l_send"></span> risultati</span>
+												</div>
+											</div>
+											<div class="row results_rows">
+												<div class="container-fluid" id="letters_send"></div>
+											</div>
+										</div>
+									</div>
+
+									<div class="box_results col-12" id="receive">
+										<div class="inner_results">
+											<div class="def_res">
+												<p><b>Lettere ricevute da <span id="nome_ap"></span> (<span id="l_receive"></span> risultati)</b></p>
+											</div>
+											<div class="results_rows" id="letters_receive">
+											</div>
+										</div>
+									</div>
+
+									<div class="box_results col-12" id="citations">
+										<div class="inner_results">
+											<div class="def_res">
+												<p><b>Documenti redatti da <span id="nome_al"></span> (<span id="n_cit"></span> risultati)</b></p>
+											</div>
+											<div class="results_rows" id="object_cit">
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<div class="row" id="statistiche">
+									<div class="box_results" id="stat1">
+										<div class="inner_results left">
+											<div class="def_res">
+												<p>Luoghi di partenza degli oggetti in arrivo a <span id="nome_st1"></span> con numero di documenti</p>
+											</div>
+											<div id="my_dataviz">
+											</div>
+										</div>
+									</div>
+
+									<div class="box_results" id="stat2">
+										<div class="inner_results right">
+											<div class="def_res">
+												<p>Luoghi di arrivo degli oggetti in partenza da <span id="nome_st2"></span> con numero di documenti</p>
+											</div>
+											<div id="my_dataviz2">
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
+
+	<footer id="footer" class="footer">
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-7 h-100 text-center text-lg-left my-auto">
+					<ul class="list-inline mb-2">
+						<li class="list-inline-item">
+							<a href="#">About</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Contact</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Terms of Use</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Privacy Policy</a>
+						</li>
+					</ul>
+					<p class="small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
+				</div>
+				<div class="col-lg-5 h-100 text-center my-auto">
+					<ul class="partner-list list-inline mb-0">
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/CNR.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RegioneToscana.jpg" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/European-Union.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RepubblicaItaliana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">
+								<img class="img-logo" src="img/GiovaniSi.png" />
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
 		</div>
+	</footer>
 
+	<script src="js/people.js"></script>
 
-		<div class="row">
-		    <div class="col"> <h2 id="nome_persona"></h2>
-		      
-		    </div>  
-		 </div>
-
-		 <div class="row btn-group" id="map_buttons">
-		 	<a href="#placeholder_luoghi"><button type="button" id="btn_info" class="btn btn-outline-dark">Luoghi</button></a>
-		 	<a href="#placeholder_persone"><button type="button" id="btn_toponimi" class="btn btn-outline-dark">Persone</button></a>
-		 	<a href="#placeholder_documenti"><button type="button" id="btn_riferimenti" class="btn btn-outline-dark">Documenti</button></a>
-		 </div>
-
-
-	<div class="row">
-    <div class="col-9" id="info_persona">
-      
-
-       <div class="row" id="PersonId" style="display:none;">
-          <div class="col">
-            Person id: 
-          </div>
-          <div class="col" id="aspo_id">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="PersonName">
-          <div class="col">
-            Nome: 
-          </div> 
-          <div class="col" id="nome">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="givenName" style="display:none;">
-          <div class="col" >
-            Nome proprio: 
-          </div> 
-          <div class="col" id="nome_proprio">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="familyName" style="display:none;">
-          <div class="col">
-            Nome di famiglia: 
-          </div>
-          <div class="col" id="nome_famiglia">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="gender" style="display:none;">
-          <div class="col">
-            Genere: 
-          </div> 
-          <div class="col" id="genere">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="patronymic" style="display:none;">
-          <div class="col">
-            Patronimico/Matronimico: 
-          </div>
-          <div class="col" id="patronimico">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="relatives" style="display:none;">
-          <div class="col">
-            Avi: 
-          </div> 
-          <div class="col" id="avi">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="otherNames" style="display:none;">
-          <div class="col">
-            Varianti nome: 
-          </div>
-          <div class="col" id="variants">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="aliasName" style="display:none;">
-          <div class="col">
-            Alias: 
-          </div> 
-          <div class="col" id="alias">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="BirthDate" style="display:none;">
-          <div class="col">
-            Data di Nascita: 
-          </div> 
-          <div class="col" id="data_nascita">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="BirthPlace" style="display:none;">
-          <div class="col">
-            Luogo di Nascita: 
-          </div> 
-          <div class="col" id="luogo_nascita">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="DeathDate" style="display:none;">
-          <div class="col">
-            Data di Morte: 
-          </div> 
-          <div class="col" id="data_morte">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="DeathPlace" style="display:none;">
-          <div class="col">
-            Luogo di Morte: 
-          </div> 
-          <div class="col" id="luogo_morte">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="spouse" style="display:none;">
-          <div class="col">
-            Coniuge: 
-          </div> 
-          <div class="col" id="coniuge">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="PlaceProvenence" style="display:none;">
-          <div class="col">
-            Provenienza: 
-          </div> 
-          <div class="col" id="provenienza">
-            
-          </div>  
-       </div>
-
-       <div class="row" id="honorific" style="display:none;">
-          <div class="col">
-            Qualifica: 
-          </div>
-          <div class="col" id="qualifica">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="occupation" style="display:none;">
-          <div class="col">
-            Occupazione: 
-          </div> 
-          <div class="col" id="occupazione">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="roles" style="display:none;">
-          <div class="col">
-            Ruoli: 
-          </div> 
-          <div class="col" id="ruoli">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="groups" style="display:none;">
-          <div class="col">
-            Gruppi di appartenenza: 
-          </div> 
-          <div class="col" id="gruppi_appartenenza">
-             
-          </div>  
-       </div>
-
-       <div class="row" id="BioDescription" style="display:none;">
-          <div class="col">
-            Note: 
-          </div> 
-          <div class="col" id="bioghist">
-             
-          </div>  
-       </div>
-
-    </div>
-
-    <div class=col-3>
-    	<h3>Riferimenti</h3>
-    </div>
-
-</div>
-
-<div id="placeholder_luoghi" class="row" style="margin-top:20px;">
-	<p class="section_box">Luoghi collegati a <span id="nome1"></span></p>
-</div>
-<div class="row">
-    <div class="col-9">
-      <div class="row">
-        <div class="col" id="people_map">
-          <div id="map"></div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-3" id="references_persona">
-    	<div class="row">
-  			<div class="col">
-  		      <p class="head_box_person"><b>Luoghi</b></p>
-  			</div>
-		  </div>
-  		<div class="row">
-  			 <div class="col" id="list_places_person">
-  			       
-  			 </div> 
-  		</div> 
-    	
-    </div>
-  </div>
-
-  <div id="placeholder_persone" class="row" style="width:100%; margin-top:20px;">
-  	<p class="section_box">Persone collegate a <span id="nome2"></span></p>
-    </div>
-  <div class="row" style="width:100%;">
-      <div class="col-9" >
-        <div class="row" style="height:100%;">
-          <div class="col" id="person_map" style="background-color: #fff; min-height:300px; margin-left:15px; margin-right:15px;">
-            <div id="myWordCloud"></div>
-        <!-- CHENGE HERE : DELETE SVG AND CHANGE ID TO myWordCloud -->
-        </div>
-      </div>
-    </div>
-
-    <div class="col-3" id="references_network">
-      <div class="row">
-        <div class="col">
-            <p class="head_box_person"><b>Persone</b></p>
-        </div>
-      </div>
-      <div class="row">
-         <div class="col" id="list_person_network">
-               
-         </div> 
-      </div> 
-      
-    </div>
-  </div>
-
-    <div id="placeholder_documenti" class="row" id="references_documents" style="width:100%;">
-      
-        <div class="box_results" id="sent">
-            <div class="inner_results left">
-              <div class="def_res">
-                <p><b>Lettere inviate da <span id="nome_au"></span> (<span id="l_send"></span> risultati)</b></p>
-              </div>
-              <div class="results_rows" id="letters_send">
-              </div>
-            </div>
-          </div>
-        
-          <div class="box_results" id="receive">
-            <div class="inner_results right">
-              <div class="def_res">
-                <p><b>Lettere ricevute da <span id="nome_ap"></span> (<span id="l_receive"></span> risultati)</b></p>
-              </div>
-              <div class="results_rows" id="letters_receive">
-              </div>
-            </div>
-          </div>
-
-          <div class="box_results" id="citations">
-            <div class="inner_results left">
-              <div class="def_res">
-                <p><b>Documenti redatti da <span id="nome_al"></span> (<span id="n_cit"></span> risultati)</b></p>
-              </div>
-              <div class="results_rows" id="object_cit">
-              </div>
-            </div>
-          </div>
-
-      </div>
-
-      <div class="row" id="statistiche">
-      
-          <div class="box_results" id="stat1">
-            <div class="inner_results left">
-              <div class="def_res">
-                <p>Luoghi di partenza degli oggetti in arrivo a <span id="nome_st1"></span> con numero di documenti</p>
-              </div>
-              <div id="my_dataviz">
-              </div>
-            </div>
-          </div>
-
-          <div class="box_results" id="stat2">
-            <div class="inner_results right">
-              <div class="def_res">
-                <p>Luoghi di arrivo degli oggetti in partenza da <span id="nome_st2"></span> con numero di documenti</p>
-              </div>
-              <div id="my_dataviz2">
-              </div>
-            </div>
-          </div>
-      </div>
-  </div>
-
-</div>
-
-  
-
-<div id="footer">
-    <footer class="footer bg-dark">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
-          <ul class="list-inline mb-2">
-            <li class="list-inline-item">
-              <a href="#">About</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Contact</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Terms of Use</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Privacy Policy</a>
-            </li>
-          </ul>
-          <p class="text-muted small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
-        </div>
-        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
-          <ul class="list-inline mb-0">
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/CNR.png" />
-              </a>
-            </li>
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/RegioneToscana.jpg" />
-              </a>
-            </li>
-            <li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/European-Union.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/RepubblicaItaliana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/GiovaniSi.png" />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</div>
-<script src="js/people.js"></script>
-<!-- Bootstrap core JavaScript -->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+	<!-- Bootstrap core JavaScript -->
+	<script src="vendor/jquery/jquery.min.js"></script>
+	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>

+ 0 - 29
css/OA.css

@@ -1,7 +1,3 @@
-.oa-title {
-    margin-bottom: 35px;
-}
-
 #time {
     color: #898989;
     font-style: italic;
@@ -15,28 +11,3 @@
     color: #696969;
     font-size: 24px;
 }
-
-#nome_oggetto {
-    color: #b61924;
-    font-weight: 400;
-    font-size: 32px;
-    margin-bottom: 0;
-}
-
-#info_OA > .row {
-    margin-bottom: 10px;
-}
-
-#info_OA .label {
-  font-weight: 600;
-}
-
-#placeholder_luoghi {
-    margin-top: 25px;
-}
-
-.oa-box-info {
-  background-color: white;
-  border-radius: 10px;
-  padding: 25px 20px;
-}

+ 97 - 28
css/place_people.css

@@ -222,18 +222,50 @@ header.masthead {
   padding: 10px 0;
 }
 
-#nome_luogo{
-  font-size: 32px;
-  font-weight: 300;
+.box-info-container {
+  margin-bottom: 30px;
+}
+
+.box-info-container .label {
+  font-weight: 600;
+}
+
+.box-info-container .label-ref {
+  font-size: 19px;
+  font-weight: 600;
+}
+
+.box-info-container > .row {
+  margin-bottom: 10px;
+}
+
+.box-info {
+  background-color: white;
+  border-radius: 10px;
+  padding: 35px 25px;
+}
+
+.box-info-title {
+  margin-bottom: 35px;
+}
+
+.box-info-main-title {
   color: #b61924;
+  font-weight: 400;
+  font-size: 32px;
+  margin-bottom: 0;
 }
 
-#nome_persona {
+#nome_luogo{
   font-size: 32px;
   font-weight: 300;
   color: #b61924;
 }
 
+#placeholder_luoghi {
+  margin-top: 25px;
+}
+
 #container_references { 
   margin-left:15px; 
   margin-right:15px;
@@ -273,14 +305,14 @@ a {
 }
 
 .box_results {
-  width: 50%;
+  margin-bottom: 35px;
 }
 
 .inner_results {
-  width: 98%;
   background-color: #ffffffa1;
-  font-size: 12px;
-  margin-bottom: 10px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid;
 }
 
 .inner_results a:link {
@@ -304,33 +336,38 @@ a {
 }
 
 .results_rows {
-  padding: 5%;
   height: 300px;
-  overflow: scroll;
-
-}
-
-.box_results .left {
-  margin-left:0px;
-  margin-right:auto;
-}
-
-.box_results .right {
-  margin-right:0px;
-  margin-left:auto;
+  overflow: auto;
 }
 
 .def_res {
   background-color: #3f4149;
   color: #fff;
-  padding: 2% 5%;
-  font-size: 16px;
+  padding-top: 7px;
+  padding-bottom: 10px;
+  font-weight: 600;
+}
+
+.def_res .num_res {
+  display: flex;
+  justify-content: end;
+  align-items: end;
 }
 
 .def_res p {
   margin-bottom: 0;
 }
 
+.res {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  font-size: 14px;
+}
+
+.res:not(:last-child) {
+  border-bottom: 1px solid #000;
+}
+
 div#layout {
   text-align: center;
 }
@@ -469,28 +506,60 @@ text.source {
 }
 
 .section_box {
-  font-size: 16px;
+  font-size: 17px;
   text-transform: uppercase;
   font-weight: 600;
+  margin-bottom: 15px;
+}
+
+.placeholder_container {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.placeholder_info {
+  font-size: 15px;
+}
+
+.head_box_person {
+  font-size: 18px;
 }
 
 #list_places_person {
-  overflow-y: auto;
+  overflow: auto;
   height:55vh;
 }
 
-#list_places_person .row {
+.item-place-person {
   border-bottom: 1px solid #adadad;
+  display: flex;
+  padding-bottom: 7px;
+  padding-right: 7px;
+  padding-left: 7px;
+  margin-bottom: 7px;
+}
+
+.item-place-person .item-place-person-label {
+  font-size: 15px;
+}
+
+.item-place-person .item-place-person-action {
+  display: flex;
+  padding-left: 10px;
+  margin-left: auto;
+}
+
+.item-place-person .item-place-person-action div:not(:last-child) {
+  margin-right: 10px;
 }
 
 #list_places_person .col-10 {
-  padding-left: 0px;
   font-size: 13px;
   font-weight:400;
 }
 
 #list_person_network {
-  overflow: scroll;
+  overflow: auto;
   height:55vh;
 }
 

+ 7 - 7
js/people.js

@@ -332,7 +332,7 @@ function handle_Letters(json) {
   var Receive_Letters = "";
 
   for (var key in send) {
-    Send_Letters += "<div class='row'><div class='col-10'>" + send[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+    Send_Letters += "<div class='row res'><div class='col-10'>" + send[key] + "</div><div class='col d-flex align-items-start justify-content-end'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
   }
 
   for (var key in receive) {
@@ -377,8 +377,8 @@ function handle_map(json) {
         var coord = value['coordinates']['value'];
         const coordinates = coord.split(", ");
         loc.push(label);
-        myPlaces += "<div class='row'><div class='clickPlace col-10' data-point='"+ coordinates + "'>" + label + "</div><div class='luogo col' id='" + 
-    uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div>";
+        myPlaces += "<div class='item-place-person'><div class='clickPlace item-place-person-label' data-point='"+ coordinates + "'>" + label + "</div><div class='item-place-person-action'><div class='luogo' id='" + 
+    uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div></div>";
         loc.push(coordinates[0]);
         lat += parseInt(coordinates[0]);
         loc.push(coordinates[1]);
@@ -470,10 +470,10 @@ function handle_network(json) {
         temp = count;
         sum += temp;*/
         tempArray.push([text, num]);
-        ArrayNames += "<div class='row'><div class='col-9'>" + 
-        text + "<br /><span class='num_occ'>[Co-occorrenze: " + num + "]</span></div><div class='col'><a target='_blank' href='" + 
-        link + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona col' id='" + 
-        link + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div>";
+        ArrayNames += "<div class='item-place-person'><div class='item-place-person-label'>" +
+        text + "<br /><span class='num_occ'>[Co-occorrenze: " + num + "]</span></div><div class='item-place-person-action'><div><a target='_blank' href='" +
+        link + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona' id='" +
+        link + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div></div>";
       });
 
   if (tempArray.length < 8) {