Merge pull request #23 from plone/develop

Develop

.editorconfig

@@ -19,7 +19,7 @@ charset = utf-8
 # Indent style default
 indent_style = space
 # Max Line Length - a hard line wrap, should be disabled
-max_line_length = off
+# max_line_length = off
 
 [*.{py,cfg,ini}]
 # 4 space indentation

frontend/.editorconfig

@@ -19,7 +19,7 @@ charset = utf-8
 # Indent style default
 indent_style = space
 # Max Line Length - a hard line wrap, should be disabled
-max_line_length = off
+#max_line_length = off
 
 [*.{py,cfg,ini}]
 # 4 space indentation

frontend/src/addons/volto-conf2023-theme/.editorconfig

@@ -19,7 +19,7 @@ charset = utf-8
 # Indent style default
 indent_style = space
 # Max Line Length - a hard line wrap, should be disabled
-max_line_length = off
+#max_line_length = off
 
 [*.{py,cfg,ini}]
 # 4 space indentation

frontend/src/addons/volto-conf2023-theme/src/components/Views/Sponsor.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Container, Grid } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { useSelector } from 'react-redux';
+import { UniversalLink } from '@plone/volto/components';
+import { FormattedMessage } from 'react-intl';
+
+const Sponsor = ({ content }) => {
+  const remoteUrl = content.remoteUrl;
+  const token = useSelector((state) => state.userSession?.token);
+  React.useEffect(() => {
+    if (!token) {
+      window.location.href = remoteUrl;
+    }
+  }, [token, remoteUrl]);
+
+  return !token ? (
+    // <Redirect to={remoteUrl} />
+    <p>
+      <FormattedMessage id="Loading..." defaultMessage="Loading..." />
+    </p>
+  ) : (
+    <Container className="view-wrapper grid stackable">
+      {remoteUrl && (
+        <Grid.Row>
+          <Grid.Column width={2}></Grid.Column>
+          <Grid.Column width={8}>
+            {content.title && (
+              <h1 className="documentFirstHeading">{content.title}</h1>
+            )}
+            <p>
+              The link address is:
+              <UniversalLink href={remoteUrl}>
+                {flattenToAppURL(remoteUrl)}
+              </UniversalLink>
+            </p>
+          </Grid.Column>
+          <Grid.Column width={2}></Grid.Column>
+        </Grid.Row>
+      )}
+    </Container>
+  );
+};
+
+export default Sponsor;

frontend/src/addons/volto-conf2023-theme/src/customizations/volto/components/theme/View/NewsItemView.jsx

