From b8c0678c8747c0b9dd07e1196f4c2e9ab9a85509 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 1 Jul 2020 14:37:57 +0100
Subject: [PATCH 1/4] Table component revised plus minor UI changes

Table redesigned to be more flexible and include setting props for better control
---
 .../ComponentPropertiesPanel.svelte           |  10 +-
 .../userInterface/PropertyControl.svelte      |   1 -
 .../userInterface/propertyCategories.js       |   8 ++
 .../userInterface/temporaryPanelStructure.js  |  14 ++-
 packages/standard-components/components.json  |  28 ++++-
 .../standard-components/src/DataTable.svelte  | 110 ++++++++++++------
 6 files changed, 122 insertions(+), 49 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 38e4dd67a9..60e758b0b6 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -100,7 +100,7 @@
 
   {#if displayName}
     <div class="instance-name">
-      <strong>{componentInstance._instanceName}</strong>
+      {componentInstance._instanceName}
     </div>
   {/if}
 
@@ -142,13 +142,15 @@
   }
 
   .component-props-container {
-    margin-top: 10px;
+    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
   }
 
   .instance-name {
-    margin-top: 10px;
-    font-size: 12px;
+    margin-top: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--grey-7);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index b79d01fb32..f9a8533b33 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -52,7 +52,6 @@
   }
 
   .label {
-    flex: 0 0 50px;
     display: flex;
     align-items: center;
     font-size: 12px;
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index d3605210e9..1c33efc6c9 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -85,6 +85,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -101,6 +103,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -133,6 +137,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -149,6 +155,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae39ce3ee2..ba5b5da84e 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -313,7 +313,13 @@ export default {
           icon: "ri-archive-drawer-fill",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [
+              { label: "Model", key: "model", control: ModelSelect },
+              { label: "Stripe Color", key: "stripeColor", control: Input },
+              { label: "Border Color", key: "borderColor", control: Input },
+              { label: "TH Color", key: "backgroundColor", control: Input },
+              { label: "TH Font Color", key: "color", control: Input }
+            ],
           },
           children: [],
         },
@@ -330,11 +336,7 @@ export default {
               properties: {
                 design: { ...all },
                 settings: [
-                  {
-                    label: "Model",
-                    key: "model",
-                    control: ModelSelect,
-                  },
+                  { label: "Model", key: "model", control: ModelSelect,},
                 ],
               },
               template: {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 8df7756499..d3987ce164 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -26,6 +26,20 @@
 			"borderStyle": "string"
 		}
 	},
+	"Navigation1": {
+		"name": "Navigation1",
+		"description": "A basic left navigation component",
+		"props": {
+			"logoUrl": "string",
+			"title": "string",
+			"backgroundColor": "string",
+			"color": "string",
+			"borderWidth": "string",
+			"borderColor": "string",
+			"borderStyle": "string"
+		}
+	},
+	
 	"button": {
 		"name": "Button",
 		"description": "an html <button />",
@@ -190,16 +204,22 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"icon": "string",
-			"fontSize": "string",
-			"color": "string"
+			"url": "string",
+			"className": "string",
+			"description": "string",
+			"height": "string",
+			"width": "string"
 		}
 	},
 	"datatable": {
 		"description": "an HTML table that fetches data from a model or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models" 
+			"model": "models",
+			"stripeColor": "string",
+			"borderColor": "string",
+			"backgroundColor": "string",
+			"color": "string"
 		}
 	},
 	"dataform": {
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index e6f097314c..94886b8d29 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,13 +1,25 @@
 <script>
   import { onMount } from "svelte"
+  import { cssVars, createClasses } from "./cssVars"
 
   export let _bb
   export let onLoad
   export let model
+  export let backgroundColor
+  export let color
+  export let stripeColor
+  export let borderColor
 
   let headers = []
   let store = _bb.store
 
+  $: cssVariables = {
+    backgroundColor,
+    color,
+    stripeColor,
+    borderColor,
+  }
+
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
 
@@ -34,7 +46,7 @@
   })
 </script>
 
