alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CatalogList.vue: layout improvements

Browse Source
This commit is contained in:
Seth Ladygo
2020-01-15 12:58:41 -08:00
parent 5d7f14652c
commit eb57d25b5c
1 changed files with 82 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
cateditor/src/components/CatalogList.vue
View File

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