@@ -0,0 +1,73 @@
+/**
+ * NewsItemView view component.
+ * @module components/theme/View/NewsItemView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Container } from 'semantic-ui-react';
+import { hasBlocksData } from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { useSelector } from 'react-redux';
+import moment from 'moment';
+import Picture from 'volto-conf2023-theme/components/Picture/Picture';
+/**
+ * NewsItemView view component class.
+ * @function NewsItemView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+
+const NewsItemView = ({ content }) => {
+  let lang = useSelector((state) => state.intl.locale);
+  moment.locale(lang);
+  return (
+    <Container className="view-wrapper grid stackable">
+      <Grid.Row>
+        <Grid.Column width={1}></Grid.Column>
+        <Grid.Column width={10}>
+          {content.title && (
+            <h1 className="documentFirstHeading">
+              {content.title}
+              {content.subtitle && ` - ${content.subtitle}`}
+            </h1>
+          )}
+          {content.effective && (
+            <div className="news-date">
+              {moment(content?.effective).format('LL')}
+            </div>
+          )}
+          {content.image && (
+            <Picture
+              source="newsitem"
+              imageBase={`${content['@id']}/@@images/image`}
+              alt={content.title}
+            ></Picture>
+          )}
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+          {hasBlocksData(content) && <RenderBlocks content={content} />}
+        </Grid.Column>
+        <Grid.Column width={1}></Grid.Column>
+      </Grid.Row>
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+NewsItemView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default NewsItemView;

frontend/src/addons/volto-conf2023-theme/src/index.js

@@ -48,8 +48,10 @@ import zoomSVG from '@plone/volto/icons/zoom.svg';
 
 import Keynote from './components/Views/Keynote';
 import Person from './components/Views/Person';
+import Sponsor from './components/Views/Sponsor';
 import Talk from './components/Views/Talk';
 import Training from './components/Views/Training';
+import NewsItemView from './customizations/volto/components/theme/View/NewsItemView';
 
 import reducers from './reducers';
 
@@ -93,13 +95,24 @@ const applyConfig = (config) => {
         { media: '(min-width: 768px)', image: 'larger' },
         { media: '(max-width: 767px)', image: 'large' },
       ],
+      newsitem: [
+        { media: '(min-width: 1200px)', image: 'larger' },
+        { media: '(min-width: 992px) and (max-width: 1199px)', image: 'large' },
+        { media: '(max-width: 991px)', image: 'teaser' },
+      ],
     },
   };
 
   config.views.contentTypesViews.Person = Person;
   config.views.contentTypesViews.Talk = Talk;
   config.views.contentTypesViews.Training = Training;
   config.views.contentTypesViews.Keynote = Keynote;
+  config.views.contentTypesViews.Sponsor = Sponsor;
+  config.views.contentTypesViews['News Item'] = NewsItemView;
+
+  // Needed for deleting title from block
+  config.blocks.requiredBlocks = [];
+
   const teaserVariations = [
     {
       id: 'default',

frontend/src/addons/volto-conf2023-theme/theme/extras/breadcrumb.less

@@ -12,7 +12,7 @@
   color: @tertiaryColor;
 
   &:hover {
-    color: @secondaryColor;
+    color: @primaryColor;
   }
 }
 

frontend/src/addons/volto-conf2023-theme/theme/extras/header.less

@@ -33,14 +33,28 @@
       font-weight: 600;
 
       &:hover {
-        color: @secondaryColor;
+        color: @primaryColor;
       }
     }
 
     .item.active,
     .item:active {
       border-bottom-color: transparent;
-      color: @secondaryColor;
+      color: @primaryColor;
+    }
+  }
+}
+
+/* ------------- Mobile menu --------------------*/
+@media only screen and (max-width: 1071px) {
+  body.has-mobile-menu-open {
+    overflow: hidden;
+    .mobile-menu-nav .stackable.menu {
+      flex-direction: column;
+      align-items: center;
+      .item {
+        align-self: center;
+      }
     }
   }
 }

frontend/src/addons/volto-conf2023-theme/theme/extras/home.less

@@ -116,14 +116,20 @@
     justify-content: center;
     padding: 3rem 1.5rem !important;
 
-    &.right {
-      margin-left: auto;
-    }
-
+    &.right,
     &.left {
+      margin-left: auto;
       margin-right: auto;
     }
   }
+  // .bg-grey {
+  //   .grid-text-wrapper-column {
+  //     background-image: url('../assets/images/top-left.svg'), url('../assets/images/top-right.svg'), url('../assets/images/bottom-left.svg'), url('../assets/images/bottom-right.svg');
+  //     background-position: left top, right top, bottom left, bottom right;
+  //     background-repeat: no-repeat;
+  //     background-size: 50%, 50%, 100%, 50%;
+  //   }
+  // }
   /*******************************
         Home news
 *******************************/

frontend/src/addons/volto-conf2023-theme/theme/extras/news.less

@@ -1,3 +1,22 @@
+.news-date {
+  margin: 1rem 0 0 0;
+  font-size: larger;
+
+  p {
+    margin: 0;
+  }
+}
+.contenttype-news-item {
+  .news-date {
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+  .documentDescription {
+    margin-top: 1rem;
+    font-weight: bold;
+    color: @tertiaryColor;
+  }
+}
 .news-listing {
   .news-listing-title {
     margin: 0.5rem 0 !important;
@@ -8,16 +27,6 @@
     display: flex;
     justify-content: end;
   }
-
-  .news-date {
-    margin: 1rem 0 0 0;
-    font-size: larger;
-
-    p {
-      margin: 0;
-    }
-  }
-
   img {
     aspect-ratio: 1.5;
     object-fit: cover;

frontend/src/addons/volto-conf2023-theme/theme/extras/sponsors.less

@@ -1,6 +1,7 @@
 .sponsorList {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 
   .sponsor {
     max-width: 25%;
@@ -11,10 +12,6 @@
   }
 }
 
-#patron .sponsorList .sponsor {
-  max-width: 33%;
-}
-
 @media only screen and (max-width: 767px) {
   #patron .sponsorList {
     display: flex;