Restyling grafica pagina oggetto e bugfix

OA.html

@@ -108,76 +108,76 @@
 								<div class="col">
 									<span id="time"></span>
 									<h1 id="nome_oggetto" class="box-info-main-title"></h1>
-									<span id="artist_name"></span>
+									<span class="box-info-subtitle" id="artist_name"></span>
 								</div>
 							</div>
 
 							<div class="row box-info-container">
 								<div class="col" id="info_OA">
-									<div class="row" id="NCT" style="display:none;">
+									<div class="row mb-2" id="NCT" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Codice Univoco del Bene (NCT):</span>
 										</div>
 										<div class="col" id="identifier"></div>
 									</div>
 
-									<div class="row" id="SGTT" style="display:none;">
+									<div class="row mb-2" id="SGTT" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Titolo:</span>
 										</div>
 										<div class="col" id="title"></div>
 									</div>
 
-									<div class="row" id="OGTD" style="display:none;">
+									<div class="row mb-2" id="OGTD" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Oggetto:</span>
 										</div>
 										<div class="col" id="type"></div>
 									</div>
 
-									<div class="row" id="LDCN" style="display:none;">
+									<div class="row mb-2" id="LDCN" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Luogo di conservazione:</span>
 										</div>
 										<div class="col" id="owner"></div>
 									</div>
 
-									<div class="row" id="LDCS" style="display:none;">
+									<div class="row mb-2" id="LDCS" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Localizzazione:</span>
 										</div>
 										<div class="col" id="location"></div>
 									</div>
 
-									<div class="row" id="SGTI" style="display:none;">
+									<div class="row mb-2" id="SGTI" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Soggetto:</span>
 										</div>
 										<div class="col" id="subject"></div>
 									</div>
 
-									<div class="row" id="AUT" style="display:none;">
+									<div class="row mb-2" id="AUT" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Attribuzioni:</span>
 										</div>
 										<div class="col" id="artist"></div>
 									</div>
 
-									<div class="row" id="CMM" style="display:none;">
+									<div class="row mb-2" id="CMM" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Committente:</span>
 										</div>
 										<div class="col" id="client"></div>
 									</div>
 
-									<div class="row" id="MIS" style="display:none;">
+									<div class="row mb-2" id="MIS" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Dimensioni:</span>
 										</div>
 										<div class="col" id="dimensions"></div>
 									</div>
 
-									<div class="row" id="MTC" style="display:none;">
+									<div class="row mb-2" id="MTC" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Materia e Tecnica:</span>
 										</div>
@@ -187,14 +187,14 @@
 										</div>
 									</div>
 
-									<div class="row" id="STCC" style="display:none;">
+									<div class="row mb-2" id="STCC" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Condizione:</span>
 										</div>
 										<div class="col" id="condition"></div>
 									</div>
 
-									<div class="row" id="NSC" style="display:none;">
+									<div class="row mb-2" id="NSC" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Notizie Storico Critiche:</span>
 										</div>

Persona.html

@@ -110,148 +110,142 @@
 								</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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" 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="row mb-2" id="BioDescription" style="display:none;">
 										<div class="col-sm-4">
 											<span class="label">Note:</span>
 										</div>
@@ -264,6 +258,18 @@
 								</div> -->
 							</div>
 
+							<div class="d-flex justify-content-end" id="map_buttons">
+								<a href="#placeholder_luoghi">
+									Luoghi <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+								<a href="#placeholder_persone">
+									Persone <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+								<a href="#placeholder_documenti">
+									Documenti <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+							</div>
+
 							<hr />
 
 							<div class="placeholder_container">

css/OA.css

@@ -1,13 +0,0 @@
-#time {
-    color: #898989;
-    font-style: italic;
-    font-weight: 400;
-    font-size: 19px;
-}
-
-#artist_name {
-    font-style: italic;
-    font-weight: 400;
-    color: #696969;
-    font-size: 24px;
-}

css/pages.css

@@ -162,14 +162,6 @@ header.masthead {
   width:auto;
 }
 
-.row {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  padding:1%;
-}
-
 pre {
   width: 100%;
   background-color: #fff;
@@ -297,24 +289,6 @@ tr:nth-child(odd) {
   color: #fff;
 }
 
-#container_oggetto .col{
-  padding-left:0px;
-  padding-right: 0px;
-}
-
-#col_graph {
-  background-color: #b61924;
-  color: #fff;
-  font-size: 16px;
-}
-
-#container_oggetto {
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: #fff;
-}
-
 #nome_oggetto {
     color: #b61924;
     font-weight: 400;

css/place_people.css

@@ -215,47 +215,6 @@ header.masthead {
   background-color: #fff;
 }
 
