CatalogList.vue: layout improvements
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user