@eeacms/volto-clms-theme 1.0.41 → 1.0.45

package/theme/clms/css/carousel.css

@@ -1,4 +1,13 @@
 /* Slider */
+
+.tabs-block .slick-arrows .slick-prev:before,
+.tabs-block .slick-arrows .slick-next:before {
+  display: block;
+  font-size: 2.2222222222rem;
+  font-weight: 900;
+  opacity: 1;
+}
+
 .slick-slider {
   position: relative;
 
@@ -113,8 +122,13 @@
 }
 
 /* Arrows */
-.slick-prev,
-.slick-next {
+.slick-slider .slick-prev,
+.slick-slider .slick-next {
+  display: none !important;
+}
+
+.slick-arrows .slick-prev,
+.slick-arrows .slick-next {
   position: absolute;
   top: 50%;
 
@@ -212,14 +226,9 @@
 }
 
 .slick-dots {
-  position: relative;
-  bottom: -25px;
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  text-align: center;
+  position: absolute;
+  z-index: 1;
+  bottom: 1.75rem;
 }
 
 .slick-dots li {
@@ -305,11 +314,46 @@
   padding-bottom: 2.5rem;
   padding-left: 2rem;
 }
-@media (max-width: 600px) {
+@media (max-width: 820px) {
   .ccl-list-carousel {
     padding-right: 0;
     padding-left: 0;
   }
+
+  .slick-prev,
+  .slick-next {
+    position: absolute !important;
+    top: 50% !important;
+
+    display: block !important;
+
+    width: 20px !important;
+    height: 20px !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+
+    color: transparent !important;
+
+    cursor: pointer !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    outline: none !important;
+    -webkit-transform: translate(0, -50%) !important;
+    -ms-transform: translate(0, -50%) !important;
+    transform: translate(0, -50%) !important;
+  }
+
+  .slick-prev {
+    left: 0 !important;
+  }
+
+  .slick-next {
+    right: 20px !important;
+  }
+  .slick-dots{
+    display: none;
+  }
 }
 
 .ccl-list-carousel .slick-arrow {
@@ -430,3 +474,57 @@
 .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;
+}
+
+.tabs-block > .styled {
+  display: block !important;
+}
+
+.tabs-block .slick-slider {
+  display: block !important;
+}
+

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

@@ -2,7 +2,8 @@
 
 /*
 */
-.contenttype-lrf:not(.section-cart) #page-document.ui.container {
+.contenttype-lrf:not(.section-cart):not(.section-profile)
+  #page-document.ui.container {
   width: calc(100vmax - (100vmax - 100%)) !important;
   margin: 0 0 !important;
 }
@@ -11,16 +12,18 @@
   margin-bottom: 0.5rem;
 }
 
-.contenttype-lrf:not(.section-cart) .ui.basic.segment.content-area {
+.contenttype-lrf:not(.section-cart):not(.section-profile)
+  .ui.basic.segment.content-area {
   padding-top: 0;
   margin-top: 0;
 }
 
-.contenttype-lrf:not(.section-cart) .block {
+.contenttype-lrf:not(.section-cart):not(.section-profile) .block {
   margin-bottom: 0;
 }
 
-.contenttype-lrf:not(.section-cart) .ui.basic.segment.content-area {
+.contenttype-lrf:not(.section-cart):not(.section-profile)
+  .ui.basic.segment.content-area {
   padding-bottom: 0;
   margin-bottom: 0;
 }
@@ -71,6 +74,22 @@
   color: #fff;
 }
 
+@media (max-width: 1200px) {
+  .ccl-banner-top-bar {
+    height: 5rem;
+  }
+}
+@media (max-width: 420px) {
+  .ccl-banner-top-bar {
+    height: 7rem;
+  }
+}
+
+.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 +97,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

@@ -66,6 +66,10 @@
 }
 
 .land .esri-basemap-gallery__item:first-child {
+	margin-top: 0;
+}
+
+.land .esri-basemap-gallery__item {
 	margin: 0;
 }
 

package/theme/clms/css/maps.less

@@ -69,6 +69,10 @@
   }
 
   .esri-basemap-gallery__item:first-child {
+    margin-top: 0;
+  }
+
+  .esri-basemap-gallery__item {
     margin: 0;
   }
 

package/theme/clms/css/styles.less

@@ -101,7 +101,9 @@ li {
 }
 
 .ul-list li::marker,
-.ol-list li::marker {
+.ol-list li::marker,
+ul > li,
+ol > li {
   color: #a0b128;
 }
 
@@ -145,13 +147,15 @@ a:hover,
   margin-left: auto;
 }
 
-body.contenttype-lrf:not(.section-cart) main .ccl-container {
+body.contenttype-lrf:not(.section-cart):not(.profilecart) main .ccl-container {
   max-width: 1400px;
   margin-right: auto;
   margin-left: auto;
 }
 
-body:not(.contenttype-lrf:not(.section-cart)) main .ccl-container {
+body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
+  main
+  .ccl-container {
   max-width: 100%;
   padding: 0;
 }
@@ -1111,4 +1115,9 @@ body.section-map-viewer #page-document.ui.container {
 body.searchlib-page div#page-document {
   top: 0em !important;
   width: 1127px !important;
+  max-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/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;