Add content width setting to layouts

packages/server/src/constants/layouts.js

@@ -40,6 +40,7 @@ const EMPTY_LAYOUT = {
       selected: {},
     },
     navigation: "Top",
+    contentWidth: "Large",
     links: [
       {
         text: "Home",
@@ -89,6 +90,7 @@ const BASE_LAYOUTS = [
         selected: {},
       },
       navigation: "Top",
+      contentWidth: "Large",
       links: [
         {
           text: "Home",
@@ -136,6 +138,7 @@ const BASE_LAYOUTS = [
         selected: {},
       },
       navigation: "Top",
+      contentWidth: "Large",
       links: [
         {
           text: "Home",

packages/standard-components/manifest.json

@@ -43,6 +43,13 @@
         "key": "sticky",
         "defaultValue": false
       },
+      {
+        "type": "select",
+        "label": "Content Width",
+        "key": "contentWidth",
+        "options": ["Small", "Medium", "Large"],
+        "defaultValue": "Large"
+      },
       {
         "type": "navigation",
         "label": "Links",

packages/standard-components/src/Layout.svelte

@@ -12,16 +12,23 @@
   export let navigation = "Top"
   export let sticky = false
   export let links
-
+  export let contentWidth = "Large"
-  $: validLinks = links?.filter(link => link.text && link.url) || []
-  $: type = navigationClasses[navigation] || "none"
-  let mobileOpen = false
 
   const navigationClasses = {
     Top: "top",
     Left: "left",
     None: "none",
   }
+  const widthClasses = {
+    Large: "l",
+    Medium: "m",
+    Small: "s",
+  }
+
+  $: validLinks = links?.filter(link => link.text && link.url) || []
+  $: typeClass = navigationClasses[navigation] || "none"
+  $: widthClass = widthClasses[contentWidth] || "l"
+  let mobileOpen = false
 
   const isInternal = url => {
     return url.startsWith("/")
@@ -36,10 +43,10 @@
   }
 </script>
 
-<div class="layout layout--{type}" use:styleable={$component.styles}>
+<div class="layout layout--{typeClass}" use:styleable={$component.styles}>
-  {#if type !== "none"}
+  {#if typeClass !== "none"}
     <div class="nav-wrapper" class:sticky>
-      <div class="nav nav--{type}">
+      <div class="nav nav--{typeClass}">
         <div class="nav-header">
           {#if validLinks?.length}
             <div class="burger">
@@ -97,7 +104,7 @@
     </div>
   {/if}
   <div class="main-wrapper">
-    <div class="main">
+    <div class="main main--{widthClass}">
       <slot />
     </div>
   </div>
@@ -157,11 +164,19 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    width: 1400px;
     max-width: 100%;
     position: relative;
     padding: 32px;
   }
+  .main--s {
+    width: 800px;
+  }
+  .main--m {
+    width: 1100px;
+  }
+  .main--l {
+    width: 1400px;
+  }
 
   /*  Nav components */
   .burger {