@eeacms/volto-clms-theme 1.0.40 → 1.0.44

package/theme/clms/css/carousel.css

@@ -430,3 +430,48 @@
 .tabs-block .slick-slider:not(.slick-vertical) .slick-slide {
   padding-top: 0;
 }
+
+/* .ccl-banner-top-bar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin-right: auto;
+  margin-left: auto;
+} */
+
+/* Banner info */
+.ccl-banner-info {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 2rem;
+  display: none;
+  width: 100%;
+  padding: 1.5rem;
+  background: #ffffffd9;
+}
+
+@media (min-width: 768px) {
+  .ccl-banner-info {
+    width: 30%;
+  }
+}
+
+.ccl-banner-info .ccl-banner-info-title {
+  margin-bottom: 1rem;
+  color: black !important;
+  font-size: 1rem !important;
+  font-weight: bold;
+}
+
+.ccl-banner-info .ccl-banner-info-content p {
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.125rem;
+}
+
+.ccl-banner-info-link {
+  display: inline-block;
+  width: 100%;
+  text-align: right;
+}

package/theme/clms/css/forms.css

@@ -40,7 +40,12 @@
 }
 
 .ccl-button--default:active,
-.ccl-button--default:focus,
+.ccl-button--default:focus {
+  background-color: #fff;
+  color: #a0b128;
+}
+
+
 .ccl-button--default:hover {
   background-color: #a0b128;
   color: #fff;

package/theme/clms/css/home.css

@@ -71,6 +71,11 @@
   color: #fff;
 }
 
