Search sidebar (WIP)
This commit is contained in:
@@ -65,9 +65,9 @@
|
|||||||
</button>
|
</button>
|
||||||
<button class="button is-white mr-2 mt-1" title="Cerca"
|
<button class="button is-white mr-2 mt-1" title="Cerca"
|
||||||
data-id="search"
|
data-id="search"
|
||||||
data-action="modal#open">
|
data-action="menu#toggleMenu">
|
||||||
<span class="icon">
|
<span class="icon" data-id="search" data-action="menu#toggleMenu">
|
||||||
<i class="fa fa-search"></i>
|
<i data-id="search" class="fa fa-search"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,6 +82,64 @@
|
|||||||
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
|
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
|
||||||
|
data-menu-target="search" data-controller="layer form">
|
||||||
|
<h1 class="is-size-5">Ricerca</h1>
|
||||||
|
<form id="search-form" method="POST" data-form-target="search" data-action="submit->form#submitSearch">
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Testo libero</label>
|
||||||
|
<div class="control is-full-width">
|
||||||
|
<input class="input" type="text" name="text" placeholder="Inserire parole chiave" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Categoria sito</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select">
|
||||||
|
<select name="category">
|
||||||
|
<option default value="">-- Scegliere la categoria del sito --</option>
|
||||||
|
<option value="site">Sito conservato</option>
|
||||||
|
<option value="not_conserved">Sito non conservato</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Tecnica muraria</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select">
|
||||||
|
<select name="technique">
|
||||||
|
<option default value="">-- Scegliere tecnica --</option>
|
||||||
|
<option>Opera poligonale</option>
|
||||||
|
<option>Opera incerta</option>
|
||||||
|
<option>Opera reticolata</option>
|
||||||
|
<option>Opera laterizia</option>
|
||||||
|
<option>Opera mista</option>
|
||||||
|
<option>Opera cementizia</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field is-grouped mt-5 mb-0 pb-0">
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-link" type="submit">
|
||||||
|
<span>Cerca</span>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-link is-light" type="reset">
|
||||||
|
<span>Cancella filtri</span>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
<div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
|
<div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
|
||||||
data-menu-target="menu" data-controller="layer">
|
data-menu-target="menu" data-controller="layer">
|
||||||
<!-- Template to build menu items dynamically -->
|
<!-- Template to build menu items dynamically -->
|
||||||
@@ -312,87 +370,6 @@
|
|||||||
<button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
|
<button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<!-- Search modal -->
|
|
||||||
<div class="modal" id="search" data-modal-target="modal" data-controller="form">
|
|
||||||
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
|
|
||||||
<div class="modal-content box has-background-white pt-4 mr-4 ml-4 pl-4 pr-4" style="min-height: 400px;">
|
|
||||||
<h1 class="is-size-4 has-text-centered">Ricerca</h1>
|
|
||||||
<form id="search-form" method="POST" data-form-target="search" data-action="submit->form#submitSearch">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label">Testo libero</label>
|
|
||||||
<div class="control is-full-width">
|
|
||||||
<input class="input" type="text" name="text" form="search-form" placeholder="Inserire parole chiave">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="columns mt-5 pt-3">
|
|
||||||
<div class="field column">
|
|
||||||
<label class="label">Categoria sito</label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="select">
|
|
||||||
<select name="category">
|
|
||||||
<option default value="">-- Scegliere la categoria del sito --</option>
|
|
||||||
<option value="site">Sito conservato</option>
|
|
||||||
<option value="not_conserved">Sito non conservato</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="field column">
|
|
||||||
<label class="label">Categoria reperto</label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="select">
|
|
||||||
<select>
|
|
||||||
<option default>-- Scegliere la categoria del reperto --</option>
|
|
||||||
<option>Scultura</option>
|
|
||||||
<option>Epigrafe</option>
|
|
||||||
<option>Elemento architettonico</option>
|
|
||||||
<option>Decorazione parietale</option>
|
|
||||||
<option>Pavimentazione</option>
|
|
||||||
<option>Arredo</option>
|
|
||||||
<option>Abbigliamento e ornamenti personali</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<div class="field column">
|
|
||||||
<label class="label">Tecnica muraria</label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="select">
|
|
||||||
<select name="technique">
|
|
||||||
<option default>-- Scegliere tecnica --</option>
|
|
||||||
<option>Opera poligonale</option>
|
|
||||||
<option>Opera incerta</option>
|
|
||||||
<option>Opera reticolata</option>
|
|
||||||
<option>Opera laterizia</option>
|
|
||||||
<option>Opera mista</option>
|
|
||||||
<option>Opera cementizia</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field is-grouped mt-5 mb-0 pb-0 has-text-right">
|
|
||||||
<div class="control">
|
|
||||||
<button class="button is-link" type="submit">
|
|
||||||
<span>Cerca</span>
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button class="button is-link is-light" type="reset">
|
|
||||||
<span>Cancella filtri</span>
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-times"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Bibliography citations template -->
|
<!-- Bibliography citations template -->
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export default class extends Controller {
|
|||||||
const data = new FormData(event.target);
|
const data = new FormData(event.target);
|
||||||
|
|
||||||
for (const entry of data.entries()) {
|
for (const entry of data.entries()) {
|
||||||
console.log(entry);
|
console.log(entry[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export default class extends Controller {
|
|||||||
'list',
|
'list',
|
||||||
'menu',
|
'menu',
|
||||||
'cartography',
|
'cartography',
|
||||||
|
'search',
|
||||||
'icon'
|
'icon'
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -86,12 +87,17 @@ export default class extends Controller {
|
|||||||
toggleMenu(event) {
|
toggleMenu(event) {
|
||||||
const menuId = event.target.dataset.id;
|
const menuId = event.target.dataset.id;
|
||||||
|
|
||||||
|
console.debug(menuId, event.target);
|
||||||
|
|
||||||
// Stupid...
|
// Stupid...
|
||||||
if (menuId === 'main') {
|
if (menuId === 'main') {
|
||||||
this.menuTarget.classList.toggle('is-hidden');
|
this.menuTarget.classList.toggle('is-hidden');
|
||||||
if (!this.cartographyTarget.classList.contains('is-hidden')) {
|
if (!this.cartographyTarget.classList.contains('is-hidden')) {
|
||||||
this.cartographyTarget.classList.add('is-hidden');
|
this.cartographyTarget.classList.add('is-hidden');
|
||||||
}
|
}
|
||||||
|
if (!this.searchTarget.classList.contains('is-hidden')) {
|
||||||
|
this.searchTarget.classList.add('is-hidden');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (menuId === 'cartography') {
|
if (menuId === 'cartography') {
|
||||||
@@ -99,6 +105,18 @@ export default class extends Controller {
|
|||||||
if (!this.menuTarget.classList.contains('is-hidden')) {
|
if (!this.menuTarget.classList.contains('is-hidden')) {
|
||||||
this.menuTarget.classList.add('is-hidden');
|
this.menuTarget.classList.add('is-hidden');
|
||||||
}
|
}
|
||||||
|
if (!this.searchTarget.classList.contains('is-hidden')) {
|
||||||
|
this.searchTarget.classList.add('is-hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (menuId === 'search') {
|
||||||
|
this.searchTarget.classList.toggle('is-hidden');
|
||||||
|
if (!this.menuTarget.classList.contains('is-hidden')) {
|
||||||
|
this.menuTarget.classList.add('is-hidden');
|
||||||
|
}
|
||||||
|
if (!this.cartographyTarget.classList.contains('is-hidden')) {
|
||||||
|
this.cartographyTarget.classList.add('is-hidden');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user