Merge pull request #2 from plone/add-visual-elements

Add visual elements and update Volto

frontend/locales/de/LC_MESSAGES/volto.po

@@ -1,4 +1,4 @@
-# Translation of volto.pot to German
+#. Translation of volto.pot to German
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

frontend/locales/eu/LC_MESSAGES/volto.po

@@ -1,4 +1,4 @@
-# Translation of volto.pot to EU
+#. Translation of volto.pot to EU
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

frontend/locales/fr/LC_MESSAGES/volto.po

@@ -1,4 +1,4 @@
-# Translation of volto.pot to French
+#. Translation of volto.pot to French
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

frontend/locales/volto.pot

@@ -1,13 +1,13 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2018-10-03T09:01:24.737Z\n"
+"POT-Creation-Date: 2024-02-01T01:19:45.180Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
-"MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
 "Language-Code: en\n"
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"

frontend/src/addons/volto-ploneconf/locales/en/LC_MESSAGES/volto.po

@@ -21,6 +21,11 @@ msgstr "Be the First!"
 msgid "Front Page"
 msgstr "Front Page"
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Please choose an existing content as source for this element
+msgid "Please choose an existing content as source for this element"
+msgstr ""
+
 #: components/Logo/LogoPloneConf
 # defaultMessage: Plone Conference
 msgid "Plone Conference"
@@ -31,6 +36,11 @@ msgstr "Plone Conference"
 msgid "Python Cerrado"
 msgstr "Python Cerrado"
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Read more
+msgid "Read more"
+msgstr ""
+
 #: components/Blocks/SponsorLevel/View
 # defaultMessage: Sponsor Us
 msgid "Sponsor Us"

frontend/src/addons/volto-ploneconf/locales/pt_BR/LC_MESSAGES/volto.po

@@ -26,6 +26,11 @@ msgstr "Patrocine!"
 msgid "Front Page"
 msgstr "Página Inicial"
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Please choose an existing content as source for this element
+msgid "Please choose an existing content as source for this element"
+msgstr ""
+
 #: components/Logo/LogoPloneConf
 # defaultMessage: Plone Conference
 msgid "Plone Conference"
@@ -36,6 +41,11 @@ msgstr "Plone Conference"
 msgid "Python Cerrado"
 msgstr "Python Cerrado"
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Read more
+msgid "Read more"
+msgstr "Saiba mais"
+
 #: components/Blocks/SponsorLevel/View
 # defaultMessage: Sponsor Us
 msgid "Sponsor Us"

frontend/src/addons/volto-ploneconf/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-01-30T20:46:22.534Z\n"
+"POT-Creation-Date: 2024-02-01T01:19:43.756Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -23,6 +23,11 @@ msgstr ""
 msgid "Front Page"
 msgstr ""
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Please choose an existing content as source for this element
+msgid "Please choose an existing content as source for this element"
+msgstr ""
+
 #: components/Logo/LogoPloneConf
 # defaultMessage: Plone Conference
 msgid "Plone Conference"
@@ -33,6 +38,11 @@ msgstr ""
 msgid "Python Cerrado"
 msgstr ""
 
+#: components/Blocks/Teaser/TeaserFeatured
+# defaultMessage: Read more
+msgid "Read more"
+msgstr ""
+
 #: components/Blocks/SponsorLevel/View
 # defaultMessage: Sponsor Us
 msgid "Sponsor Us"

frontend/src/addons/volto-ploneconf/src/components/Footer/Footer.jsx

