From 84cd11b86938b8ecc7ff053c22ec686b41790ffb Mon Sep 17 00:00:00 2001 From: Sabrina Bongiovanni Date: Wed, 4 Sep 2024 11:40:58 +0200 Subject: [PATCH 1/6] fix: print styles for blocks --- .../volto-form-block/components/FormView.jsx | 2 +- src/theme/ItaliaTheme/Print/_all_pages.scss | 20 +++ src/theme/ItaliaTheme/Print/_blocks.scss | 118 +++++++++++++++++- src/theme/ItaliaTheme/Print/_page.scss | 2 +- .../_bootstrap-italia-site.scss | 1 + .../bootstrap-italia/_forms.scss | 7 ++ 6 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 src/theme/bootstrap-override/bootstrap-italia/_forms.scss diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx index 0b2653092..7430b962b 100644 --- a/src/customizations/volto-form-block/components/FormView.jsx +++ b/src/customizations/volto-form-block/components/FormView.jsx @@ -123,7 +123,7 @@ const FormView = ({ return (
-
+
{data?.title &&

{data.title}

} {data?.description && (
{data.description}
diff --git a/src/theme/ItaliaTheme/Print/_all_pages.scss b/src/theme/ItaliaTheme/Print/_all_pages.scss index 45502539d..deb3eada2 100644 --- a/src/theme/ItaliaTheme/Print/_all_pages.scss +++ b/src/theme/ItaliaTheme/Print/_all_pages.scss @@ -1,8 +1,18 @@ @media print { + @page { + margin: 0.2cm; /* 1 inch margin for all sides */ + } + body { display: block !important; } + .public-ui { + h2 { + font-size: 1.5rem; + } + } + .public-ui { // removed underlining from links a { @@ -223,6 +233,16 @@ box-shadow: none; font-size: 1rem; } + + .callout { + page-break-inside: avoid; + .callout-inner { + // padding-top: 0px; + p { + margin-top: -2rem; + } + } + } } .draft-text-larger { diff --git a/src/theme/ItaliaTheme/Print/_blocks.scss b/src/theme/ItaliaTheme/Print/_blocks.scss index 38477b7a1..05a058e6b 100644 --- a/src/theme/ItaliaTheme/Print/_blocks.scss +++ b/src/theme/ItaliaTheme/Print/_blocks.scss @@ -24,6 +24,35 @@ } } + .section.section-inset-shadow { + box-shadow: none; + } + + .public-ui { + .block.alertblock { + .bg-alert-danger, + .bg-alert-info, + .bg-alert-warning { + color: #000; + .container { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + } + } + } + + .block.form { + h2, + .block-description { + page-break-after: avoid; + } + + .card-wrapper { + page-break-before: avoid; + } + } + .block.image { max-width: 50%; margin: 0 auto; @@ -61,17 +90,94 @@ } } + .block.image-text-block { + .image-text-card-wrapper { + page-break-inside: avoid; + + h2 { + page-break-after: avoid; + } + } + } + .block.accordion { - .accordion-header { - button { - svg { - display: none; + .public-ui { + width: 100%; + } + + .section.full-width { + padding: 0px !important; + .card { + .card-body .accordion-item { + .accordion-header { + button { + svg { + display: none; + } + } + } + .accordion-content { + max-height: unset; + + .accordion-inner { + padding: 0px; + } + } + } + + &:after { + margin-top: 0px; + } + } + } + } + + .block.numbersBlock { + page-break-inside: avoid; + color: #000; + .section.py-5 { + padding: 12px !important; + page-break-inside: avoid; + + .container { + page-break-inside: avoid; + .title, + .subblock-title { + font-size: 1.5rem; + } + + .block-number { + page-break-inside: avoid; } } } + } + + .block.iconBlocks { + .block-header { + .title { + font-size: 1.5rem; + margin: 0.5rem; + } + } + + .card { + padding-top: 0px; - .section.full-width .card .card-body .accordion-item .accordion-content { - max-height: unset; + .card-body { + padding: 12px; + + .iconblock-icon { + margin-bottom: 1rem; + .icon { + height: 2rem; + } + } + + .iconblock-title { + font-size: 1rem; + } + } } } diff --git a/src/theme/ItaliaTheme/Print/_page.scss b/src/theme/ItaliaTheme/Print/_page.scss index a47db71cd..122b917d7 100644 --- a/src/theme/ItaliaTheme/Print/_page.scss +++ b/src/theme/ItaliaTheme/Print/_page.scss @@ -7,7 +7,7 @@ .title-description-wrapper { h1 { - font-size: 1.5rem; + font-size: 1.7rem; } } } diff --git a/src/theme/bootstrap-override/_bootstrap-italia-site.scss b/src/theme/bootstrap-override/_bootstrap-italia-site.scss index 1fa6bb54a..e1717280a 100644 --- a/src/theme/bootstrap-override/_bootstrap-italia-site.scss +++ b/src/theme/bootstrap-override/_bootstrap-italia-site.scss @@ -110,6 +110,7 @@ @import 'bootstrap-italia/src/scss/custom/form-password'; @import 'bootstrap-italia/src/scss/custom/form-select'; @import 'bootstrap-italia/src/scss/custom/form-transfer'; + @import './bootstrap-italia/forms'; @import 'bootstrap-italia/src/scss/custom/dropdown'; @import 'bootstrap-italia/src/scss/custom/pager'; @import 'bootstrap-italia/src/scss/custom/tab'; diff --git a/src/theme/bootstrap-override/bootstrap-italia/_forms.scss b/src/theme/bootstrap-override/bootstrap-italia/_forms.scss new file mode 100644 index 000000000..5739a097e --- /dev/null +++ b/src/theme/bootstrap-override/bootstrap-italia/_forms.scss @@ -0,0 +1,7 @@ +@media print { + .public-ui { + .form-group { + margin-bottom: 1rem; + } + } +} From a69637e6a008a137e09fdff7d31c348365517aeb Mon Sep 17 00:00:00 2001 From: "sabrina.bongiovanni" Date: Thu, 5 Sep 2024 10:34:01 +0200 Subject: [PATCH 2/6] fix: block print styles --- src/theme/ItaliaTheme/Print/_blocks.scss | 280 +++++++++++++++++++++-- 1 file changed, 264 insertions(+), 16 deletions(-) diff --git a/src/theme/ItaliaTheme/Print/_blocks.scss b/src/theme/ItaliaTheme/Print/_blocks.scss index 05a058e6b..81f156c88 100644 --- a/src/theme/ItaliaTheme/Print/_blocks.scss +++ b/src/theme/ItaliaTheme/Print/_blocks.scss @@ -144,40 +144,64 @@ .title, .subblock-title { font-size: 1.5rem; + page-break-after: avoid; } .block-number { page-break-inside: avoid; } + + .subblock-text { + page-break-before: avoid; + } + + .block-header { + page-break-after: avoid; + } } } } .block.iconBlocks { - .block-header { - .title { - font-size: 1.5rem; - margin: 0.5rem; + .section.full-width { + padding: 12px !important; + .block-header { + .title { + font-size: 1.5rem; + margin: 0px; + line-height: 1.5rem; + } + + .description { + margin-bottom: 10px; + p { + margin-top: 10px; + } + } } - } - .card { - padding-top: 0px; + .card { + padding-top: 0px; - .card-body { - padding: 12px; + .card-body { + padding: 12px; - .iconblock-icon { - margin-bottom: 1rem; - .icon { - height: 2rem; + .iconblock-icon { + margin-bottom: 1rem; + .icon { + height: 2rem; + } } - } - .iconblock-title { - font-size: 1rem; + .iconblock-title { + font-size: 1rem; + } } } + + .link-button { + display: none; + } } } @@ -218,14 +242,20 @@ } } + // listing variations div.block.listing { + page-break-inside: avoid; .full-width { + page-break-inside: avoid; right: unset !important; left: unset !important; width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; + padding-top: 10px !important; + padding-bottom: 10px !important; + .container { max-width: 100% !important; padding-right: 0 !important; @@ -253,9 +283,227 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + flex-direction: column; .card-wrapper { flex: 0 0 30%; + page-break-inside: avoid; + + .card { + page-break-inside: avoid; + .img-responsive-wrapper { + height: 150px; + + .img-responsive { + height: 100%; + } + } + + h3 { + font-size: 1.2rem; + } + } + } + } + } + + .link-button, + .link-more-button-align-right { + display: none; + } + + div.pagination-wrapper { + position: relative; + &:after { + content: '...'; + text-align: center; + font-size: 1.5rem; + position: absolute; + bottom: -5px; + } + nav.pagination-wrapper { + display: none; + } + } + + // listing cards + .card.card-teaser { + padding: 10px; + margin: 10px; + } + + .card-big-io-comune .card-body .card-title a { + font-size: 1.2rem; + } + + .card { + .rassegna-info { + margin-bottom: 0px !important; + } + &:after { + display: none; + } + } + + .card .card-body { + .category-top { + margin-bottom: 10px; + .icon { + height: 1rem; + } + } + } + + // simple card template - compatto + .simple-card-compact-template { + page-break-inside: avoid; + .card-teaser-wrapper { + flex-direction: column; + margin-bottom: none; + + &:after { + display: none; + } + + .card-title a { + font-size: 1.3rem; + } + } + } + + // simple card template - default + .simple-card-default { + page-break-inside: avoid; + .template-header.with-filters .path-filter-buttons { + display: none; + } + .card-teaser-wrapper { + flex-direction: column; + + .card-body { + padding-bottom: 0px !important; + .category-top { + // margin-bottom: 0px; + .icon { + height: 1rem; + } + } + + .card-title { + margin-bottom: 0px; + } + + .card-text { + margin-bottom: 0px !important; + } + } + } + } + + // card with image + .card-with-image-template { + flex-direction: column; + + .col-item.col-xl-4 { + max-width: 100%; + width: 100%; + margin-bottom: 5px !important; + .card-wrapper { + .card { + page-break-inside: avoid; + + .img-responsive-wrapper { + height: 100px; + + .img-responsive { + height: 100%; + } + } + } + } + } + } + + // card with image - card persona + .card-persona.card-flex { + .card-body { + padding: 10px; + .card-title { + margin-bottom: 0px; + } + + .card-text { + margin-top: 5px; + } + } + .card-image img { + height: 120px !important; + } + } + + // content in evidence - contenuto in evidenza + .contentInEvidenceTemplate { + .content-in-evidence { + page-break-inside: avoid; + .item-image { + height: 100px; + } + + .card-title a { + font-size: 1.2rem; + } + + .read-more { + display: none; + } + + .event-recurrences-more { + margin-top: 10px; + } + } + } + + // ribbon card - card con nastro + &.ribbonCardTemplate { + .mb-4.row { + flex-direction: column; + + .col-lg-4 { + max-width: 100%; + width: 100%; + flex: 0 0 100%; + + .card { + .flag-icon { + display: none; + } + .etichetta { + right: 10px; + top: 10px; + } + } + } + } + } + + // card with slide up text - card con testo animato + } + + // media + .block.video, + .block.video_gallery { + max-width: 50%; + &, + & .video-wrapper { + .ui.embed .icon-play { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + svg { + fill: #000; + height: 1rem; } } } From 8c44f5e236c383fb7bf5b19500de62f06b1de562 Mon Sep 17 00:00:00 2001 From: "sabrina.bongiovanni" Date: Thu, 5 Sep 2024 17:42:48 +0200 Subject: [PATCH 3/6] fix: print styles --- src/config/Blocks/listingVariations.js | 2 +- src/theme/ItaliaTheme/Print/_all_pages.scss | 4 + src/theme/ItaliaTheme/Print/_blocks.scss | 412 ++++++++++++++++---- 3 files changed, 350 insertions(+), 68 deletions(-) diff --git a/src/config/Blocks/listingVariations.js b/src/config/Blocks/listingVariations.js index 5bba24b32..f84a83ad1 100644 --- a/src/config/Blocks/listingVariations.js +++ b/src/config/Blocks/listingVariations.js @@ -151,7 +151,7 @@ const italiaListingVariations = [ cloneData: cloneBlock, }, { - id: 'quaresImageTemplate', + id: 'squaresImageTemplate', isDefault: false, title: 'Quadratoni con immagine', template: SquaresImageTemplate, diff --git a/src/theme/ItaliaTheme/Print/_all_pages.scss b/src/theme/ItaliaTheme/Print/_all_pages.scss index deb3eada2..b4c15b91c 100644 --- a/src/theme/ItaliaTheme/Print/_all_pages.scss +++ b/src/theme/ItaliaTheme/Print/_all_pages.scss @@ -11,6 +11,10 @@ h2 { font-size: 1.5rem; } + + .pt-5 { + padding-top: 10px !important; + } } .public-ui { diff --git a/src/theme/ItaliaTheme/Print/_blocks.scss b/src/theme/ItaliaTheme/Print/_blocks.scss index 81f156c88..6b3a90364 100644 --- a/src/theme/ItaliaTheme/Print/_blocks.scss +++ b/src/theme/ItaliaTheme/Print/_blocks.scss @@ -284,7 +284,7 @@ flex-wrap: wrap; justify-content: space-between; flex-direction: column; - + gap: 10px; .card-wrapper { flex: 0 0 30%; page-break-inside: avoid; @@ -314,13 +314,7 @@ div.pagination-wrapper { position: relative; - &:after { - content: '...'; - text-align: center; - font-size: 1.5rem; - position: absolute; - bottom: -5px; - } + nav.pagination-wrapper { display: none; } @@ -355,94 +349,98 @@ } // simple card template - compatto - .simple-card-compact-template { - page-break-inside: avoid; - .card-teaser-wrapper { - flex-direction: column; - margin-bottom: none; + &.simpleCard { + .simple-card-compact-template { + page-break-inside: avoid; + .card-teaser-wrapper { + flex-direction: column; + margin-bottom: none; - &:after { - display: none; - } + &:after { + display: none; + } - .card-title a { - font-size: 1.3rem; + .card-title a { + font-size: 1.3rem; + } } } - } - - // simple card template - default - .simple-card-default { - page-break-inside: avoid; - .template-header.with-filters .path-filter-buttons { - display: none; - } - .card-teaser-wrapper { - flex-direction: column; - .card-body { - padding-bottom: 0px !important; - .category-top { - // margin-bottom: 0px; - .icon { - height: 1rem; + // simple card template - default + .simple-card-default { + page-break-inside: avoid; + .template-header.with-filters .path-filter-buttons { + display: none; + } + .card-teaser-wrapper { + flex-direction: column; + + .card-body { + padding-bottom: 0px !important; + .category-top { + // margin-bottom: 0px; + .icon { + height: 1rem; + } } - } - .card-title { - margin-bottom: 0px; - } + .card-title { + margin-bottom: 0px; + } - .card-text { - margin-bottom: 0px !important; + .card-text { + margin-bottom: 0px !important; + } } } } } // card with image - .card-with-image-template { - flex-direction: column; + &.cardWithImageTemplate { + .card-with-image-template { + flex-direction: column; - .col-item.col-xl-4 { - max-width: 100%; - width: 100%; - margin-bottom: 5px !important; - .card-wrapper { - .card { - page-break-inside: avoid; + .col-item.col-xl-4 { + max-width: 100%; + width: 100%; + margin-bottom: 5px !important; + .card-wrapper { + .card { + page-break-inside: avoid; - .img-responsive-wrapper { - height: 100px; + .img-responsive-wrapper { + height: 100px; - .img-responsive { - height: 100%; + .img-responsive { + height: 100%; + } } } } } } - } - // card with image - card persona - .card-persona.card-flex { - .card-body { - padding: 10px; - .card-title { - margin-bottom: 0px; - } + // card with image - card persona + .card-persona.card-flex { + .card-body { + padding: 10px; + .card-title { + margin-bottom: 0px; + } - .card-text { - margin-top: 5px; + .card-text { + margin-top: 5px; + } + } + .card-image img { + height: 120px !important; } - } - .card-image img { - height: 120px !important; } } // content in evidence - contenuto in evidenza - .contentInEvidenceTemplate { + &.contentInEvidenceTemplate { .content-in-evidence { page-break-inside: avoid; .item-image { @@ -481,12 +479,113 @@ right: 10px; top: 10px; } + + .read-more { + display: none; + } } } } } // card with slide up text - card con testo animato + &.cardSlideUpTextTemplate { + .card-slide-text-template { + .grid { + display: flex; + flex-direction: column; + gap: 10px 0px; + margin-top: 0px !important; + .listing-item.box { + height: auto; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #c5c7c9; + .category { + background-color: transparent; + padding: 0px; + + &:after { + border-top: 0px; + } + } + + .title { + font-size: 1.2rem; + margin-bottom: 0px; + } + } + } + } + } + + // squares image - quadratoni con immagine + &.squaresImageTemplate { + .squares-image-template { + .grid { + display: flex; + flex-direction: column; + margin-top: 0px !important; + gap: 10px; + .box { + height: auto; + padding: 10px; + } + } + } + } + + // complete block links - link completi + &.completeBlockLinksTemplate { + .complete-block-links-template { + .items.row { + flex-direction: column; + + .col-item { + margin-bottom: 10px; + &.col-lg-3 { + max-width: 100%; + width: 100%; + } + + .card { + .image-container { + margin: 10px 0px 0px 10px; + } + + .card-body { + padding: 10px; + + .card-title { + margin-bottom: 0px !important; + } + } + } + } + } + } + } + + // slider + &.slider { + .sliderTemplate { + .slick-track { + min-height: auto; + } + .play-pause-wrapper { + display: none; + } + } + } + + // bandi in evidence - bandi in evidenza + &.bandiInEvidenceTemplate { + .card { + .read-more { + display: none; + } + } + } } // media @@ -508,4 +607,183 @@ } } } + + //hero + .block.hero { + .hero-body { + .read-more { + display: none; + } + } + } + + //search + .block.search { + .search-results { + .template-wrapper { + padding: 10px !important; + .card-wrapper { + flex-direction: column; + } + } + } + } + + // html + .block.html { + &.py-5 { + padding: 10px 0px !important; + } + } + + .table, + .slate-table.block { + width: 100%; + } + + .block.rssBlock { + .link-button { + display: none; + } + } + + .block.cta-block .cta-block-wrapper.full-width { + padding: 10px 0px; + + .title { + font-size: 1.2rem; + margin-bottom: 10px; + } + + p { + margin-top: 10px; + } + + // cta button div + .mt-5 { + margin-top: 10px !important; + } + } + + .block.count_down { + .public-ui .block-content { + padding: 10px 0px; + + .count-down-timer { + .expired { + padding: 10px; + font-size: 1.5rem; + } + + .interval .number { + font-size: 1.5rem; + } + } + } + } + + .block.highlitedContent { + .card { + &:after { + display: none; + } + .category-top { + margin-bottom: 10px; + .icon { + height: 1rem; + } + } + + .card-title { + margin-bottom: 10px !important; + a { + font-size: 1.2rem; + } + } + + .card-text { + margin-top: 0px !important; + } + + .read-more { + display: none; + } + } + } + + .calendar { + .template-header { + h2 { + font-size: 1.5rem; + margin-top: 10px !important; + } + } + .calendar-body { + padding: 0rem; + } + .link-more-container { + display: none; + } + } + + .argumentInEvidence { + .argumentInEvidence-background { + + .argumentsCardsWrapper { + padding-top: 10px !important; + h2 { + color: #000 !important; + } + + .grid.mt-5 { + margin-top: 10px !important; + display: flex; + flex-direction: column; + + .card { + &:after { + display: none; + } + .card-body { + padding: 10px; + + .icon-argument-container { + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; + } + + .card-title { + font-size: 1.2rem; + margin-bottom: 10px !important; + } + + .card-text { + margin-top: 0px !important; + } + + .read-more { + display: none; + } + } + } + } + } + } + } + + // hide slick arrows and dots + .slick-slider { + .slick-arrow { + display: none !important; + } + .slick-dots { + display: none !important; + } + } + + // override mb-3 inside argumentsInEvidence + .public-ui .argumentInEvidence .mb-3 { + margin-bottom: 0px !important; + } } From e8a0fee62d368d92b84118941f76ebdda0f2d355 Mon Sep 17 00:00:00 2001 From: "sabrina.bongiovanni" Date: Thu, 5 Sep 2024 17:45:10 +0200 Subject: [PATCH 4/6] fix: removed unused class --- src/customizations/volto-form-block/components/FormView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx index 7430b962b..0b2653092 100644 --- a/src/customizations/volto-form-block/components/FormView.jsx +++ b/src/customizations/volto-form-block/components/FormView.jsx @@ -123,7 +123,7 @@ const FormView = ({ return (
-
+
{data?.title &&

{data.title}

} {data?.description && (
{data.description}
From ec8b44a9afa6d45da96274b42ab4dc1e1dd36b49 Mon Sep 17 00:00:00 2001 From: "sabrina.bongiovanni" Date: Thu, 5 Sep 2024 17:46:27 +0200 Subject: [PATCH 5/6] fix: removed style from all_pages --- src/theme/ItaliaTheme/Print/_all_pages.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/theme/ItaliaTheme/Print/_all_pages.scss b/src/theme/ItaliaTheme/Print/_all_pages.scss index b4c15b91c..deb3eada2 100644 --- a/src/theme/ItaliaTheme/Print/_all_pages.scss +++ b/src/theme/ItaliaTheme/Print/_all_pages.scss @@ -11,10 +11,6 @@ h2 { font-size: 1.5rem; } - - .pt-5 { - padding-top: 10px !important; - } } .public-ui { From 7b894733c808a3221e1d00caab0f1a319985ad1a Mon Sep 17 00:00:00 2001 From: "sabrina.bongiovanni" Date: Fri, 6 Sep 2024 11:40:52 +0200 Subject: [PATCH 6/6] fix: restored squaresImageTemplate listing variation name to avoid breaking --- src/config/Blocks/listingVariations.js | 2 +- src/theme/ItaliaTheme/Print/_blocks.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/config/Blocks/listingVariations.js b/src/config/Blocks/listingVariations.js index f84a83ad1..5bba24b32 100644 --- a/src/config/Blocks/listingVariations.js +++ b/src/config/Blocks/listingVariations.js @@ -151,7 +151,7 @@ const italiaListingVariations = [ cloneData: cloneBlock, }, { - id: 'squaresImageTemplate', + id: 'quaresImageTemplate', isDefault: false, title: 'Quadratoni con immagine', template: SquaresImageTemplate, diff --git a/src/theme/ItaliaTheme/Print/_blocks.scss b/src/theme/ItaliaTheme/Print/_blocks.scss index 6b3a90364..386e18459 100644 --- a/src/theme/ItaliaTheme/Print/_blocks.scss +++ b/src/theme/ItaliaTheme/Print/_blocks.scss @@ -520,7 +520,7 @@ } // squares image - quadratoni con immagine - &.squaresImageTemplate { + &.quaresImageTemplate { .squares-image-template { .grid { display: flex;