@eeacms/volto-clms-theme 1.0.112 → 1.0.113

package/CHANGELOG.md

@@ -4,8 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.113](https://github.com/eea/volto-clms-theme/compare/1.0.112...1.0.113)
+
+- Area widget explanation [`#286`](https://github.com/eea/volto-clms-theme/pull/286)
+- UniversalLink override to download files in case user is not Manager [`dd206ae`](https://github.com/eea/volto-clms-theme/commit/dd206ae6040fe927d2895c00beeaf55e1fd0a6fe)
+- fix profile subscribe checkbox checking [`62facfa`](https://github.com/eea/volto-clms-theme/commit/62facfa2db2ba518f421eca0002c2774c080d1da)
+- some changes [`8b27aeb`](https://github.com/eea/volto-clms-theme/commit/8b27aeb01df2a04c4331ca5e4c83150957ff076c)
+- edit and add form dropdown overflow, override volto-block-style product css [`468ce5d`](https://github.com/eea/volto-clms-theme/commit/468ce5d51cffe86844fea63ac9640561d51a9dbd)
+- Rename Register to this meeting to simple Register [`563e0f8`](https://github.com/eea/volto-clms-theme/commit/563e0f8a46040decc68247c17f134573d5bfb4bf)
+
 #### [1.0.112](https://github.com/eea/volto-clms-theme/compare/1.0.111...1.0.112)
 
+> 3 August 2022
+
+- Develop [`#285`](https://github.com/eea/volto-clms-theme/pull/285)
 - import fields [`#284`](https://github.com/eea/volto-clms-theme/pull/284)
 - search filters checkbox unification [`0cd48bc`](https://github.com/eea/volto-clms-theme/commit/0cd48bc9a873ec1b3c4a082c4ec3519fbc3cef6d)
 - check also childless parents CLMS-987 [`641a887`](https://github.com/eea/volto-clms-theme/commit/641a887e9e36f0f2e04aa8eb5362065ed53380a3)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.112",
+  "version": "1.0.113",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -132,10 +132,7 @@ export const CLMSMeetingView = (props) => {
         ) : (
           rIsLoggedIn && (
             <CclButton onClick={() => handleRegister()}>
-              <FormattedMessage
-                id="Register to this meeting"
-                defaultMessage="Register to this meeting"
-              />
+              <FormattedMessage id="Register" defaultMessage="Register" />
             </CclButton>
           )
         )}
@@ -395,8 +392,8 @@ export const CLMSMeetingView = (props) => {
                     content.anonymous_registration_form?.fullname && (
                       <CclButton url={content.anonymous_registration_form?.url}>
                         <FormattedMessage
-                          id="Register to this meeting"
-                          defaultMessage="Register to this meeting"
+                          id="Register"
+                          defaultMessage="Register"
                         />
                       </CclButton>
                     )}

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -57,7 +57,7 @@ class CLMSProfileView extends Component {
       <div className="ccl-container ">
         <Helmet title="User profile"></Helmet>
         {loggedIn ? (
-          <CclTabs>
+          <CclTabs routing={true}>
             <div tabTitle="User profile">
               <CLMSUserProfileView />
             </div>

package/src/components/CLMSSubscriptionView/SubscriptionView.jsx

@@ -308,12 +308,20 @@ class SubscriptionView extends Component {
                 </div>
               </div>
               {!this.props.isUnsubscribe && (
-                <div className="ccl-form footer-privacy-check ccl-profile-privacy">
+                <div className="ccl-form ccl-profile-privacy">
                   <div className="ccl-form-group">
                     <input
                       type="checkbox"
-                      id="footer_privacy"
-                      name="footerPrivacy"
+                      id={`footer_privacy-${
+                        this.state.type_conf
+                          ? this.state.type_conf.type
+                          : 'loading'
+                      }`}
+                      name={`footer_privacy-${
+                        this.state.type_conf
+                          ? this.state.type_conf.type
+                          : 'loading'
+                      }`}
                       value={this.state.inputValue}
                       onClick={this.handleInputChange}
                       className="ccl-checkbox ccl-form-check-input"
@@ -321,7 +329,11 @@ class SubscriptionView extends Component {
                     />
                     <label
                       className="ccl-form-check-label"
-                      htmlFor="footer_privacy"
+                      htmlFor={`footer_privacy-${
+                        this.state.type_conf
+                          ? this.state.type_conf.type
+                          : 'loading'
+                      }`}
                     >
                       {this.props.intl.formatMessage(
                         messages.agreePrivacyPolicy,

package/src/components/CclTab/CclTabs.jsx

@@ -24,7 +24,7 @@ const CclTabs = (props) => {
   let { children, routing = false } = props;
   let [activeTab, setActiveTab] = useState(
     props.children[0].props.tabId ||
-      props.children[0].props.tabTitle.replace(' ', ''),
+      props.children[0].props.tabTitle.split(' ').join('-'),
   );
 
   function onClickTabItem(tab) {
@@ -37,7 +37,7 @@ const CclTabs = (props) => {
       if (hash) {
         setActiveTab(hash);
       } else {
-        setActiveTab(firstTab.props?.tabTitle?.replace(' ', ''));
+        setActiveTab(firstTab.props?.tabTitle?.split(' ').join('-'));
       }
     }
   }, [children, routing]);
@@ -51,7 +51,7 @@ const CclTabs = (props) => {
             .filter((item) => !!item?.props?.tabTitle)
             .map((child, key) => {
               const { tabTitle, redirect } = child.props;
-              const tabId = tabTitle?.replace(' ', '');
+              const tabId = tabTitle?.split(' ').join('-');
               return (
                 <CclTab
                   activeTab={activeTab}
@@ -82,7 +82,8 @@ const CclTabs = (props) => {
             .flat()
             .filter((item) => !!item?.props?.tabTitle)
             .map((child, index) => {
-              return child.props?.tabTitle?.replace(' ', '') !== activeTab ? (
+              return child.props?.tabTitle?.split(' ').join('-') !==
+                activeTab ? (
                 <div key={index} className="deactivate-content">
                   {child.props.children}
                 </div>

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -0,0 +1,158 @@
+/*
+ * UniversalLink
+ * @module components/UniversalLink
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+import { matchPath } from 'react-router';
+
+import config from '@plone/volto/registry';
+
+const UniversalLink = ({
+  href,
+  item = null,
+  openLinkInNewTab,
+  download = false,
+  children,
+  className = null,
+  title = null,
+  ...props
+}) => {
+  const token = useSelector((state) => state.userSession?.token);
+
+  let url = href;
+  if (!href && item) {
+    if (!item['@id']) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid item passed to UniversalLink',
+        item,
+        props,
+        children,
+      );
+      url = '#';
+    } else {
+      //case: generic item
+      url = flattenToAppURL(item['@id']);
+
+      //case: item like a Link
+      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
+      if (!token && remoteUrl) {
+        url = remoteUrl;
+      }
+
+      //case: item of type 'File'
+      if (
+        !this.props.roles?.includes('Manager') &&
+        config.settings.downloadableObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@download/file`;
+      }
+
+      if (
+        !token &&
+        config.settings.viewableInBrowserObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@display-file/file`;
+      }
+    }
+  }
+
+  const isBlacklisted =
+    (config.settings.externalRoutes ?? []).find((route) =>
+      matchPath(flattenToAppURL(url), route.match),
+    )?.length > 0;
+  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isDownload = (!isExternal && url.includes('@@download')) || download;
+  const isDisplayFile =
+    (!isExternal && url.includes('@@display-file')) || false;
+
+  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+  url = checkedURL.url;
+
+  let tag = (
+    <Link
+      to={flattenToAppURL(url)}
+      target={openLinkInNewTab ?? false ? '_blank' : null}
+      title={title}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+
+  if (isExternal) {
+    tag = (
+      <a
+        href={url}
+        title={title}
+        target={
+          !checkedURL.isMail &&
+          !checkedURL.isTelephone &&
+          !(openLinkInNewTab === false)
+            ? '_blank'
+            : null
+        }
+        rel="noopener noreferrer"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDownload) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        download
+        title={title}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDisplayFile) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        title={title}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return tag;
+};
+
+UniversalLink.propTypes = {
+  href: PropTypes.string,
+  openLinkInNewTab: PropTypes.bool,
+  download: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    remoteUrl: PropTypes.string, //of plone @type 'Link'
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+export default UniversalLink;

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import UniversalLinkComponent from './UniversalLink';
+import { injectIntl } from 'react-intl';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+<Meta
+  title="UniversalLink"
+  argTypes={{
+    href: { control: 'text' },
+    item: { control: 'object' },
+    text: { control: 'text' },
+  }}
+  decorators={[
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ]}
+/>
+
+# UniversalLink
+
+Link to url or item
+
+export const UniversalLink = (args) => {
+  const mockStore = configureStore();
+  const store = mockStore({
+    userSession: {
+      token: null,
+    },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  return (
+    <Provider store={store}>
+      <UniversalLinkComponent
+        href="http://www.google.it"
+        item={{
+          '@id': 'localhost:3000/example-link-to-twitter',
+          remoteUrl: 'http://www.twitter.it',
+        }}
+        {...args}
+      >
+        {args.text || 'Example link to google'}
+      </UniversalLinkComponent>
+      <h4>Link to a generic object. Example code for 'item' prop:</h4>
+      <code> {`{'@id':'localhost:3000/test-page'}`}</code>
+      <h4>Link to a Link object. Example code for 'item' prop:</h4>
+      <code>
+        {`{'@id':'localhost:3000/example-link-to-twitter', 'remoteUrl':'http://www.twitter.it'}`}
+      </code>
+    </Provider>
+  );
+};
+
+<Story name="UniversalLink">{injectIntl(UniversalLink).bind({})}</Story>
+
+# Props
+
+<ArgsTable of={UniversalLinkComponent} />

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import UniversalLink from './UniversalLink';
+import config from '@plone/volto/registry';
+
+const mockStore = configureStore();
+const store = mockStore({
+  userSession: {
+    token: null,
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+global.console.error = jest.fn();
+
+describe('UniversalLink', () => {
+  it('renders a UniversalLink component with internal link', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href={'/en/welcome-to-volto'}>
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UniversalLink component with external link', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="https://github.com/plone/volto">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UniversalLink component if no external(href) link passed', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            item={{
+              '@id': 'http://localhost:3000/en/welcome-to-volto',
+            }}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('check UniversalLink set rel attribute for ext links', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
+  it('check UniversalLink set target attribute for ext links', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('target')).toBe(
+      '_blank',
+    );
+  });
+
+  it('check UniversalLink can unset target for ext links with prop', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+            openLinkInNewTab={false}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('target')).toBe(
+      null,
+    );
+  });
+
+  it('check UniversalLink renders ext link for blacklisted urls', () => {
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: '/external-app',
+          exact: true,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/external-app"
+            title="Blacklisted route"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Blacklisted route').getAttribute('target')).toBe(
+      '_blank',
+    );
+  });
+
+  it('check UniversalLink does not break with error in item', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            item={{
+              error: 'Error while fetching content',
+              message: 'Something went wrong',
+            }}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+    expect(global.console.error).toHaveBeenCalled();
+  });
+});
+
+it('renders a UniversalLink component when url ends with @@display-file', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <UniversalLink href="http://localhost:3000/en/welcome-to-volto/@@display-file">
+          <h1>Title</h1>
+        </UniversalLink>
+      </MemoryRouter>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/theme/clms/css/ccl.less

@@ -3,3 +3,4 @@
 // @import url("../lib/font-awesome/css/all.min.css");
 
 @import url('styles.less');
+@import url('volto-block-style-override.css');

package/theme/clms/css/forms.css

@@ -524,7 +524,7 @@
 .ccl-form-radio-label div {
   margin-top: 0.5rem;
   margin-left: 1.5rem;
-  font-size: 0.95rem;
+  font-size: inherit;
 }
 
 /* File */

package/theme/clms/css/maps.less

@@ -202,10 +202,6 @@
     color: white;
   }
 
-  .esri-measurement p {
-    font-size: 1rem;
-  }
-
   .measurement-coords {
     display: none;
     padding: 1rem;

package/theme/clms/css/volto-block-style-override.css

@@ -0,0 +1,284 @@
+body:not(.view-editview):not(.view-addview):not(.document_wide_view) .stretch {
+  position: relative;
+  z-index: 3;
+  right: 50%;
+  left: 50%;
+  width: 100vw;
+  border: none !important;
+  margin-right: 0;
+  margin-left: 0;
+  background-clip: content-box;
+  box-shadow: none;
+  transform: translate(-50%, 0%);
+}
+
+/* detect if is anon */
+body:not(.is-authenticated):not(.document_wide_view) .stretch {
+  right: 0;
+  left: 0;
+  width: auto;
+  padding: 0;
+  margin: 0 -28.3rem;
+  transform: none;
+}
+
+body:not(.is-authenticated):not(.document_wide_view) main {
+  overflow: hidden;
+}
+
+body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous)
+  main {
+  overflow: hidden;
+}
+
+/* detect if is logged in but in view with toolbar open */
+body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous)
+  .stretch {
+  max-width: 1636px;
+  margin: 0;
+}
+
+body:not(.is-authenticated):not(.document_wide_view).stretch {
+  padding: 0;
+}
+
+@media screen and (max-width: 1790px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous)
+    .stretch {
+    right: auto;
+    left: auto;
+    width: auto;
+    padding: 0;
+    transform: none;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    max-width: 100vw;
+    margin: 0 -25.54vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    max-width: 100vw;
+    margin: 0 -25.5vw;
+  }
+}
+
+@media screen and (max-width: 1749px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -26.1vw;
+  }
+}
+
+@media screen and (max-width: 1700px) {
+  body:not(.document_wide_view):not(.view-editview):not(.view-addview):not(.is-anonymous):not(.is-authenticated).stretch {
+    margin-right: 0;
+    margin-left: 0;
+    transform: translate(-50%, 0%);
+  }
+
+  body:not(.is-anonymous):not(.has-toolbar) .stretch {
+    max-width: 1720px;
+  }
+
+  body:not(.is-anonymous):not(.has-toolbar-collapsed) .stretch {
+    max-width: 1778px;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    max-width: 1700px;
+    margin: 0 -26.8vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -26.4vw;
+  }
+}
+
+@media screen and (max-width: 1599px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -18.3vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -18.9vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -19.2vw;
+  }
+}
+
+@media screen and (max-width: 1499px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -18.4vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -19vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -19.5vw;
+  }
+}
+
+@media screen and (max-width: 1399px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -18.5vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -19.2vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -19.8vw;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -17.8vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -15.3rem;
+  }
+}
+
+@media screen and (max-width: 1220px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -14.9rem;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -0.6rem;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -3.7vw;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -3.6vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -3.5vw;
+  }
+}
+
+@media screen and (max-width: 1049px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -4vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -4vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -4.3vw;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -4.2vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -4.3vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -4.5vw;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -4.65vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -4.9vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -4.5vw;
+  }
+}
+
+@media screen and (max-width: 849px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -1.2vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -5vw;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -5.2vw;
+  }
+}
+
+@media screen and (max-width: 787px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    margin: 0 -1.2vw;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    margin: 0 -1.2vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar-collapsed)
+    .stretch {
+    padding: 0;
+  }
+
+  body:not(.view-editview):not(.view-addview):not(.document_wide_view):not(.is-anonymous):not(.has-toolbar)
+    .stretch {
+    padding: 0;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    padding: 0;
+  }
+
+  body:not(.is-authenticated):not(.document_wide_view) .stretch {
+    margin: 0 -1.3vw;
+  }
+}