Merge pull request #5 from kitconcept/VLT-compat

VLT compat

news/6.feature

@@ -0,0 +1 @@
+Compatiblity with kitconcept volto-light-theme container widths @jackahl

package.json

@@ -53,6 +53,12 @@
           "**/*.overrides"
         ],
         "customSyntax": "postcss-less"
+      },
+      {
+        "files": [
+          "**/*.scss"
+        ],
+        "customSyntax": "postcss-scss"
       }
     ],
     "rules": {

src/components/Logo/View.jsx

@@ -44,8 +44,9 @@ const View = (props) => {
             />
           </UniversalLink>
         ))}
-
-      <h3 className="logo-heading headline">{data.heading}</h3>
+      {data.heading && (
+        <h3 className="logo-heading headline">{data.heading}</h3>
+      )}
       {config.blocks.blocksConfig.logo.showDescriptionField &&
         data.description && <p>{data.description}</p>}
     </div>

src/components/Logo/schema.js

@@ -36,12 +36,9 @@ export const LogoBlockSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: [
-          'logo',
-          'heading',
-          config.blocks.blocksConfig.logo.showDescriptionField && 'description',
-          'link',
-        ],
+        fields: config.blocks.blocksConfig.logo.showDescriptionField
+          ? ['logo', 'heading', 'description', 'link']
+          : ['logo', 'heading', 'link'],
       },
     ],
     properties: {

src/theme/_main.scss

@@ -0,0 +1,9 @@
+//Specific styles for volto-light-theme
+.block.logos .ui.stackable,
+.block.logos .grid-items,
+.block.logos h2.headline {
+  @include default-container-width();
+  // Adding 2 * 10px (one for each side) we force the container to extend the value of
+  // the gutter to match the other blocks margin.
+  max-width: calc(var(--default-container-width) + 2 * 10px);
+}

src/theme/main.less

@@ -92,17 +92,26 @@
   .three.column.grid {
     .logo-image {
       max-width: 200px;
-      height: 200px;
     }
 
     h3 {
-      width: 300px;
+      max-width: 300px;
     }
   }
 
-  .two.column.grid {
+  .logo-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     .logo-image {
-      height: 300px;
+      width: 100%;
+      max-height: 100px;
+      object-position: top center;
+    }
+
+    h3 {
+      max-width: 400px;
     }
   }
 }
@@ -114,10 +123,11 @@
 
   .logo-image {
     width: 100%;
+    max-height: 100px;
     object-position: top center;
   }
 
   h3 {
-    width: 400px;
+    max-width: 400px;
   }
 }