panel styling changes for TCEI UX review

src/components/panels/chart-panel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="chart self-center my-8 mx-auto bg-gray-200_">
+    <div class="chart self-center mb-8 mx-auto bg-gray-200_">
         <chart :config="config" :configFileStructure="configFileStructure" />
     </div>
 </template>

src/components/panels/dynamic-panel.vue

@@ -6,7 +6,7 @@
         :class="!!config.reversed ? 'sm:flex-row-reverse' : 'sm:flex-row'"
     >
         <scrollama
-            class="dynamic-content-slide order-2 sm:order-1 prose max-w-none my-5 mx-1 py-5"
+            class="dynamic-content-slide order-2 sm:order-1 prose max-w-none mb-5 mx-1 py-5"
             :class="{ 'has-background': background, 'flex-1': !!config.contentWidth === false }"
             :style="{ color: config.textColour ?? '#000', width: `${config.contentWidth}px` }"
         >
@@ -230,8 +230,8 @@ const clickBack = (): void => {
     margin: 0px;
 }
 .has-background {
-    background-color: rgba(255, 255, 255, 0.6);
-    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
 }
 
 @media screen and (max-width: 640px) {

src/components/panels/helpers/fullscreen.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="el">
-        <div class="relative bg-white fullscreen-wrapper">
+        <div class="relative bg-white fullscreen-wrapper rounded-lg">
             <button
                 v-if="expandable !== undefined ? expandable : true"
                 class="fullscreenButton expand-button absolute items-center justify-center p-3 z-10"

src/components/panels/image-panel.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="graphic self-start justify-center flex flex-col h-full align-middle py-5 w-full">
+    <div class="graphic self-start justify-center flex flex-col h-full align-middle pb-5 w-full">
         <fullscreen :expandable="config.fullscreen" :type="config.type">
             <img
                 ref="img"
                 :src="slideIdx > 2 ? '' : state.src"
-                :class="config.class"
+                :class="[config.class, config.caption ? 'rounded-t-lg' : 'rounded-lg']"
                 :alt="config.altText || ''"
                 :style="{ width: `${config.width}px`, height: `${config.height}px` }"
-                class="graphic-image px-10 mx-auto flex object-contain sm:max-w-screen sm:max-h-screen"
+                class="graphic-image mx-auto flex object-contain sm:max-w-screen sm:max-h-screen"
             />
         </fullscreen>
 
@@ -87,7 +87,7 @@ onMounted((): void => {
 <style lang="scss" scoped>
 .has-background {
     background-color: rgba(255, 255, 255, 1);
-    border-radius: 0px 0px 20px 20px;
+    border-radius: 0px 0px 8px 8px;
     color: black;
 }
 @media screen and (max-width: 640px) {

src/components/panels/slideshow-panel.vue

@@ -3,7 +3,7 @@
         <div class="flex">
             <div
                 ref="slideshow"
-                class="carousel-container self-center px-10 my-8 mx-auto bg-gray-200_"
+                class="carousel-container self-center px-10 mb-8 mx-auto bg-gray-200_"
                 :style="{ width: `${width}px` }"
             >
                 <carousel
@@ -100,7 +100,7 @@ window.addEventListener('resize', () => {
 <style lang="scss" scoped>
 .has-background {
     background-color: rgba(255, 255, 255, 1);
-    border-radius: 0px 0px 20px 20px;
+    border-radius: 0px 0px 8px 8px;
     color: black;
     margin-top: 0px !important;
     padding-top: 5px;
@@ -127,11 +127,13 @@ window.addEventListener('resize', () => {
         left: calc(-4px - 1.5em);
     }
 
-    :deep(.carousel__prev), :deep(.carousel__next) {
-        height:100%;
+    :deep(.carousel__prev),
+    :deep(.carousel__next) {
+        height: 100%;
 
-        &:hover, &:focus {
-            background-color: #EEEEEE;
+        &:hover,
+        &:focus {
+            background-color: #eeeeee;
         }
     }
 

src/components/panels/text-panel.vue

@@ -1,6 +1,6 @@
 <template>
     <scrollama
-        class="prose max-w-none my-5 mx-1 py-5"
+        class="text-panel prose max-w-none mb-5 mx-1 py-5"
         :class="{ 'has-background': background }"
         :style="{ color: config.textColour ?? '#000' }"
     >
@@ -47,15 +47,20 @@ onMounted((): void => {
 
 <style scoped lang="scss">
 .has-background {
-    background-color: rgba(255, 255, 255, 0.6);
-    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
+    opacity: 95%;
 }
 
 @media screen and (max-width: 640px) {
     .chapter-title {
         max-width: 100vw;
     }
 
+    .text-panel {
+        margin-top: 1rem;
+    }
+
     .md-content {
         max-width: 100vw;
 

src/components/panels/video-panel.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="video-container self-start justify-center flex flex-col h-full align-middle py-5 w-full"
+        class="video-container self-start justify-center flex flex-col h-full align-middle pb-5 w-full"
         :style="{
             width: config.width ? `${config.width}` : '100%'
         }"

src/components/story/horizontal-menu.vue

@@ -167,7 +167,7 @@ const updateActiveIdx = () => {
 .navbar ul li {
     float: left;
     width: 12%;
-    border-radius: 20px;
+    border-radius: 8px;
     a {
         text-overflow: ellipsis;
     }

src/components/story/slide.vue

@@ -2,8 +2,8 @@
     <div
         ref="slide"
         :id="key"
-        class="story-slide pt-24 h-full w-full flex sm:flex-row flex-col"
-        :class="config.backgroundImage === undefined ? 'bg-gray-50' : 'py-24'"
+        class="story-slide pb-24 h-full w-full flex sm:flex-row flex-col"
+        :class="{ 'bg-gray-50': config.backgroundImage === undefined, 'pt-24': slideIdx === 0 }"
     >
         <panel
             v-for="(panel, idx) in config.panel"
@@ -129,12 +129,12 @@ const determinePanelOrder = (idx: number): string => {
 
     // Both panels are not text panels, so display them in order, and sticky the right panel.
     if (panel.type != PanelType.Text && otherPanel.type != PanelType.Text) {
-        return idx === 0 ? 'order-2 sm:order-1 sticky z-40' : 'order-1 sm:order-2 sticky z-41';
+        return idx === 0 ? 'order-2 sm:order-1 sm:mr-4 sticky z-40' : 'order-1 sm:order-2 sticky z-41 mr-4';
     } else {
         // One panel is a text panel and one panel is not. Sticky the non-text panel, and display it on top of the
         // text panel in mobile mode.
         if (panel.type === PanelType.Text) {
-            return `order-2 sm:order-${idx + 1}`;
+            return `order-2 sm:mr-4 sm:order-${idx + 1}`;
         } else {
             return `sticky order-1 sm:order-${idx + 1} z-40`;
         }

src/components/story/story-content.vue

@@ -42,6 +42,7 @@
                     <slide
                         :config="slide"
                         :configFileStructure="configFileStructure"
+                        :class="addPanelPadding(idx)"
                         :slideIdx="idx"
                         :lang="lang"
                         :background="hasBackground"
@@ -135,6 +136,15 @@ const stepEnter = ({ element }: { element: HTMLElement }): void => {
         horizontalNavHeight.value = horizontalNav.clientHeight * 0.75;
     }
 };
+
+// add top padding for a panel with bg image, on the condition that the previous panel did not have a bg image
+const addPanelPadding = (idx: number): string => {
+    if (idx > 0 && !props.config.slides[idx - 1].backgroundImage && props.config.slides[idx].backgroundImage) {
+        return 'pt-8';
+    } else {
+        return '';
+    }
+};
 </script>
 
 <style lang="scss" scoped>

src/components/story/story.vue

@@ -195,7 +195,7 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     .h5,
     .h6 {
         font-family: $font-list;
-        line-height: 1.5;
+        line-height: 1.65em;
         border-bottom: 0px;
     }
 
@@ -207,6 +207,10 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         padding-bottom: 1em;
     }
 
+    .prose {
+        line-height: 1.65em;
+    }
+
     .prose a {
         font-weight: bold;
     }