From e2936e2c8fd064b1212b99fca3e719df42f91bfd Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Fri, 12 Jul 2024 12:28:12 +0200 Subject: [PATCH] fix: view dates for Events in Listing image template --- .../Blocks/Listing/Commons/CardCalendar.jsx | 108 +++++++++++++++--- theme/ItaliaTheme/Components/_card.scss | 88 ++++++++++++++ theme/ItaliaTheme/Views/_common.scss | 72 ------------ theme/_mixins.scss | 7 ++ theme/site.scss | 2 + 5 files changed, 186 insertions(+), 91 deletions(-) create mode 100644 theme/ItaliaTheme/Components/_card.scss create mode 100644 theme/_mixins.scss diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx index fcbc4dbfa..f5c6cfa91 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl, defineMessages } from 'react-intl'; - +import cx from 'classnames'; import { viewDate, getRealStartAndEndWithRecurrence, @@ -34,48 +34,118 @@ export const CardCalendar = ({ start, end, recurrence, rrule }) => { intl, ); if ((_start && _end) || recurrenceDates) { - if (!recurrenceDates && _start.isSame(_end, 'day')) { - return ( -
- {_start.format('D')} - {_end.format('MMMM')} -
- ); + if (!recurrenceDates) { + if (_start.isSame(_end, 'day')) { + return ( +
+ {_start.format('D')} + {_end.format('MMMM')} +
+ ); + } else if (!_start.isSame(_end, 'year')) { + return ( +
+
+ +
+ {intl.formatMessage(messages.from)} +
+ {_start.format('DD/MM/YY')} + + +
+ {intl.formatMessage(messages.to)} +
+ {_end.format('DD/MM/YY')} + +
+
+ ); + } else { + return ( +
+
+ +
+ {intl.formatMessage(messages.from)} +
+ {_start.format('DD/MM')} + + +
+ {intl.formatMessage(messages.to)} +
+ {_end.format('DD/MM')} + +
+
+ ); + } } else if (recurrenceDates) { + let dateFormat = 'DD/MM'; + if ( + !recurrenceDates?.recurrenceStart?.isSame( + recurrenceDates?.recurrenceEnd, + 'year', + ) + ) + dateFormat = 'DD/MM/YY'; return (
-
- -
+
+ +
{intl.formatMessage(messages.from)}
- {recurrenceDates.recurrenceStart?.format('DD/MM')} + {recurrenceDates.recurrenceStart?.format(dateFormat)} - -
+ +
{intl.formatMessage(messages.to)}
- {recurrenceDates?.recurrenceEnd?.format('DD/MM')} + {recurrenceDates?.recurrenceEnd?.format(dateFormat)}
); - } else { + } else if (_start.format('M') === _end.format('M')) { return (
-
+ {_start.format('D')}{' '} + -{' '} + {_end.format('D')} + + + {_end.format('MMM')} + +
+
+ ); + } else { + return ( +
+
+ +
{intl.formatMessage(messages.from)}
{_start.format('DD/MM')} - -
+ +
{intl.formatMessage(messages.to)}
{_end.format('DD/MM')} diff --git a/theme/ItaliaTheme/Components/_card.scss b/theme/ItaliaTheme/Components/_card.scss new file mode 100644 index 000000000..45ef7e9e4 --- /dev/null +++ b/theme/ItaliaTheme/Components/_card.scss @@ -0,0 +1,88 @@ +.public-ui { + .card-title { + margin: 0 !important; + margin-bottom: 1rem !important; + line-height: 1em; + + a { + color: $primary; + font-size: 1.125rem; + line-height: 1.625rem; + } + } + + .genericcard { + .card-title { + margin: 0 !important; + margin-bottom: 0.625rem !important; + line-height: 1em; + + a { + color: $primary; + font-size: 1.125rem; + line-height: 1.625rem; + } + } + } + + .card-wrapper.card-teaser-wrapper > .card-teaser { + &.attachment { + flex-wrap: nowrap; + + .card-title { + a { + font-size: 1rem; + } + } + } + + .card-body { + .category-top { + hyphens: auto; + } + } + } + + .card.bigborder { + border: 1px solid #d9dadb; + border-left-width: 10px !important; + } +} + +.custom-calendar-card { + .card-calendar.extended { + width: 100px; + + .card-date .date-label { + @include rem-size(font-size, 16); + font-weight: 600; + + + .date { + @include rem-size(font-size, 20); + } + } + } + + .card-calendar { + .card-date { + .date { + font-family: $font-family-sans-serif; + font-size: 1.3rem; + font-weight: 700; + line-height: 1.4rem; + + &.day { + @include rem-size(font-size, 28); + @include rem-size(line-height, 28); + } + + &.month { + font-weight: 600; + text-transform: capitalize; + @include rem-size(font-size, 16); + @include rem-size(line-height, 21.1); + } + } + } + } +} diff --git a/theme/ItaliaTheme/Views/_common.scss b/theme/ItaliaTheme/Views/_common.scss index fccca617d..c29da942e 100644 --- a/theme/ItaliaTheme/Views/_common.scss +++ b/theme/ItaliaTheme/Views/_common.scss @@ -103,11 +103,6 @@ h6 { } .public-ui { - .card.bigborder { - border: 1px solid #d9dadb; - border-left-width: 10px !important; - } - .link-esterni { .card-title { border-bottom: 1px solid $neutral-1-a2; @@ -119,32 +114,6 @@ h6 { font-size: 1.4rem; } - .card-title { - margin: 0 !important; - margin-bottom: 1rem !important; - line-height: 1em; - - a { - color: $primary; - font-size: 1.125rem; - line-height: 1.625rem; - } - } - - .genericcard { - .card-title { - margin: 0 !important; - margin-bottom: 0.625rem !important; - line-height: 1em; - - a { - color: $primary; - font-size: 1.125rem; - line-height: 1.625rem; - } - } - } - .link-list-wrapper { ul { li { @@ -251,47 +220,6 @@ div.sticky-wrapper { } } -.card-wrapper { - .custom-calendar-card { - .card-calendar { - width: 6.4rem; - text-align: left; - - .date-label { - width: 1.4rem; - font-family: $font-family-monospace; - font-size: 0.7rem; - font-weight: 500; - text-align: center; - text-transform: lowercase; - } - - .date { - font-family: $font-family-monospace; - font-size: 1.3rem; - font-weight: 200; - } - } - } -} - -.public-ui .card-wrapper.card-teaser-wrapper > .card-teaser { - &.attachment { - flex-wrap: nowrap; - - .card-title { - a { - font-size: 1rem; - } - } - } - .card-body { - .category-top { - hyphens: auto; - } - } -} - .icon-argument-container { display: flex; diff --git a/theme/_mixins.scss b/theme/_mixins.scss new file mode 100644 index 000000000..afb249093 --- /dev/null +++ b/theme/_mixins.scss @@ -0,0 +1,7 @@ +@mixin rem-size($key, $value) { + #{$key}: calc($value / 18) + rem; +} + +@mixin margin-size($key, $value) { + #{$key}: calc($value / 18) + em; +} diff --git a/theme/site.scss b/theme/site.scss index 5bed190b0..f81c1892a 100644 --- a/theme/site.scss +++ b/theme/site.scss @@ -1,6 +1,7 @@ @import 'site-variables'; @import 'bootstrap-override/bootstrap-italia-site'; @import 'cms-ui'; +@import 'mixins'; @import 'extras/blocks'; @import 'extras/sidebar'; @import 'extras/toolbar'; @@ -25,6 +26,7 @@ @import 'ItaliaTheme/Addons/customerSatisfaction'; @import 'ItaliaTheme/Addons/volto-gdpr-privacy'; @import 'ItaliaTheme/Components/unauthorized'; +@import 'ItaliaTheme/Components/card'; @import 'ItaliaTheme/Components/parentSiteMenu'; @import 'ItaliaTheme/Components/tertiaryMenu'; @import 'ItaliaTheme/Components/subsiteHeader';