@@ -43,6 +43,7 @@ const Footer = ({ intl }) => {
   const siteActions = lang ? allSiteActions[lang] : [];
   return (
     <footer id="footer">
+      <div className="footerDecoration"></div>
       <Container layout className="footer">
         <FooterLinks />
         <ul>

frontend/src/addons/volto-ploneconf/src/theme/_root.scss

@@ -3,6 +3,9 @@
   --narrow-container-width: 1024px;
   --default-container-width: 1024px;
   --layout-container-width: 1440px;
+  --decoration-background: #f2f4f5;
+  --breadcrumbs-text-color: #000;
+  --decoration-image: url(./static/bg_image_03.png);
 }
 
 a {

frontend/src/addons/volto-ploneconf/src/theme/_variables.scss

@@ -2,20 +2,22 @@
 
 $link-color: #000;
 $link-color-hover: #000;
-$container-background: #ecebeb;
+$container-background: #f2f4f5;
 
 body.section-en {
   --main-color: #016aad;
   --alternate-color: #001522;
   --reverse-color: #fff;
   --link-color: var(--main-color);
+  --decoration-image: url(./static/bg_image_01.png);
 }
 
 body.section-pt-br {
   --main-color: #3abdc4;
   --alternate-color: #001522;
   --reverse-color: #fff;
   --link-color: var(--main-color);
+  --decoration-image: url(./static/bg_image_02.png);
 }
 
 // Images
@@ -30,3 +32,16 @@ $teaser-images-aspect-ratio: math.div(16, 9) !default;
   -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
+
+// Animation
+@mixin add-decoration($align: 'left', $shadow: false) {
+  background-color: var(--decoration-background);
+  background-image: var(--decoration-image);
+  @if $align == 'right' {
+    background-position: $align;
+    background-repeat: no-repeat;
+  }
+  @if $shadow == true {
+    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
+  }
+}

frontend/src/addons/volto-ploneconf/src/theme/components/_breadcrumbs.scss

@@ -1,17 +1,17 @@
 #main {
   .breadcrumbs {
     padding: 10px 0;
-    background-color: var(--main-color);
+    @include add-decoration(right, true);
 
     .breadcrumb {
       max-width: var(--default-container-width);
       margin-right: 5px;
       margin-left: 5px;
-      color: var(--reverse-color) !important;
+      color: var(--breadcrumbs-text-color) !important;
       text-transform: uppercase;
 
       a {
-        color: var(--reverse-color) !important;
+        color: var(--breadcrumbs-text-color) !important;
         text-decoration: none;
 
         &:hover {
@@ -20,7 +20,7 @@
       }
 
       .divider::before {
-        color: var(--reverse-color);
+        color: var(--breadcrumbs-text-color);
         content: '▲';
         font-size: 12px;
       }

frontend/src/addons/volto-ploneconf/src/theme/components/_footer.scss

@@ -2,6 +2,12 @@
   margin-top: 20px;
   background-color: var(--main-color) !important;
 
+  .footerDecoration {
+    @include add-decoration();
+    display: block;
+    height: 53px;
+  }
+
   .footer {
     padding: 2rem 2rem;
     background-color: var(--main-color) !important;

frontend/src/addons/volto-ploneconf/src/theme/sections/_section_about.scss

@@ -1,3 +1,11 @@
+body.section-about {
+  --decoration-image: url(../static/bg_image_08.png);
+}
+
+body.section-sobre {
+  --decoration-image: url(../static/bg_image_08.png);
+}
+
 body.section-about.section-organizers,
 body.section-sobre.section-organizacao {
   .teaser-item .image-wrapper img {

frontend/src/addons/volto-ploneconf/yarn.lock

@@ -6041,6 +6041,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.throttle@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "lodash.throttle@npm:4.1.1"
+  checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805
+  languageName: node
+  linkType: hard
+
 "lodash.truncate@npm:^4.4.2":
   version: 4.4.2
   resolution: "lodash.truncate@npm:4.4.2"
@@ -7098,6 +7105,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lazy-load-image-component@npm:*":
+  version: 1.6.0
+  resolution: "react-lazy-load-image-component@npm:1.6.0"
+  dependencies:
+    lodash.debounce: ^4.0.8
+    lodash.throttle: ^4.1.1
+  peerDependencies:
+    react: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
+    react-dom: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
+  checksum: ab6db459c81a311e621ceb8be184472108ad5cff85cd5b80a52c0c16be808f8084a5fca756695eb0c84f543af6715a3bb1b50e702dd2485cb9162b30bcce3e35
+  languageName: node
+  linkType: hard
+
 "react-lifecycles-compat@npm:^3.0.2":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"
@@ -8609,6 +8629,7 @@ __metadata:
     postcss-less: 6.0.0
     postcss-scss: 4.0.8
     prettier: 3.0.3
+    react-lazy-load-image-component: "*"
     release-it: ^16.1.5
     stylelint: 15.10.3
     stylelint-config-idiomatic-order: 9.0.0