feat: more flexible and responsive tables (#2546)

* Refactors summer-school data table and fixes width issue

* Refactors india-week-of-women-in-quantum data table

* Makes component in TableRowElement optional

* Refactors physics-of-computation data table

* Refactors seminar-series data tables

* Cleans code

components/ui/AppDataTable.vue

@@ -5,19 +5,7 @@
     :sortable="false"
   >
     <template slot="data">
-      <cv-data-table-row v-for="(row, rowIndex) in elements" :key="`${rowIndex}`">
+      <slot />
-        <cv-data-table-cell v-for="({ component, styles, data}, elementIndex) in row" :key="`${elementIndex}`">
-          <AppCta v-if="isAppCtaComponent(component)" kind="ghost" v-bind="data" :style="styles" />
-          <!-- eslint-disable vue/no-v-html -->
-          <component
-            :is="component"
-            v-else
-            :style="styles"
-            v-html="data"
-          />
-          <!-- eslint-enable -->
-        </cv-data-table-cell>
-      </cv-data-table-row>
     </template>
   </cv-data-table>
 </template>
@@ -28,25 +16,21 @@ import { Component, Prop } from 'vue-property-decorator'
 import { GeneralLink } from '~/constants/appLinks'
 
 export interface TableRowElement {
-  component: string,
+  component?: string,
   styles: string,
   data: string | GeneralLink,
 }
 
 @Component
 export default class AppDataTable extends Vue {
-  @Prop({ type: Array, default: () => [] }) elements!: TableRowElement[]
   @Prop({ type: Array, default: () => [] }) columns!: string[]
-
-  isAppCtaComponent (component: string) : boolean {
-    return component === 'AppCta'
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .app-data-table {
   overflow-x: scroll;
+  max-width: 100%;
 }
 
 </style>

components/ui/AppDataTableSection.vue

@@ -1,7 +1,9 @@
 <template>
   <section>
     <h2 v-text="sectionTitle" />
-    <AppDataTable :columns="dataTableColumns" :elements="dataTableElements" />
+    <AppDataTable :columns="dataTableColumns">
+      <slot name="data-table-elements" />
+    </AppDataTable>
     <slot />
   </section>
 </template>

constants/summerSchool2021Content.ts

@@ -328,22 +328,18 @@ const week2Schedule: dailyAgenda[] = [
 
 const scheduleToTableData = (slot: dailyAgenda) => ([
   {
-    component: 'span',
     styles: 'min-width: 10rem; display: inline-block; font-weight: bold;',
     data: slot.day
   },
   {
-    component: 'span',
     styles: 'min-width: 10rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
     data: slot.topic
   },
   {
-    component: 'span',
     styles: 'min-width: 10rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
     data: slot.speaker
   },
   {
-    component: 'span',
     styles: 'min-width: 10rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
     data: slot.format
   }

pages/events/india-week-of-women-in-quantum.vue

@@ -43,8 +43,18 @@
             <AppDataTable
               class="india-week-of-women-in-quantum-page__section"
               :columns="agendaColumnsDataTable"
-              :elements="day.tableData"
+            >
-            />
+              <cv-data-table-row v-for="(row, rowIndex) in day.tableData" :key="`${rowIndex}`">
+                <cv-data-table-cell v-for="({styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+                  <!-- eslint-disable vue/no-v-html -->
+                  <span
+                    :style="styles"
+                    v-html="data"
+                  />
+                  <!-- eslint-enable -->
+                </cv-data-table-cell>
+              </cv-data-table-row>
+            </AppDataTable>
           </cv-tab>
         </cv-tabs>
       </section>
@@ -199,22 +209,18 @@ export default class IndiaWeekOfWomenInQuantumPage extends QiskitPage {
 
   scheduleToTableData = (slot: dailyAgenda) => ([
     {
-      component: 'span',
       styles: 'min-width: 10rem; display: inline-block; font-weight: bold;',
       data: slot.time
     },
     {
-      component: 'span',
       styles: 'min-width: 15rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
       data: slot.event
     },
     {
-      component: 'span',
       styles: 'min-width: 15rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
       data: slot.speaker
     },
     {
-      component: 'span',
       styles: 'min-width: 15rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
       data: slot.affiliation
     }

pages/events/physics-of-computation.vue

@@ -32,23 +32,51 @@
         class="physics-of-computation-page__section"
         :section-title="morningAgendaSectionTitle"
         :data-table-columns="agendaColumnsDataTable"
-        :data-table-elements="morningSessionElementsDataTable"
       >
+        <template #data-table-elements>
+          <cv-data-table-row v-for="(row, rowIndex) in morningSessionElementsDataTable" :key="`${rowIndex}`">
+            <cv-data-table-cell v-for="({styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                :style="styles"
+                v-html="data"
+              />
+              <!-- eslint-enable -->
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
         <AppCta kind="ghost" v-bind="morningSessionAgendaCTA" is-wider />
       </AppDataTableSection>
       <AppDataTableSection
         class="physics-of-computation-page__section"
         :section-title="afternoonAgendaSectionTitle"
         :data-table-columns="agendaColumnsDataTable"
-        :data-table-elements="afternoonSessionElementsDataTable"
       >
+        <template #data-table-elements>
+          <cv-data-table-row v-for="(row, rowIndex) in afternoonSessionElementsDataTable" :key="`${rowIndex}`">
+            <cv-data-table-cell v-for="({styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+              <span :style="styles">{{ data }}</span>
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
         <AppCta kind="ghost" v-bind="afternoonSessionAgendaCTA" is-wider />
       </AppDataTableSection>
       <section class="physics-of-computation-page__section">
         <h3 class="copy__subtitle">
           * Parallel tracks (times listed are approximate and subject to change)
         </h3>
-        <AppDataTable :columns="agendaTracksColumnsDataTable" :elements="afternoonSessionByTrackElementsDataTable" />
+        <AppDataTable :columns="agendaTracksColumnsDataTable">
+          <cv-data-table-row v-for="(row, rowIndex) in afternoonSessionByTrackElementsDataTable" :key="`${rowIndex}`">
+            <cv-data-table-cell v-for="({styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                :style="styles"
+                v-html="data"
+              />
+              <!-- eslint-enable -->
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </AppDataTable>
       </section>
       <AppHelpfulResourcesSection
         class="physics-of-computation-page__section"
@@ -361,12 +389,10 @@ export default class PhysicsOfComputationPage extends QiskitPage {
   getDataTableElements (agenda: AgendaSlot[]) : TableRowElement[][] {
     return agenda.map(slot => ([
       {
-        component: 'span',
         styles: 'min-width: 5rem; display: inline-block; font-weight: bold;',
         data: slot.time
       },
       {
-        component: 'span',
         styles: 'min-width: 20rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
         data: slot.event
       }
@@ -376,17 +402,14 @@ export default class PhysicsOfComputationPage extends QiskitPage {
   getDataTableElementsByTrack (agenda: AgendaSlotByTrack[]) : TableRowElement[][] {
     return agenda.map(slot => ([
       {
-        component: 'span',
         styles: 'min-width: 5rem; display: inline-block; font-weight: bold;',
         data: slot.time
       },
       {
-        component: 'span',
         styles: 'width: 25rem; min-width: 20rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
         data: slot.track1
       },
       {
-        component: 'span',
         styles: 'width: 25rem; min-width: 20rem; display: inline-block; padding-top: 8px; padding-bottom: 8px',
         data: slot.track2
       }

pages/events/seminar-series.vue

@@ -31,14 +31,29 @@
         class="seminar-series-page__section"
         :section-title="upcomingEventsSectionTitle"
         :data-table-columns="seminarSeriesDataTableColumns"
-        :data-table-elements="upcomingEventsDataTable"
+      >
-      />
+        <template #data-table-elements>
+          <cv-data-table-row v-for="(row, rowIndex) in upcomingEventsDataTable" :key="`${rowIndex}`">
+            <cv-data-table-cell v-for="({component, styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+              <AppCta v-if="isAppCtaComponent(component)" kind="ghost" v-bind="data" :style="styles" />
+              <span v-else :style="styles">{{ data }}</span>
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
+      </AppDataTableSection>
       <AppDataTableSection
         class="seminar-series-page__section"
         :section-title="pastEventsSectionTitle"
         :data-table-columns="seminarSeriesDataTableColumns"
-        :data-table-elements="pastEventsDataTable"
       >
+        <template #data-table-elements>
+          <cv-data-table-row v-for="(row, rowIndex) in pastEventsDataTable" :key="`${rowIndex}`">
+            <cv-data-table-cell v-for="({component, styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+              <AppCta v-if="isAppCtaComponent(component)" kind="ghost" v-bind="data" :style="styles" />
+              <span v-else :style="styles">{{ data }}</span>
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
         <AppCta
           class="seminar-series-page__past-events-cta"
           kind="ghost"
@@ -204,25 +219,25 @@ export default class SeminarSeriesPage extends QiskitPage {
     }
   ]
 
+  isAppCtaComponent (component: string) : boolean {
+    return component === 'AppCta'
+  }
+
   dataPerRow (events: SeminarSeriesEvent[], eventsSection: string) : TableRowElement[][] {
     return events.map(event => ([
       {
-        component: 'span',
         styles: 'min-width: 9rem; display: inline-block;',
         data: event.speaker
       },
       {
-        component: 'span',
         styles: 'min-width: 9rem; display: inline-block;',
         data: event.institution
       },
       {
-        component: 'span',
         styles: 'min-width: 19rem; display: inline-block;',
         data: event.title
       },
       {
-        component: 'span',
         styles: 'min-width: 8rem; display: inline-block;',
         data: event.date
       },

pages/events/summer-school.vue

@@ -30,7 +30,8 @@
         </EventCard>
       </template>
     </AppPageHeaderWithCard>
-    <div class="bx--grid">
+
+    <div class="bx--grid summer-school-page__container">
       <AppMosaicSection
         class="summer-school-page__section"
         :title="mosaicData.title"
@@ -49,8 +50,13 @@
             <AppDataTable
               class="summer-school-page__section"
               :columns="agendaColumnsDataTable"
-              :elements="week.tableData"
+            >
-            />
+              <cv-data-table-row v-for="(row, rowIndex) in week.tableData" :key="`${rowIndex}`">
+                <cv-data-table-cell v-for="({styles, data}, elementIndex) in row" :key="`${elementIndex}`">
+                  <span :style="styles">{{ data }}</span>
+                </cv-data-table-cell>
+              </cv-data-table-row>
+            </AppDataTable>
           </cv-tab>
         </cv-tabs>
       </section>
@@ -152,6 +158,10 @@ export default class SummerSchoolPage extends QiskitPage {
   display: flex;
   flex-direction: column;
 
+  &__container {
+    max-width: 100%;
+  }
+
   &__section {
     margin-top: $spacing-10;
     margin-bottom: $spacing-07;