From 302bcd575796e6cfa8da0085e364cde7520b5833 Mon Sep 17 00:00:00 2001
From: James <james@keen-studio.com>
Date: Sun, 9 Dec 2018 13:41:30 -0800
Subject: [PATCH] adds column width approach so fields can be less than full
 width

---
 demo/Page/Page.config.js                        | 10 +++++++++-
 demo/Page/components/Edit/index.js              |  5 +++--
 src/components/field-types/Group/index.scss     |  7 ++++++-
 src/components/field-types/Input/index.js       |  5 ++++-
 src/components/field-types/fieldType/index.scss |  2 ++
 src/components/forms/Form/index.scss            |  3 +--
 src/components/modules/Filter/index.js          |  2 +-
 src/components/modules/StickyAction/index.scss  |  1 +
 src/components/views/collections/Edit/index.js  |  5 ++---
 src/scss/grid.scss                              | 17 +++--------------
 src/scss/structure.scss                         |  4 ++--
 11 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/demo/Page/Page.config.js b/demo/Page/Page.config.js
index 33fb86319c..8c824e9700 100644
--- a/demo/Page/Page.config.js
+++ b/demo/Page/Page.config.js
@@ -25,7 +25,15 @@ export default {
           name: 'metaTitle',
           type: 'string',
           maxLength: 100,
-          label: 'Meta Title'
+          label: 'Meta Title',
+          width: 50
+        },
+        {
+          name: 'metaKeywords',
+          type: 'string',
+          maxLength: 100,
+          label: 'Meta Keywords',
+          width: 50
         },
         {
           name: 'metaDesc',
diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js
index 0a8d88851b..dafb1d92f5 100644
--- a/demo/Page/components/Edit/index.js
+++ b/demo/Page/components/Edit/index.js
@@ -37,7 +37,7 @@ class Edit extends Component {
     const initialData = this.props.data ? this.props.data : {};
 
     return (
-      <EditView data={this.props.data} collection={this.props.collection} slug={this.state.slug} uid={this.state.uid}>
+      <EditView data={this.props.data} collection={this.props.collection}>
         <Form method={this.state.method} action={this.state.action}>
           <StickyAction content={
             <APIUrl serverUrl={this.props.config.serverUrl}
@@ -52,7 +52,8 @@ class Edit extends Component {
           <Input onChange={this.setSlug} type="text" label="Page Title" initialValue={initialData.title} name="title" required />
           <Textarea required name="content" label="Page Content" wysiwyg={false} height={100} initialValue={initialData.content} />
           <Group heading="Meta Information">
-            <Input type="text" label="Meta Title" initialValue={initialData.metaTitle} name="metaTitle" required />
+            <Input type="text" label="Meta Title" initialValue={initialData.metaTitle} name="metaTitle" width={50} required />
+            <Input type="text" label="Meta Keywords" initialValue={initialData.metaTitle} name="metaKeywords" width={50} required />
             <Textarea required name="metaDesc" label="Meta Description" wysiwyg={false} height={100} initialValue={initialData.metaDesc} />
           </Group>
         </Form>
diff --git a/src/components/field-types/Group/index.scss b/src/components/field-types/Group/index.scss
index 18ac05243e..5e0e50a282 100644
--- a/src/components/field-types/Group/index.scss
+++ b/src/components/field-types/Group/index.scss
@@ -2,7 +2,7 @@
 
 .field-group {
   @extend %shadow;
-  margin: rem(1) 0;
+  margin: rem(1) rem(.5);
 
   header,
   .content {
@@ -16,4 +16,9 @@
       margin-bottom: 0;
     }
   }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
diff --git a/src/components/field-types/Input/index.js b/src/components/field-types/Input/index.js
index 4ecd9f22ea..7c3fbfa74f 100644
--- a/src/components/field-types/Input/index.js
+++ b/src/components/field-types/Input/index.js
@@ -32,7 +32,10 @@ const validate = (value, type) => {
 
 const Input = props => {
   return (
-    <div className={props.className} style={props.style}>
+    <div className={props.className} style={{
+      ...props.style,
+      width: props.width ? `${props.width}%` : null
+    }}>
       {props.error}
       {props.label}
       <input
diff --git a/src/components/field-types/fieldType/index.scss b/src/components/field-types/fieldType/index.scss
index 1cbc4f4585..8f27670414 100644
--- a/src/components/field-types/fieldType/index.scss
+++ b/src/components/field-types/fieldType/index.scss
@@ -1,8 +1,10 @@
 @import '~payload/scss/styles';
 
 .field-type {
+  @include gutter;
   margin-bottom: rem(.5);
   position: relative;
+  width: 100%;
 
   label {
     display: flex;
diff --git a/src/components/forms/Form/index.scss b/src/components/forms/Form/index.scss
index d5d90ec376..3c67b96b62 100644
--- a/src/components/forms/Form/index.scss
+++ b/src/components/forms/Form/index.scss
@@ -1,8 +1,7 @@
 @import '~payload/scss/styles';
 
 form {
-  display: flex;
-  flex-wrap: wrap;
+  @include row;
 
   > * {
     width: 100%;
diff --git a/src/components/modules/Filter/index.js b/src/components/modules/Filter/index.js
index 5fc48afe17..e6a9f2a83e 100644
--- a/src/components/modules/Filter/index.js
+++ b/src/components/modules/Filter/index.js
@@ -4,7 +4,7 @@ import { Form, Input } from 'payload/components';
 class Filter extends Component {
   render() {
     return (
-      <Form>
+      <Form className="filter">
         <Input placeholder="Search" type="text" name="keywords" />
       </Form>
     );
diff --git a/src/components/modules/StickyAction/index.scss b/src/components/modules/StickyAction/index.scss
index 21cce71238..fe75f1ae47 100644
--- a/src/components/modules/StickyAction/index.scss
+++ b/src/components/modules/StickyAction/index.scss
@@ -1,6 +1,7 @@
 @import '~payload/scss/styles';
 
 .sticky.action {
+  @include gutter;
   display: flex;
   justify-content: space-between;
 
diff --git a/src/components/views/collections/Edit/index.js b/src/components/views/collections/Edit/index.js
index 9bca4a4064..4980670946 100644
--- a/src/components/views/collections/Edit/index.js
+++ b/src/components/views/collections/Edit/index.js
@@ -5,8 +5,7 @@ import './index.scss';
 
 const EditView = props => {
 
-  const isEditing = props.slug ? true : false;
-
+  const isEditing = props.data && props.data.slug ? true : false;
   const nav = [{
       url: `/collections/${props.collection.slug}`,
       label: props.collection.label
@@ -14,7 +13,7 @@ const EditView = props => {
 
   if (isEditing) {
     nav.push({
-      url: `/collections/${props.collection.slug}/${props.slug}`,
+      url: `/collections/${props.collection.slug}/${props.data.slug}`,
       label: props.data ? props.data[props.collection.uid] : ''
     })
   } else {
diff --git a/src/scss/grid.scss b/src/scss/grid.scss
index 72b9e7eea6..a1b453f756 100644
--- a/src/scss/grid.scss
+++ b/src/scss/grid.scss
@@ -6,7 +6,6 @@
 
 // Gutter
 $gutter : rem(.5);
-$cols   : 12;
 
 /////////////////////////////
 // ROWS
@@ -20,20 +19,10 @@ $cols   : 12;
 }
 
 /////////////////////////////
-// COLUMN SETUP
+// GUTTER SETUP
 /////////////////////////////
 
 @mixin gutter {
-  margin-left: $gutter;
-  margin-right: $gutter;
-}
-
-@mixin col($col) {
-  @include gutter;
-  width: calc(#{$col / $cols * 100 + %} - #{rem(1.01)});
-}
-
-@mixin push($col) {
-  margin-right: $gutter;
-  margin-left: calc(#{$col / $cols * 100 + %} + #{$gutter});
+  padding-left: $gutter;
+  padding-right: $gutter;
 }
diff --git a/src/scss/structure.scss b/src/scss/structure.scss
index 87c926a8cb..5c1fc1c1c5 100644
--- a/src/scss/structure.scss
+++ b/src/scss/structure.scss
@@ -6,8 +6,8 @@
 /////////////////////////////
 
 @mixin default-template-width {
-  padding-left: rem(1);
-  padding-right: rem(1);
+  padding-left: $base;
+  padding-right: $base;
   margin-left: rem(6);
   width: calc(100% - #{rem(6)});