-<table class="uk-table">
+<table use:cssVars={cssVariables}>
   <thead>
     <tr>
       {#each headers as header}
@@ -56,41 +68,71 @@
 </table>
 
 <style>
-  table {
-    border: 1px solid #ccc;
-    background: #fff;
-    border-radius: 3px;
-    border-collapse: collapse;
-  }
+table { 
+	width: 100%; 
+	border-collapse: collapse; 
+	}
 
-  thead {
-    background: #393c44;
-    border: 1px solid #ccc;
-    height: 40px;
-    text-align: left;
-    margin-right: 60px;
-  }
+  /* Zebra striping */
+tr:nth-of-type(odd) { 
+	background: var(--stripeColor); 
+	}
 
-  thead th {
-    color: #ffffff;
-    text-transform: capitalize;
-    font-weight: 500;
-    font-size: 14px;
-    text-rendering: optimizeLegibility;
-    justify-content: left;
-    padding: 16px 20px 16px 8px;
-    margin-right: 20px;
-  }
+th { 
+	background-color: var(--backgroundColor); 
+	color: var(--color); 
+	font-weight: bold; 
+  text-transform: capitalize;
+	}
 
-  tbody tr {
-    border-bottom: 1px solid #ccc;
-    transition: 0.3s background-color;
-    color: #393c44;
-    font-size: 14px;
-    height: 40px;
-  }
+td, th { 
+	padding: 16px; 
+	border: 1px solid var(--borderColor); 
+	text-align: left; 
+	}
 
-  tbody tr:hover {
-    background: var(--grey-1);
-  }
+
+@media 
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px)  {
+
+	table { 
+	  	width: 100%; 
+	}
+
+	/* Force table to not be like tables anymore */
+	table, thead, tbody, th, td, tr { 
+		display: block; 
+	}
+	
+	/* Hide table headers (but not display: none;, for accessibility) */
+	thead tr { 
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+	
+	tr { border: 1px solid var(--borderColor); }
+	
+	td { 
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee; 
+		position: relative;
+		padding-left: 10%; 
+	}
+
+	td:before { 
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		top: 6px;
+		left: 6px;
+		width: 45%; 
+		padding-right: 10px; 
+		white-space: nowrap;
+		/* Label the data */
+		content: attr(data-column);
+	}
+}
 </style>

From 6a4f47a4c8edd3e45c935c2c52be626684ad0c54 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 1 Jul 2020 14:46:22 +0100
Subject: [PATCH 2/4] formatting and lint

---
 .../Colorpicker/Colorpicker.svelte            |   8 +-
 .../Colorpicker/Colorpreview.svelte           |  39 +++---
 .../userInterface/Colorpicker/Portal.svelte   |  30 ++---
 .../ComponentPropertiesPanel.svelte           |   4 +-
 .../userInterface/DesignView.svelte           |   6 +-
 .../userInterface/OptionSelect.svelte         | 102 +++++++--------
 .../userInterface/PropertyGroup.svelte        |   2 +-
 .../userInterface/temporaryPanelStructure.js  |   4 +-
 .../src/pages/[application]/_reset.svelte     |   4 +-
 .../model/[selectedModel]/_layout.svelte      |  17 +--
 .../backend/model/_layout.svelte              |   6 +-
 .../[application]/backend/model/index.svelte  |  14 +-
 .../standard-components/src/DataTable.svelte  | 121 +++++++++---------
 13 files changed, 182 insertions(+), 175 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 27b5e20b5b..eed0e74e29 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -16,7 +16,7 @@
   import Portal from "./Portal.svelte"
 
   export let value = "#3ec1d3ff"
-  export let open = false;
+  export let open = false
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
   export let format = "hexa"
@@ -40,7 +40,7 @@
       getRecentColors()
     }
 