+.ccl-banner-top-bar .ccl-container .ccl-banner-top-bar-right {
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+
 .ccl-banner-top-bar .ccl-container {
   display: flex;
   height: 100%;
@@ -78,6 +83,12 @@
   justify-content: space-between;
 }
 
+.ccl-banner-top-bar-left .ccl-banner-top-bar-right {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ccl-banner-top-bar .ccl-banner-top-bar-left,
 .ccl-banner-top-bar .ccl-banner-top-bar-right {
   overflow: hidden;

package/theme/clms/css/maps.css

@@ -453,7 +453,8 @@
 }
 
 .land .active-layer-options i:hover,
-.land .active-layer-options svg:hover {
+.land .active-layer-options svg:hover,
+.land .map-menu-icons svg:hover {
 	color: #7c8921;
 }
 

package/theme/clms/css/maps.less

@@ -468,7 +468,8 @@
   }
 
   .active-layer-options i:hover,
-  .active-layer-options svg:hover {
+  .active-layer-options svg:hover,
+  .map-menu-icons svg:hover {
     color: #7c8921;
   }
 

package/theme/clms/css/styles.less

@@ -1112,3 +1112,7 @@ body.searchlib-page div#page-document {
   top: 0em !important;
   width: 1127px !important;
 }
+
+.metadata.image img {
+  max-width: 100%;
+}

package/src/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListEdit.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { TechnicalLibrariesListSchema } from './TechnicalLibrariesListSchema';
-import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import { useSelector, useDispatch } from 'react-redux';
-import { searchContent } from '@plone/volto/actions';
-import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
-
-const CclTechnicalLibrariesListEdit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    selected,
-    id,
-    properties,
-    metadata,
-  } = props;
-  const dispatch = useDispatch();
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
-  const path = metadata ? metadata['@id'] : properties['@id'];
-  let libraries = searchSubrequests?.[props.id]?.items || [];
-  React.useEffect(() => {
-    dispatch(
-      searchContent(
-        path,
-        {
-          fullobjects: 1,
-          portal_type: 'TechnicalLibrary',
-          path: '/',
-          associated_products: metadata['id'],
-        },
-        id,
-      ),
-    );
-  }, [path, data, id, metadata, dispatch]);
-
-  return (
-    <>
-      <div className="technical-libraries">
-        <h2>Technical Libraries</h2>
-        {libraries.map((item, index) => (
-          <CclCard key={index} type="doc" card={item} />
-        ))}
-      </div>
-      <SidebarPortal selected={selected}>
-        <InlineForm
-          schema={TechnicalLibrariesListSchema()}
-          title="TechnicalLibraries List block"
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default CclTechnicalLibrariesListEdit;

package/src/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListView.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { searchContent } from '@plone/volto/actions';
-import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
-
-const CclTechnicalLibrariesListView = (props) => {
-  const { data, id, properties, metadata } = props;
-  const dispatch = useDispatch();
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
-  const path = metadata ? metadata['@id'] : properties['@id'];
-  let libraries = searchSubrequests?.[props.id]?.items || [];
-
-  React.useEffect(() => {
-    dispatch(
-      searchContent(
-        path,
-        {
-          fullobjects: 1,
-          portal_type: 'TechnicalLibrary',
-          path: '/',
-          associated_products: metadata['id'],
-        },
-        id,
-      ),
-    );
-  }, [path, data, id, metadata, dispatch]);
-
-  return (
-    <>
-      <div className="technical-libraries">
-        {libraries.length > 0 ? (
-          libraries.map((item, index) => (
-            <CclCard key={index} type="doc" card={item} />
-          ))
-        ) : (
-          <p>There are no technical libraries for this product.</p>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default CclTechnicalLibrariesListView;

package/src/components/Blocks/CclTechnicalLibrariesList/TechnicalLibrariesListSchema.js

@@ -1,17 +0,0 @@
-export const TechnicalLibrariesListSchema = () => ({
-  title: 'TechnicalLibraries List block',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['title'],
-    },
-  ],
-  properties: {
-    title: {
-      title: 'Title',
-      type: 'string',
-    },
-  },
-  required: [],
-});

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/VerticalRouteTabsView.jsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router';
-import { RenderBlocks } from '@plone/volto/components';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import { NavLink } from 'react-router-dom';
-
-const CclRouteTabsView = (props) => {
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    if (
-      String(window.performance.getEntriesByType('navigation')[0].type) ===
-        'navigate' ||
-      String(window.performance.getEntriesByType('navigation')[0].type) ===
-        'reload'
-    ) {
-      if (window.location.hash.length === 0) {
-        setActiveTab(tabsList[0]);
-      } else {
-        setActiveTab(tabsList[window.location.hash.substring(4) - 1]);
-      }
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
-
-  const PanelsComponent = () => {
-    const { activeTab = null, tabs = {} } = props;
-    return (
-      <div className="right-content cont-w-75">
-        {tabsList.map((tab, index) => {
-          return (
-            <div
-              id={tab}
-              key={index}
-              className={cx('panel', tab === activeTab && 'panel-selected')}
-              role="tabpanel"
-              aria-hidden="false"
-            >
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const TabsComponent = () => {
-    return (
-      <div className="left-content cont-w-25">
-        <nav className="left-menu">
-          {tabsList.map((tab, index) => {
-            const {
-              activeTab = null,
-              tabs = {},
-              setActiveTab = () => {},
-            } = props;
-            const tabIndex = index + 1;
-            const title = tabs[tab].title || `Tab ${tabIndex}`;
-            return (
-              <div
-                key={index}
-                id={tabIndex}
-                className={cx('card', tab === activeTab && 'active')}
-              >
-                <NavLink
-                  id={'tab' + tabIndex}
-                  content={tab}
-                  // to={'#' + title.toLowerCase().replace(/\s/g, '-')}
-                  to={`#Tab${tabIndex}`}
-                  className="collapsed"
-                  onClick={() => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
-                  }}
-                  onKeyDown={() => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
-                  }}
-                >
-                  {title}
-                </NavLink>
-              </div>
-            );
-          })}
-        </nav>
-      </div>
-    );
-  };
-  // console.log('props', props);
-
-  return (
-    <div className="ccl-container ccl-container-flex tab-container" id="froga">
-      <TabsComponent />
-      <PanelsComponent />
-    </div>
-  );
-};
-
-export default compose(
-  connect((state) => {
-    return {
-      hashlink: state.hashlink,
-      location: state.router.location.hash,
-    };
-  }),
-  withScrollToTarget,
-)(withRouter(CclRouteTabsView));

package/src/components/CLMSServiceDeskView/CLMSServiceDeskView.jsx

@@ -1,113 +0,0 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import React from 'react';
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-
-const ServiceDeskView = () => {
-  return (
-    <>
-      <div className="ui container">
-        <section className="page-section">
-          <h1 className="page-title">Service desk</h1>
-          <div className="page-description">
-            <p>
-              Have you checked our <a href="/en/faq">FAQ section</a>? If you
-              haven't found an answer to your problem or question, please fill
-              in this form to contact the Copernicus land service desk.
-            </p>
-            <p>
-              We will try to respond as soon as possible within office working
-              hours from Monday to Friday.
-            </p>
-            <p>Please note, that the support is provided in English only.</p>
-          </div>
-          <div className="ccl-container">
-            <form className="ccl-form user-form contact-form">
-              <div className="ccl-fieldset">
-                <div className="ccl-form-group">
-                  <label
-                    className="ccl-form-label"
-                    htmlFor="contact_form_email"
-                  >
-                    E-mail
-                    <span className="label-required">*</span>
-                  </label>
-                  <input
-                    // maxlength="10"
-                    type="text"
-                    className="ccl-text-input"
-                    id="contact_form_email"
-                    name=""
-                    placeholder="Enter an email address"
-                  />
-                </div>
-                <div className="ccl-form-group">
-                  <label
-                    className="ccl-form-label"
-                    htmlFor="contact_form_subject"
-                  >
-                    Subject
-                    <span className="label-required">*</span>
-                  </label>
-                  <span className="form-tip">
-                    A short indication of the problem, question or issue, i.e.
-                    login, download, errors in the product, thematic question
-                    etc.
-                  </span>
-                  <input
-                    type="text"
-                    className="ccl-text-input"
-                    id="contact_form_subject"
-                    name=""
-                    placeholder="Enter an subject"
-                  />
-                </div>
-                <div className="ccl-form-group">
-                  <label
-                    className="ccl-form-label"
-                    htmlFor="contact_form_message"
-                  >
-                    Message
-                    <span className="label-required">*</span>
-                  </label>
-                  <span className="form-tip">
-                    A short description of the problem, question or issue.
-                    Please don't forget to specify which product(s) you are
-                    referring to in your message.
-                  </span>
-                  <textarea
-                    className="ccl-textarea"
-                    id="contact_form_message"
-                    name=""
-                    cols="30"
-                    rows="10"
-                    placeholder="Enter a message"
-                  ></textarea>
-                </div>
-                <div className="ccl-form-group">
-                  <label
-                    className="ccl-form-label"
-                    htmlFor="contact_form_verification"
-                  >
-                    Verification
-                    <span className="label-required">*</span>
-                  </label>
-                  <div className="validation-image"></div>
-                  <input
-                    type="text"
-                    className="ccl-text-input"
-                    id="contact_form_verification"
-                    name=""
-                    placeholder="Enter validation code"
-                  />
-                </div>
-              </div>
-              <CclButton mode="default">Submit</CclButton>
-            </form>
-          </div>
-        </section>
-      </div>
-    </>
-  );
-};
-
-export default ServiceDeskView;