Skip to content

Commit

Permalink
fix: view dates for Events in Listing image template (#717)
Browse files Browse the repository at this point in the history
  • Loading branch information
@giuliaghisini
giuliaghisini authored Jul 12, 2024
1 parent 8c755cd commit 0b2d71d
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 91 deletions.
108 changes: 89 additions & 19 deletions src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -34,48 +34,118 @@ export const CardCalendar = ({ start, end, recurrence, rrule }) => {
intl,
);
if ((_start && _end) || recurrenceDates) {
if (!recurrenceDates && _start.isSame(_end, 'day')) {
return (
<div className="card-calendar d-flex flex-column justify-content-center">
<span className="card-date">{_start.format('D')}</span>
<span className="card-day">{_end.format('MMMM')}</span>
</div>
);
if (!recurrenceDates) {
if (_start.isSame(_end, 'day')) {
return (
<div className="card-calendar d-flex flex-column justify-content-center">
<span className="card-date date">{_start.format('D')}</span>
<span className="card-day date">{_end.format('MMMM')}</span>
</div>
);
} else if (!_start.isSame(_end, 'year')) {
return (
<div className="custom-calendar-card">
<div className="card-calendar extended d-flex flex-column justify-content-center px-2 w-auto">
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.from)}
</div>
<span className="date">{_start.format('DD/MM/YY')}</span>
</span>
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.to)}
</div>
<span className="date">{_end.format('DD/MM/YY')}</span>
</span>
</div>
</div>
);
} else {
return (
<div className="custom-calendar-card">
<div className="card-calendar extended d-flex flex-column justify-content-center px-2">
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.from)}
</div>
<span className="date">{_start.format('DD/MM')}</span>
</span>
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.to)}
</div>
<span className="date">{_end.format('DD/MM')}</span>
</span>
</div>
</div>
);
}
} else if (recurrenceDates) {
let dateFormat = 'DD/MM';
if (
!recurrenceDates?.recurrenceStart?.isSame(
recurrenceDates?.recurrenceEnd,
'year',
)
)
dateFormat = 'DD/MM/YY';
return (
<div className="custom-calendar-card">
<div className="card-calendar d-flex flex-column justify-content-center">
<span className="card-date d-flex justify-content-center align-items-baseline">
<div className="date-label mr-1">
<div
className={cx(
'card-calendar extended d-flex flex-column justify-content-center px-2',
{
'w-auto': dateFormat !== 'DD/MM',
},
)}
>
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.from)}
</div>
<span className="date">
{recurrenceDates.recurrenceStart?.format('DD/MM')}
{recurrenceDates.recurrenceStart?.format(dateFormat)}
</span>
</span>
<span className="card-date d-flex justify-content-center align-items-baseline">
<div className="date-label mr-1">
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.to)}
</div>
<span className="date">
{recurrenceDates?.recurrenceEnd?.format('DD/MM')}
{recurrenceDates?.recurrenceEnd?.format(dateFormat)}
</span>
</span>
</div>
</div>
);
} else {
} else if (_start.format('M') === _end.format('M')) {
return (
<div className="custom-calendar-card">
<div className="card-calendar d-flex flex-column justify-content-center">
<span className="card-date d-flex justify-content-center align-items-baseline">
<div className="date-label mr-1">
<span className="date day start-date">{_start.format('D')}</span>{' '}
<span className="date day divider">-</span>{' '}
<span className="date day end-date">{_end.format('D')}</span>
</span>
<span className="card-date d-flex justify-content-center align-items-baseline">
<span className="date month">{_end.format('MMM')}</span>
</span>
</div>
</div>
);
} else {
return (
<div className="custom-calendar-card">
<div className="card-calendar extended d-flex flex-column justify-content-center px-2">
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.from)}
</div>
<span className="date">{_start.format('DD/MM')}</span>
</span>
<span className="card-date d-flex justify-content-center align-items-baseline">
<div className="date-label mr-1">
<span className="card-date d-flex justify-content-between align-items-baseline">
<div className="date-label me-1">
{intl.formatMessage(messages.to)}
</div>
<span className="date">{_end.format('DD/MM')}</span>
Expand Down
88 changes: 88 additions & 0 deletions theme/ItaliaTheme/Components/_card.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
}
72 changes: 0 additions & 72 deletions theme/ItaliaTheme/Views/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;

Expand Down
7 changes: 7 additions & 0 deletions theme/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@mixin rem-size($key, $value) {
#{$key}: calc($value / 18) + rem;
}

@mixin margin-size($key, $value) {
#{$key}: calc($value / 18) + em;
}
2 changes: 2 additions & 0 deletions theme/site.scss
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand Down

0 comments on commit 0b2d71d

Please sign in to comment.