Merge pull request #220 from spencerwahl/chart-arrows

Fix arrow and pagination placement on slideshows
ramp4-pcar4 · May 18, 2023 · 112ec1e · 112ec1e
2 parents 35018a7 + 746b87d
commit 112ec1e
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 39 deletions.
diff --git a/src/components/panels/chart-panel.vue b/src/components/panels/chart-panel.vue
@@ -1,26 +1,28 @@
 <template>
-    <div class="carousel self-start px-10 my-8 bg-gray-200_" :style="{ width: `${width}px` }">
-        <hooper
-            ref="carousel"
-            v-if="width !== -1 && config.charts.length > 1"
-            class="h-full"
-            :infiniteScroll="config.loop"
-        >
-            <slide
-                v-for="(chartConfig, index) in config.charts"
-                :key="`chart-${index}`"
-                :index="index"
-                class="self-center"
+    <div class="flex">
+        <div class="carousel self-center px-10 my-8 mx-auto bg-gray-200_" :style="{ width: `${width}px` }">
+            <hooper
+                ref="carousel"
+                v-if="width !== -1 && config.charts.length > 1"
+                class="h-full"
+                :infiniteScroll="config.loop"
             >
-                <dqv-chart :config="chartConfig" :configFileStructure="configFileStructure" />
-            </slide>
+                <slide
+                    v-for="(chartConfig, index) in config.charts"
+                    :key="`chart-${index}`"
+                    :index="index"
+                    class="self-center"
+                >
+                    <dqv-chart :config="chartConfig" :configFileStructure="configFileStructure" />
+                </slide>
 
-            <hooper-navigation slot="hooper-addons"></hooper-navigation>
-            <hooper-pagination slot="hooper-addons"></hooper-pagination>
-        </hooper>
+                <hooper-navigation slot="hooper-addons"></hooper-navigation>
+                <hooper-pagination slot="hooper-addons"></hooper-pagination>
+            </hooper>
 
-        <div v-else-if="width !== -1">
-            <dqv-chart :config="config.charts[0]" :configFileStructure="configFileStructure" />
+            <div v-else-if="width !== -1">
+                <dqv-chart :config="config.charts[0]" :configFileStructure="configFileStructure" />
+            </div>
         </div>
     </div>
 </template>
@@ -64,6 +66,18 @@ export default class ChartPanelV extends Vue {
         overflow: visible;
     }
 
+    ::v-deep .hooper-next {
+        right: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-prev {
+        left: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-pagination {
+        transform: translate(50%, 100%);
+    }
+
     ::v-deep .hooper-indicator {
         border: 1px solid #878787;
 

diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
@@ -6,26 +6,36 @@
             :key="config.images[0].src"
         ></image-panel>
     </div>
-    <div ref="images" v-else class="carousel self-start px-10 my-8 bg-gray-200_ h-28_" :style="{ width: `${width}px` }">
-        <full-screen :expandable="config.fullscreen" :type="config.type">
-            <hooper ref="carousel" v-if="width !== -1" class="h-full bg-white" :infiniteScroll="config.loop">
-                <slide v-for="(image, index) in config.images" :key="index" :index="index" class="self-center">
-                    <img
-                        :data-src="image.src"
-                        :src="slideIdx > 2 ? '' : image.src"
-                        :alt="image.altText || ''"
-                        :style="{ width: `${image.width}px`, height: `${image.height}px` }"
-                        class="m-auto story-graphic carousel-image"
-                    />
-                    <div v-if="image.caption" class="text-center my-8 text-sm" v-html="md.render(image.caption)"></div>
-                </slide>
-
-                <hooper-navigation slot="hooper-addons"></hooper-navigation>
-                <hooper-pagination slot="hooper-addons"></hooper-pagination>
-            </hooper>
-        </full-screen>
-
-        <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
+    <div class="flex" v-else>
+        <div
+            ref="images"
+            class="carousel self-center px-10 my-8 mx-auto bg-gray-200_ h-28_"
+            :style="{ width: `${width}px` }"
+        >
+            <full-screen :expandable="config.fullscreen" :type="config.type">
+                <hooper ref="carousel" v-if="width !== -1" class="h-full bg-white" :infiniteScroll="config.loop">
+                    <slide v-for="(image, index) in config.images" :key="index" :index="index" class="self-center">
+                        <img
+                            :data-src="image.src"
+                            :src="slideIdx > 2 ? '' : image.src"
+                            :alt="image.altText || ''"
+                            :style="{ width: `${image.width}px`, height: `${image.height}px` }"
+                            class="m-auto story-graphic carousel-image"
+                        />
+                        <div
+                            v-if="image.caption"
+                            class="text-center my-8 text-sm"
+                            v-html="md.render(image.caption)"
+                        ></div>
+                    </slide>
+
+                    <hooper-navigation slot="hooper-addons"></hooper-navigation>
+                    <hooper-pagination slot="hooper-addons"></hooper-pagination>
+                </hooper>
+            </full-screen>
+
+            <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
+        </div>
     </div>
 </template>
 
@@ -112,6 +122,18 @@ export default class SlideshowPanelV extends Vue {
         background: radial-gradient(white, transparent 75%);
     }
 
+    ::v-deep .hooper-next {
+        right: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-prev {
+        left: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-pagination {
+        transform: translate(50%, 200%);
+    }
+
     ::v-deep .hooper-indicator {
         border: 1px solid #878787;