From 2374b47b4c9ed1dbc97eac47319643fb917af447 Mon Sep 17 00:00:00 2001 From: Sara Bianchi <43245702+SaraBianchi@users.noreply.github.com> Date: Fri, 20 Dec 2024 11:11:28 +0100 Subject: [PATCH] fix: updated print styles (#838) --- src/theme/ItaliaTheme/Blocks/_contacts.scss | 23 +- src/theme/ItaliaTheme/Print/_all_pages.scss | 107 ++++-- src/theme/ItaliaTheme/Print/_bandi.scss | 9 - src/theme/ItaliaTheme/Print/_blocks.scss | 335 ++++++++++++++++-- src/theme/ItaliaTheme/Print/_news_items.scss | 19 - src/theme/ItaliaTheme/Print/_page.scss | 6 - .../bootstrap-italia/_card.scss | 14 +- .../bootstrap-override/bootstrap/_print.scss | 1 + src/theme/site.scss | 2 - 9 files changed, 410 insertions(+), 106 deletions(-) delete mode 100644 src/theme/ItaliaTheme/Print/_bandi.scss delete mode 100644 src/theme/ItaliaTheme/Print/_news_items.scss diff --git a/src/theme/ItaliaTheme/Blocks/_contacts.scss b/src/theme/ItaliaTheme/Blocks/_contacts.scss index a5e93d21c..22d97a909 100644 --- a/src/theme/ItaliaTheme/Blocks/_contacts.scss +++ b/src/theme/ItaliaTheme/Blocks/_contacts.scss @@ -91,15 +91,16 @@ } .contact-title { + + margin-bottom: 1rem; font-size: 1.35rem; font-weight: bold; line-height: 1.4em; - - margin-bottom: 1rem; } .contact-text { font-size: 0.9rem; + .detached-slate-editor { margin-bottom: 1rem; } @@ -107,32 +108,22 @@ .contact-info { display: flex; - - &:first-of-type { - align-items: center; - - .icon-wrapper { - margin-top: 0; - } - } - - &:not(:last-of-type) { - margin-bottom: 1rem; - } + align-items: center; [role='textbox'] { //slate editor width: 100%; + &[data-slate-editor='true'] { min-height: 1em; } } .icon-wrapper { - margin-top: 0.2rem; - margin-right: 1rem; display: flex; align-items: center; + margin-top: 0.2rem; + margin-right: 1rem; } .tel { diff --git a/src/theme/ItaliaTheme/Print/_all_pages.scss b/src/theme/ItaliaTheme/Print/_all_pages.scss index deb3eada2..1e7c8e154 100644 --- a/src/theme/ItaliaTheme/Print/_all_pages.scss +++ b/src/theme/ItaliaTheme/Print/_all_pages.scss @@ -1,6 +1,6 @@ @media print { @page { - margin: 0.2cm; /* 1 inch margin for all sides */ + margin: 0 !important; } body { @@ -8,16 +8,19 @@ } .public-ui { - h2 { - font-size: 1.5rem; - } - } - - .public-ui { - // removed underlining from links a { font-weight: 600 !important; - text-decoration: none !important; + // text-decoration: none !important; + /* i link che non devono essere sottolineati hanno già regole specifiche, + a video è necessario mostare che i tag a sono link */ + + &.read-more { + display: none !important; // omesso il read more nelle card + } + } + + .text-secondary { + color: $body-color !important; } .content-area, @@ -27,6 +30,24 @@ page-break-inside: avoid; } + .container { + max-width: 98%; + } + + // padding/margin + .py-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + + .pb-5 { + padding-bottom: 20px !important; + } + + .pt-5 { + padding-top: 20px !important; + } + // removed part of header header .it-header-slim-wrapper { display: none; @@ -51,10 +72,8 @@ } .it-brand-text { - .no_toc { - color: $link-color; - font-size: 2rem !important; - } + color: $link-color; + font-size: 2rem !important; } } } @@ -86,6 +105,10 @@ } } + .section { + padding: 1.2rem; + } + /* Removed shadow and card's padding. Add border*/ .card { border: 1px solid $gray-border !important; @@ -99,15 +122,34 @@ border: none !important; border-left-width: 0 !important; } + + &::after { + display: none; + } + + &.card-bg { + background-color: white !important; + color: $body-color !important; + } } - //card teaser 3 + // Card teaser .card-wrapper.card-teaser-wrapper.card-teaser-block-3 { > .card-teaser { - flex: 0 0 32%; + flex: 0 0 32.5%; } } + .card.card-teaser.simple-card-default-item .card-body .card-title a, + .card.card-teaser .card-body .card-title a, + .card .card-title a { + font-size: 1.1rem !important; + } + + .card .card-body .category-top { + flex-wrap: wrap; + } + #text-tempi_e_scadenze > div > p { padding: 1rem 0 0 0 !important; box-shadow: none !important; @@ -165,7 +207,7 @@ .it-page-sections-container { border-top: none; - .it-carousel-wrapper { + .it-carousel-wrapper:not(#galleria) { display: none; } @@ -236,6 +278,7 @@ .callout { page-break-inside: avoid; + .callout-inner { // padding-top: 0px; p { @@ -243,18 +286,38 @@ } } } + // buttons + button.btn, + .btn.btn-primary, + .draftjs-buttons a { + padding: 0.5rem 1rem; + border: 1px solid $link-color; + background-color: white; + color: $link-color; + + svg.icon { + color: $link-color; + fill: $link-color; + } + } + + // blockquote text + blockquote.blockquote-card.dark, + .blockquote.blockquote-card.dark { + border: 1px solid $body-color; + background-color: white; + color: $body-color; + + a:not(.btn) { + color: $body-color; + } + } } .draft-text-larger { font-size: 1.2rem; } - .public-ui .draftjs-buttons a { - padding: 0rem; - background-color: white; - color: $link-color; - } - //external link icon svg.external-link { display: none; diff --git a/src/theme/ItaliaTheme/Print/_bandi.scss b/src/theme/ItaliaTheme/Print/_bandi.scss deleted file mode 100644 index deffd9b76..000000000 --- a/src/theme/ItaliaTheme/Print/_bandi.scss +++ /dev/null @@ -1,9 +0,0 @@ -.contenttype-bando { - @media print { - .it-page-sections-container { - #allegati { - display: none; - } - } - } -} diff --git a/src/theme/ItaliaTheme/Print/_blocks.scss b/src/theme/ItaliaTheme/Print/_blocks.scss index 386e18459..018311e86 100644 --- a/src/theme/ItaliaTheme/Print/_blocks.scss +++ b/src/theme/ItaliaTheme/Print/_blocks.scss @@ -1,5 +1,30 @@ @media print { .block { + color: $body-color; + + .bg-primary, + .bg-secondary, + .bg-tertiary { + border: 1px solid $gray-border; + background-color: white !important; + + .card .card-body { + .category-top, + .category-top .text, + .card-text, + .card-text a, + .card-title a, + .card-title { + color: $body-color !important; + } + + .category-top .icon { + color: $body-color !important; + fill: $body-color !important; + } + } + } + &.full-width, .full-width { right: unset !important; @@ -19,9 +44,25 @@ .col-item { max-width: 33%; + padding-right: 0; + padding-left: 0; } } } + + .bg-gradient { + border: 1px solid $gray-border; + background-color: white !important; + background-image: none !important; + opacity: 1 !important; + } + + div:has(.bg-gradient) { + .title { + color: $body-color; + font-size: 1.1rem; + } + } } .section.section-inset-shadow { @@ -33,10 +74,15 @@ .bg-alert-danger, .bg-alert-info, .bg-alert-warning { - color: #000; + border: 1px solid $gray-border; + background-color: white !important; + + a:not(.btn) { + color: #000; + } + .container { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding: 1rem !important; } } } @@ -58,6 +104,57 @@ margin: 0 auto; } + .block.numbersBlock { + .block-number .subblock-title p { + font-size: 3.5rem; + } + } + + // rimozione delle immagini/colori di sfondo come default, applicato colore del testo + .block.iconBlocks, + .block.numbersBlock, + .block.contacts .bg-primary, + .block.contacts .bg-secondary { + color: $body-color; + + .block-header { + .title, + .description, + a { + color: $body-color !important; + } + } + + .background-image::after, + .background-image.no-image::after { + border: 1px solid $gray-border; + background-color: white; + background-image: none; + } + } + + .block.iconBlocks, + .block.numbersBlock { + div:not(.title) p { + font-size: 1.5rem; + } + } + + .block.contacts { + div:not(.title) p { + font-size: 1.5rem; + } + + .card-wrapper .contact-title, + .card-wrapper .contact-text, + .card-wrapper .contact-info { + p { + margin-bottom: 0.3rem; + font-size: 1rem !important; + } + } + } + .block.highlitedContent { .col-lg-6 { flex: 1 1 30%; @@ -107,6 +204,7 @@ .section.full-width { padding: 0px !important; + .card { .card-body .accordion-item { .accordion-header { @@ -116,6 +214,7 @@ } } } + .accordion-content { max-height: unset; @@ -133,14 +232,16 @@ } .block.numbersBlock { - page-break-inside: avoid; color: #000; + page-break-inside: avoid; + .section.py-5 { padding: 12px !important; page-break-inside: avoid; .container { page-break-inside: avoid; + .title, .subblock-title { font-size: 1.5rem; @@ -165,15 +266,17 @@ .block.iconBlocks { .section.full-width { padding: 12px !important; + .block-header { .title { - font-size: 1.5rem; margin: 0px; + font-size: 1.5rem; line-height: 1.5rem; } .description { margin-bottom: 10px; + p { margin-top: 10px; } @@ -188,6 +291,7 @@ .iconblock-icon { margin-bottom: 1rem; + .icon { height: 2rem; } @@ -224,11 +328,22 @@ } } } + + .calendar .calendar-header { + border-bottom: 1px solid $gray-border; + background-color: white; + + h3 { + color: black !important; + } + } } .container { .block { .searchSections { + border: 1px solid $gray-border; + .searchSections-background { display: none; } @@ -236,8 +351,6 @@ h2.text-secondary { color: $link-color !important; } - - border: 1px solid $gray-border; } } } @@ -245,16 +358,16 @@ // 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; + margin-right: 0 !important; + margin-left: 0 !important; + page-break-inside: avoid; .container { max-width: 100% !important; @@ -281,16 +394,18 @@ &.inEvidenceTemplate { .in-evidence-cards-wrapper { display: flex; + flex-direction: column; flex-wrap: wrap; justify-content: space-between; - flex-direction: column; gap: 10px; + .card-wrapper { flex: 0 0 30%; page-break-inside: avoid; .card { page-break-inside: avoid; + .img-responsive-wrapper { height: 150px; @@ -334,6 +449,7 @@ .rassegna-info { margin-bottom: 0px !important; } + &:after { display: none; } @@ -342,6 +458,7 @@ .card .card-body { .category-top { margin-bottom: 10px; + .icon { height: 1rem; } @@ -352,6 +469,7 @@ &.simpleCard { .simple-card-compact-template { page-break-inside: avoid; + .card-teaser-wrapper { flex-direction: column; margin-bottom: none; @@ -369,14 +487,17 @@ // 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 { @@ -402,9 +523,10 @@ flex-direction: column; .col-item.col-xl-4 { - max-width: 100%; width: 100%; + max-width: 100%; margin-bottom: 5px !important; + .card-wrapper { .card { page-break-inside: avoid; @@ -425,6 +547,7 @@ .card-persona.card-flex { .card-body { padding: 10px; + .card-title { margin-bottom: 0px; } @@ -433,6 +556,7 @@ margin-top: 5px; } } + .card-image img { height: 120px !important; } @@ -443,6 +567,7 @@ &.contentInEvidenceTemplate { .content-in-evidence { page-break-inside: avoid; + .item-image { height: 100px; } @@ -467,17 +592,18 @@ flex-direction: column; .col-lg-4 { - max-width: 100%; width: 100%; + max-width: 100%; flex: 0 0 100%; .card { .flag-icon { display: none; } + .etichetta { - right: 10px; top: 10px; + right: 10px; } .read-more { @@ -494,16 +620,18 @@ .grid { display: flex; flex-direction: column; - gap: 10px 0px; margin-top: 0px !important; + gap: 10px 0px; + .listing-item.box { height: auto; padding: 10px; - margin-bottom: 10px; border: 1px solid #c5c7c9; + margin-bottom: 10px; + .category { - background-color: transparent; padding: 0px; + background-color: transparent; &:after { border-top: 0px; @@ -511,8 +639,8 @@ } .title { - font-size: 1.2rem; margin-bottom: 0px; + font-size: 1.2rem; } } } @@ -527,6 +655,7 @@ flex-direction: column; margin-top: 0px !important; gap: 10px; + .box { height: auto; padding: 10px; @@ -543,9 +672,10 @@ .col-item { margin-bottom: 10px; + &.col-lg-3 { - max-width: 100%; width: 100%; + max-width: 100%; } .card { @@ -572,9 +702,23 @@ .slick-track { min-height: auto; } + .play-pause-wrapper { display: none; } + + .slide-wrapper { + border: 1px solid $gray-border; + + .slide-title { + border-top: 1px solid $gray-border; + background-color: white; + + a { + color: $link-color; + } + } + } } } @@ -584,6 +728,90 @@ .read-more { display: none; } + + .card-wrapper { + flex: 0 0 33%; + } + } + } + + &.contentInEvidenceTemplate { + .img-wrapper img { + max-height: 200px; + } + + .card-body { + padding-bottom: 24px !important; + } + } + + &.ribbonCardTemplate { + .card-wrapper .card.card-big { + position: relative; + margin: 0; + + .etichetta { + position: relative; + top: 10px; + right: 0px; + left: 0; + width: 100%; + max-width: 100%; + justify-content: flex-start; + + .icon { + margin-left: 5px; + } + } + + .card-body { + padding: 20px; + + .dates { + margin: 7px 0 10px; + } + } + } + } + + &.cardSlideUpTextTemplate .box { + height: auto; + + .category { + border: 1px solid black; + background-color: white; + color: $body-color; + + &::after { + top: -1px; + border-top-color: black; + } + } + } + + &.quaresImageTemplate { + .squares-image-template .grid { + gap: 1rem 1.4rem; + } + + .box .title { + color: $body-color; + font-size: 1.1rem; + } + + .box.bg-img::before { + border: 1px solid $gray-border; + background-color: white !important; + } + } + + &.completeBlockLinksTemplate { + .col-item.col-lg-3 { + width: 33%; + } + + .card-wrapper { + padding: 0.5rem; } } } @@ -592,17 +820,19 @@ .block.video, .block.video_gallery { max-width: 50%; + &, & .video-wrapper { .ui.embed .icon-play { + display: flex; width: 2rem; height: 2rem; - display: flex; align-items: center; justify-content: center; + svg { - fill: #000; height: 1rem; + fill: #000; } } } @@ -622,6 +852,7 @@ .search-results { .template-wrapper { padding: 10px !important; + .card-wrapper { flex-direction: column; } @@ -637,8 +868,16 @@ } .table, - .slate-table.block { - width: 100%; + .slate-table-block { + display: table !important; + + &.ui.table.inverted { + color: $body-color; + + & > :not(caption) > * > * { + background-color: white; + } + } } .block.rssBlock { @@ -649,16 +888,24 @@ .block.cta-block .cta-block-wrapper.full-width { padding: 10px 0px; + border: 1px solid $gray-border; + background-color: white !important; .title { - font-size: 1.2rem; margin-bottom: 10px; + font-size: 1.2rem; } p { margin-top: 10px; } + .title, + p, + p a { + color: $body-color !important; + } + // cta button div .mt-5 { margin-top: 10px !important; @@ -667,9 +914,29 @@ .block.count_down { .public-ui .block-content { - padding: 10px 0px; + padding: 1rem; + + .background-image { + border: 1px solid $gray-border; + background-color: white !important; + + &::after { + display: none; + } + } + + p, + p a:not(.btn), + .countdown { + color: $body-color; + } .count-down-timer { + padding-bottom: 1rem; + border: 1px solid $gray-border; + page-break-after: avoid; + page-break-before: avoid; + .expired { padding: 10px; font-size: 1.5rem; @@ -687,8 +954,10 @@ &:after { display: none; } + .category-top { margin-bottom: 10px; + .icon { height: 1rem; } @@ -696,6 +965,7 @@ .card-title { margin-bottom: 10px !important; + a { font-size: 1.2rem; } @@ -714,13 +984,15 @@ .calendar { .template-header { h2 { - font-size: 1.5rem; margin-top: 10px !important; + font-size: 1.5rem; } } + .calendar-body { padding: 0rem; } + .link-more-container { display: none; } @@ -730,32 +1002,34 @@ .argumentInEvidence-background { + .argumentsCardsWrapper { padding-top: 10px !important; + h2 { color: #000 !important; } .grid.mt-5 { - margin-top: 10px !important; display: flex; flex-direction: column; + margin-top: 10px !important; .card { &:after { display: none; } + .card-body { padding: 10px; .icon-argument-container { - height: 1rem; width: 1rem; min-width: 1rem; + height: 1rem; min-height: 1rem; } .card-title { - font-size: 1.2rem; margin-bottom: 10px !important; + font-size: 1.2rem; } .card-text { @@ -777,6 +1051,7 @@ .slick-arrow { display: none !important; } + .slick-dots { display: none !important; } diff --git a/src/theme/ItaliaTheme/Print/_news_items.scss b/src/theme/ItaliaTheme/Print/_news_items.scss deleted file mode 100644 index f9924deb9..000000000 --- a/src/theme/ItaliaTheme/Print/_news_items.scss +++ /dev/null @@ -1,19 +0,0 @@ -.contenttype-news-item { - @media print { - .it-page-sections-container { - #documenti-allegati { - display: none; - } - - #luoghi { - .card-teaser { - .card-body { - .card-text { - display: none; - } - } - } - } - } - } -} diff --git a/src/theme/ItaliaTheme/Print/_page.scss b/src/theme/ItaliaTheme/Print/_page.scss index 122b917d7..61b1cd716 100644 --- a/src/theme/ItaliaTheme/Print/_page.scss +++ b/src/theme/ItaliaTheme/Print/_page.scss @@ -11,11 +11,5 @@ } } } - - p { - margin-top: 1rem; - margin-bottom: 0rem; - font-size: 1rem; - } } } diff --git a/src/theme/bootstrap-override/bootstrap-italia/_card.scss b/src/theme/bootstrap-override/bootstrap-italia/_card.scss index 3d6bd113a..0f5ca4bb7 100644 --- a/src/theme/bootstrap-override/bootstrap-italia/_card.scss +++ b/src/theme/bootstrap-override/bootstrap-italia/_card.scss @@ -5,8 +5,18 @@ max-width: 100%; } - .icon + .card-body { - max-width: calc(100% - 112px - 1em); + .icon { + //to do: forse da spostare nel file degli attachment + min-width: 32px; + max-width: 32px; + + & + .card-body { + max-width: calc(100% - 1em - 32px); + + .card-title a { + max-width: 100%; + } + } } } //Landscape diff --git a/src/theme/bootstrap-override/bootstrap/_print.scss b/src/theme/bootstrap-override/bootstrap/_print.scss index 4c836c1b3..eace576c9 100644 --- a/src/theme/bootstrap-override/bootstrap/_print.scss +++ b/src/theme/bootstrap-override/bootstrap/_print.scss @@ -145,6 +145,7 @@ // We don't set margin here because it breaks `size` in Chrome. We also // don't use `!important` on `size` as it breaks in Chrome. @page { + margin: 0rem; size: $print-page-size; } } diff --git a/src/theme/site.scss b/src/theme/site.scss index 4bffb1899..2a24ded1a 100644 --- a/src/theme/site.scss +++ b/src/theme/site.scss @@ -136,8 +136,6 @@ @import 'ItaliaTheme/Components/customerSatisfaction'; @import 'ItaliaTheme/Print/all_pages'; @import 'ItaliaTheme/Print/page'; -@import 'ItaliaTheme/Print/news_items'; -@import 'ItaliaTheme/Print/bandi'; @import 'ItaliaTheme/Print/persona'; @import 'ItaliaTheme/Print/event'; @import 'ItaliaTheme/Print/servizio';