-#col_graph {
-  background-color: #b61924;
-  color: #fff;
-  font-size: 16px;
-  padding: 10px 0;
-}
-
-.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_luogo{
   font-size: 32px;
   font-weight: 300;
@@ -266,24 +225,14 @@ header.masthead {
   margin-top: 25px;
 }
 
-#container_references { 
-  margin-left:15px; 
+#container_references {
+  margin-left:15px;
   margin-right:15px;
   width: 80%;
   margin-left: auto;
   margin-right:auto;
 }
 
-#map_buttons button{
-  padding: 0 1rem;
-  font-size: 1rem;
-  border: 0;
-  border-radius: 15px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #30383f;
-}
-
 #place_info {
   display: none;
 }

object.html

@@ -1,284 +1,305 @@
 <!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/pages.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.v4.min.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>
+<head>
+	<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 - Oggetto</title>
 
-</head>
-<body>
+	<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">
 
-	<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>
+	<link href="css/pages.css" rel="stylesheet">
 
-	<div id="container_oggetto">
-		<div class="row" id="col_graph">
-		    <div class="col-2">
-		      dataset: 
-		    </div>  
-		    <div class="col-10" id="grafo"></div>
-		</div>
+	<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.v4.min.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>
 
-     <div class="row">
-        <div class="col"> 
-          <h2 id="nome_oggetto"></h2>
-          <h4 id="time"></h4>
-          <h3 id="nome_autore"></h3>
-        </div>  
-     </div>
+	<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>
 
-    <!-- <div class="row btn-group" id="map_buttons">
-      <a href="#placeholder_informazioni"><button type="button" id="btn_info" class="btn btn-outline-dark">Informazioni</button></a>
-      <a href="#placeholder_contenuti"><button type="button" id="btn_toponimi" class="btn btn-outline-dark">Contenuti</button></a>
-      <a href="#placeholder_localizzazione"><button type="button" id="btn_riferimenti" class="btn btn-outline-dark">Localizzazione</button></a>
-     </div> -->
+	<link href="css/styles.min.css" rel="stylesheet">
+</head>
 
+<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>
 
-  <div class="row" id="placeholder_informazioni" class="row" style="margin-top:20px;">
-    <h2 class="section_box">Informazioni sull'oggetto fisico</h2>
-  </div>
-  <div class="row">
-    <div class="col" id="info_oggetto">
-      
+	<main>
+		<section id="container_oggetto">
+			<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-10" id="grafo"></div>
+						</div>
+					</div>
+				</div>
+			</div>
 
-       <div class="row" id="ID" style="display:none;">
-          <div class="col-4">
-            Identificatore: 
-          </div>
-          <div class="col" id="identifier">
-             
-          </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">
+									<span id="time"></span>
+									<h1 id="nome_oggetto" class="box-info-main-title"></h1>
+									<span class="box-info-subtitle" id="nome_autore"></span>
+								</div>
+							</div>
 
-       <div class="row" id="conservazione" style="display:none;">
-          <div class="col-4">
-            Localizzazione: 
-          </div>
-          <div class="col" id="owner">
-             
-          </div>  
-       </div>
+							<div class="row box-info-container">
+								<div class="col-12" style="margin-bottom: 25px;">
+									<div id="placeholder_informazioni">
+										<h2 class="section_box">Informazioni sull'oggetto fisico</h2>
+									</div>
 
-       <div class="row" id="localizzazione" style="display:none;">
-          <div class="col-4">
-            Luogo di conservazione: 
-          </div> 
-          <div class="col" id="location">
-            
-          </div>  
-       </div>
+									<div id="info_oggetto">
+										<div class="row mb-2" id="ID" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Identificatore:</span>
+											</div>
+											<div class="col" id="identifier"></div>
+										</div>
 
-       <div class="row" id="persone" style="display:none;">
-          <div class="col-4">
-            Persone: 
-          </div>
-          <div class="col" id="author">
-            
-          </div>  
-       </div>
+										<div class="row mb-2" id="conservazione" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Localizzazione:</span>
+											</div>
+											<div class="col" id="owner"></div>
+										</div>
 
+										<div class="row mb-2" id="localizzazione" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Luogo di conservazione:</span>
+											</div>
+											<div class="col" id="location"></div>
+										</div>
 
-       <div class="row" id="consistenza" style="display:none;">
-          <div class="col-4">
-            Dimensioni: 
-          </div> 
-          <div class="col" id="dimensions">
-            
-          </div>  
-       </div>
+										<div class="row mb-2" id="persone" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Persone:</span>
+											</div>
+											<div class="col" id="author"></div>
+										</div>
 
