diff --git a/data.json b/data.json index dc1c32e..e37689f 100644 --- a/data.json +++ b/data.json @@ -19,6 +19,17 @@ "law": { "cf": "80009280274", "vat": "00708670278" + }, + "cookies": { + "necessary": [ + ["_iuav_cc", "iuav.it", "1 anno", "Scelte di consenso ai cookie"], + ["^ASPESESSIONID", "iuav.it", "Sessione corrente", "Utilizzato dal server web iuav.it"], + ["^_hj", "italia.it", "1 anno", "Web Analytics Italia – servizio della pubblica amministrazione italiana"] + ], + "analytical": [ + ["^_ga", "google.com", "2 anni", "Google Analytics"], + ["_gid", "google.com", "1 giorno", "Google Analytics"] + ] } } }, @@ -985,26 +996,32 @@ "social_links": [ { "name": "Facebook", + "icon": "", "url": "#" }, { "name": "Twitter", + "icon": "", "url": "#" }, { "name": "Instagram", + "icon": "", "url": "#" }, { "name": "YouTube", + "icon": "", "url": "#" }, { "name": "LinkedIn", + "icon": "", "url": "#" }, { "name": "Telegram", + "icon": "", "url": "#" } ], @@ -7109,6 +7126,7 @@ "items": [ { "title": "Cotonificio", + "url": "#", "subtitle": null, "text": null, "email": "cotonificio.iuav@colser.com", @@ -7118,6 +7136,7 @@ }, { "title": "Gestione didattica e servizi agli studenti", + "url": "#", "subtitle": null, "text": "Il servizio si occupa della definizione e gestione degli orari delle lezioni, delle iscrizioni alle attività didattiche e degli appelli d’esame. Indirizza gli studenti verso le attività didattiche da sostenere per lo svolgimento del proprio piano di studi, rilascia i programmi dei corsi, si occupa della gestione degli spazi dedicati alla didattica.", "email": "segreteria.corsidistudio@iuav.it", @@ -7128,6 +7147,7 @@ { "title": "Iuav Infopoint", + "url": "#", "subtitle": null, "text": "Applicazione web che offre un unico canale di comunicazione attraverso il quale puoi inviare le tue richieste agli uffici dell’ateneo.", "email": null, @@ -7158,6 +7178,7 @@ }, { "title": "Labsco", + "url": "#", "subtitle": "Uffici", "text": null, "email": "labsco@iuav.it", @@ -7167,6 +7188,7 @@ }, { "title": "Labsco", + "url": "#", "subtitle": "Sala Prove", "text": null, "email": "labsco@iuav.it", @@ -7176,6 +7198,7 @@ }, { "title": "Labsco", + "url": "#", "subtitle": "Fax", "text": null, "email": null, @@ -7185,6 +7208,7 @@ }, { "title": "A", + "url": "https://www.google.com", "subtitle": "Fax", "text": null, "email": null, @@ -7194,6 +7218,7 @@ }, { "title": "B", + "url": "#", "subtitle": "Fax", "text": null, "email": null, diff --git a/src/assets/css/blocks/accordion.css b/src/assets/css/blocks/accordion.css index a6a51b0..cb2a68e 100644 --- a/src/assets/css/blocks/accordion.css +++ b/src/assets/css/blocks/accordion.css @@ -1,10 +1,28 @@ +:root{ + --accordion-bg: theme(colors.black); + --accordion-text-color: theme(colors.white); + --accordion-border-color: theme(colors.grey.200); +} .block-accordion{ @apply mb-md; &__inner{ - @apply border-t border-grey-200; - &:last-child:not(:first-child){ + border-color: var(--accordion-border-color); + @apply border-t; + /* &:last-child:not(:first-child){ + @apply border-b; + } */ + &:last-child{ @apply border-b; } + &:hover{ + > button{ + background: var(--accordion-bg); + color: var(--accordion-text-color); + &::before{ + background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); + } + } + } > button{ @apply relative @@ -32,27 +50,24 @@ rotate-0 ; } - &:hover{ - @apply bg-black text-white; - &::before{ - background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); - } - } } > div{ @apply pt-xs pb-base pl-12 xl:pl-16 pr-[calc(var(--grid-gutter)*2)]; > p{ - @apply text-white mb-0; + color: var(--accordion-text-color); + @apply mb-0; } div[class^="block-"]{ @apply mb-0; p{ - @apply text-white; + color: var(--accordion-text-color); } } } &.is-toggled{ - @apply bg-black text-white border-grey-500; + background: var(--accordion-bg); + color: var(--accordion-text-color); + --accordion-border-color: theme(colors.grey.500); > button{ &::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); @@ -93,7 +108,8 @@ } } &:hover{ - @apply border-grey-500; + --accordion-border-color: theme(colors.grey.200); + /* @apply border-grey-500; */ } } &--2cols{ diff --git a/src/assets/css/components/cookiebanner.css b/src/assets/css/components/cookiebanner.css new file mode 100644 index 0000000..a518a58 --- /dev/null +++ b/src/assets/css/components/cookiebanner.css @@ -0,0 +1,91 @@ +#cookiebanner-overlay{ + transition: all .5s ease; + @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-30 opacity-0 invisible pointer-events-none; + &.is-active{ + @apply opacity-100 visible pointer-events-auto; + } +} +.cookiebanner{ + --accordion-border-color: theme(colors.grey.200); + --accordion-bg: theme(colors.white); + --accordion-text-color: theme(colors.black); + --accordion-border-color: theme(colors.grey.200); + + --input-toggle-bg: theme(colors.white); + --input-toggle-active-bg: theme(colors.white); + --input-toggle-active-slider-bg: theme(colors.black); + + @apply fixed bottom-0 right-0 lg:bottom-5 lg:right-5 bg-black text-white z-50 w-full lg:max-w-[640px] px-5 py-5; + p{ + @apply text-white mb-0; + } + &__btns{ + @apply flex justify-between mt-8; + button{ + @apply bg-grey-300 text-white px-4 py-1.5; + &:hover{ + @apply bg-white text-black; + } + + button{ + @apply ml-2.5; + } + } + } + &__cookies{ + @apply mt-8; + } + .block-accordion{ + @apply mb-8; + .input-toggle{ + @apply absolute right-2.5 top-2; + } + .block-accordion__inner{ + @apply relative; + > button{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); + } + } + > div{ + > p{ + + table{ + @apply mt-8 mb-0; + } + } + } + &.is-toggled, &:hover{ + --input-toggle-bg: theme(colors.grey.300); + --input-toggle-slider-bg: theme(colors.white); + --input-toggle-active-bg: theme(colors.black); + --input-toggle-active-slider-bg: theme(colors.white); + > button{ + &::before{ + background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='black'/%3E%3C/svg%3E%0A"); + } + } + .cookiebanner-necessary-icon{ + background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10.5C21 16.299 16.299 21 10.5 21C4.70101 21 0 16.299 0 10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.02172 13.3129L6.35134 10.6425L5.64866 11.3541L9.02393 14.7293L16.3525 7.35466L15.6476 6.64534L9.02172 13.3129Z' fill='white'/%3E%3C/svg%3E%0A"); + @apply w-5 h-5 bg-contain absolute right-2.5 top-2; + } + .input-toggle{ + input{ + &:checked + span{ + &::after{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.521 5.983.525 3.987 0 4.52l2.523 2.523L8 1.53 7.473 1 2.521 5.983Z' fill='white'/%3E%3C/svg%3E"); + } + } + } + span{ + &::after{ + background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8.331 1.355-6.977 7.02-.705-.709L7.626.646l.705.709Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1.353.646 6.978 7.02-.705.71-6.978-7.02.705-.71Z' fill='white'/%3E%3C/svg%3E"); + } + } + } + } + } + } + &-necessary-icon{ + background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10.5C21 16.299 16.299 21 10.5 21C4.70101 21 0 16.299 0 10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.02172 13.3129L6.35134 10.6425L5.64866 11.3541L9.02393 14.7293L16.3525 7.35466L15.6476 6.64534L9.02172 13.3129Z' fill='black'/%3E%3C/svg%3E%0A"); + @apply w-5 h-5 bg-contain absolute right-2.5 top-2; + } +} diff --git a/src/assets/css/components/index.css b/src/assets/css/components/index.css index 69afaf8..3b07143 100644 --- a/src/assets/css/components/index.css +++ b/src/assets/css/components/index.css @@ -5,6 +5,7 @@ @import "chip.css"; @import "contacts-section.css"; @import "content-section.css"; +@import "cookiebanner.css"; @import "degree-curricula.css"; @import "events-posts.css"; @import "footer.css"; @@ -21,4 +22,5 @@ @import "posts-archive-posts.css"; @import "secondary-nav.css"; @import "status.css"; +@import "table.css"; @import "tease.css"; \ No newline at end of file diff --git a/src/assets/css/components/table.css b/src/assets/css/components/table.css new file mode 100644 index 0000000..c5f5995 --- /dev/null +++ b/src/assets/css/components/table.css @@ -0,0 +1,32 @@ +:root{ + --table-header-border-color: theme(colors.black); + --table-body-border-color: theme(colors.grey.200); + --table-text-color: theme(colors.black); +} +table{ + @apply w-full mb-md; + thead, tbody, tfoot{ + tr{ + @apply border-t; + th,td{ + color: var(--table-text-color); + @apply text-sm text-left py-1.5 px-2.5; + } + } + } + thead{ + tr{ + border-color: var(--table-header-border-color); + th{ + } + } + } + tbody{ + tr{ + border-color: var(--table-body-border-color); + &:last-child{ + @apply border-b; + } + } + } +} \ No newline at end of file diff --git a/src/assets/js/blocks/cookiebanner.js b/src/assets/js/blocks/cookiebanner.js new file mode 100644 index 0000000..89fb1bd --- /dev/null +++ b/src/assets/js/blocks/cookiebanner.js @@ -0,0 +1,30 @@ +window.addEventListener('load', (event) => { + + // main elements + const cookiebanner = document.getElementById('cookiebanner') + const initPanel = document.getElementById('cookiebanner-init-panel') + const customPanel = document.getElementById('cookiebanner-custom-panel') + + // buttons + const toggleCustomBtn = document.getElementById('cookiebanner-custom') + const customBtn = document.getElementById('cookiebanner-custom-consent') + const consentBtns = document.querySelectorAll('[data-cookiebanner-consent]') + + // toggle custom cookie panel + toggleCustomBtn.addEventListener('click', () => { + initPanel.classList.add('hidden') + customPanel.classList.remove('hidden') + toggleCustomBtn.classList.add('hidden') + customBtn.classList.remove('hidden') + document.getElementById('cookiebanner-overlay').classList.add('is-active') + }) + + consentBtns.forEach(button => { + button.addEventListener('click', () => { + cookiebanner.classList.add('hidden') + document.getElementById('cookiebanner-overlay').classList.remove('is-active') + }) + + }) + +}) diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 1c3f74a..d034a16 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,6 +1,8 @@ +import './blocks/cookiebanner.js'; import './blocks/accordion.js'; import './blocks/carousel.js'; import './blocks/cards-grid.js'; +import './blocks/featured-tabs.js'; import './blocks/inputs.js'; import './blocks/marquee.js'; import './blocks/home-scroll-banner.js'; diff --git a/src/layout/base.twig b/src/layout/base.twig index 39f319d..797a714 100644 --- a/src/layout/base.twig +++ b/src/layout/base.twig @@ -10,6 +10,8 @@ Vai al contenuto della pagina {# Vai al menu principale #} + + {% include './partials/cookie-banner.twig' %}

informativa sulla privacy.

+
+ +
+
+ + +
+ + +
+
\ No newline at end of file