From efe7896e97509b9f4c5faadd3e4d5f441244d437 Mon Sep 17 00:00:00 2001 From: Molochem Date: Wed, 10 Jan 2024 11:25:07 +0100 Subject: [PATCH 1/2] added the Volto-Light-Theme --- frontend/package.json | 4 +++- frontend/src/addons/volto-plonede/package.json | 6 +++++- frontend/yarn.lock | 18 ++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index afbeaffe..c7a7efab 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -148,6 +148,7 @@ "@kitconcept/volto-export": "1.1.0", "@kitconcept/volto-heading-block": "2.4.0", "@kitconcept/volto-introduction-block": "1.0.0", + "@kitconcept/volto-light-theme": "3.0.0-alpha.1", "@kitconcept/volto-separator-block": "4.0.0", "@kitconcept/volto-slider-block": "5.1.1", "@plone-collective/volto-authomatic": "1.3.0", @@ -177,5 +178,6 @@ "volta": { "node": "16.20.0", "yarn": "3.5.1" - } + }, + "theme": "@kitconcept/volto-light-theme" } diff --git a/frontend/src/addons/volto-plonede/package.json b/frontend/src/addons/volto-plonede/package.json index b65123bb..e831d532 100644 --- a/frontend/src/addons/volto-plonede/package.json +++ b/frontend/src/addons/volto-plonede/package.json @@ -13,7 +13,11 @@ "scripts": { "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon" }, + "addons": [ + "@kitconcept/volto-light-theme" + ], "dependencies": { - "@plone/scripts": "*" + "@plone/scripts": "*", + "@kitconcept/volto-light-theme":"3.0.0-alpha.1" } } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 1357f550..68d6442f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2749,6 +2749,23 @@ __metadata: languageName: node linkType: hard +"@kitconcept/volto-light-theme@npm:3.0.0-alpha.1": + version: 3.0.0-alpha.1 + resolution: "@kitconcept/volto-light-theme@npm:3.0.0-alpha.1" + peerDependencies: + "@eeacms/volto-accordion-block": ^10.4.0 + "@kitconcept/volto-button-block": ^2.3.1 + "@kitconcept/volto-dsgvo-banner": ^1.3.0 + "@kitconcept/volto-heading-block": ^2.4.0 + "@kitconcept/volto-highlight-block": ^3.0.0 + "@kitconcept/volto-introduction-block": ^1.0.0 + "@kitconcept/volto-separator-block": ^4.0.0 + "@kitconcept/volto-slider-block": ^6.1.0 + "@plone/volto": ^17.8.0 + checksum: 81a4c8a66f439a16878d1584bd471086135ed2bd280d6da79eb254021694814a9bfbcba5b18440b2a193e116bdf361cfafbc9acfa81e15914ed94d1559cd8c12 + languageName: node + linkType: hard + "@kitconcept/volto-separator-block@npm:4.0.0": version: 4.0.0 resolution: "@kitconcept/volto-separator-block@npm:4.0.0" @@ -12148,6 +12165,7 @@ __metadata: "@kitconcept/volto-export": 1.1.0 "@kitconcept/volto-heading-block": 2.4.0 "@kitconcept/volto-introduction-block": 1.0.0 + "@kitconcept/volto-light-theme": 3.0.0-alpha.1 "@kitconcept/volto-separator-block": 4.0.0 "@kitconcept/volto-slider-block": 5.1.1 "@plone-collective/volto-authomatic": 1.3.0 From 61ef047df914e3d28f8401abc4845ff064aaca0c Mon Sep 17 00:00:00 2001 From: Molochem Date: Thu, 11 Jan 2024 14:18:22 +0100 Subject: [PATCH 2/2] add VLT, remove previous customizations --- .../src/components/theme/Style.jsx | 12 - .../src/components/theme/ThemeSwitcher.jsx | 23 - .../theme/EventDetails/EventDetails.jsx | 144 -- .../volto/components/theme/Footer/Footer.jsx | 159 -- .../volto/components/theme/Header/Header.jsx | 70 - .../volto/components/theme/Logo/Logo.jsx | 59 - .../volto/components/theme/Logo/Logo.svg | 3 - .../theme/Navigation/Navigation.jsx | 234 --- .../volto/components/theme/Search/Search.jsx | 382 ----- .../theme/SearchWidget/SearchWidget.jsx | 92 -- .../volto/components/theme/View/EventView.jsx | 115 -- .../src/addons/volto-plonede/src/index.js | 1 + .../volto-plonede/src/theme/custom.less | 3 - .../src/theme/extras/custom.less | 3 - frontend/theme/elements/container.variables | 2 - frontend/theme/extras/blocks.less | 1383 ----------------- frontend/theme/extras/custom.less | 609 -------- frontend/theme/extras/custom.overrides | 9 - frontend/theme/theme.config | 2 +- 19 files changed, 2 insertions(+), 3303 deletions(-) delete mode 100644 frontend/src/addons/volto-plonede/src/components/theme/Style.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/components/theme/ThemeSwitcher.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Footer/Footer.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Header/Header.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.svg delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Navigation/Navigation.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Search/Search.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/View/EventView.jsx delete mode 100644 frontend/src/addons/volto-plonede/src/theme/custom.less delete mode 100644 frontend/src/addons/volto-plonede/src/theme/extras/custom.less delete mode 100644 frontend/theme/elements/container.variables delete mode 100644 frontend/theme/extras/blocks.less delete mode 100644 frontend/theme/extras/custom.less delete mode 100644 frontend/theme/extras/custom.overrides diff --git a/frontend/src/addons/volto-plonede/src/components/theme/Style.jsx b/frontend/src/addons/volto-plonede/src/components/theme/Style.jsx deleted file mode 100644 index 15e2f3ba..00000000 --- a/frontend/src/addons/volto-plonede/src/components/theme/Style.jsx +++ /dev/null @@ -1,12 +0,0 @@ -// import React from 'react'; -// import ThemeSwitcher from './ThemeSwitcher'; - -// const Style = () => { -// return ( -// <> -// -// -// ); -// }; - -// export default Style; diff --git a/frontend/src/addons/volto-plonede/src/components/theme/ThemeSwitcher.jsx b/frontend/src/addons/volto-plonede/src/components/theme/ThemeSwitcher.jsx deleted file mode 100644 index ff84a795..00000000 --- a/frontend/src/addons/volto-plonede/src/components/theme/ThemeSwitcher.jsx +++ /dev/null @@ -1,23 +0,0 @@ -// import { useState } from 'react'; -// import { BodyClass } from '@plone/volto/helpers'; -// import { Icon } from '@plone/volto/components'; -// import Logo from '../../icons/logo.svg'; - -// const themeSwitcher = () => { -// const [darkMode, setDarkMode] = useState(false); -// return ( -// <> -// -//
-// -//
-// -// ); -// }; - -// export default themeSwitcher; diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx deleted file mode 100644 index 6089bab8..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx +++ /dev/null @@ -1,144 +0,0 @@ -import React from 'react'; -import { defineMessages, useIntl } from 'react-intl'; -import { Segment, Header, List } from 'semantic-ui-react'; -import { - When, - Recurrence, -} from '@plone/volto/components/theme/View/EventDatesInfo'; - -const messages = defineMessages({ - what: { - id: 'event_what', - defaultMessage: 'What', - }, - when: { - id: 'event_when', - defaultMessage: 'When', - }, - allDates: { - id: 'event_alldates', - defaultMessage: 'All dates', - }, - downloadEvent: { - id: 'Download Event', - defaultMessage: 'Download Event', - }, - where: { - id: 'event_where', - defaultMessage: 'Where', - }, - contactName: { - id: 'event_contactname', - defaultMessage: 'Contact Name', - }, - contactPhone: { - id: 'event_contactphone', - defaultMessage: 'Contact Phone', - }, - attendees: { - id: 'event_attendees', - defaultMessage: 'Attendees', - }, - website: { - id: 'event_website', - defaultMessage: 'Website', - }, - visitWebsite: { - id: 'visit_external_website', - defaultMessage: 'Visit external website', - }, -}); - -const EventDetails = ({ content, display_as = 'aside' }) => { - const intl = useIntl(); - return ( - - {content.subjects?.length > 0 && ( - <> -
- {intl.formatMessage(messages.what)} -
- - - )} -
- {intl.formatMessage(messages.when)} -
- - {content.recurrence && ( - <> -
- {intl.formatMessage(messages.allDates)} -
- - - )} - {content.location && ( - <> -
- {intl.formatMessage(messages.where)} -
-

{content.location}

- - )} - {content.contact_name && ( - <> -
- {intl.formatMessage(messages.contactName)} -
-

- {content.contact_email ? ( - - {content.contact_name} - - ) : ( - content.contact_name - )} -

- - )} - {content.contact_phone && ( - <> -
- {intl.formatMessage(messages.contactPhone)} -
-

{content.contact_phone}

- - )} - {content.attendees?.length > 0 && ( - <> -
- {intl.formatMessage(messages.attendees)} -
- - - )} - {content.event_url && ( - <> -
- {intl.formatMessage(messages.website)} -
-

- - {intl.formatMessage(messages.visitWebsite)} - -

- - )} - - ); -}; - -export default EventDetails; diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Footer/Footer.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Footer/Footer.jsx deleted file mode 100644 index 1ea270d9..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Footer/Footer.jsx +++ /dev/null @@ -1,159 +0,0 @@ -/** - * Footer component. - * @module components/theme/Footer/Footer - */ - -import React from 'react'; -import { Container, List, Segment } from 'semantic-ui-react'; - -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; -import { useSelector } from 'react-redux'; -import { UniversalLink, Logo } from '@plone/volto/components'; -import config from '@plone/volto/registry'; - -const messages = defineMessages({ - copyright: { - id: 'Copyright', - defaultMessage: 'Copyright', - }, -}); - -/** - * Component to display the footer. - * @function Footer - * @param {Object} intl Intl object - * @returns {string} Markup of the component - */ -const Footer = ({ intl }) => { - const { settings } = config; - const lang = useSelector((state) => state.intl.locale); - return ( - - - - ® }} - /> - ), - copyright: ( - © - ), - current_year: new Date().getFullYear(), - plonefoundation: ( - - - - ), - }} - />{' '} - - - - ), - }} - /> - - - {/* wrap in div for a11y reasons: listitem role cannot be on the element directly */} -
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-
-
- -
- - - - - ); -}; - -/** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ -Footer.propTypes = { - /** - * i18n object - */ -}; - -export default injectIntl(Footer); diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Header/Header.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Header/Header.jsx deleted file mode 100644 index a3456dac..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Header/Header.jsx +++ /dev/null @@ -1,70 +0,0 @@ -/** - * Header component. - * @module components/theme/Header/Header - */ - -import React, { Component } from 'react'; -import { Container, Segment } from 'semantic-ui-react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; - -import { Logo, Navigation, SearchWidget } from '@plone/volto/components'; - -/** - * Header component class. - * @class Header - * @extends Component - */ -class Header extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - token: PropTypes.string, - pathname: PropTypes.string.isRequired, - }; - - /** - * Default properties. - * @property {Object} defaultProps Default properties. - * @static - */ - static defaultProps = { - token: null, - }; - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( - - -
-
-
- -
-
-
- -
-
- -
-
-
-
- - - ); - } -} - -export default connect((state) => ({ - token: state.userSession.token, -}))(Header); diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.jsx deleted file mode 100644 index ef987c75..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.jsx +++ /dev/null @@ -1,59 +0,0 @@ -/** - * Logo component. - * @module components/theme/Logo/Logo - */ -import { useEffect } from 'react'; -import { Image } from 'semantic-ui-react'; -import { ConditionalLink } from '@plone/volto/components'; -import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg'; -import { useSelector, useDispatch } from 'react-redux'; -import { getNavroot } from '@plone/volto/actions'; -import { - flattenToAppURL, - hasApiExpander, - getBaseUrl, - toPublicURL, -} from '@plone/volto/helpers'; - -/** - * Logo component class. - * @function Logo - * @param {Object} intl Intl object - * @returns {string} Markup of the component. - */ -const Logo = () => { - const pathname = useSelector((state) => state.router.location.pathname); - const site = useSelector((state) => state.site.data); - const navroot = useSelector((state) => state.navroot.data); - const dispatch = useDispatch(); - - useEffect(() => { - if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) { - dispatch(getNavroot(getBaseUrl(pathname))); - } - }, [dispatch, pathname]); - - // remove trailing slash - const currentURL = toPublicURL(pathname).replace(/\/$/, ''); - - return ( - - {navroot?.navroot?.title} - - ); -}; - -export default Logo; diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.svg b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.svg deleted file mode 100644 index d3677de1..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Logo/Logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Navigation/Navigation.jsx deleted file mode 100644 index c3ba553a..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Navigation/Navigation.jsx +++ /dev/null @@ -1,234 +0,0 @@ -/** - * Navigation components. - * @module components/theme/Navigation/Navigation - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { compose } from 'redux'; -import { NavLink } from 'react-router-dom'; -import { defineMessages, injectIntl } from 'react-intl'; -import { Menu } from 'semantic-ui-react'; -import cx from 'classnames'; -import { BodyClass, getBaseUrl, hasApiExpander } from '@plone/volto/helpers'; -import config from '@plone/volto/registry'; -import { getNavigation } from '@plone/volto/actions'; -import { CSSTransition } from 'react-transition-group'; -import NavItems from '@plone/volto/components/theme/Navigation/NavItems'; - -const messages = defineMessages({ - closeMobileMenu: { - id: 'Close menu', - defaultMessage: 'Close menu', - }, - openMobileMenu: { - id: 'Open menu', - defaultMessage: 'Open menu', - }, -}); - -/** - * Navigation container class. - * @class Navigation - * @extends Component - */ -class Navigation extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - getNavigation: PropTypes.func.isRequired, - pathname: PropTypes.string.isRequired, - items: PropTypes.arrayOf( - PropTypes.shape({ - title: PropTypes.string, - url: PropTypes.string, - }), - ).isRequired, - lang: PropTypes.string.isRequired, - }; - - static defaultProps = { - token: null, - }; - - /** - * Constructor - * @method constructor - * @param {Object} props Component properties - * @constructs Navigation - */ - constructor(props) { - super(props); - this.toggleMobileMenu = this.toggleMobileMenu.bind(this); - this.closeMobileMenu = this.closeMobileMenu.bind(this); - this.state = { - isMobileMenuOpen: false, - }; - } - - componentDidMount() { - const { settings } = config; - if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) { - this.props.getNavigation( - getBaseUrl(this.props.pathname), - settings.navDepth, - ); - } - } - - /** - * Component will receive props - * @method componentWillReceiveProps - * @param {Object} nextProps Next properties - * @returns {undefined} - */ - UNSAFE_componentWillReceiveProps(nextProps) { - const { settings } = config; - if ( - nextProps.pathname !== this.props.pathname || - nextProps.token !== this.props.token - ) { - if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) { - this.props.getNavigation( - getBaseUrl(nextProps.pathname), - settings.navDepth, - ); - } - } - } - - /** - * Toggle mobile menu's open state - * @method toggleMobileMenu - * @returns {undefined} - */ - toggleMobileMenu() { - this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen }); - } - - /** - * Close mobile menu - * @method closeMobileMenu - * @returns {undefined} - */ - closeMobileMenu() { - if (!this.state.isMobileMenuOpen) { - return; - } - this.setState({ isMobileMenuOpen: false }); - } - - // hoverExtendedNavigation = () => { - // this.setState({ isExtendedNavigationOpen: true }); - // }; - // leaveExtendedNavigation = () => { - // this.setState({ isExtendedNavigationOpen: false }); - // }; - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( - - ); - } -} - -export default compose( - injectIntl, - connect( - (state) => ({ - token: state.userSession.token, - items: state.navigation.items, - lang: state.intl.locale, - }), - { getNavigation }, - ), -)(Navigation); diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Search/Search.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Search/Search.jsx deleted file mode 100644 index 4f0acfbb..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/Search/Search.jsx +++ /dev/null @@ -1,382 +0,0 @@ -/** - * Search component. - * @module components/theme/Search/Search - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { compose } from 'redux'; -import { UniversalLink } from '@plone/volto/components'; -import { asyncConnect } from '@plone/volto/helpers'; -import { FormattedMessage } from 'react-intl'; -import { Portal } from 'react-portal'; -import { - Button, - Container, - Pagination, - Header, - Input, - Form, - Dropdown, -} from 'semantic-ui-react'; -import qs from 'query-string'; -import classNames from 'classnames'; -import { defineMessages, injectIntl } from 'react-intl'; -import config from '@plone/volto/registry'; -import { Helmet } from '@plone/volto/helpers'; -import { searchContent } from '@plone/volto/actions'; -import { Toolbar, Icon } from '@plone/volto/components'; - -import paginationLeftSVG from '@plone/volto/icons/left-key.svg'; -import paginationRightSVG from '@plone/volto/icons/right-key.svg'; -import loupeSVG from '@plone/volto/icons/zoom.svg'; - -const messages = defineMessages({ - search: { - id: 'Search', - defaultMessage: 'Search', - }, - searchSite: { - id: 'Search Site', - defaultMessage: 'Search Site', - }, - sortBy: { - id: 'Sort By', - defineMessage: 'Sort By', - }, - relevance: { - id: 'Relevance', - defineMessage: 'Relevance', - }, - alphabetically: { - id: 'Alphabetically', - defineMessage: 'Alphabetically', - }, - dateNewestFirst: { - id: 'Date (newest first)', - defaultMessage: 'Date (newest first)', - }, -}); - -/** - * Search class. - * @class SearchComponent - * @extends Component - */ -class Search extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - searchContent: PropTypes.func.isRequired, - searchableText: PropTypes.string, - subject: PropTypes.string, - path: PropTypes.string, - items: PropTypes.arrayOf( - PropTypes.shape({ - '@id': PropTypes.string, - '@type': PropTypes.string, - title: PropTypes.string, - description: PropTypes.string, - }), - ), - pathname: PropTypes.string.isRequired, - }; - - /** - * Default properties. - * @property {Object} defaultProps Default properties. - * @static - */ - static defaultProps = { - items: [], - searchableText: null, - subject: null, - path: null, - }; - - constructor(props) { - super(props); - this.state = { currentPage: 1, isClient: false, active: 'relevance' }; - } - - /** - * Component did mount - * @method componentDidMount - * @returns {undefined} - */ - componentDidMount() { - this.doSearch(); - this.setState({ isClient: true }); - } - - /** - * Component will receive props - * @method componentWillReceiveProps - * @param {Object} nextProps Next properties - * @returns {undefined} - */ - UNSAFE_componentWillReceiveProps = (nextProps) => { - if (this.props.location.search !== nextProps.location.search) { - this.doSearch(); - } - }; - - /** - * Search based on the given searchableText, subject and path. - * @method doSearch - * @param {string} searchableText The searchable text string - * @param {string} subject The subject (tag) - * @param {string} path The path to restrict the search to - * @returns {undefined} - */ - - doSearch = () => { - const options = qs.parse(this.props.history.location.search); - this.setState({ currentPage: 1 }); - options['use_site_search_settings'] = 1; - this.props.searchContent('', options); - }; - - handleQueryPaginationChange = (e, { activePage }) => { - const { settings } = config; - window.scrollTo(0, 0); - let options = qs.parse(this.props.history.location.search); - options['use_site_search_settings'] = 1; - - this.setState({ currentPage: activePage }, () => { - this.props.searchContent('', { - ...options, - b_start: (this.state.currentPage - 1) * settings.defaultPageSize, - }); - }); - }; - - onSortChange = (sort_on, sort_order) => { - let options = qs.parse(this.props.history.location.search); - options.sort_on = sort_on; - options.sort_order = sort_order || 'ascending'; - if (sort_on === 'relevance') { - delete options.sort_on; - delete options.sort_order; - } - let searchParams = qs.stringify(options); - this.setState({ currentPage: 1, active: sort_on }, () => { - // eslint-disable-next-line no-restricted-globals - this.props.history.replace({ - search: searchParams, - }); - }); - }; - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - const { settings } = config; - return ( - - -
-
-
-
- - - - -
-
- - - - { - this.onSortChange('relevance'); - }} - text={this.props.intl.formatMessage(messages.relevance)} - size="tiny" - className={classNames('button-sort', { - 'button-active': this.state.active === 'relevance', - })} - /> - - { - this.onSortChange('sortable_title'); - }} - text={this.props.intl.formatMessage( - messages.alphabetically, - )} - size="tiny" - className={classNames('button-sort', { - 'button-active': - this.state.active === 'sortable_title', - })} - /> - - { - this.onSortChange('effective', 'reverse'); - }} - text={this.props.intl.formatMessage( - messages.dateNewestFirst, - )} - size="tiny" - className={classNames('button-sort', { - 'button-active': this.state.active === 'effective', - })} - /> - - - -
- {this.props.search?.items_total > 0 ? ( -
- {this.props.search.items_total}{' '} - -
- ) : ( -
- -
- )} -
-
- {this.props.items.map((item) => ( -
-

- - {item.title} - -

- {item.description && ( -
- {item.description} -
- )} -
- - - -
-
-
- ))} - - {this.props.search?.batching && ( -
- , - icon: true, - 'aria-disabled': !this.props.search.batching.prev, - className: !this.props.search.batching.prev - ? 'disabled' - : null, - }} - nextItem={{ - content: , - icon: true, - 'aria-disabled': !this.props.search.batching.next, - className: !this.props.search.batching.next - ? 'disabled' - : null, - }} - /> -
- )} -
-
-
- {this.state.isClient && ( - - } - /> - - )} - - ); - } -} - -export const __test__ = compose( - injectIntl, - connect( - (state, props) => ({ - items: state.search.items, - searchableText: qs.parse(props.history.location.search).SearchableText, - pathname: props.history.location.pathname, - }), - { searchContent }, - ), -)(Search); - -export default compose( - injectIntl, - connect( - (state, props) => ({ - items: state.search.items, - searchableText: qs.parse(props.history.location.search).SearchableText, - pathname: props.location.pathname, - }), - { searchContent }, - ), - asyncConnect([ - { - key: 'search', - promise: ({ location, store: { dispatch } }) => - dispatch( - searchContent('', { - ...qs.parse(location.search), - use_site_search_settings: 1, - }), - ), - }, - ]), -)(Search); diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx deleted file mode 100644 index a04e9897..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Search widget component. - * @module components/theme/SearchWidget/SearchWidget - */ - -import React, { Component } from 'react'; -import { withRouter } from 'react-router-dom'; -import { Form } from 'semantic-ui-react'; -import { compose } from 'redux'; -import { PropTypes } from 'prop-types'; -import { injectIntl } from 'react-intl'; - -import { Icon } from '@plone/volto/components'; -import zoomSVG from '@plone/volto/icons/zoom.svg'; - -/** - * SearchWidget component class. - * @class SearchWidget - * @extends Component - */ -class SearchWidget extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - pathname: PropTypes.string, - }; - - /** - * Constructor - * @method constructor - * @param {Object} props Component properties - * @constructs WysiwygEditor - */ - constructor(props) { - super(props); - this.onChangeText = this.onChangeText.bind(this); - this.onSubmit = this.onSubmit.bind(this); - this.state = { - text: '', - }; - } - - /** - * On change text - * @method onChangeText - * @param {object} event Event object. - * @param {string} value Text value. - * @returns {undefined} - */ - onChangeText(event, { value }) { - this.setState({ - text: value, - }); - } - - /** - * Submit handler - * @method onSubmit - * @param {event} event Event object. - * @returns {undefined} - */ - onSubmit(event) { - this.props.history.push(`/search`); - // reset input value - this.setState({ - text: '', - }); - event.preventDefault(); - } - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( -
- - - -
- ); - } -} - -export default compose(withRouter, injectIntl)(SearchWidget); diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/View/EventView.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/View/EventView.jsx deleted file mode 100644 index ccec7c5f..00000000 --- a/frontend/src/addons/volto-plonede/src/customizations/volto/components/theme/View/EventView.jsx +++ /dev/null @@ -1,115 +0,0 @@ -/** - * EventView view component. - * @module components/theme/View/EventView - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers'; -import { Image } from 'semantic-ui-react'; -import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks'; -import { EventDetails } from '@plone/volto/components'; - -const EventTextfieldView = ({ content }) => ( - - {content.title &&

{content.title}

} - {content.description && ( -

{content.description}

- )} - {content.image && ( - - )} - {content.text && ( -
- )} - -); - -/** - * EventView view component class. - * @function EventView - * @params {object} content Content object. - * @returns {string} Markup of the component. - */ -const EventView = (props) => { - const { content } = props; - - return ( -
-
- -
-
- {hasBlocksData(content) ? ( - - ) : ( - - )} -
-
- {hasBlocksData(content) ? ( - <> - - - - - ) : ( - - )} -
-
- ); -}; - -/** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ -EventView.propTypes = { - content: PropTypes.shape({ - title: PropTypes.string, - description: PropTypes.string, - text: PropTypes.shape({ - data: PropTypes.string, - }), - attendees: PropTypes.arrayOf(PropTypes.string).isRequired, - contact_email: PropTypes.string, - contact_name: PropTypes.string, - contact_phone: PropTypes.string, - end: PropTypes.string.isRequired, - event_url: PropTypes.string, - location: PropTypes.string, - open_end: PropTypes.bool, - recurrence: PropTypes.any, - start: PropTypes.string.isRequired, - subjects: PropTypes.arrayOf(PropTypes.string).isRequired, - whole_day: PropTypes.bool, - }).isRequired, -}; - -export default EventView; diff --git a/frontend/src/addons/volto-plonede/src/index.js b/frontend/src/addons/volto-plonede/src/index.js index fc6dd80a..8f08000f 100644 --- a/frontend/src/addons/volto-plonede/src/index.js +++ b/frontend/src/addons/volto-plonede/src/index.js @@ -57,6 +57,7 @@ const applyConfig = (config) => { navDepth: 2, matomoSiteId: '11', matomoUrlBase: 'https://stats.plone.de/', + enableFatMenu: false, }; /* Teaser Block */ diff --git a/frontend/src/addons/volto-plonede/src/theme/custom.less b/frontend/src/addons/volto-plonede/src/theme/custom.less deleted file mode 100644 index 41eaabd5..00000000 --- a/frontend/src/addons/volto-plonede/src/theme/custom.less +++ /dev/null @@ -1,3 +0,0 @@ -#navigation .item { - border: 2px solid blue; -} diff --git a/frontend/src/addons/volto-plonede/src/theme/extras/custom.less b/frontend/src/addons/volto-plonede/src/theme/extras/custom.less deleted file mode 100644 index 2b89fe6a..00000000 --- a/frontend/src/addons/volto-plonede/src/theme/extras/custom.less +++ /dev/null @@ -1,3 +0,0 @@ -#navigation .item { - color: red; -} diff --git a/frontend/theme/elements/container.variables b/frontend/theme/elements/container.variables deleted file mode 100644 index 1724a933..00000000 --- a/frontend/theme/elements/container.variables +++ /dev/null @@ -1,2 +0,0 @@ -@computerWidth: 940px; -@largeMonitorWidth: 1440px; diff --git a/frontend/theme/extras/blocks.less b/frontend/theme/extras/blocks.less deleted file mode 100644 index b4194fc7..00000000 --- a/frontend/theme/extras/blocks.less +++ /dev/null @@ -1,1383 +0,0 @@ -#page-document .block.next--is--same--block-type:not(.slate) { - padding-bottom: 0 !important; - margin-bottom: -1rem; -} - -#page-document .block.has--backgroundColor--grey:not(.slate):not(.separator) { - padding-bottom: 25px; - margin-bottom: 0 !important; -} - -.block:not(.has--backgroundColor--grey):not(.slider):not(.slate):not(.separator) { - padding-bottom: 0 !important; - margin-bottom: 25px; -} - -.public-DraftEditor-content[contenteditable='true'] { - caret-color: var(--primary-black); -} - -/* Slate Block */ - -#page-document .ui.container .event-view .block.slate p { - max-width: var(--text-container-width); -} - -#page-document > .block.slate { - margin-bottom: 0; -} - -#page-document .block.slate p, -#page-document .block.slate ol li, -#page-document .block.slate ul li { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - color: var(--primary-grey); - font-weight: 300; - - &::marker { - color: @plone-blue; - } -} - -#page-document .block.slate.has--backgroundColor--grey p, -#page-document .block.slate.has--backgroundColor--grey ol, -#page-document .block.slate.has--backgroundColor--grey ul { - padding-bottom: 25px; - margin-top: 0; - margin-bottom: 0; -} - -b, -strong { - color: var(--primary-black); - font-weight: 600; -} - -.block-editor-slate p, -.block-editor-slate ol li, -.block-editor-slate ul li { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - color: var(--primary-grey); - - &::marker { - color: @plone-blue; - } -} - -/* Heading */ -#page-document .block.slate.has--backgroundColor--grey h2, -#page-document .block.slate.has--backgroundColor--grey h3 { - max-width: var(--text-container-width); - padding-top: 50px; - padding-bottom: 25px; - margin: 0 auto 0 auto; -} - -#page-document .block.slate:not(.has--backgroundColor--grey) h2, -#page-document .block.slate:not(.has--backgroundColor--grey) h3 { - max-width: var(--text-container-width); - margin-top: 50px; - margin-right: auto; - margin-bottom: 25px; - margin-left: auto; -} - -h2, -h3:not(.listing-body h3) { - font-weight: 600; -} - -h2 { - font-size: 2.2rem; - font-style: normal; - line-height: 36px; -} - -h3 { - font-size: 1.8rem; - font-style: normal; - line-height: 30px; -} - -h1 a.anchor svg, -h2 a.anchor svg, -h3 a.anchor svg, -h4 a.anchor svg { - width: 1ch; - padding-bottom: 100%; -} - -.block-editor-slate h2, -.block-editor-slate h3 { - max-width: var(--text-container-width); - margin-right: auto !important; - margin-left: auto !important; -} - -/* Blockquote */ -blockquote { - position: relative; - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - color: var(--primary-grey); - font-size: 29px; - font-style: italic; - font-weight: 300; - line-height: 1.5; -} - -/* Headings */ - -/* Document Heading */ -#page-document h1.documentFirstHeading { - max-width: var(--full-container-width); - margin-right: auto; - margin-left: auto; -} - -.documentFirstHeading, -.documentFirstHeading::before { - border-bottom: none; -} - -.documentFirstHeading { - margin-bottom: 55px; - font-size: 4rem; - font-style: normal; - font-weight: 600; - -webkit-hyphens: auto; - hyphens: auto; - line-height: 72px; - overflow-wrap: break-word; - word-break: break-word; - word-wrap: break-word; - - @media only screen and (max-width: @largestTabletScreen) { - margin-bottom: 50px; - font-size: 3.2rem; - line-height: 58px; - } -} - -/* Heading Block*/ -.block.heading { - margin-bottom: 0; - - &.align-left { - .heading-wrapper { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - h2.heading { - padding-top: 100px; - padding-bottom: 75px; - margin: 0; - color: #000; - font-size: 2.5rem; - font-style: normal; - font-weight: 300; - line-height: 3rem; - text-align: left; - - @media only screen and (max-width: @largestMobileScreen) { - padding-top: 75px; - padding-bottom: 50px; - margin: 0; - font-size: 2rem; - line-height: 2.5rem; - } - } - } - } - - &.align-center { - .heading-wrapper { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - h2 { - padding-top: 100px; - padding-bottom: 75px; - margin: 0; - font-size: 2.5rem; - font-style: normal; - font-weight: 300; - line-height: 3rem; - text-align: center; - - @media only screen and (max-width: @largestMobileScreen) { - padding-top: 75px; - padding-bottom: 50px; - margin: 0; - font-size: 2rem; - line-height: 2.5rem; - } - } - } - } - - &.align-right { - .heading-wrapper { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - h2 { - padding-top: 100px; - padding-bottom: 75px; - margin: 0; - font-size: 2.5rem; - font-style: normal; - font-weight: 300; - line-height: 3rem; - text-align: right; - - @media only screen and (max-width: @largestMobileScreen) { - padding-top: 75px; - padding-bottom: 50px; - margin: 0; - font-size: 2rem; - line-height: 2.5rem; - } - } - } - } -} - -.block-editor-heading h2, -.block-editor-heading h2.heading { - padding-top: 100px; - padding-bottom: 75px; - margin: 0 !important; - font-size: 2.5rem; - font-style: normal; - font-weight: 300; - line-height: 3rem; -} - -/* Button Block */ - -.block.__button .ui.button { - margin: 0; -} - -.block.__button .align-left { - text-align: left; -} - -.block.__button .align-right { - text-align: right; -} - -.block.__button .align-center { - text-align: center; -} - -.block.__button .align-full button { - width: 100%; -} - -.block.__button { - text-align: unset; - - &.has--align--center { - .container { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - } - } - - &.has--align--wide { - .container { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - } - } -} - -.block.__button:not(.has--backgroundColor--grey) .button.container { - margin-top: 75px; - margin-bottom: 100px; -} - -.block.__button.has--backgroundColor--grey { - padding-bottom: 0 !important; -} - -.block.__button.has--backgroundColor--grey .button.container { - padding-top: 75px; - padding-bottom: 100px; -} - -/* Hero Block */ - -.block.hero .hero-body { - display: block; - background: transparent; - - @media only screen and (max-width: @largestMobileScreen) { - padding: 1rem; - } - - h1 { - color: var(--primary-black); - } - - p { - color: var(--primary-grey); - } - - button { - margin: 1rem 0 0; - } -} - -.block.hero .hero-image { - @media only screen and (max-width: @largestMobileScreen) { - width: 100%; - max-width: 620px; - margin: auto; - } -} - -.block.hero { - z-index: 0; - - &.align-left { - .block-inner-wrapper { - flex-direction: row; - } - } - - &.align-right { - .block-inner-wrapper { - flex-direction: row-reverse; - } - } - - .block-inner-wrapper { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - background-color: #ececec; - - @media only screen and (max-width: @largestMobileScreen) { - display: flex; - flex-direction: column !important; - } - } -} - -.block-editor-hero .hero-body { - display: block; - background: transparent; - - .description-editor { - color: var(--primary-grey); - } -} - -.block-editor-hero .hero-image { - object-fit: cover; -} - -.block-editor-hero .align-right .toolbar { - left: 75%; -} - -.block-editor-hero .align-right .block-inner-wrapper { - flex-direction: row-reverse; -} - -/* Image Block */ - -.block.image { - margin: 0; - - &.align.left, - &.align.right { - max-width: var(--default-container-width); - margin: 50px auto 0 auto; - - &.medium { - max-width: var(--text-container-width); - } - - &.small { - max-width: var(--text-container-width); - } - } - - &.align.left.has--backgroundColor--grey, - &.align.right.has--backgroundColor--grey { - margin-top: 0; - - figure { - padding-top: 50px - 25px; - } - } - - figure { - img { - max-width: 100% !important; - height: auto; - object-fit: contain; - } - - &.right { - margin-bottom: 16px; - margin-left: 2rem; - float: right; - - img { - margin-right: 0 !important; - margin-bottom: 0px; - margin-left: 0 !important; - float: none; - object-fit: contain; - object-position: right; - } - } - - &.left { - margin-right: 2rem; - margin-bottom: 16px; - float: left; - - img { - margin-right: 0 !important; - margin-bottom: 0px; - float: none; - object-fit: contain; - object-position: left; - } - } - - &.left, - &.right { - &.large { - width: 50%; - height: auto; - - @media only screen and (max-width: 768px) { - width: 100%; - } - } - - &.medium { - width: 50%; - height: auto; - @media only screen and (max-width: 768px) { - width: 100%; - } - } - - &.small { - width: 25%; - height: auto; - @media only screen and (max-width: 768px) { - width: 100%; - } - } - } - - &.center { - max-width: var(--text-container-width) !important; - margin-right: auto; - margin-left: auto; - object-fit: cover; - - img { - height: auto; - margin-right: initial; - margin-left: initial; - } - - &.large { - figcaption { - text-align: start; - } - } - } - - &.wide { - max-width: 940px !important; - margin-right: auto; - margin-left: auto; - object-fit: cover; - - img { - height: auto; - margin-right: initial; - margin-left: initial; - } - - &.large { - figcaption { - text-align: start; - } - } - } - } - - img { - max-width: 100% !important; - height: auto; - } -} - -/* figure */ -figure { - display: flex; - flex-direction: column; - margin: 0; -} - -/* image/video captions */ -figcaption { - margin: 0 0 9px 0; - color: var(--primary-grey); - font-size: 14px; - font-weight: 300; - line-height: 18px; - text-align: left; - white-space: initial; - - .title { - margin-top: 25px; - margin-bottom: 10px; - color: var(--primary-black); - font-weight: 700; - } - - .credits { - margin-bottom: 10px; - -webkit-font-smoothing: anitaliased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - - p { - display: inline; - color: inherit; - line-height: inherit; - } - - a { - color: @plone-blue; - } - } -} - -/* Video Block */ - -#page-document .block.video.align.left, -.block.video.align.left, -#page-document .block.video.align.right, -.block.video.align.right { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -#page-document .block.video.align.center figure, -.block.video.align.center figure { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -.block.video { - .figure { - width: 100%; - } - - &.align.left.has--backgroundColor--grey figure, - &.align.right.has--backgroundColor--grey figure { - padding-top: 25px; - } - - &.align.left.has--backgroundColor--grey, - &.align.right.has--backgroundColor--grey { - margin-top: 0px; - margin-bottom: 0px; - } - - &.align.left, - &.align.right { - margin-top: 50px; - - figure.video-inner { - @media only screen and (max-width: @tabletBreakpoint) { - width: 100%; - } - } - - img { - margin: 0 !important; - } - } -} - -.block.video, -.block.imageslider, -.block.maps { - .ui.message.cookie-consent-buttons { - position: absolute; - z-index: 10; - bottom: 0; - display: flex; - height: 100%; - flex-direction: row; - align-items: flex-end; - background: transparent; - - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.99) 100% - ); - @media only screen and (max-width: @tabletBreakpoint) { - flex-flow: column; - align-items: flex-end; - justify-content: space-between; - background-color: @black; - } - - p { - width: 70%; - padding-right: 15px; - margin-bottom: 0; - color: @white; - text-align: left; - @media only screen and (max-width: @tabletBreakpoint) { - width: 100%; - padding-right: 0px; - font-size: 14px; - line-height: 20px; - } - - a { - color: @white; - text-decoration: underline; - - &[href^="https://"]:not([href^="https://plone"]):after - { - content: '' - url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'%3E%3C/path%3E%3C/svg%3E"); - } - } - } - - .ui.button { - width: 30%; - // border: 1px solid @black; - background: @white; - border-radius: 0; - color: var(--primary-black); - font-size: 14px; - @media only screen and (max-width: @tabletBreakpoint) { - width: 50%; - font-size: 12px; - } - } - } - - .cookie-consent-overlay { - position: relative; - height: 100%; - - img { - display: block; - width: 100%; - } - } -} - -/* Maps Block */ - -.block.maps.align.left .maps-inner, -.block.maps.align.right .maps-inner, -.block.maps.align.center .maps-inner { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -.block.maps.align { - &.left, - &.right { - iframe { - width: 472px; - height: 265px; - - @media only screen and (max-width: @tabletBreakpoint) { - width: 100%; - height: 100%; - } - } - } - - &.full { - height: 45vh; - - .maps-inner.full-width { - left: 0; - max-width: var(--full-container-width) !important; - margin-right: auto !important; - margin-left: auto !important; - } - } -} - -/* Introduction */ - -.block.introduction:not(.has--backgroundColor--grey) { - margin-top: 25px; -} - -.block.introduction.has--backgroundColor--grey { - padding-top: 25px; -} - -.block.introduction .block-container { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - p { - max-width: var(--default-container-width); - margin-right: auto; - margin-bottom: 0; - margin-left: auto; - font-size: 24px; - font-weight: 300; - line-height: 34px; - } -} - -.block-editor-introduction .block.introduction { - p { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - font-size: 24px; - font-weight: 300; - line-height: 34px; - } -} - -/* Quote Block */ - -.block.quote { - .inner-wrapper { - max-width: 940px; - min-height: 200px; - padding: 1rem; - padding-top: calc(100px + 1em); - margin-right: auto; - margin-left: auto; - } - - &.align-left { - border-top: none; - - .inner-wrapper { - display: flex; - padding: 4.572rem 3rem 4.144rem; - - .quote-image-wrapper { - width: unset; - margin-right: 2rem; - - img.quote-image { - width: 180px; - height: 180px; - margin-top: 0; - } - } - - .quotation { - max-width: 1000px; - margin-top: 0; - margin-left: 0; - - .quote-text { - font-size: 1.66667em; - } - } - } - - &.white { - border-top: 1px solid #d5dde2; - border-bottom: 1px solid #d5dde2; - } - } - - &.no-image { - .inner-wrapper { - padding: 1rem; - } - } - - &.lightGrey .inner-wrapper { - background: #d5dde2; - } - - &.white { - background: #fff; - - .quotation .quote-text { - .quotation-mark { - color: #d5dde2; - } - } - } - - .quote-image-wrapper { - width: 100%; - text-align: center; - - .quote-image { - width: 150px; - height: 150px; - margin-top: -75px; - border-radius: 50%; - object-fit: cover; - } - } - - .quotation { - max-width: 940px; - margin: 20px auto 0; - - .quote-text { - // color: var(--primary-black); - font-family: 'Roboto Slab'; - font-size: 2em; - - .quotation-mark { - height: 70px; - margin-right: 20px; - float: left; - } - } - - .author { - font-size: 18px; - font-weight: 300; - - span.person { - font-weight: 700; - } - } - } - - &.white .inner-wrapper { - border-top: 1px solid #d5dde2; - - .quotation { - max-width: 1000px; - } - } -} - -/* Separator Block */ - -.block.separator { - top: unset; - display: block; - height: unset; - border: none; - margin: 0; - clear: both; - - .line { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - &::after { - position: relative; - top: 50%; - display: block; - border-top: 1px solid var(--secondary-black); - margin-top: -1px; - content: ''; - } - } - - &.has--align--center .line { - max-width: var(--text-container-width); - } - - &.has--align--left .line { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - - &::after { - width: 165px; - } - } - - &.has--noLine--true { - .line::after { - display: none; - } - } -} - -.block-editor-separator { - margin-right: auto; - margin-left: auto; - clear: both; - - &.has--align--center .line { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - } - - &.has--align--left .block.separator .line { - max-width: var(--text-container-width); - margin-right: auto; - margin-left: auto; - - &::after { - width: 165px; - } - } - - &.has--noLine--true .line::after { - display: none; - } -} - -/* Teaser Block */ - -#page-document > .block.teaser:not(.has--backgroundColor--grey) { - margin-bottom: 25px; -} - -#page-document > .block.teaser .grid-teaser-item.default { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -.block.teaser .teaser-item { - display: block; - - &.default .image-wrapper { - margin: 0; - } -} - -.block.teaser .teaser-item.default { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - .content { - width: 100%; - - h2 { - padding: 0 20px 0 0; - margin: 0 0 15px; - color: var(--primary-black); - font-size: 30px; - font-style: normal; - font-weight: 600; - line-height: 36px; - word-break: break-word; - word-wrap: break-word; - } - - p { - margin: 0; - color: var(--primary-grey); - font-weight: 300; - } - } -} - -#page-edit .block-editor-teaser .teaser-item.default, -#page-edit .block-editor-teaser .grid-teaser-item.default { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -/* Grid Block */ - -#page-document > .block.__grid .ui.grid { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -.block.__grid h2.headline, -.block-editor-teaserGrid h2.headline, -.block-editor-imagesGrid h2.headline { - padding-top: 100px; - padding-bottom: 50px; - margin: 0 auto 0 auto; - .default-heading-size(); -} - -.block.__grid .grid-image-wrapper img.object-fit { - height: auto; - - &.cover { - object-fit: cover; - } - - &.contain { - object-fit: contain; - } -} - -.block.__grid .block.image figure img { - height: auto; -} - -.block.__grid .grid-block-slate .slate, -.block-editor-__grid .block.__grid .slate-editor { - padding: 20px; - margin: 0; - background: #ececec; - - ol, - ul { - padding-left: 15px; - margin: 0; - - li { - color: var(--primary-grey); - font-weight: 300; - - &::marker { - color: @plone-blue; - } - } - } - - p { - margin: 0; - color: var(--primary-grey); - font-weight: 300; - } -} - -.block.__grid.has--backgroundColor--grey .block.teaser .grid-teaser-item, -.block-editor-teaserGrid.has--backgroundColor--grey - .block.teaser - .grid-teaser-item { - background: var(--primary-white); - - .grid-image-wrapper { - margin-bottom: 0; - } - - .content { - padding: 25px; - } -} - -.block.__grid.has--backgroundColor--grey .grid-block-slate .slate, -.block-editor-__grid.has--backgroundColor--grey .block.__grid .slate-editor { - background: var(--primary-white); -} - -.block.__grid > .ui.grid .column { - padding-top: 1rem; - padding-right: 0.5rem; - padding-bottom: 1rem; - padding-left: 0.5rem; -} - -#page-edit .block-editor-__grid .ui.grid, -#page-edit .block-editor-teaserGrid .ui.grid, -#page-edit .block-editor-imagesGrid .ui.grid { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -/* Slider Block */ - -.block.slider .teaser-item { - display: block; -} - -.block.slider .grid-teaser-item.top { - display: block; -} - -.highlight-image-wrapper.gradient { - width: 100%; -} - -.block.slider .teaser-item.link { - display: flex; - width: 100%; - - &.right { - align-items: end; - } -} - -.block.slider .highlight-image-wrapper img { - -o-object-position: unset; - object-position: unset; -} - -.block.slider .teaser-item-title { - position: absolute; - top: 50%; - width: 530px; - padding: 40px; - background-color: rgba(0, 134, 195, 0.8); - transform: translateY(-50%); - - @media only screen and (max-width: @largestMobileScreen) { - position: static; - width: 100%; - padding: 20px; - transform: none; - } - - .title { - margin-bottom: 60px; - - @media only screen and (max-width: @largestMobileScreen) { - margin-bottom: 30px; - } - - .supertitle { - color: var(--primary-white); - font-size: 30px; - font-style: normal; - font-weight: 300; - line-height: 36px; - - @media only screen and (max-width: @largestMobileScreen) { - font-size: 14px; - line-height: 18px; - } - } - - h2 { - margin: 15px 0 0 0; - color: var(--primary-white); - font-size: 48px; - font-style: normal; - font-weight: 500; - line-height: 54px; - overflow-wrap: break-word; - word-break: break-word; - word-wrap: break-word; - - @media only screen and (max-width: @largestMobileScreen) { - font-size: 30px; - line-height: 36px; - } - } - } - - .body p { - color: @white !important; - } - - button { - padding: 11px 29px; - border: 2px solid #fff; - background: transparent; - color: var(--primary-white); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 30px; - } -} - -/* Slick slider */ -.block.slider .slick-arrow, -.block.slider .slick-arrow { - color: var(--primary-black); - - @media only screen and (max-width: @largestMobileScreen) { - display: none; - visibility: hidden; - } -} - -.block.slider .slick-dots { - position: unset; - - li { - width: 55px; - height: 7px; - background-color: #b2b2b2; - - button { - width: 55px; - height: auto; - border: 0; - - &::before { - content: none; - } - } - - &.slick-active { - background-color: var(--primary-black); - } - } -} - -/* Slider Edit */ -.block-editor-slider .teaser-item.top { - display: flex; - - &.right { - justify-content: right; - } -} - -.block-editor-slider { - max-width: 1440px; - - &.has--backgroundColor--grey - .block.slider:not(.inner):not([role='presentation']) { - padding-bottom: 25px !important; - margin-bottom: 25px; - } -} - -/* Listing Block */ - -.block.listing .headline, -.block.listing .listing-wrapper { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -.block.listing .items { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.block.listing .listing-item { - display: block; - max-width: 458px; - border: 1px solid #cdcdcd; - background: var(--primary-white); - border-radius: 8px; - - @media only screen and (max-width: @largestMobileScreen) { - width: 100%; - max-width: none; - } - - .listing-image { - width: 100%; - height: 150px; - border-radius: 8px 8px 0 0; - object-fit: cover; - } -} - -.block.listing .listing-body { - padding: 20px; - - h3 { - width: fit-content; - margin-top: 0; - } - - p { - color: var(--primary-grey); - } -} - -.block.listing .listing-body .event-when-where { - display: flex; - flex-direction: row; - - .dates { - color: var(--primary-black); - } -} - -/* Search Block */ - -.block.search .row { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - .wide.column { - padding: 0; - } -} - -.block.search .search-wrapper .ui.input input { - padding-left: 20px; - border: 0; - background-color: #ececec; - border-radius: 0; - font-size: 32px; - font-style: normal; - font-weight: 200; - line-height: 38px; -} - -.block.search .search-wrapper .ui.button { - margin: 15px; -} - -.block.search .search-wrapper svg { - width: unset !important; - height: 38px !important; -} - -.block.search .search-wrapper .divider { - border-right: none; -} - -.block.search .listing-item { - border-bottom: 1px solid #525252; - - .image-wrapper { - width: 300px; - height: 180px; - margin-right: 20px; - margin-bottom: 40px; - - img { - width: 300px; - height: 180px; - margin: 0; - object-fit: cover; - } - } - - .listing-body h3 { - font-size: 30px; - font-style: normal; - font-weight: 500; - line-height: 36px; - } -} diff --git a/frontend/theme/extras/custom.less b/frontend/theme/extras/custom.less deleted file mode 100644 index 40864288..00000000 --- a/frontend/theme/extras/custom.less +++ /dev/null @@ -1,609 +0,0 @@ -:root { - /* White */ - --primary-white: #fff; - --secondary-white: #fafafa; - - /* Grey / Lightgrey*/ - --primary-grey: #525252; - --secondary-grey: #ececec; - - --primary-lightGrey: #cdcdcd; - - /* Black */ - --primary-black: #181818; - --secondary-black: #000; - - /* Container widths */ - --text-container-width: 620px; - --default-container-width: 940px; - --full-container-width: 1440px; -} - -@plone-blue: #0086c3; -@white: #fff; - -.has--backgroundColor--transparent { - background: transparent; -} - -.has--backgroundColor--grey { - background: var(--secondary-grey); -} - -.default-heading-size() { - max-width: 940px !important; - color: #000; - font-size: 2.5rem; - font-style: normal; - font-weight: 300; - line-height: 3rem; -} -.small-heading-size() { - max-width: 940px !important; - cursor: text; - font-size: 2rem; - font-weight: 300; - line-height: 1.5rem; -} - -.button-blue() { - &.blue { - border: 1px solid @plone-blue; - background: linear-gradient(to right, transparent 50%, @plone-blue 50%); - background-position: right; - background-size: calc(200% + 1px) 100%; - color: @white; - - &:hover { - background-position: left; - color: @plone-blue; - } - } -} -.button-white() { - &.white { - border: 1px solid @white; - background: linear-gradient(to right, transparent 50%, @white 50%); - background-position: right; - background-size: calc(200% + 1px) 100%; - color: @plone-blue; - - &:hover { - background-position: left; - color: @white; - } - } -} - -.siteroot { - .ui.secondary.vertical.segment.breadcrumbs { - display: none; - } -} - -body.section-search { - .ui.secondary.vertical.segment.breadcrumbs { - visibility: hidden; - } - - #page-search.ui.container { - h2 { - max-width: var(--default-container-width); - } - } -} - -#toolbar .toolbar-content.show { - z-index: 999; -} - -body.cms-ui .ui.basic.segment.content-area { - cursor: default; -} - -//Header -.ui.basic.segment.header-wrapper { - position: fixed !important; - z-index: 10; - width: 100%; - height: 69px; - padding: 0; - border-bottom: 1px solid #cdcdcd; - background-color: @white; - - .ui.container { - max-width: var(--full-container-width); - margin-right: auto; - margin-left: auto; - - .header { - height: 69px; - flex-direction: row; - - a { - color: var(--primary-black); - } - - .logo-nav-wrapper { - position: relative; - height: 69px; - - .logo-wrapper { - display: flex; - width: 155px; - height: 40px; - } - - .nav-search-wrapper { - display: flex; - width: 100%; - flex-direction: row; - - .navigation { - #navigation.navigation { - .ui.pointing.secondary.stackable.computer.large.screen.widescreen.only.menu { - .desktop-menu { - display: flex; - - .nav-menu-wrapper { - .item { - padding: auto; - padding-bottom: 21px; - color: var(--primary-black); - text-transform: none; - - &:hover { - border-color: var(--primary-black); - } - } - - .item.active { - padding-bottom: 21px; - border-color: var(--primary-black); - color: var(--primary-black); - } - - .sub-menu-wrapper { - opacity: 0; - transform: translateY(0); - transition: transform 0.5s, opacity 0.5s; - } - - &:hover { - .sub-menu-wrapper { - left: calc(-50vw + 50%); - width: 100%; - padding-top: 14px; - background-color: @white; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - opacity: 1; - transform: translateY(0); - - .sub-menu { - width: 100%; - max-width: var(--full-container-width); - padding: 0; - margin: 0; - margin-right: auto; - margin-left: auto; - list-style-type: none; - - .sub-item { - margin-bottom: 14px; - opacity: 1; - - a { - color: #595959; - - &:hover { - color: var(--primary-black); - } - } - } - } - - .divider { - border-bottom: 1px solid #cdcdcd; - margin: 0 20px 14px 20px; - } - } - } - } - - .sub-menu-wrapper { - position: absolute; - opacity: 0; - transition: visibility 0s, opacity 0.5s linear; - visibility: hidden; - } - } - } - } - } - - .search { - margin-top: auto; - margin-bottom: auto; - margin-left: auto; - - .ui.form { - .field.search-icon { - button { - border: 0 solid transparent; - background-color: transparent; - cursor: pointer; - - .icon { - height: 24px; - fill: @plone-blue !important; - } - } - } - } - } - } - } - } - } -} -//Breadcrumbs -.ui.secondary.vertical.segment.breadcrumbs { - padding: 0; - border-top: 0 solid transparent; - border-bottom: 0 solid transparent; - margin-top: 68px; - background-color: @white; - - .ui.container { - max-width: var(--full-container-width); - margin-right: auto; - margin-left: auto; - - .ui.breadcrumb { - margin-top: 10px; - - .section { - width: auto; - margin-top: auto; - margin-bottom: auto; - color: var(--primary-black); - text-align: center; - } - - .divider { - color: var(--primary-black); - } - } - } -} -//Content-area -.ui.basic.segment.content-area { - padding-top: 69px; - margin: 0; - - //Page-search - #page-search .ui.container { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; - - .container { - .ui.form { - .field.searchbox { - height: 40px; - justify-content: space-between; - padding-left: 0; - border-left: 0; - - .ui.transparent.input { - width: 100%; - border-bottom: 1px solid #c7d5d8; - margin-right: 20px; - } - - .search-button { - width: 84px; - min-height: 1em; - background-color: @plone-blue; - border-radius: 4px; - color: @white; - font-weight: bold; - text-align: center; - } - } - } - - .ui.header { - .content.header-content { - //Dropdown - .ui.inline.dropdown { - color: #3c4048; - - .item { - .ui.tiny.button { - background-color: transparent; - font-size: 14px; - } - } - - .menu { - padding-top: 9px; - padding-bottom: 9px; - } - } - } - } - } - } -} - -#page-document .event-details aside { - border: none; - border-left: 1px solid #cdcdcd; - box-shadow: none; -} - -#footer { - padding: 0 0 25px; - border-top: 1px solid #cdcdcd; - margin-top: 150px; - background-color: @white; - - .ui.container { - max-width: 1440px; - margin-right: auto; - margin-left: auto; - color: var(--primary-grey); - - .discreet { - background-color: @white; - } - } -} - -.ui.inverted.segment .inverted.segment { - color: var(--primary-black); - - a { - color: @plone-blue; - } -} - -.ui.inverted.list .item a:not(.ui), -.ui.inverted.list .item a:not(.ui):hover { - color: @plone-blue !important; -} - -img.ui.image:not(.logo) { - display: inline; - margin-bottom: 14px; -} - -body #page-sitemap .ui.container { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -#page-document .ui.container, -#page-edit .ui.container, -#contact-form .ui.container { - max-width: var(--full-container-width); - margin-right: auto; - margin-left: auto; -} - -//Blocks -//Message -.block - :not(.__grid) - :not(.image) - :not(.video) - :not(.teaserGrid) - :not(.imagesGrid) - :not(.imagesGrid .block.image) - :not(.hero) - :not(.maps) - :not(.toc) - .ui.message { - max-width: 940px; - flex-direction: row; - border: 2px solid var(--primary-grey); - margin: auto; - - button { - padding: 0; - border: none; - margin: 0; - background-color: transparent; - color: #ff2222; - text-decoration: underline; - } - - b { - text-transform: uppercase; - } -} - -/* Page Search */ - -#page-search #content { - max-width: var(--default-container-width); - margin-right: auto; - margin-left: auto; -} - -#page-search #content .ui.form .searchbox { - padding: 20px 0 20px 20px; - border: none; - background-color: #ececec; -} - -#page-search #content .ui.form input { - border: 0; - font-size: 32px; - font-style: normal; - font-weight: 200; - line-height: 38px; -} - -#page-search #content .ui.form .searchbox button { - padding-right: 15px; - color: var(--primary-grey); -} - -/* @media queries */ - -/* Mobile */ -@media only screen and (max-width: @largestMobileScreen) { - #main { - .ui.basic.segment.header-wrapper { - .ui.container { - .header { - .logo-nav-wrapper { - .logo-wrapper { - margin: auto; - } - - .nav-search-wrapper { - display: flex; - flex-direction: row-reverse; - - .navigation { - margin-top: auto; - margin-bottom: auto; - - .navigation { - padding-top: 10px; - - .hamburger-wrapper { - height: fit-content; - padding: 0 15px 15px 15px; - } - - .ui.secondary.pointing.menu .active.item { - border-color: var(--primary-black); - } - } - } - - .search { - .ui.form { - .field.search-icon { - button { - padding: 0; - - .icon { - height: 36px; - } - } - } - } - } - } - } - } - } - } - } -} - -/* Tablet */ -@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - #main { - .ui.basic.segment.header-wrapper { - .ui.container { - .header { - .logo-nav-wrapper { - .logo-wrapper { - margin: auto; - } - - .nav-search-wrapper { - display: flex; - flex-direction: row-reverse; - - .navigation { - margin-top: auto; - margin-bottom: auto; - - .navigation { - padding-top: 10px; - - .hamburger-wrapper { - height: fit-content; - padding: 0 15px 15px 15px; - } - - .mobile-menu .mobile-menu-nav { - .ui.secondary.pointing.menu { - flex-direction: column; - - .item { - align-self: center; - } - - .item.active { - border-color: var(--primary-black); - } - } - } - } - } - - .search { - .ui.form { - .field.search-icon { - button { - padding: 0; - - .icon { - height: 36px; - } - } - } - } - } - } - } - } - } - } - } -} - -/* Small Monitor */ -@media only screen and (min-width: @computerBreakpoint) and (max-width: @largeMonitorWidth) { - body:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(.has-sidebar-collapsed) - .header-wrapper - .ui.container { - width: unset; - margin-right: auto; - margin-left: auto; - } - - body:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(.has-sidebar-collapsed) - #page-document.ui.container { - width: unset; - margin-right: auto; - margin-left: auto; - } -} - -/* Large Monitor */ -@media only screen and (min-width: @largeMonitorBreakpoint) { - body:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(.has-sidebar-collapsed) - .header-wrapper - .ui.container { - width: var(--full-container-width); - margin-right: auto; - margin-left: auto; - } - - body:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(.has-sidebar-collapsed) - #page-document.ui.container { - width: var(--full-container-width); - margin-right: auto; - margin-left: auto; - } -} diff --git a/frontend/theme/extras/custom.overrides b/frontend/theme/extras/custom.overrides deleted file mode 100644 index 616c2e78..00000000 --- a/frontend/theme/extras/custom.overrides +++ /dev/null @@ -1,9 +0,0 @@ -/* Blocks */ - -@import 'blocks'; - -/* Document */ - -@import 'custom'; - -@import 'utils'; diff --git a/frontend/theme/theme.config b/frontend/theme/theme.config index 3956b769..d934dc88 100644 --- a/frontend/theme/theme.config +++ b/frontend/theme/theme.config @@ -69,7 +69,7 @@ *******************************/ /* Path to theme packages */ -@themesFolder : '../../node_modules/@plone/volto/theme/themes'; +@themesFolder : '~volto-themes'; /* Path to site override folder */ @siteFolder : "../../theme";