From 0b2d71d7699be7fa1f8bf21ac575b354a2f2dda9 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com>
Date: Fri, 12 Jul 2024 12:31:39 +0200
Subject: [PATCH] fix: view dates for Events in Listing image template (#717)
---
.../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')}
+
+
+
+
+
+
+ {intl.formatMessage(messages.from)}
+
+ {_start.format('DD/MM')}
+
+
+
+ {intl.formatMessage(messages.to)}
+
+ {_end.format('DD/MM')}
+
+
+
-
-
-
+
+
+
{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';