-    if(colorPicker) {
+    if (colorPicker) {
       colorPicker.focus()
     }
 
@@ -57,7 +57,7 @@
   }
 
   function handleEscape(e) {
-    if(open && e.key === "Escape") {
+    if (open && e.key === "Escape") {
       open = false
     }
   }
@@ -159,10 +159,8 @@
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
   $: selectedColorStyle = buildStyle({ background: value, border })
   $: shrink = swatches.length > 0
-  
 </script>
 
-
 <Portal>
   <div
     class="colorpicker-container"
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index fc85b12f30..079d4e038f 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -38,7 +38,6 @@
     }
   })
 
-
   function openColorpicker(event) {
     if (colorPreview) {
       open = true
@@ -50,7 +49,7 @@
     dispatch("change", color.detail)
   }
 
-  $: if(open && colorPreview) {
+  $: if (open && colorPreview) {
     const {
       top: spaceAbove,
       width,
@@ -62,17 +61,17 @@
     const spaceBelow = window.innerHeight - bottom
     const previewCenter = previewWidth / 2
 
-    let y, x;
+    let y, x
 
-    if(spaceAbove > spaceBelow) {
+    if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      y = (window.innerHeight - spaceAbove)
-    }else{
+      y = window.innerHeight - spaceAbove
+    } else {
       positionSide = "top"
       y = bottom
     }
 
-    x = (left + previewCenter) - (pickerWidth / 2)
+    x = left + previewCenter - pickerWidth / 2
 
     dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
@@ -83,7 +82,6 @@
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left}px`,
   })
-  
 </script>
 
 <div class="color-preview-container">
@@ -99,19 +97,18 @@
     </CheckedBackground>
 
     {#if open}
-    <Colorpicker
-      style={pickerStyle}
-      on:change={onColorChange}
-      on:addswatch
-      on:removeswatch
-      bind:format
-      bind:value
-      bind:pickerHeight
-      bind:pickerWidth
-      bind:open
-      {swatches}
-      {disableSwatches}
-       />
+      <Colorpicker
+        style={pickerStyle}
+        on:change={onColorChange}
+        on:addswatch
+        on:removeswatch
+        bind:format
+        bind:value
+        bind:pickerHeight
+        bind:pickerWidth
+        bind:open
+        {swatches}
+        {disableSwatches} />
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
index 9af289175a..462a176e4f 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
@@ -1,35 +1,35 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount } from "svelte"
 
-  export let target = document.body;
+  export let target = document.body
 
-  let targetEl;
-  let portal;
-  let componentInstance;
+  let targetEl
+  let portal
+  let componentInstance
 
   onMount(() => {
     if (typeof target === "string") {
-      targetEl = document.querySelector(target);
+      targetEl = document.querySelector(target)
       // Force exit
       if (targetEl === null) {
-        return () => {};
+        return () => {}
       }
     } else if (target instanceof HTMLElement) {
-      targetEl = target;
+      targetEl = target
     } else {
       throw new TypeError(
         `Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
-      );
+      )
     }
 
