Update Popup to use close button outside of main view

src/components/Popup.vue

@@ -1,31 +1,32 @@
 <template>
   <TransitionRoot as="template" :show="open">
+
     <Dialog :class="{'pointer-events-auto': minimized}" as="div" class="relative z-40 " @close="!minimized ? closed(): null">
       <TransitionChild v-if="!minimized" as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
         <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
       </TransitionChild>
       <div :class="{'pointer-events-none': minimized}" class="fixed z-10 inset-0 overflow-y-auto">
         <div :class="{'items-end sm:items-center': !minimized, 'items-end': minimized}" class="flex justify-center min-h-full p-4 text-center sm:p-0">
           <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-            <DialogPanel :class="{'lg:max-w-[55rem]': large}" class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-xl md:max-w-2xl sm:w-full w-full">
-              <template v-if="!noControls">
+            <DialogPanel :class="{'lg:max-w-[55rem]': large}" class="relative rounded-lg transform transition-all sm:my-8 sm:max-w-xl md:max-w-2xl sm:w-full w-full">
+              <div class="flex justify-end sm:flex-col mb-5 sm:absolute -right-10 gap-2" v-if="!noControls">
                 <button v-if="minimizeable"
                         type="button"
                         :class="{'rotate-180': minimized, 'pointer-events-auto': minimized}"
-                        class="fixed outline-none top-5 right-16"
+                        class="outline-none order-1 sm:order-2"
                         ref="cancelButtonRef"
                         @click="toggleMini()">
-                  <ChevronDownIcon class="h-6 w-6 text-gray-600 transition-all" aria-hidden="true" />
+                  <ChevronDownIcon class="h-6 w-6 text-white transition-all" aria-hidden="true" />
                 </button>
                 <button :class="{'pointer-events-auto': minimized}"
                         type="button"
-                        class="fixed outline-none top-5 right-5 z-10"
+                        class="outline-none order-2 sm:order-1"
                         ref="cancelButtonRef"
                         @click="closed()">
-                  <XMarkIcon class="h-6 w-6 text-gray-600 hover:rotate-90 transition-all" aria-hidden="true" />
+                  <XMarkIcon class="h-6 w-6 text-white hover:rotate-90 transition-all" aria-hidden="true" />
                 </button>
-              </template>
-              <div :class="{'px-4 pt-5 pb-4 sm:p-6 sm:pb-4': !noPadding, 'pointer-events-auto': minimized}">
+              </div>
+              <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl" :class="{'px-4 pt-5 pb-4 sm:p-6 sm:pb-4': !noPadding, 'pointer-events-auto': minimized}">
                 <div class="text-left">
                   <div :class="themeStore().getClassList()">
                     <slot></slot>

src/components/Resources/Blocks/Block.vue

@@ -53,6 +53,7 @@ import ListItemChecklist from '@/components/Resources/Blocks/ListItemChecklist.v
 import Excerpt from '@/components/Resources/Blocks/Excerpt.vue'
 import ExcerptItem from '@/components/Resources/Blocks/ExcerptItem.vue'
 import Story from '@/components/Resources/Blocks/Story.vue'
+import Table from '@/components/Resources/Blocks/Table.vue'
 import { BlockStyle } from "../Style/BlockStyle"
 
 export default {
@@ -117,6 +118,7 @@ export default {
         'excerpt': { component: shallowRef(Excerpt), on: {}, data: { parentBlockId: this.block.id }},
         'excerpt-item': { component: shallowRef(ExcerptItem), on: {}},
         'story': { component: shallowRef(Story), on: {}},
+        'table': { component: shallowRef(Table), on: {}},
       }
     }
   },

src/components/Resources/Blocks/Table.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="block-table">
+      <thead>
+      <tr>
+        <th v-for="column in block.header">
+          <template
+              v-for="item in column.items"
+              :key="item.id">
+            <Block
+                :block="item"
+                :parentBlockType="block.type"
+            ></Block>
+          </template>
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="row in block.rows">
+        <td v-for="column in row">
+          <template
+              v-for="item in column.items"
+              :key="item.id">
+            <Block
+                :block="item"
+                :parentBlockType="block.type"
+            ></Block>
+          </template>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['block', 'parent'],
+}
+</script>
+
+<style lang="scss">
+.block-table {
+  @apply table-fixed w-full min-w-[700px]
+  border border-gray-200
+  theme-dark:border-gray-800
+  theme-sepia:border-amber-400;
+
+  th {
+    @apply
+
+    bg-gray-200
+    theme-dark:bg-black
+    theme-sepia:bg-amber-100;
+  }
+  th, td {
+    @apply break-all align-top p-0
+    border border-gray-200
+    theme-dark:border-gray-800
+    theme-sepia:border-amber-300;
+    > div {
+      @apply py-2 #{!important};
+
+    }
+  }
+}
+</style>