-       <div class="row" id="materia" style="display:none;">
-          <div class="col-4">
-            Materiale: 
-          </div>
-          <div class="col" id="materials"></div>  
-       </div>
+										<div class="row mb-2" id="consistenza" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Dimensioni:</span>
+											</div>
+											<div class="col" id="dimensions"></div>
+										</div>
 
-       <div class="row" id="notes" style="display:none;">
-          <div class="col-4">
-            Note: 
-          </div> 
-          <div class="col" id="nota">
-            
-          </div>  
-       </div>
+										<div class="row mb-2" id="materia" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Materiale:</span>
+											</div>
+											<div class="col" id="materials"></div>
+										</div>
 
-  </div>
-</div>
+										<div class="row mb-2" id="notes" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Note:</span>
+											</div>
+											<div class="col" id="nota"></div>
+										</div>
+									</div>
+								</div>
 
-<div id="placeholder_contenuti" class="row" style="margin-top:20px;">
-	<h2 class="section_box">Contenuti informativi</h2>
-</div>
-<div class="row">
-    <div class="col" id="info_oggetto">
-      
+								<div class="col-12">
+									<div id="placeholder_contenuti">
+										<h2 class="section_box">Contenuti informativi</h2>
+									</div>
 
-       <div class="row" id="titolo" style="display:none;">
-          <div class="col-4">
-            Titolo: 
-          </div> 
-          <div class="col" id="title">
-            
-          </div>  
-       </div>
+									<div id="info_oggetto">
+										<div class="row mb-2" id="titolo" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Titolo:</span>
+											</div>
+											<div class="col" id="title"></div>
+										</div>
 
-       <div class="row" id="tipo" style="display:none;">
-          <div class="col-4" >
-            Oggetto: 
-          </div> 
-          <div class="col" id="type">
-             
-          </div>  
-       </div>
+										<div class="row mb-2" id="tipo" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Oggetto:</span>
+											</div>
+											<div class="col" id="type"></div>
+										</div>
 
-       <div class="row" id="argomento" style="display:none;">
-          <div class="col-4">
-            Soggetto: 
-          </div>
-          <div class="col" id="subject">
-            
-          </div>  
-       </div>
+										<div class="row mb-2" id="argomento" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Soggetto:</span>
+											</div>
+											<div class="col" id="subject"></div>
+										</div>
 
-       <div class="row" id="NSC" style="display:none;">
-          <div class="col-4">
-            Notizie Storico Critiche: 
-          </div> 
-          <div class="col" id="description">
-            
-          </div>  
-       </div>
+										<div class="row mb-2" id="NSC" style="display:none;">
+											<div class="col-sm-4">
+												<span class="label">Notizie Storico Critiche:</span>
+											</div>
+											<div class="col" id="description"></div>
+										</div>
+									</div>
+								</div>
+							</div>
 
+							<!-- <div class="d-flex justify-content-end" id="map_buttons">
+								<a href="#placeholder_luoghi">
+									Informazioni <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+								<a href="#placeholder_persone">
+									Contenuti <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+								<a href="#placeholder_documenti">
+									Localizzazione <i class="fas fa-arrow-down" aria-hidden="true"></i>
+								</a>
+							</div> -->
 
-    </div>
-</div>
+							<!-- <hr /> -->
 
-<!-- <div id="placeholder_localizzazione" class="row" style="margin-top:20px;">
-  <p class="section_box">Localizzazione</p>
-</div> -->
+							<!-- <div class="placeholder_container">
+								<div id="placeholder_localizzazione" class="row">
+									<div class="col-12">
+										<p class="section_box">Localizzazione</p>
+									</div>
+								</div>
+							</div> -->
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
 
-  
-</div>
+	<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/object.js"></script>
 
-<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/object.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>

scss/_global.scss

@@ -67,3 +67,68 @@ a {
         margin-right: auto;
     }
 }
+
+// Components
+.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 #time {
+    color: #898989;
+    font-style: italic;
+    font-weight: 400;
+    font-size: 19px;
+}
+
+.box-info .box-info-subtitle {
+    font-style: italic;
+    font-weight: 400;
+    color: #696969;
+    font-size: 24px;
+}
+
+.box-info-title {
+    margin-bottom: 35px;
+}
+
+.box-info-main-title {
+    color: #b61924;
+    font-weight: 400;
+    font-size: 32px;
+    margin-bottom: 0;
+}
+
+#map_buttons a {
+    color: #30383f;
+    font-size: 15px;
+}
+
+#map_buttons a:not(:last-child) {
+    margin-right: 20px;
+}
+
+#col_graph {
+    background-color: #b61924;
+    color: #fff;
+    font-size: 16px;
+    padding: 10px 0;
+}