This commit is contained in:
@@ -77,6 +77,58 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- Narrow width template -->
|
||||
<tr
|
||||
class="v-data-table__mobile-table-row"
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
>
|
||||
<!-- HEADER TO THE LEFT -->
|
||||
|
||||
<!-- FIELD VALUE TO THE RIGHT -->
|
||||
<template v-if="showSelect">
|
||||
<td class="v-data-table__mobile-row">
|
||||
<div class="v-data-table__mobile-row__header"></div>
|
||||
<div class="v-data-table__mobile-row__cell">
|
||||
<v-checkbox
|
||||
v-model="selected"
|
||||
:value="item"
|
||||
primary
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<td
|
||||
class="v-data-table__mobile-row"
|
||||
v-for="c in item.columns"
|
||||
:key="c.key"
|
||||
>
|
||||
<div class="v-data-table__mobile-row__header">HEADER</div>
|
||||
<div class="v-data-table__mobile-row__cell">
|
||||
<!-- Handle all plain text types right up to and including enums -->
|
||||
<!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
|
||||
<template v-if="c.t < 11">
|
||||
<template v-if="c.i">
|
||||
<!-- openable object with an ID -->
|
||||
<v-btn depressed small @click="btnClick(c.key, c.i)">{{
|
||||
c.v
|
||||
}}</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ c.v }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="c.t == 11">
|
||||
<a :href="'mailto:' + c.v">{{ c.v }}</a>
|
||||
</template>
|
||||
<template v-if="c.t == 12">
|
||||
<!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
|
||||
<a :href="c.v" target="_blank">{{ c.v }}</a>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</template>
|
||||
@@ -110,7 +162,7 @@ export default {
|
||||
records: [],
|
||||
rowsPerPageItems: [5, 10, 25, 50, 100],
|
||||
selected: [],
|
||||
narrowFormat: false
|
||||
narrowFormat: true
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -742,16 +794,33 @@ Records: [ { "c1": "Awesome Steel Table 25", "c2": 1, "c3": 676.64, "c4": 0, "c5
|
||||
</div><div class="v-menu"><div class="v-menu__content theme--light " style="max-height: 304px; min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div></div></div></div></div></div></th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="v-data-table__mobile-table-row">
|
||||
<td class="v-data-table__mobile-row"
|
||||
><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
|
||||
<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div></td>
|
||||
|
||||
<td class="v-data-table__mobile-row">
|
||||
<div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
|
||||
<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">159</div></td>
|
||||
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">6</div></td>
|
||||
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">24</div></td>
|
||||
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4</div></td>
|
||||
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr>
|
||||
<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td></tr>
|
||||
</tbody></table></div>
|
||||
<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Mobile Checkbox row
|
||||
<td class="v-data-table__mobile-row">
|
||||
<div class="v-data-table__mobile-row__header"></div>
|
||||
<div class="v-data-table__mobile-row__cell">
|
||||
<div class="v-data-table__checkbox v-simple-checkbox">
|
||||
<div class="v-input--selection-controls__ripple"></div>
|
||||
<i aria-hidden="true" class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
*/
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user