src/views/Document.vue

@@ -111,10 +111,8 @@
       <Popup :open="hiddenSegmentOpen"
              @closed="hiddenSegmentOpen = false"
              :noPadding="true"
-             :large="true"
-             :noControls="true"
-      >
-        <Segment :segmentIndex="hiddenSegmentIndex"></Segment>
+             :large="true">
+        <Segment :segmentIndex="hiddenSegmentIndex" :hiddenSegment="true"></Segment>
       </Popup>
 
       <Popup :open="commentInputOpen" @closed="commentInputOpen = false">

src/views/Segment.vue

@@ -2,19 +2,19 @@
   <div>
     <div v-if="sSegment" class="relative rounded">
       <SegmentBlocks v-if="sSegment.type === 'block'" :segment="sSegment">
-        <template #auxTheme>
+        <template v-if="!hiddenSegment" #auxTheme>
           <slot name="auxTheme"></slot>
         </template>
-        <template #auxAudio>
+        <template v-if="!hiddenSegment" #auxAudio>
           <slot name="auxAudio"></slot>
         </template>
-        <template #auxVideo>
+        <template v-if="!hiddenSegment" #auxVideo>
           <slot name="auxVideo"></slot>
         </template>
-        <template #auxPdf>
+        <template v-if="!hiddenSegment" #auxPdf>
           <slot name="auxPdf"></slot>
         </template>
-        <template v-if="$slots.pdf && $slots.pdf().length" #pdf>
+        <template v-if="!hiddenSegment && ($slots.pdf && $slots.pdf().length)" #pdf>
           <slot name="pdf"></slot>
         </template>
       </SegmentBlocks>
@@ -56,7 +56,7 @@ import EGW from '@/components/Resources/EGW.vue'
 
 export default {
   components: { SegmentBlocks, SegmentPDF, SegmentStory, SegmentVideo, Popup, Bible, EGW, StoryAudio },
-  props: ['segment', 'segmentIndex'],
+  props: ['segment', 'segmentIndex', 'hiddenSegment'],
   provide () {
     return {
       getSegment: () => this.sSegment
@@ -83,6 +83,7 @@ export default {
   },
   async mounted () {
     this.emitter.on('bible-click', async (v) => {
+
       if (!v.blockId || !v.verse) return
       const block = this.findBlockById(this.sSegment.blocks, v.blockId)
       const verse = v.verse.replace(/sspmbible:\/\//i, '')
@@ -128,6 +129,18 @@ export default {
             return found
           }
         }
+
+        if (block.rows && block.rows.length) {
+          for (let row of block.rows) {
+            for (let column of row) {
+              const found = this.findBlockById(column.items, blockId)
+              if (found) {
+                return found
+              }
+            }
+          }
+
+        }
       }
       return null;
     },

src/views/SegmentBlocks.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <div :class="[{'absolute right-5 top-5': cover}, {'pt-5 pr-5': !cover}]" class="flex justify-end">
-      <div class="auxiliary auxiliary-light"
+      <div v-if="hasAuxiliary"
+           class="auxiliary auxiliary-light"
            :class="[{'auxiliary-dark': cover || themeStore().color === THEME_COLOR.DARK}]" >
         <slot name="auxTheme"></slot>
         <slot name="auxAudio"></slot>
@@ -62,12 +63,15 @@ export default {
     cover () {
       return this.segment.cover || this.document.cover
     },
+
     document () {
       return this.getDocument()
     },
+
     defaultStyles() {
       return this.getDefaultStyles()
     },
+
     style() {
       return this.getStyle()
     },
@@ -95,6 +99,13 @@ export default {
     segmentSubtitleTextStyle () {
       return SegmentSubtitleTextStyle.getTextStyle(this.segment.style ?? this.style, 'segment.subtitle')
     },
+
+    hasAuxiliary () {
+      return (this.$slots.auxPdf && this.$slots.auxPdf().length > 0)
+          || (this.$slots.auxTheme && this.$slots.auxTheme().length > 0)
+          || (this.$slots.auxAudio && this.$slots.auxAudio().length > 0)
+          || (this.$slots.auxVideo && this.$slots.auxVideo().length > 0)
+    },
   },
   data () {
     return {