Improve mobile viewing experience

cubing · Apr 2, 2021 · 8d1ef1e · 8d1ef1e
1 parent eb954c4
commit 8d1ef1e
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 7 deletions.
diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -207,6 +207,68 @@
       </template>
       <template v-slot:item="props">
         <tr
+          v-if="props.isMobile"
+          :key="props.item.id"
+          class="v-data-table__mobile-table-row"
+          @click="handleRowClick(props.item)"
+        >
+          <td
+            v-for="(headerItem, i) in headers"
+            :key="i"
+            class="v-data-table__mobile-row"
+          >
+            <div class="v-data-table__mobile-row__header">
+              {{ headerItem.text }}
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              <div v-if="headerItem.value === null">
+                <nuxt-link
+                  v-if="recordInfo.enterOptions && recordInfo.viewRecordRoute"
+                  :to="recordInfo.viewRecordRoute + '?id=' + props.item.id"
+                >
+                  <v-icon small icon>mdi-location-enter</v-icon>
+                </nuxt-link>
+                <v-icon
+                  v-if="recordInfo.shareOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('share', props.item)"
+                  >mdi-share-variant</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.viewOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('view', props.item)"
+                  >mdi-eye</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.editOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('edit', props.item)"
+                  >mdi-pencil</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.deleteOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('delete', props.item)"
+                  >mdi-delete</v-icon
+                >
+              </div>
+              <div v-else>
+                <component
+                  :is="headerItem.fieldInfo.component"
+                  v-if="headerItem.fieldInfo.component"
+                  :item="props.item"
+                  :field-path="headerItem.path"
+                ></component>
+                <span v-else>
+                  {{ getTableRowData(headerItem, props.item) }}
+                </span>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          v-else
           :key="props.item.id"
           :class="{
             'expanded-row-bg': props.isExpanded,

diff --git a/frontend/components/interface/viewPbCardInterface.vue b/frontend/components/interface/viewPbCardInterface.vue
@@ -15,6 +15,7 @@
       <v-btn icon @click="reset()">
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
+      <slot name="header-action"></slot>
     </v-toolbar>
     <v-data-table
       :headers="headers"
@@ -27,7 +28,49 @@
       hide-default-footer
     >
       <template v-slot:item="props">
-        <tr :key="props.item.id">
+        <tr
+          v-if="props.isMobile"
+          :key="props.item.id"
+          class="v-data-table__mobile-table-row"
+        >
+          <td
+            v-for="(headerItem, i) in headers"
+            :key="i"
+            class="v-data-table__mobile-row"
+          >
+            <div class="v-data-table__mobile-row__header">
+              {{ headerItem.text }}
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              <EventColumn
+                v-if="headerItem.value === 'event.name'"
+                :item="props.item"
+                field-path="event"
+              ></EventColumn>
+              <span
+                v-else
+                class="d-inline-flex"
+                @click="openEditDialog('view', props.item[headerItem.value])"
+              >
+                <ResultColumn
+                  v-if="props.item[headerItem.value]"
+                  :item="props.item[headerItem.value]"
+                ></ResultColumn>
+                <v-icon
+                  v-if="editable"
+                  small
+                  right
+                  @click.stop="
+                    openAddRecordDialog(props.item.event.id, headerItem.value)
+                  "
+                  >mdi-pencil</v-icon
+                >
+              </span>
+            </div>
+          </td>
+        </tr>
+
+        <tr v-else :key="props.item.id">
           <td
             v-for="(headerItem, i) in headers"
             :key="i"

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -200,7 +200,7 @@ export default {
   data() {
     return {
       clipped: true,
-      drawer: true,
+      drawer: false,
       fixed: true,
       items: [
         {
@@ -210,16 +210,16 @@ export default {
         },
       ],
       userItems: [
-        {
-          icon: 'mdi-timer',
-          title: 'My PBs',
-          to: '/my-pbs',
-        },
         {
           icon: 'mdi-card-text',
           title: 'My PB Card',
           to: '/my-pb-card',
         },
+        {
+          icon: 'mdi-timer',
+          title: 'My PBs',
+          to: '/my-pbs',
+        },
         {
           icon: 'mdi-timetable',
           title: 'My PB Feed',