Skip to content

Commit

Permalink
toggle viz
Browse files Browse the repository at this point in the history
  • Loading branch information
@ManueleVeggi
ManueleVeggi committed Dec 15, 2024
1 parent 5640a53 commit 9afd5be
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 18 deletions.
31 changes: 30 additions & 1 deletion css/mycss.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,4 +316,33 @@ table.dataTable thead .sorting_desc:before {
justify-content: center; /* Centra orizzontalmente l'icona */
padding: 0; /* Rimuove eventuale padding */
color: white;
}
}

.results-img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.results-img-col:hover .overlay {
opacity: 1;
}

.results-img-overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
8 changes: 4 additions & 4 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2249,7 +2249,7 @@ textarea.form-control-lg {
filter: brightness(90%);
}
.form-check-input:focus {
border-color: #949bf8;
border-color: #8C0B20 /*#949bf8*/;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(250, 231, 234, 0.25) /* Original: rgba(41, 55, 240, 0.25)*/;
}
Expand Down Expand Up @@ -2295,7 +2295,7 @@ textarea.form-control-lg {
}
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949bf8'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238C0B20'/%3e%3c/svg%3e"); /*# fill='%23949bf8'*/;
}
.form-switch .form-check-input:checked {
background-position: right center;
Expand Down Expand Up @@ -4350,7 +4350,7 @@ textarea.form-control-lg {
--bs-accordion-btn-icon-transform: rotate(-180deg);
--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232532d8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-focus-border-color: #949bf8;
--bs-accordion-btn-focus-border-color: #8C0B20 /*#949bf8*/;
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
--bs-accordion-body-padding-x: 1.25rem;
--bs-accordion-body-padding-y: 1rem;
Expand Down Expand Up @@ -4514,7 +4514,7 @@ textarea.form-control-lg {
--bs-pagination-hover-border-color: #dee2e6;
--bs-pagination-focus-color: var(--bs-link-hover-color);
--bs-pagination-focus-bg: #e9ecef;
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(177, 11, 37, 0.25);
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: #B10B25; /*Originally: #2937f0*/;
--bs-pagination-active-border-color: #B10B25; /*Originally: #2937f0*/;
Expand Down
68 changes: 58 additions & 10 deletions js/queryjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,20 @@ function loadCSV() {
'l2-city': row['loc-2-comune'] || '',
'l2-prov': row['loc-2-prov'] || '',

'url': row['ID'] || ''
'url': row['id'] || ''
}));

document.getElementById("tot-results").innerHTML = data.length;

renderResults(currentPage, data, isGrid = false);
/*
Ipotizzabile che qui chiamerai la funzione di query e tramite ID
selezionerai solo i risultati che ti interessano ottenendo
un nuovo array che va a sostituire data in rr. 57 e seguenti
*/

renderResults(currentPage, data, isGrid = false);
renderFilters(data)
}
});
Expand All @@ -61,15 +68,18 @@ function loadCSV() {

function renderResults(page, data, isGrid = false) {

$('#resultsList').empty();
if(!isGrid) {

// Option A. List view

console.log($('#resultsGrid').text(), $('#resultsList').text())
$('#resultsList').empty();
$('#resultsGrid').empty();

if(!isGrid) {
const itemsPerPage = 15;
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const pageData = data.slice(startIndex, endIndex);

// Option A. List view

pageData.forEach(item => {

Expand Down Expand Up @@ -98,14 +108,40 @@ function renderResults(page, data, isGrid = false) {

} else {

// Option B. Grid view

$('#resultsList').empty();
$('#resultsGrid').empty();

const itemsPerPage = 30;
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const pageData = data.slice(startIndex, endIndex);

// Option B. Grid view
pageData.forEach(item => {

renderPagination(data, itemsPerPage);
// Create the single grid
const gridItem = `
<div class="col-md-4 col-sm-12 d-flex mt-2 justify-content-center">
<div class="card d-flex flex-column" style="width: 15rem;" onclick="location.href='schede/${item['url']}.html'">
<img src="assets/img/img-placeholder.png" class="card-img-top" alt="${item['author']} ${item['author-rif'] ? `(${item['author-rif']})` : ''} ${item['subj']}">
<div class="card-body d-flex flex-column">
<small class="card-text">
${item['author']} ${item['author-rif'] ? `(${item['author-rif']})` : ''} <br>
${item['subj']},
${item['date-from']} ${item['date-from'] ? ` - ${item['date-to']}` : `${item['date-to']}`}
</small>
</div>
</div>
</div>
`;
// , ${createLocLabel(item)}
console.log(gridItem);

$('#resultsGrid').append(gridItem);

renderPagination(page, data, itemsPerPage);
});

}

Expand Down Expand Up @@ -300,7 +336,7 @@ function renderFreqTableInAccordion(data, property, label, isFirst = false, hasS
<button class="btn btn-primary accordion-filter-button" onclick="resortFilter('${label}', true)"><i class="bi bi-sort-alpha-down"></i></button>
</div>
<div class="col-2 d-flex justify-content-end">
<button class="btn btn-primary accordion-filter-button" onclick="resortFilter('${label}', false)"><i class="bi bi-sort-numeric-down"></i></button>
<button class="btn btn-primary accordion-filter-button" onclick="resortFilter('${label}', false)"><i class="bi bi-sort-numeric-down-alt"></i></button>
</div>
</div>
<div id="content-${label}" class="mt-1">
Expand Down Expand Up @@ -457,4 +493,16 @@ function resortFilter(label, isByName = false) {
// Load CSV data and render the results
$(document).ready(function () {
loadCSV();
});
});

// Change viz system with "viz_mode" toggle button

document.getElementById('viz_mode').addEventListener('change', function () {
if (this.checked) {
// Page in grid mode
renderResults(currentPage, data, isGrid = true);
} else {
// Page in list mode
renderResults(currentPage, data, isGrid = false);
}
});
51 changes: 48 additions & 3 deletions query.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,60 @@
<div class="d-flex justify-content-end">
<i class="bi bi-list-ul"></i>
<div class="form-switch form-check ms-2">
<input type="checkbox" class="form-check-input" id="site_state">
<input type="checkbox" class="form-check-input" id="viz_mode">
</div>
<label for="site_state" class="form-check-label"><i class="bi bi-grid-3x3-gap"></i></label>
<label for="viz_mode" class="form-check-label"><i class="bi bi-grid-3x3-gap"></i></label>
</div>
</div>
</div>
</div>


<!-- CONTINUA QUI
<div class="row g-0 mb-2" id="resultGrid">
<div class="col-md-4 col-sm-12 d-flex mt-2 justify-content-center">
<div class="card d-flex flex-column" style="width: 15rem;">
<img src="assets/img/img-index/suggested-nic-d-arc-detail-bw.jpg" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<small class="card-text">Autore, Opera, Data, Luogo</small>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex mt-2 justify-content-center">
<div class="card d-flex flex-column" style="width: 15rem;">
<img src="assets/img/img-index/suggested-nic-d-arc-detail-bw.jpg" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<small class="card-text">Autore, Opera, Data, Luogo</small>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex mt-2 justify-content-center">
<div class="card d-flex flex-column" style="width: 15rem;">
<img src="assets/img/img-index/suggested-nic-d-arc-detail-bw.jpg" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<small class="card-text">Autore, Opera, Data, Luogo</small>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex mt-2 justify-content-center">
<div class="card d-flex flex-column" style="width: 15rem;">
<img src="assets/img/img-index/suggested-nic-d-arc-detail-bw.jpg" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<small class="card-text">Autore, Opera, Data, Luogo</small>
</div>
</div>
</div>
</div>
FINE QUI CARTE -->

<div class="row g-0 mb-2" id="resultsGrid">
<p>test</p>
</div>

<ul class="list-group" id="resultsList">

<div class="card mb-1">
<div class="row g-0">
<div class="col-md-4 col-sm-12">
Expand Down

0 comments on commit 9afd5be

Please sign in to comment.