Restyling grafica ricerca avanzata

css/advanced-search.css

@@ -6,7 +6,7 @@
   margin-top: 20px;
 }
 
-#advanced_search_intro h2 {
+#advanced_search_intro h1 {
   text-align: center;
   font-size: 2.375rem;
   font-weight: 400;
@@ -117,48 +117,43 @@
   height: 45px;
 }
 
-#box_results {
-    background: #f8f9fa;
-    border: 1px solid #c8ccd1;
-    border-radius: 2px 2px 0 0;
-    border-bottom: none;
+#box_results h2 {
+  text-align: center;
+  font-size: 2.375rem;
+  font-weight: 400;
+  margin-bottom: 0.9375rem;
 }
 
-#box_results h3 {
-    padding-left: 1em;
-    font-size: 20px;
-    padding-top: 0.5em
+.query-results-container {
+  background: white;
+  max-width: 1000px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 30px;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 #query_results {
-  padding-left: 2em;
-    padding-right: 2em;
-    font-size: .875em;
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Lato,Helvetica,Arial,sans-serif;
-    background-color: #fff;
-    font-weight: 400;
-    line-height: 1.6;
-    border: 1px solid #c8ccd1;
-    border-radius: 0 0 2px 2px;
-    text-align: justify;
-    min-height: 50px;
-    margin-bottom: 50px;
-    padding: 20px 50px;
-    display: table;
-}
-
-.t_head {
-  font-weight: 600;
+  display: table;
+  font-size: .875em;
+  border-collapse: collapse;
 }
 
 #query_results .row {
-  border:  1px solid #c8ccd1;
   display: table-row;
+  background: white;
+  border-bottom: 1px solid #e3e3e3;
+}
+
+#query_results .row.t_head {
+  font-weight: 600;
+  background: whitesmoke;
+  border-bottom: 0;
 }
 
 #query_results .row .col-auto {
-  border:  1px solid #c8ccd1;
-  padding: 1%;
+  padding: 10px 20px;
 }
 
 #query_results>.row>* {

ricerca_avanzata.html

@@ -77,7 +77,7 @@
 		<section id="advanced_search_intro">
 			<div class="container">
 				<div class="section-small">
-					<h2>Ricerca avanzata</h2>
+					<h1>Ricerca avanzata</h1>
 					<p>Questa è l'interfaccia per la ricerca avanzata, dedicata a coloro i quali hanno già familiarità con i dataset del progetto e desiderano cercare una risorsa specifica. In questa sezione è possibile specificare i campi di ricerca e personalizzare le proprie query. Nella visualizzazione di default avete a disposizione un pulsante "Aggiungi", premendolo verrà creato un nuovo parametro di ricerca. Per ciascun parametro di ricerca è possibile selezionare la tipologia del parametro dal menù a tendina sulla sinistra e digitare manualmente il valore che si vuole cercare. Il numero di parametri da aggiungere è a discrezione dell'utente, tuttavia è possibile selezionare ciascuna tipologia di parametro una sola volta altrimenti la ricerca non darà risultati corretti. <br />
 						Per semplificare la ricerca si può selezionare una categoria di risorse dal menù a tendina dedicato che di default è impostato su "Tutte le categorie". Selezionando una categoria a scelta tra <i>Oggetto</i>, <i>Lettera</i>, <i>Opera d'Arte</i>, <i>Persona</i> e <i>Luogo</i> si apriranno tutti i parametri esistenti per quella categoria di risorsa. Non sarà possibile aggiungere altri parametri con il pulsante "Aggiungi" in quanto tutti i parametri disponibili saranno già aperti e non sarà possibile cambiare la scelta attraverso il menù a tendina ma solo compilare i rispettivi valori. La composizione libera della propria ricerca è prerogativa della schermata di default a cui è possibile tornare selezonando "Tutte le categorie" dal relativo menù a tendina. <br />
 						Dal menù a tendina dedicato alle collezioni è possibile selezionare il dataset di riferimento su cui effettuare la ricerca.<br />
@@ -185,77 +185,14 @@
 			<div class="container">
 				<div class="section-small">
 					<div id="box_results">
-						<h3>Risultati</h3>
-						<div class="container" id="query_results">
+						<h2>Risultati</h2>
+						<div class="query-results-container">
+							<div id="query_results"></div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</section>
-
-
-		<!-- <div id="search-option-area">
-			<div id="search-option-general" class="box General">
-				<div id="drop-down-content"></div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToList()">Aggiungi parametro</button>
-				</div>
-			</div>
-
-			<div id="search-option-person" class="box Person">
-				<div id="drop-down-content-Person">
-				</div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToListPerson()">Aggiungi parametro</button>
-				</div>
-			</div>
-
-			<div id="search-option-OA" class="box OA">
-				<div id="drop-down-content-OA">
-				</div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToListOA()">Aggiungi parametro</button>
-				</div>
-			</div>
-
-			<div id="search-option-letter" class="box Letter">
-				<div id="drop-down-content-Letter">
-				</div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToListLetter()">Aggiungi parametro</button>
-				</div>
-			</div>
-
-			<div id="search-option-object" class="box Object">
-				<div id="drop-down-content-Object">
-				</div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToListObject()">Aggiungi parametro</button>
-				</div>
-			</div>
-
-			<div id="search-option-place" class="box Place">
-				<div id="drop-down-content-place">
-				</div>
-				<div>
-					<button type="button" id="aggiungi" class="add" onclick="addToListPlace()">Aggiungi parametro</button>
-				</div>
-			</div>
-		</div> -->
-
-
-		<!-- <div id="wb_ClipArt1">
-			<button class="btn btn-xl btn-outline-dark" onclick="getParameters()" type="button" id="ClipArt1" style="height:100%;">
-				<i class="fa fa-search mr-2"></i>
-				Esegui la query
-			</button>
-		</div> -->
-
-		<!-- <div id="box_results">
-			<h3>Risultati</h3>
-			<div class="container" id="query_results">
-			</div>
-		</div> -->
 	</main>
 
 	<footer id="footer" class="footer">