From da705df20b9b2d44c6aa76050bb59a0bb669f0db Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Fri, 22 May 2020 17:08:16 -0700
Subject: styling changes

---
 package-lock.json                                  | 44 ++++++++++++++++------
 .../collections/CollectionCarousel3DView.scss      | 10 ++---
 .../views/collections/CollectionCarousel3DView.tsx | 43 ++++++++++-----------
 3 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6532f27ec..23d9fc590 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2702,7 +2702,8 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2720,11 +2721,13 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2737,15 +2740,18 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -2848,7 +2854,8 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -2858,6 +2865,7 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -2870,17 +2878,20 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -2897,6 +2908,7 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -2952,7 +2964,8 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -2977,7 +2990,8 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -2987,6 +3001,7 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3055,7 +3070,8 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3085,6 +3101,7 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3102,6 +3119,7 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3140,11 +3158,13 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         }
                     }
                 }
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 7da007ef3..df64d8cbe 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -1,11 +1,11 @@
 .collectionCarouselView-outer {
     background: white;
     height: 100%;
-    perspective: 30em;
+    perspective: 40em;
 
-    .collectionCarouselView-image {
+    .collectionCarouselView-center {
         position: absolute;
-        height: 100%;
+        height: 80%;
         width: 50%;
         top: 0;
         left: 0;
@@ -23,7 +23,7 @@
         width: 25%;
         left: 0;
         top: 25%;
-        transform: rotateY(-20deg)
+        transform: rotateY(-20deg);
     }
 
     .collectionCarouselView-next {
@@ -32,6 +32,6 @@
         width: 25%;
         right: 0;
         top: 25%;
-        transform: rotateY(20deg)
+        transform: rotateY(20deg);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 649ca4eba..0e704a1a0 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -38,8 +38,9 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         );
     }
 
-    mainPanelWidth = () => this.props.PanelWidth() * 0.6;
-    sidePanelWidth = () => this.props.PanelWidth() * 0.3;
+    mainPanelWidth = () => this.props.PanelWidth() * 0.5;
+    mainPanelHeight = () => this.props.PanelHeight() * 0.8;
+    sidePanelWidth = () => this.props.PanelWidth() * 0.25;
     sidePanelHeight = () => this.props.PanelHeight() * 0.5;
     @computed get content() {
         const index = NumCast(this.layoutDoc._itemIndex);
@@ -47,31 +48,35 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
         return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) :
             <>
-                <div className="collectionCarouselView-prev">
+                <div className="collectionCarouselView-center">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
-                        onClick={this.changeIndexScript}
+                        onClick={ScriptField.MakeScript(
+                            "child._showCaption = 'caption'",
+                            { child: Doc.name },
+                            { child: this.childLayoutPairs[index].layout }
+                        )}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
-                        Document={this.childLayoutPairs[prevIndex].layout}
-                        DataDoc={this.childLayoutPairs[prevIndex].data}
-                        PanelWidth={this.sidePanelWidth}
-                        PanelHeight={this.sidePanelHeight}
+                        Document={this.childLayoutPairs[index].layout}
+                        DataDoc={this.childLayoutPairs[index].data}
+                        PanelWidth={this.mainPanelWidth}
+                        PanelHeight={this.mainPanelHeight}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform}
                         bringToFront={returnFalse}
                         parentActive={this.props.active}
                     />
                 </div>
-                <div className="collectionCarouselView-next">
+                <div className="collectionCarouselView-prev">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
                         onClick={this.changeIndexScript}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
-                        Document={this.childLayoutPairs[nextIndex].layout}
-                        DataDoc={this.childLayoutPairs[nextIndex].data}
+                        Document={this.childLayoutPairs[prevIndex].layout}
+                        DataDoc={this.childLayoutPairs[prevIndex].data}
                         PanelWidth={this.sidePanelWidth}
                         PanelHeight={this.sidePanelHeight}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform}
@@ -79,21 +84,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
                         parentActive={this.props.active}
                     />
                 </div>
-                <div className="collectionCarouselView-image" key="image">
+                <div className="collectionCarouselView-next">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
-                        onClick={ScriptField.MakeScript(
-                            "child._showCaption = 'caption'",
-                            { child: Doc.name },
-                            { child: this.childLayoutPairs[index].layout }
-                        )}
+                        onClick={this.changeIndexScript}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
-                        Document={this.childLayoutPairs[index].layout}
-                        DataDoc={this.childLayoutPairs[index].data}
-                        PanelWidth={this.mainPanelWidth}
-                        PanelHeight={this.props.PanelHeight}
+                        Document={this.childLayoutPairs[nextIndex].layout}
+                        DataDoc={this.childLayoutPairs[nextIndex].data}
+                        PanelWidth={this.sidePanelWidth}
+                        PanelHeight={this.sidePanelHeight}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform}
                         bringToFront={returnFalse}
                         parentActive={this.props.active}
-- 
cgit v1.2.3-70-g09d2