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
2022-04-29 18:05:56 +02:00 · 2022-04-29 18:05:56 +02:00 · d995e515e3
parent b1736689cd
commit d995e515e3
7 changed files with 84 additions and 48 deletions
--- a/components/ui/AppDataTable.vue
+++ b/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}`">
-        <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>
+      <slot />
    </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>
--- a/components/ui/AppDataTableSection.vue
+++ b/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>
--- a/constants/summerSchool2021Content.ts
+++ b/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
  }
--- a/pages/events/india-week-of-women-in-quantum.vue
+++ b/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
    }
--- a/pages/events/physics-of-computation.vue
+++ b/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
      }
--- a/pages/events/seminar-series.vue
+++ b/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
      },
--- a/pages/events/summer-school.vue
+++ b/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;