summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 18:53:30 +0100
committerUdo Walter2019-02-24 18:53:30 +0100
commit5ec09d1850f6b612beb6b378b905cfdeea64791d (patch)
tree006fab1520e06d9db14c1f208d7ff3c1b51cf9f0 /webapp/src/components/DataTable.vue
parent[webapp/configurator] add double click to tables (diff)
downloadbas-5ec09d1850f6b612beb6b378b905cfdeea64791d.tar.gz
bas-5ec09d1850f6b612beb6b378b905cfdeea64791d.tar.xz
bas-5ec09d1850f6b612beb6b378b905cfdeea64791d.zip
[webapp/datatable] small design fixes
Diffstat (limited to 'webapp/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue22
1 files changed, 13 insertions, 9 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 7925044..94631ff 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -28,7 +28,7 @@
<template>
<div>
<v-layout wrap>
- <v-flex xs12 :sm6="!menuMode" class="d-flex align-center search-wrapper" :class="{ 'menu-mode-search-wrapper': menuMode }">
+ <v-flex xs12 :md6="!menuMode" class="d-flex align-center search-wrapper" :class="{ 'menu-mode-search-wrapper': menuMode }">
<div class="search-field-wrapper">
<div v-for="(s, index) in search" :key="index">
<v-text-field
@@ -61,12 +61,12 @@
<v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
</div>
</div>
- <v-divider :class="{ 'hidden-sm-and-up': !menuMode }"></v-divider>
- <v-divider v-if="!menuMode" vertical :class="{ 'hidden-xs-only': !menuMode }"></v-divider>
+ <v-divider :class="{ 'hidden-md-and-up': !menuMode }"></v-divider>
+ <v-divider v-if="!menuMode" vertical class="hidden-sm-and-down"></v-divider>
</v-flex>
- <v-flex style="padding: 6px 16px" class="d-flex align-start non-selectable" xs12 :sm6="!menuMode">
+ <v-flex style="padding: 6px 16px" class="non-selectable" xs12 :md6="!menuMode">
<div class="d-flex align-center" style="font-size: 12px">
- <div>
+ <div class="nowrap">
<v-tooltip top open-delay="800">
<v-btn icon class="toggle-button" @click="regex = !regex" slot="activator">
<span :class="regex ? 'primary--text' : ''">.*?</span>
@@ -87,11 +87,12 @@
</v-tooltip>
</div>
- <div class="text-xs-center">
- {{ filteredRows.length + ' ' + $t('entries') + ' (' + selected.length + ' ' + $t('selected') + ')' }}
+ <div :class="{ 'text-xs-center': !pageMode && !menuMode, 'text-xs-right': pageMode || menuMode }">
+ <span class="nowrap">{{ filteredRows.length + ' ' + $t('entries') }}</span>
+ <span class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
</div>
- <div v-if="!pageMode && !menuMode" class="text-xs-right">
+ <div v-if="!pageMode && !menuMode" class="text-xs-right hidden-xs-only">
{{ $t('height') }}:
</div>
<v-select
@@ -455,6 +456,9 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.nowrap {
+ white-space: nowrap;
+}
.toggle-button {
margin: 0;
@@ -465,7 +469,7 @@ export default {
font-weight: 600;
}
-@media (max-width: 599px) {
+@media (max-width: 959px) {
.search-wrapper {
flex-direction: column;
align-items: stretch;