From 460c3851e528fb01cd2212c7a7e8f0f9d0e62330 Mon Sep 17 00:00:00 2001 From: Anemy Date: Thu, 12 May 2022 02:55:52 -0400 Subject: [PATCH 1/4] make agg stage preview doc height match the editor height --- .../stage-preview/stage-preview.jsx | 6 ++++-- .../stage-preview/stage-preview.module.less | 21 ++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx index abda00062b3..4c871d73b1b 100644 --- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx +++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx @@ -209,8 +209,10 @@ class StagePreview extends Component { if (this.props.documents.length > 0) { const documents = this.props.documents.map((doc, i) => { return ( -
- +
+
+ +
); }); diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less index 385739e2ead..019f06d3016 100644 --- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less +++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less @@ -70,22 +70,33 @@ padding: 10px; } - &-document-card { + &-document-card-container { flex: none; border: 1px solid @gray6; border-radius: 4px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); width: 350px; - height: 150px; overflow: scroll; + min-height: 150px; + flex-shrink: 0; + display: flex; + flex-direction: column; } - &-document-card:not(:first-child) { + &-document-card-container:not(:first-child) { margin-left: 20px; } - &-document-card::-webkit-scrollbar { - display: none; + &-document-card { + flex-basis: 150px; + flex-grow: 1; + flex-shrink: 0; + overflow: auto; + padding: 0; + + &::-webkit-scrollbar { + display: none; + } } } From 9d0c318465507ea6f98193bf1495bf1fb92120aa Mon Sep 17 00:00:00 2001 From: Anemy Date: Thu, 12 May 2022 02:59:42 -0400 Subject: [PATCH 2/4] reduce padding on documents view by 4 px --- .../src/components/stage-preview/stage-preview.module.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less index 019f06d3016..27d34f9ba5d 100644 --- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less +++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less @@ -66,8 +66,7 @@ display: flex; align-items: stretch; overflow-x: scroll; - margin: 10px; - padding: 10px; + padding: 16px; } &-document-card-container { From 012d14a6af6a89b6ff45185ed36cce05a6143ff0 Mon Sep 17 00:00:00 2001 From: Anemy Date: Thu, 12 May 2022 08:18:08 -0400 Subject: [PATCH 3/4] make input preview resize to container height, re-add padding/margin --- .../input-preview/input-preview.jsx | 6 +++-- .../input-preview/input-preview.module.less | 25 +++++++++++++------ .../stage-preview/stage-preview.module.less | 5 ++-- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx index 087239770bc..d2f7764a7aa 100644 --- a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx +++ b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx @@ -24,8 +24,10 @@ class InputPreview extends Component { render() { const documents = (this.props.documents || []).map((doc, i) => { return ( -
- +
+
+ +
); }); diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less index 7890f50e29b..4c8bacadec4 100644 --- a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less +++ b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less @@ -12,26 +12,37 @@ display: flex; align-items: flex-start; overflow-x: scroll; - margin: 10px; - padding: 10px; + margin: 8px; + padding: 8px; } - &-document-card { + &-document-card-container { flex: none; border: 1px solid @gray6; border-radius: 4px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); width: 350px; - height: 150px; overflow: scroll; + min-height: 150px; + flex-shrink: 0; + display: flex; + flex-direction: column; } - &-document-card:not(:first-child) { + &-document-card-container:not(:first-child) { margin-left: 20px; } - &-document-card::-webkit-scrollbar { - display: none; + &-document-card { + flex-basis: 150px; + flex-grow: 1; + flex-shrink: 0; + overflow: auto; + padding: 0; + + &::-webkit-scrollbar { + display: none; + } } } diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less index 27d34f9ba5d..be43b0fb682 100644 --- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less +++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less @@ -66,7 +66,8 @@ display: flex; align-items: stretch; overflow-x: scroll; - padding: 16px; + margin: 8px; + padding: 8px; } &-document-card-container { @@ -83,7 +84,7 @@ } &-document-card-container:not(:first-child) { - margin-left: 20px; + margin-left: 16px; } &-document-card { From 8ac0251730e5dee7adf4d721165cb30161e49f10 Mon Sep 17 00:00:00 2001 From: Anemy Date: Thu, 12 May 2022 08:22:32 -0400 Subject: [PATCH 4/4] input preview match stage preview --- .../src/components/input-preview/input-preview.module.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less index 4c8bacadec4..2ef629b7e72 100644 --- a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less +++ b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less @@ -30,7 +30,7 @@ } &-document-card-container:not(:first-child) { - margin-left: 20px; + margin-left: 16px; } &-document-card {