diff --git a/client/components/admin.vue b/client/components/admin.vue
index 5e551923..bae6a6c0 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -20,6 +20,9 @@
v-list-tile(to='/pages')
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title {{ $t('admin:pages.title') }}
+ v-list-tile-action
+ v-chip(small, disabled, color='grey lighten-4')
+ .caption.grey--text 123
v-list-tile(to='/theme')
v-list-tile-avatar: v-icon palette
v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,9 +35,8 @@
v-list-tile-avatar: v-icon perm_identity
v-list-tile-title {{ $t('admin:users.title') }}
v-list-tile-action
- .justify-end
- v-chip(small, disabled, color='grey lighten-4')
- .caption.grey--text 1
+ v-chip(small, disabled, color='grey lighten-4')
+ .caption.grey--text 1
v-divider.my-2
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
v-list-tile(to='/auth')
@@ -158,11 +160,14 @@ export default {
}
}
-.admin-header-icon {
- position: absolute;
- top: 1rem;
- right: 1rem;
+.admin-header {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ &-title {
+ margin-left: 1rem;
+ }
}
diff --git a/client/components/admin/admin-api.vue b/client/components/admin/admin-api.vue
index 96f010c5..2c16288f 100644
--- a/client/components/admin/admin-api.vue
+++ b/client/components/admin/admin-api.vue
@@ -1,65 +1,66 @@
- v-card(flat)
- v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
- .admin-header-icon: v-icon(size='80', color='grey lighten-2') call_split
- .headline.blue--text.text--darken-2 API
- .subheading.grey--text Manage keys to access the API
- v-card
- v-card-title
- v-btn(color='green', dark)
- v-icon(left) power_settings_new
- | Enable API
- v-btn(color='primary', dark)
- v-icon(left) add
- | New API Key
- v-btn(icon)
- v-icon.grey--text refresh
- v-spacer
- v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
- v-data-table(
- v-model='selected'
- :items='items',
- :headers='headers',
- :search='search',
- :pagination.sync='pagination',
- :rows-per-page-items='[15]'
- select-all,
- hide-actions,
- disable-initial-sort
- )
- template(slot='headers', slot-scope='props')
- tr
- th(width='50')
- th.text-xs-right(
- width='80'
- :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
- @click='changeSort(`id`)'
- )
- v-icon(small) arrow_upward
- | ID
- th.text-xs-left(
- v-for='header in props.headers'
- :key='header.text'
- :width='header.width'
- :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
- @click='changeSort(header.value)'
- )
- | {{ header.text }}
- v-icon(small) arrow_upward
- template(slot='items', slot-scope='props')
- tr(:active='props.selected')
- td
- v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
- td.text-xs-right {{ props.item.id }}
- td {{ props.item.name }}
- td {{ props.item.key }}
- td {{ props.item.createdOn }}
- td {{ props.item.updatedOn }}
- td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
- template(slot='no-data')
- v-alert(icon='warning', :value='true') No users to display!
- .text-xs-center.py-2
- v-pagination(v-model='pagination.page', :length='pages')
+ v-container(fluid, grid-list-lg)
+ v-layout(row, wrap)
+ v-flex(xs12)
+ .admin-header
+ v-icon(size='80', color='grey lighten-2') call_split
+ .admin-header-title
+ .headline.blue--text.text--darken-2 API
+ .subheading.grey--text Manage keys to access the API
+ v-spacer
+ v-btn(outline, color='grey', large)
+ v-icon refresh
+ v-btn(color='green', dark, depressed, large)
+ v-icon(left) power_settings_new
+ | Enable API
+ v-btn(color='primary', depressed, large)
+ v-icon(left) add
+ | New API Key
+ v-card.mt-3
+ v-data-table(
+ v-model='selected'
+ :items='items',
+ :headers='headers',
+ :search='search',
+ :pagination.sync='pagination',
+ :rows-per-page-items='[15]'
+ select-all,
+ hide-actions,
+ disable-initial-sort
+ )
+ template(slot='headers', slot-scope='props')
+ tr
+ th(width='50')
+ th.text-xs-right(
+ width='80'
+ :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
+ @click='changeSort(`id`)'
+ )
+ v-icon(small) arrow_upward
+ | ID
+ th.text-xs-left(
+ v-for='header in props.headers'
+ :key='header.text'
+ :width='header.width'
+ :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
+ @click='changeSort(header.value)'
+ )
+ | {{ header.text }}
+ v-icon(small) arrow_upward
+ template(slot='items', slot-scope='props')
+ tr(:active='props.selected')
+ td
+ v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
+ td.text-xs-right {{ props.item.id }}
+ td {{ props.item.name }}
+ td {{ props.item.key }}
+ td {{ props.item.createdOn }}
+ td {{ props.item.updatedOn }}
+ td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
+ template(slot='no-data')
+ v-alert(icon='warning', :value='true') No users to display!
+ .text-xs-center.py-2
+ v-pagination(v-model='pagination.page', :length='pages')