CatalogList.vue: layout improvements

This commit is contained in:
2020-01-15 12:58:41 -08:00
parent 5d7f14652c
commit eb57d25b5c

View File

@ -1,7 +1,7 @@
<template>
<v-container fluid>
<v-row>
<v-col cols="3">
<v-col cols="3" class="px-5 py-2">
<v-btn color="primary"
class="black--text"
href="/catalog/new"
@ -10,7 +10,7 @@
<v-col cols="9"/>
</v-row>
<v-row>
<v-row class="px-2">
<v-col cols="8">
<v-card>
@ -23,10 +23,9 @@
<!-- my catalogs -->
<v-tab-item key="mine">
<v-card text>
<v-card-title>
<v-spacer/>
<v-row>
<v-col cols="7"/>
<v-col cols="5" class="px-8">
<v-text-field
v-model="search"
append-icon="search"
@ -34,52 +33,54 @@
single-line
hide-details
/>
</v-card-title>
</v-col>
</v-row>
<v-data-table
:headers="myHeaders"
:items="myCatalogs"
:items-per-page="15"
:search="search"
:loading="loadingMyCatalogs"
class="scroll-area"
@click:row="selectCatalog"
>
<template v-slot:item.master="{ item }">
<v-tooltip v-if="item.master" top>
<template v-slot:activator="{ on }">
<v-icon small color="red" v-on="on">stars</v-icon>
</template>
<span>Season master</span>
</v-tooltip>
</template>
<v-row>
<v-col>
<v-data-table
:headers="myHeaders"
:items="myCatalogs"
:items-per-page="10"
:search="search"
:loading="loadingMyCatalogs"
class="scroll-area"
@click:row="selectCatalog"
>
<template v-slot:item.master="{ item }">
<v-tooltip v-if="item.master" top>
<template v-slot:activator="{ on }">
<v-icon small color="red" v-on="on">stars</v-icon>
</template>
<span>Season master</span>
</v-tooltip>
</template>
<template v-slot:item.updated="{ item }">
{{ item.updatedPretty }}
</template>
<template v-slot:item.updated="{ item }">
{{ item.updatedPretty }}
</template>
<template v-slot:item.build_progress="{ item }">
<PDFProgress :percent-done="item.build_progress" />
</template>
<template v-slot:item.build_progress="{ item }">
<PDFProgress :percent-done="item.build_progress" />
</template>
<template v-slot:no-results>
No catalogs match "{{ search }}"
</template>
<template v-slot:no-results>
No catalogs match "{{ search }}"
</template>
<template v-slot:no-data>
No Catalogs
</template>
</v-data-table>
</v-card>
<template v-slot:no-data>
No Catalogs
</template>
</v-data-table>
</v-col>
</v-row>
</v-tab-item>
<!-- public catalogs -->
<v-tab-item key="public">
<v-card text>
<v-card-title>
<v-spacer/>
<v-row>
<v-col cols="7"/>
<v-col cols="5" class="px-8">
<v-text-field
v-model="search"
append-icon="search"
@ -87,48 +88,50 @@
single-line
hide-details
/>
</v-card-title>
</v-col>
</v-row>
<v-data-table
:headers="pubHeaders"
:items="publicCatalogs"
:items-per-page="15"
:search="search"
:loading="loadingPublicCatalogs"
class="scroll-area"
@click:row="selectCatalog"
>
<template v-slot:item.master="{ item }">
<v-tooltip v-if="item.master" top>
<template v-slot:activator="{ on }">
<v-icon small color="red" v-on="on">stars</v-icon>
</template>
<span>Season master</span>
</v-tooltip>
</template>
<v-row>
<v-col>
<v-data-table
:headers="pubHeaders"
:items="publicCatalogs"
:items-per-page="10"
:search="search"
:loading="loadingPublicCatalogs"
class="scroll-area"
@click:row="selectCatalog"
>
<template v-slot:item.master="{ item }">
<v-tooltip v-if="item.master" top>
<template v-slot:activator="{ on }">
<v-icon small color="red" v-on="on">stars</v-icon>
</template>
<span>Season master</span>
</v-tooltip>
</template>
<template v-slot:item.updated="{ item }">
{{ item.updatedPretty }}
</template>
<template v-slot:item.updated="{ item }">
{{ item.updatedPretty }}
</template>
<template v-slot:item.build_progress="{ item }">
<PDFProgress :percent-done="item.build_progress" />
</template>
<template v-slot:item.build_progress="{ item }">
<PDFProgress :percent-done="item.build_progress" />
</template>
<template v-slot:no-results>
No catalogs match "{{ search }}"
</template>
<template v-slot:no-results>
No catalogs match "{{ search }}"
</template>
<template v-slot:no-data>
No Catalogs
</template>
</v-data-table>
</v-card>
<template v-slot:no-data>
No Catalogs
</template>
</v-data-table>
</v-col>
</v-row>
</v-tab-item>
</v-tabs>
</v-card>
</v-col>
<v-col cols="4">
@ -332,10 +335,12 @@ export default {
</script>
<style scoped>
/*
.scroll-area {
height: 300px;
overflow-y: auto;
}
*/
</style>
<style>