removed fwd/back buttons for carousel in favor of just clicking on next/previous regions.

2 files changed, 11 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 7622043e3..8319f19ca 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -74,7 +74,10 @@
 
 .carousel3DView-fwd,
 .carousel3DView-back {
-    top: 50%;
+    top: 0;
+    background: transparent;
+    width: calc((1 - #{$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%);
+    height: 100%;
 }
 
 .carousel3DView-fwd-scroll,
@@ -87,13 +90,13 @@
 .carousel3DView-fwd,
 .carousel3DView-fwd-scroll,
 .carousel3DView-fwd-scroll-hidden {
-    right: 20;
+    right: 0;
 }
 
 .carousel3DView-back,
 .carousel3DView-back-scroll,
 .carousel3DView-back-scroll-hidden {
-    left: 20;
+    left: 0;
 }
 
 .carousel3DView-fwd-scroll-hidden,
@@ -108,8 +111,6 @@
     opacity: 1;
 }
 
-.carousel3DView-back:hover,
-.carousel3DView-fwd:hover,
 .carousel3DView-back-scroll:hover,
 .carousel3DView-fwd-scroll:hover {
     background: lightgray;
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index cd59a91a1..4bc72772a 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -96,8 +96,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
     };
 
-    onArrowClick = (e: React.MouseEvent, direction: number) => {
-        e.stopPropagation();
+    onArrowClick = (direction: number) => {
         this.changeSlide(direction);
         !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction === 1 ? 'fwd' : 'back'); // while autoscroll is on, keep the other autoscroll button hidden
         !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on
@@ -128,16 +127,11 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     };
 
     @computed get buttons() {
-        if (!this.props.isContentActive()) return null;
         return (
             <div className="arrow-buttons">
-                <div key="back" className="carousel3DView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, -1)}>
-                    <FontAwesomeIcon icon="angle-left" size={'2x'} />
-                </div>
-                <div key="fwd" className="carousel3DView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, 1)}>
-                    <FontAwesomeIcon icon="angle-right" size={'2x'} />
-                </div>
-                {this.autoScrollButton}
+                <div title="click to go back" key="back" className="carousel3DView-back" onClick={e => this.onArrowClick(-1)} />
+                <div title="click to advance" key="fwd" className="carousel3DView-fwd" onClick={e => this.onArrowClick(1)} />
+                {/* {this.autoScrollButton} */}
             </div>
         );
     }
@@ -176,7 +170,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
                     {this.content}
                 </div>
-                {this.props.Document._chromeHidden ? null : this.buttons}
+                {this.buttons}
                 <div className="dot-bar">{this.dots}</div>
             </div>
         );