styling changes

2 files changed, 27 insertions, 26 deletions

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}