Merge pull request #88 from eea/develop

Develop
eea · Oct 5, 2021 · 4e65163 · 4e65163
2 parents bf10857 + da00200
commit 4e65163
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,21 @@ 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.28](https://github.com/eea/volto-clms-theme/compare/1.0.27...1.0.28)
+
+- Corrections [`#87`](https://github.com/eea/volto-clms-theme/pull/87)
+- button correction [`4484ae3`](https://github.com/eea/volto-clms-theme/commit/4484ae35a4c2fe16717656af9b315a8642b3ae60)
+- home tab style fix [`3ea2cf5`](https://github.com/eea/volto-clms-theme/commit/3ea2cf51423c149187823b333f7e51862ddd7cb8)
+- style changes to correct home page tabs [`8f45a23`](https://github.com/eea/volto-clms-theme/commit/8f45a236819ded565458c8044cc5330db32b5e92)
+- location div is rendered only when data is provided [`e7a828d`](https://github.com/eea/volto-clms-theme/commit/e7a828d62de475638038d24d25dd38d1a3c61b3b)
+- News/Events tab aligned [`f1cae3e`](https://github.com/eea/volto-clms-theme/commit/f1cae3e239c2687efd0ad5333f05371dd505101f)
+- volto-tabs-block style reverted [`d57ef2f`](https://github.com/eea/volto-clms-theme/commit/d57ef2fc8d0f7ea9aaea4729d2078ecdc002f02f)
+
 #### [1.0.27](https://github.com/eea/volto-clms-theme/compare/1.0.26...1.0.27)
 
+> 1 October 2021
+
+- Upgrade volto-arcgis-block version [`#86`](https://github.com/eea/volto-clms-theme/pull/86)
 - Bug fixing [`#85`](https://github.com/eea/volto-clms-theme/pull/85)
 - volto-arcgis-block release 0.1.4 [`ce6a181`](https://github.com/eea/volto-clms-theme/commit/ce6a18199e1b266033dd356ce5cd1fb054737b18)
 - to render without values [`7745842`](https://github.com/eea/volto-clms-theme/commit/77458426aeb32c08556754e3d52ccf1a0ee9845b)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

diff --git a/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx b/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx
@@ -44,11 +44,11 @@ const CclGreenBgView = (props) => {
           </div>
         </div>
       </div>
-      <div class="ccl-banner-top-bar">
-        <div class="ccl-container">
-          <div class="ccl-banner-top-bar-left">{data?.greenText}</div>
-          <div class="ccl-banner-top-bar-right">
-            <span class="ccl-icon-map-dot"></span>
+      <div className="ccl-banner-top-bar">
+        <div className="ccl-container">
+          <div className="ccl-banner-top-bar-left">{data?.greenText}</div>
+          <div className="ccl-banner-top-bar-right">
+            <span className="ccl-icon-map-dot"></span>
             {data?.location}
           </div>
         </div>

diff --git a/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockEdit.jsx b/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockEdit.jsx
@@ -72,7 +72,9 @@ const CclHomeProductsBlockEdit = (props) => {
             ) : (
               <>
                 <div className="home-product-title">{panel.title}</div>
-                <div class="home-product-description">{panel.description}</div>
+                <div className="home-product-description">
+                  {panel.description}
+                </div>
               </>
             )}
           </div>

diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx
@@ -26,15 +26,11 @@ const View = (props) => {
   const settings = {
     dots: true,
     infinite: true,
-    speed: 1500,
+    speed: 2000,
     fade: true,
     cssEase: 'linear',
     autoplay: true,
-    autoplaySpeed: 3000,
-    swipe: true,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    touchMove: true,
+    autoplaySpeed: 5000,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);
     },

diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx
@@ -99,7 +99,7 @@ const CclTabsView = (props) => {
               aria-controls={title || defaultTitle}
               aria-selected={tab === activeTab}
               active={(tab === activeTab).toString()}
-              /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatu */
+              /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatuz nahikoa da */
               className={cx('tab', tab === activeTab && 'tab-selected')}
               onClick={() => {
                 if (activeTab !== tab) {
@@ -128,9 +128,11 @@ const CclTabsView = (props) => {
   };
 
   return (
-    <div className="ccl-container tab-container">
-      <TabsComponent />
-      <PanelsComponent />
+    <div className="home-news-events-block">
+      <div className="ccl-container tab-container">
+        <TabsComponent />
+        <PanelsComponent />
+      </div>
     </div>
   );
 };

diff --git a/src/components/CLMSEventView/CLMSEventView.jsx b/src/components/CLMSEventView/CLMSEventView.jsx
@@ -8,10 +8,10 @@ export const CLMSEventView = (props) => {
     <div className="ccl-container">
       <h1 className="page-title">{content.title}</h1>
       <div className="event-detail">
-        <div class="event-detail-date">
+        <div className="event-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure class="news-detail-image">
+        <figure className="news-detail-image">
           <img
             src={
               content?.image
@@ -20,19 +20,23 @@ export const CLMSEventView = (props) => {
             }
             alt={content?.image ? content?.image?.filename : 'Placeholder'}
           />
-          <figcaption>{content?.description}</figcaption>
+          <figcaption>{content?.image_caption}</figcaption>
         </figure>
-        <div class="event-detail-when">
-          <i class="far fa-calendar-alt"></i>
-          <div class="event-detail-when-text">
-            {new Date(content?.effective).toLocaleDateString()} -{' '}
+        <div className="event-detail-when">
+          <i className="far fa-calendar-alt"></i>
+          <div className="event-detail-when-text">
+            {new Date(content?.start).toLocaleDateString()} -{' '}
             {new Date(content?.end).toLocaleDateString()}
           </div>
         </div>
-        <div class="event-detail-where">
-          <i class="fas fa-map-marker-alt"></i>
-          <div class="event-detail-where-text">{content?.location}</div>
-        </div>
+        {content?.location ? (
+          <div className="event-detail-where">
+            <i className="fas fa-map-marker-alt"></i>
+            <div className="event-detail-where-text">{content?.location}</div>
+          </div>
+        ) : (
+          ''
+        )}
         <div className="event-detail-content">
           <StringToHTML string={content.text?.data || ''} />
         </div>

diff --git a/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx b/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx
@@ -7,10 +7,10 @@ const CLMSNewsItemView = (props) => {
     <div className="ccl-container">
       <h1 className="page-title">{content.title}</h1>
       <div className="news-detail">
-        <div class="news-detail-date">
+        <div className="news-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure class="news-detail-image">
+        <figure className="news-detail-image">
           <img
             src={
               content?.image
@@ -19,7 +19,7 @@ const CLMSNewsItemView = (props) => {
             }
             alt={content?.image ? content?.image?.filename : 'Placeholder'}
           />
-          <figcaption>{content?.description}</figcaption>
+          <figcaption>{content?.image_caption}</figcaption>
         </figure>
         <div className="news-detail-content">
           <StringToHTML string={content.text?.data || ''} />

diff --git a/src/components/CclButton/CclButton.jsx b/src/components/CclButton/CclButton.jsx
@@ -18,23 +18,7 @@ function CclButton(props) {
     'ccl-button--default': mode === 'default',
   });
 
-  function hasProtocol(url) {
-    return url.startsWith('https://') || url.startsWith('http://')
-      ? true
-      : false;
-  }
-
-  return hasProtocol(url) ? (
-    <a
-      href={url}
-      className={buttonClass}
-      disabled={disabled}
-      download={download}
-      {...opts}
-    >
-      {children}
-    </a>
-  ) : (
+  return (
     <Link
       to={url}
       className={buttonClass}

diff --git a/src/components/CclCard/CclCard.jsx b/src/components/CclCard/CclCard.jsx
@@ -83,7 +83,7 @@ function CclCard(props) {
                 <div className="card-event-title">
                   <Link to={url}>{card?.title || 'Event default title'}</Link>
                 </div>
-                <div class="card-event-date">
+                <div className="card-event-date">
                   {new Date(card?.effective).toLocaleDateString()}
                 </div>
                 <div className="card-event-when">
@@ -96,11 +96,19 @@ function CclCard(props) {
                         end.toLocaleDateString()}
                   </div>
                 </div>
-                <div className="card-event-where">
-                  <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
-                  <div className="card-event-where-text">{card?.location}</div>
-                </div>
-                <p className="card-event-description">{card?.description}</p>
+                {card?.location ? (
+                  <div className="card-event-where">
+                    <>
+                      <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
+                      <div className="card-event-where-text">
+                        {card?.location}
+                      </div>
+                    </>
+                  </div>
+                ) : (
+                  ''
+                )}
+                <p className="card-description">{card?.description}</p>
               </div>
             </>
           )}

diff --git a/theme/clms/css/home.css b/theme/clms/css/home.css
@@ -117,7 +117,7 @@
   width: 33.3333%;
   height: 14vw;
   flex-direction: column;
-  align-items: end;
+  align-items: flex-end;
   justify-content: center;
   padding: 2rem;
   border: 1px solid #a0b128;
@@ -345,6 +345,10 @@
   background: #fffffff6;
 }
 
+.home-news-events-block .tab-container {
+  width: 100%;
+}
+
 .tab-container .panel {
   display: none;
   animation: fadein 0.8s;