-    portal = document.createElement("div");
-    targetEl.appendChild(portal);
-    portal.appendChild(componentInstance);
+    portal = document.createElement("div")
+    targetEl.appendChild(portal)
+    portal.appendChild(componentInstance)
 
     return () => {
-      targetEl.removeChild(portal);
-    };
-  });
+      targetEl.removeChild(portal)
+    }
+  })
 </script>
 
 <div bind:this={componentInstance}>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 60e758b0b6..eb5dc682aa 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -99,9 +99,7 @@
     {selectedCategory} />
 
   {#if displayName}
-    <div class="instance-name">
-      {componentInstance._instanceName}
-    </div>
+    <div class="instance-name">{componentInstance._instanceName}</div>
   {/if}
 
   <div class="component-props-container">
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 408dc54d06..9db0001266 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,9 +1,8 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
-
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
@@ -34,7 +33,6 @@
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
-  
 </script>
 
 <div class="design-view-container">
@@ -55,7 +53,7 @@
             {componentDefinition}
             {componentInstance}
             open={currentGroup === groupName}
-            on:open={() => currentGroup = groupName} />
+            on:open={() => (currentGroup = groupName)} />
         {/each}
       {:else}
         <div class="no-design">
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 26f061cb58..10323a1d20 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -13,13 +13,13 @@
   let selectMenu
   let icon
 
-  let selectAnchor = null;
-  let dimensions = {top: 0, bottom: 0, left: 0}
+  let selectAnchor = null
+  let dimensions = { top: 0, bottom: 0, left: 0 }
 
   let positionSide = "top"
   let maxHeight = 0
-  let scrollTop = 0;
-  let containerEl = null;
+  let scrollTop = 0
+  let containerEl = null
 
   const handleStyleBind = value =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
@@ -32,51 +32,53 @@
     return () => {
       select.removeEventListener("keydown", handleEnter)
     }
-
   })
 
   function handleEscape(e) {
-    if(open && e.key === "Escape") {
-        toggleSelect(false)
+    if (open && e.key === "Escape") {
+      toggleSelect(false)
     }
   }
 
   function getDimensions() {
-    const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
+    const {
+      bottom,
+      top: spaceAbove,
+      left,
+    } = selectAnchor.getBoundingClientRect()
     const spaceBelow = window.innerHeight - bottom
 
-    let y;
+    let y
 
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      maxHeight = spaceAbove - 20  
-      y = (window.innerHeight - spaceAbove)
+      maxHeight = spaceAbove - 20
+      y = window.innerHeight - spaceAbove
     } else {
       positionSide = "top"
       y = bottom
       maxHeight = spaceBelow - 20
     }
 
-    dimensions = {[positionSide]: y, left}
+    dimensions = { [positionSide]: y, left }
   }
 
   function handleEnter(e) {
     if (!open && e.key === "Enter") {
-        toggleSelect(true)
-    } 
+      toggleSelect(true)
+    }
   }
 
   function toggleSelect(isOpen) {
     getDimensions()
     if (isOpen) {
-      icon.style.transform = "rotate(180deg)"      
+      icon.style.transform = "rotate(180deg)"
     } else {
       icon.style.transform = "rotate(0deg)"
     }
     open = isOpen
   }
 
