diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.scss | 10 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 43 |
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} |