Melhoria de estilos para navegação em dispositivos móveis

Author: ericof

frontend/packages/volto-pythonbrasil-site/news/+estilos.feature

@@ -0,0 +1 @@
+Melhoria de estilos para navegação em dispositivos móveis. @ericof

frontend/packages/volto-pythonbrasil-site/src/components/Logo/Logo.jsx

@@ -2,13 +2,13 @@ import { useIntl } from 'react-intl';
 import messages from '@plonegovbr/volto-pythonbrasil-site/messages';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import LogoFullImage from './logo.svg';
-import LogoSlimImage from './logo-slim.svg';
 import LogoDataImage from './logo-data.svg';
 
 const LogoImg = ({ intl, logo }) => {
   return (
     <img
       src={logo}
+      height={'140px'}
       alt={intl.formatMessage(messages.site)}
       title={intl.formatMessage(messages.site)}
     />

frontend/packages/volto-pythonbrasil-site/src/config/blocks.ts

@@ -21,6 +21,7 @@ declare module '@plone/types' {
     accordion: BlockConfigBase;
     gridCTA: BlockConfigBase;
     chamadaBlock: BlockConfigBase;
+    slider: BlockConfigBase;
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
@@ -147,6 +148,9 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.image.schemaEnhancer =
     composeSchema(defaultStylingSchema);
 
+  // Configure Slider
+  config.blocks.blocksConfig.slider.enableAutoPlay = true;
+
   config.blocks.blocksConfig.accordion = {
     ...config.blocks.blocksConfig.accordion,
     blocksConfig: {

frontend/packages/volto-pythonbrasil-site/src/theme/_main.scss

@@ -10,6 +10,8 @@
 @import 'components/login';
 @import 'components/presenter_category';
 @import 'components/presenter_view';
+@import 'components/session_view';
+@import 'components/sessionInfo';
 @import 'components/sponsor_view';
 @import 'blocks/accordion';
 @import 'blocks/description';
@@ -20,6 +22,8 @@
 @import 'blocks/gridCTA';
 @import 'blocks/heading';
 @import 'blocks/listing';
+@import 'blocks/search';
+@import 'blocks/slider';
 @import 'blocks/chamada';
 @import 'blocks/image';
 @import 'blocks/block_sponsorlevel';

frontend/packages/volto-pythonbrasil-site/src/theme/_root.scss

@@ -1,6 +1,6 @@
 :root {
   // Layout
-  --narrow-container-width: 1024px;
+  --narrow-container-width: 960px;
   --default-container-width: 1024px;
   --layout-container-width: 1440px;
   // Theme

frontend/packages/volto-pythonbrasil-site/src/theme/_variables.scss

@@ -171,3 +171,38 @@ $color-block-change-vertical-spacing: $spacing-large !default;
     }
   }
 }
+
+@mixin cardContainerSessionGrid() {
+  border: 1px solid var(--theme-high-contrast-color);
+  filter: drop-shadow(2px 2px var(--secondary-color));
+  &:hover {
+    border: 1px solid var(--theme-foreground-color);
+  }
+  .sessionTitle {
+    .title {
+      @include add(size, m);
+      @include add(height, m);
+    }
+  }
+  .sessionDescription {
+    @include add(size, s);
+    @include add(height, s);
+  }
+  .sessionHeader {
+    justify-content: space-between;
+  }
+  .sessionBody {
+    height: 45px;
+    .presenters {
+      @include add(size, xs);
+      @include add(height, xs);
+      .presenter {
+        display: inline;
+        text-decoration: none;
+        @include add(size, xs);
+        @include add(height, xs);
+        @include add(weight, bold);
+      }
+    }
+  }
+}

frontend/packages/volto-pythonbrasil-site/src/theme/blocks/_image.scss

@@ -2,6 +2,11 @@
 #page-edit .blocks-form,
 #page-document .blocks-group-wrapper {
   .block.image {
+    &.align.center {
+      max-width: var(--default-container-width);
+      margin-right: auto;
+      margin-left: auto;
+    }
     &.align.full {
       width: 100vw;
       max-width: 100vw;

frontend/packages/volto-pythonbrasil-site/src/theme/blocks/_listing.scss

@@ -19,6 +19,9 @@
     }
   }
   &.grid {
+    .card-container.session {
+      @include cardContainerSessionGrid();
+    }
     .presenterTile {
       .presenterImage {
         border-radius: 10%;

frontend/packages/volto-pythonbrasil-site/src/theme/blocks/_search.scss

@@ -0,0 +1,19 @@
+.block.search {
+  &.grid {
+    .listing-item {
+      max-height: 450px;
+      .card-container.session {
+        @include cardContainerSessionGrid();
+      }
+    }
+  }
+  .searchBlock-container {
+    .react-select__menu {
+      z-index: 50;
+      padding-left: $spacing-xsmall;
+      border: 1px solid var(--border-color);
+      background-color: var(--background-color) !important;
+      filter: drop-shadow(2px 2px var(--secondary-color));
+    }
+  }
+}

frontend/packages/volto-pythonbrasil-site/src/theme/blocks/_slider.scss

@@ -0,0 +1,61 @@
+.block.slider {
+  .slider-wrapper {
+    .teaser-item-title {
+      bottom: 20px;
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      padding-bottom: $spacing-xsmall;
+      background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(30, 30, 30, 70) 60%,
+        rgba(0, 0, 0, 1) 100%
+      );
+      color: white;
+      transform: unset;
+      .title {
+        width: 50%;
+        h2 {
+          @include add(size, 2xl);
+          @include add(height, 2xl);
+        }
+      }
+      p {
+        width: 90%;
+      }
+      @media only screen and (max-width: $tablet-breakpoint) {
+        min-height: 250px;
+        padding-top: $spacing-xsmall;
+        .title {
+          width: 100%;
+          h2 {
+            @include add(size, l);
+            @include add(height, l);
+          }
+        }
+        p {
+          display: none;
+        }
+      }
+      &.has--slider--flagAlign--left {
+        align-items: flex-start;
+      }
+      &.has--slider--flagAlign--right {
+        align-items: flex-end;
+        .title {
+          text-align: right;
+        }
+        p {
+          text-align: right;
+        }
+        @media only screen and (max-width: $tablet-breakpoint) {
+          align-items: flex-start;
+          .title {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}