diff --git a/RELEASE.md b/RELEASE.md index 594ea1e5b..b3ec4d307 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -32,8 +32,15 @@ ## Versione X.X.X (dd/mm/yyyy) +### Migliorie + +- ... + ### Fix +- Sono stati apportati alcuni aggiustamenti ai sottositi con l'intento di migliorare l'esperienza e aumentare l'accessibilità. Ci sono state modifiche, principalmente riguardanti i colori, alla visualizzazione della ricerca, ai blocchi info, al blocco contenuto in primo piano e al blocco icone. +- È stata corretta la visualizzazione dei pulsanti nel blocco testo per i sottositi. +- Sono stati corretti alcuni errori nel menu mobile per i sottositi. Ora la lente di ingrandimento è visibile nei sottositi con colori scuri e la freccia nei pulsanti "link ad altro" è del colore del sottosito. - Reso il link ai diversi social elencati parlante, ora viene riportato "Seguici su nome_del_social" - Sistemato lo skiplink "Vai al contenuto" nella pagina principale di ricerca del sito - Migliorato l'HTML semantico per le card del blocco rss per migliorare l'esperienza d'uso con Screen Reader diff --git a/src/components/ItaliaTheme/Blocks/Info/Edit.jsx b/src/components/ItaliaTheme/Blocks/Info/Edit.jsx index 706e35702..9642ccec0 100644 --- a/src/components/ItaliaTheme/Blocks/Info/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/Info/Edit.jsx @@ -9,12 +9,8 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { injectIntl } from 'react-intl'; import cx from 'classnames'; -import { - Container, - Row, - Col, - Icon, -} from 'design-react-kit/dist/design-react-kit'; +import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit'; +import { Icon } from '@italia/components/ItaliaTheme'; import { createContent } from '@plone/volto/actions'; import { SidebarPortal } from '@plone/volto/components'; diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx index 2a72054fa..340bc9861 100644 --- a/src/components/SelectInput/SelectInput.jsx +++ b/src/components/SelectInput/SelectInput.jsx @@ -110,7 +110,7 @@ SelectContainer.propTypes = { const Option = injectLazyLibs('reactSelect')((props) => { const components = props.reactSelect.components; return ( -
+
); diff --git a/theme/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Blocks/_info.scss index 99c577ea2..eb7ae44df 100644 --- a/theme/ItaliaTheme/Blocks/_info.scss +++ b/theme/ItaliaTheme/Blocks/_info.scss @@ -37,10 +37,19 @@ $tertiary-hover: darken($gray-border, 10%); &.bg-color-true { .draftjs-buttons a { background-color: #fff; + border: 1px solid transparent; color: $text-color; + span { + color: $text-color; + } + &:hover { - background-color: #000; + background-color: $primary; + border-color: #fff; color: #fff; + span { + color: #fff; + } } } } diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss new file mode 100644 index 000000000..7955bf31c --- /dev/null +++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss @@ -0,0 +1,51 @@ +@use '../../all_variables' as *; + +@mixin info($subsite-primary, $subsite-secondary, $subsite-light-theme) { + .public-ui { + .infoblock { + .bg-alert-primary, + .bg-alert-secondary, + .bg-alert-tertiary { + &.bg-color-true { + .draftjs-buttons { + a { + &:hover { + border-color: $body-color; + background-color: $subsite-primary; + @if $subsite-light-theme { + color: $body-color; + span { + color: $body-color; + } + } + } + } + } + } + } + .bg-alert-primary { + svg.icon { + color: $subsite-primary; + fill: $subsite-primary; + } + &.bg-color-true { + p, + span, + svg.icon { + color: $body-color; + fill: $body-color; + } + } + .draftjs-buttons { + a { + background-color: $subsite-secondary; + color: #fff; + span { + color: #fff; + } + } + } + } + } + } +} diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss index d1735b397..b65cb8ed0 100644 --- a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss +++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss @@ -1,6 +1,11 @@ @use '../../all_variables' as *; -@mixin block($subsite-primary, $subsite-secondary, $subsite-secondary-text) { +@mixin block( + $subsite-primary, + $subsite-secondary, + $subsite-secondary-text, + $subsite-light-theme +) { .container .block { .searchSections { @if $subsite-secondary != $subsite-primary { @@ -27,6 +32,11 @@ } } } + @if $subsite-light-theme { + button.rounded-right svg { + fill: $body-color !important; + } + } } } } diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss new file mode 100644 index 000000000..21d9eb77c --- /dev/null +++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss @@ -0,0 +1,18 @@ +@use '../all_variables' as *; + +@mixin cms-ui($subsite-primary, $subsite-secondary, $subsite-primary-text) { + &.cms-ui { + .color-list-widget { + .button { + &.primary, + &.primary.active { + background-color: $subsite-primary; + } + &.secondary, + &.secondary.active { + background-color: $subsite-secondary; + } + } + } + } +} diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss new file mode 100644 index 000000000..9040bb21f --- /dev/null +++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss @@ -0,0 +1,59 @@ +@use '../all_variables' as *; + +@mixin main( + $subsite-primary, + $subsite-secondary, + $subsite-primary-text, + $subsite-link-color +) { + &.public-ui, + &.cms-ui { + .draftjs-buttons { + a { + background-color: $subsite-primary; + border-radius: $subsite-primary; + color: $subsite-primary-text; + + &:hover, + &:active { + background-color: darken($subsite-primary, 8); + color: $subsite-primary-text; + } + } + } + .pagination { + .page-item { + .page-link { + &[aria-current] { + border: 1px solid $subsite-primary; + color: $subsite-primary; + } + &:hover { + color: $subsite-link-color; + svg { + fill: $subsite-link-color !important; + } + } + } + } + } + .bg-primary { + background-color: $subsite-primary !important; + } + .bg-alert-primary { + border-color: $subsite-primary; + &.bg-color-true { + background-color: $subsite-primary !important; + } + } + .bg-secondary { + background-color: $subsite-secondary !important; + } + .bg-alert-secondary { + border-color: $subsite-secondary; + &.bg-color-true { + background-color: $subsite-secondary !important; + } + } + } +} diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss new file mode 100644 index 000000000..9aecfda4d --- /dev/null +++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss @@ -0,0 +1,13 @@ +@mixin search($subsite-link-color) { + .search-results-wrapper { + .ordering-widget { + .react-select__option--is-focused { + border-color: $subsite-link-color !important; + box-shadow: 0 0 0 2px $subsite-link-color !important; + } + } + } + .toggles label input[type='checkbox']:checked + .lever:after { + background-color: $subsite-link-color; + } +} diff --git a/theme/ItaliaTheme/Subsites/_common.scss b/theme/ItaliaTheme/Subsites/_common.scss index e0d6c0598..0286c2cbd 100644 --- a/theme/ItaliaTheme/Subsites/_common.scss +++ b/theme/ItaliaTheme/Subsites/_common.scss @@ -7,6 +7,7 @@ @import '~bootstrap-italia/src/scss/functions'; @import '~bootstrap-italia/src/scss/utilities/colors_vars'; @import '~bootstrap-italia/src/scss/variables'; +@import 'templates/light-theme-common'; @import 'mixin'; @import 'homepage'; @import '../../site-variables'; diff --git a/theme/ItaliaTheme/Subsites/_mixin.scss b/theme/ItaliaTheme/Subsites/_mixin.scss index c263fedc4..c0e9f187f 100644 --- a/theme/ItaliaTheme/Subsites/_mixin.scss +++ b/theme/ItaliaTheme/Subsites/_mixin.scss @@ -9,6 +9,7 @@ @use 'bootstrap-italia/custom/buttons' as bs-buttons; @use 'bootstrap-italia/custom/chips' as bs-chips; @use 'bootstrap-italia/custom/card' as bs-card; +@use 'bootstrap-italia/custom/forms' as bs-forms; @use 'bootstrap-italia/custom/dropdown' as bs-dropdown; @use 'bootstrap-italia/custom/linklist' as bs-linklist; @use 'bootstrap-italia/custom/navscroll' as bs-navscroll; @@ -19,8 +20,12 @@ @use 'ItaliaTheme/Blocks/highlitedContent' as it-highlight; @use 'ItaliaTheme/Blocks/argumentsInEvidence' as it-args-evidence; @use 'ItaliaTheme/Blocks/searchSections' as it-search-sections; +@use 'ItaliaTheme/Blocks/info' as it-info; @use 'ItaliaTheme/Views/common' as it-views; @use 'ItaliaTheme/common' as it-common; +@use 'ItaliaTheme/cms-ui' as it-cms-ui; +@use 'ItaliaTheme/search' as it-search; +@use 'ItaliaTheme/main' as it-main; @mixin define-subsite( $subsite-style, @@ -78,10 +83,23 @@ $subsite-secondary-text ); @include bs-card.card($subsite-primary, $subsite-link-color); + @include bs-forms.forms($subsite-link-color); @include bs-dropdown.dropdown($subsite-link-color); @include bs-linklist.linklist($subsite-primary, $subsite-link-color); @include bs-navscroll.navscroll($subsite-link-color); @include it-footer.footer($subsite-primary, $subsite-primary-text); + @include it-main.main( + $subsite-primary, + $subsite-secondary, + $subsite-primary-text, + $subsite-link-color + ); + @include it-cms-ui.cms-ui( + $subsite-primary, + $subsite-secondary, + $subsite-primary-text + ); + @include it-search.search($subsite-link-color); @include it-card-image-evidence.card($subsite-link-color); @include it-complete-link.block( $subsite-secondary, @@ -93,8 +111,15 @@ @include it-search-sections.block( $subsite-primary, $subsite-secondary, - $subsite-secondary-text + $subsite-secondary-text, + $subsite-light-theme ); + @include it-info.info( + $subsite-primary, + $subsite-secondary, + $subsite-light-theme + ); + @include it-views.common( $subsite-primary, $subsite-secondary, @@ -111,10 +136,12 @@ color: color-hover($subsite-link-color); } } - - .icon-primary { - fill: $subsite-primary !important; - } + } + .icon-primary { + fill: $subsite-primary !important; + } + .btn-link { + color: $subsite-link-color; } } } diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss new file mode 100644 index 000000000..1ca3ef524 --- /dev/null +++ b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss @@ -0,0 +1,18 @@ +@use '../../all_variables' as *; + +@mixin forms($subsite-link-color) { + .public-ui .form-check { + [type='checkbox'], + [type='radio'] { + &:checked + label { + &::after { + border-color: $subsite-link-color; + background-color: $subsite-link-color; + } + &::before { + border-color: $subsite-link-color; + } + } + } + } +} diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss index d03251a88..388a7a058 100644 --- a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss +++ b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss @@ -44,13 +44,12 @@ a { &.rounded-icon { svg { - @if $subsite-light-theme { - fill: $subsite-primary-text; - } @else { - fill: $subsite-primary; - } + fill: $subsite-primary-text; } } + &.search-link { + outline-color: $subsite-primary-text !important; + } } } } diff --git a/theme/ItaliaTheme/Subsites/templates/_light-pink.scss b/theme/ItaliaTheme/Subsites/templates/_light-pink.scss index 5c0a3c713..e3f196f49 100644 --- a/theme/ItaliaTheme/Subsites/templates/_light-pink.scss +++ b/theme/ItaliaTheme/Subsites/templates/_light-pink.scss @@ -17,5 +17,13 @@ body.subsite-light-pink { } } } + .infoblock { + .bg-alert-primary { + svg.icon { + color: $subsite-light-pink-secondary; + fill: $subsite-light-pink-secondary; + } + } + } } } diff --git a/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss b/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss new file mode 100644 index 000000000..459e59a18 --- /dev/null +++ b/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss @@ -0,0 +1,51 @@ +body { + &[class*='subsite-light'] { + .public-ui { + .icon-primary { + fill: $pager-font-color !important; + } + } + &.public-ui, + &.cms-ui { + .pagination { + .page-item { + .page-link[aria-current] { + border: 1px solid $pager-font-color !important; + color: $pager-font-color !important; + } + } + } + } + .block.highlitedContent { + .bg-primary .card .card-body { + .card-title a, + .card-text { + color: $body-color; + } + .categoryicon-top { + .text, + .icon, + .data { + color: $body-color; + fill: $body-color; + } + } + } + } + .search-container { + .filter-wrapper { + &.select-filter { + .react-select__control { + .react-select__placeholder, + .react-select__single-value { + color: $body-color !important; + } + .react-select__indicators svg { + fill: $body-color; + } + } + } + } + } + } +} diff --git a/theme/bootstrap-override/bootstrap-italia/_headercenter.scss b/theme/bootstrap-override/bootstrap-italia/_headercenter.scss index cd72208b5..447347c6d 100644 --- a/theme/bootstrap-override/bootstrap-italia/_headercenter.scss +++ b/theme/bootstrap-override/bootstrap-italia/_headercenter.scss @@ -15,7 +15,7 @@ .it-search-wrapper { a.search-link { - outline: $header-center-bg-color 2px solid !important; + outline: $header-center-bg-color 1px solid !important; &:focus { box-shadow: 0 0 0 5px $focus-outline-color !important; diff --git a/theme/extras/_search.scss b/theme/extras/_search.scss index 90c1d92c0..bd59427b1 100644 --- a/theme/extras/_search.scss +++ b/theme/extras/_search.scss @@ -107,6 +107,7 @@ body.search-modal-opened { } .react-select__option--is-focused { + color: #fff; border-color: var(--focus-outline-color) !important; box-shadow: 0 0 0 2px var(--focus-outline-color) !important; outline: none !important;