-
   function handleClick(val) {
     value = val
     onChange(value)
@@ -86,7 +88,7 @@
     "max-height": `${maxHeight.toFixed(0)}px`,
     "transform-origin": `center ${positionSide}`,
     [positionSide]: `${dimensions[positionSide]}px`,
-    "left": `${dimensions.left.toFixed(0)}px`,
+    left: `${dimensions.left.toFixed(0)}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -95,7 +97,7 @@
     ? options.find(o => o.value === value)
     : {}
 
-  $: if(open && selectMenu) {
+  $: if (open && selectMenu) {
     selectMenu.focus()
   }
 
@@ -113,38 +115,38 @@
     <i bind:this={icon} class="ri-arrow-down-s-fill" />
   </div>
   {#if open}
-  <Portal>
-    <div
-      tabindex="0"
-      class:open
-      bind:this={selectMenu}
-      style={menuStyle}
-      on:keydown={handleEscape}
-      class="bb-select-menu">
-      <ul>
-        {#if isOptionsObject}
-          {#each options as { value: v, label }}
-            <li
-              {...handleStyleBind(v)}
-              on:click|self={handleClick(v)}
-              class:selected={value === v}>
-              {label}
-            </li>
-          {/each}
-        {:else}
-          {#each options as v}
-            <li
-              {...handleStyleBind(v)}
-              on:click|self={handleClick(v)}
-              class:selected={value === v}>
-              {v}
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-   <div on:click|self={() => toggleSelect(false)} class="overlay" />
-  </Portal>
+    <Portal>
+      <div
+        tabindex="0"
+        class:open
+        bind:this={selectMenu}
+        style={menuStyle}
+        on:keydown={handleEscape}
+        class="bb-select-menu">
+        <ul>
+          {#if isOptionsObject}
+            {#each options as { value: v, label }}
+              <li
+                {...handleStyleBind(v)}
+                on:click|self={handleClick(v)}
+                class:selected={value === v}>
+                {label}
+              </li>
+            {/each}
+          {:else}
+            {#each options as v}
+              <li
+                {...handleStyleBind(v)}
+                on:click|self={handleClick(v)}
+                class:selected={value === v}>
+                {v}
+              </li>
+            {/each}
+          {/if}
+        </ul>
+      </div>
+      <div on:click|self={() => toggleSelect(false)} class="overlay" />
+    </Portal>
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 511807b2e6..0da68c51d0 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -13,7 +13,7 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open} >
+<DetailSummary {name} on:open show={open}>
   {#each properties as props}
     <PropertyControl
       label={props.label}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ba5b5da84e..a8c2d7645a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -318,7 +318,7 @@ export default {
               { label: "Stripe Color", key: "stripeColor", control: Input },
               { label: "Border Color", key: "borderColor", control: Input },
               { label: "TH Color", key: "backgroundColor", control: Input },
-              { label: "TH Font Color", key: "color", control: Input }
+              { label: "TH Font Color", key: "color", control: Input },
             ],
           },
           children: [],
@@ -336,7 +336,7 @@ export default {
               properties: {
                 design: { ...all },
                 settings: [
-                  { label: "Model", key: "model", control: ModelSelect,},
+                  { label: "Model", key: "model", control: ModelSelect },
                 ],
               },
               template: {
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index a75cfa0b9e..7e982bdfe0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -38,7 +38,9 @@
     if (!activeTopNav) return
     store.update(state => {
       if (!state.previousTopNavPath) state.previousTopNavPath = {}
-      state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
+      state.previousTopNavPath[
+        activeTopNav.path
+      ] = window.location.pathname.replace("/_builder", "")
       $goto(state.previousTopNavPath[path] || path)
       return state
     })
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
index a3ce7c6bf9..4ed98f3a38 100644
--- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
@@ -1,14 +1,15 @@
 <script>
-import { params } from "@sveltech/routify"
-import { backendUiStore } from "builderStore"
+  import { params } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
 
-if ($params.selectedModel) {
-  const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
-  if (model) {
-    backendUiStore.actions.models.select(model)
+  if ($params.selectedModel) {
+    const model = $backendUiStore.models.find(
+      m => m._id === $params.selectedModel
+    )
+    if (model) {
+      backendUiStore.actions.models.select(model)
+    }
   }
-}
-
 </script>
 
 <slot />
diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
index ee17644f3a..d9a69b4250 100644
--- a/packages/builder/src/pages/[application]/backend/model/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
@@ -10,7 +10,11 @@
   onMount(async () => {
     // navigate to first model in list, if not already selected
     // and this is the final url (i.e. no selectedModel)
-    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+    if (
+      !$leftover &&
+      $backendUiStore.models.length > 0 &&
+      (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
+    ) {
       $goto(`./${$backendUiStore.models[0]._id}`)
     }
   })
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index 15a08b1d09..f72878a871 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -8,9 +8,13 @@
   }
 
   onMount(async () => {
-     // navigate to first model in list, if not already selected
+    // navigate to first model in list, if not already selected
     // and this is the final url (i.e. no selectedModel)
-    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+    if (
+      !$leftover &&
+      $backendUiStore.models.length > 0 &&
+      (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
+    ) {
       // this file routes as .../models/index, so, go up one.
       $goto(`../${$backendUiStore.models[0]._id}`)
     }
@@ -18,7 +22,5 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-Please create a model
-{:else}
-Please select a model
-{/if}
+  Please create a model
+{:else}Please select a model{/if}
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 94886b8d29..18953f6292 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -68,71 +68,76 @@
 </table>
 
 <style>
-table { 
-	width: 100%; 
-	border-collapse: collapse; 
-	}
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
 
   /* Zebra striping */
-tr:nth-of-type(odd) { 
-	background: var(--stripeColor); 
-	}
+  tr:nth-of-type(odd) {
+    background: var(--stripeColor);
+  }
 
-th { 
-	background-color: var(--backgroundColor); 
-	color: var(--color); 
-	font-weight: bold; 
-  text-transform: capitalize;
-	}
+  th {
+    background-color: var(--backgroundColor);
+    color: var(--color);
+    font-weight: bold;
+    text-transform: capitalize;
+  }
 
-td, th { 
-	padding: 16px; 
-	border: 1px solid var(--borderColor); 
-	text-align: left; 
-	}
+  td,
+  th {
+    padding: 16px;
+    border: 1px solid var(--borderColor);
+    text-align: left;
+  }
 
+  @media only screen and (max-width: 760px),
+    (min-device-width: 768px) and (max-device-width: 1024px) {
+    table {
+      width: 100%;
+    }
 
-@media 
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px)  {
+    /* Force table to not be like tables anymore */
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+    }
 
-	table { 
-	  	width: 100%; 
-	}
+    /* Hide table headers (but not display: none;, for accessibility) */
+    thead tr {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
 
-	/* Force table to not be like tables anymore */
-	table, thead, tbody, th, td, tr { 
-		display: block; 
-	}
-	
-	/* Hide table headers (but not display: none;, for accessibility) */
-	thead tr { 
-		position: absolute;
-		top: -9999px;
-		left: -9999px;
-	}
-	
-	tr { border: 1px solid var(--borderColor); }
-	
-	td { 
-		/* Behave  like a "row" */
-		border: none;
-		border-bottom: 1px solid #eee; 
-		position: relative;
-		padding-left: 10%; 
-	}
+    tr {
+      border: 1px solid var(--borderColor);
+    }
 
-	td:before { 
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		top: 6px;
-		left: 6px;
-		width: 45%; 
-		padding-right: 10px; 
-		white-space: nowrap;
-		/* Label the data */
-		content: attr(data-column);
-	}
-}
+    td {
+      /* Behave  like a "row" */
+      border: none;
+      border-bottom: 1px solid #eee;
+      position: relative;
+      padding-left: 10%;
+    }
+
+    td:before {
+      /* Now like a table header */
+      position: absolute;
+      /* Top/left values mimic padding */
+      top: 6px;
+      left: 6px;
+      width: 45%;
+      padding-right: 10px;
+      white-space: nowrap;
+      /* Label the data */
+      content: attr(data-column);
+    }
+  }
 </style>

From 1258abb8e4a94198c4f3a7d43c2fd0b0581cf57c Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 1 Jul 2020 15:01:38 +0100
Subject: [PATCH 3/4] Update components.json

---
 packages/standard-components/components.json | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d3987ce164..24b21b7dc5 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -26,20 +26,6 @@
 			"borderStyle": "string"
 		}
 	},
-	"Navigation1": {
-		"name": "Navigation1",
-		"description": "A basic left navigation component",
-		"props": {
-			"logoUrl": "string",
-			"title": "string",
-			"backgroundColor": "string",
-			"color": "string",
-			"borderWidth": "string",
-			"borderColor": "string",
-			"borderStyle": "string"
-		}
-	},
-	
 	"button": {
 		"name": "Button",
 		"description": "an html <button />",

From 2d7942b3184b3162c341a431624d879bb0cd2463 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 28 Jul 2020 11:53:07 +0100
Subject: [PATCH 4/4] Lint

---
 .../src/components/userInterface/temporaryPanelStructure.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 7acd537906..fedc432150 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -296,7 +296,7 @@ export default {
               { label: "Border Color", key: "borderColor", control: Input },
               { label: "TH Color", key: "backgroundColor", control: Input },
               { label: "TH Font Color", key: "color", control: Input },
-              { label: "Table", key: "model", control: ModelSelect }
+              { label: "Table", key: "model", control: ModelSelect },
             ],
           },
           children: [],