From f16f58e93058edf606505835407f34fe2f66479e Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 21 Feb 2020 00:07:32 +0000
Subject: [PATCH]

---
 ayanova/src/views/ay-data-list-view.vue | 93 ++++++++++++++-----------
 1 file changed, 51 insertions(+), 42 deletions(-)

diff --git a/ayanova/src/views/ay-data-list-view.vue b/ayanova/src/views/ay-data-list-view.vue
index 76c3852e..5287943a 100644
--- a/ayanova/src/views/ay-data-list-view.vue
+++ b/ayanova/src/views/ay-data-list-view.vue
@@ -85,57 +85,66 @@
                   </v-card-title>
 
                   <v-card-text>
-                    <div class="d-flex justify-space-between">
-                      <v-switch
-                        v-model="item.include"
-                        :label="lt('Include')"
-                        :ref="item.key"
-                        :disabled="
-                          item.sort != null || item.filter.items.length > 0
-                        "
-                        @change="includeChanged(item)"
-                      ></v-switch>
-                      <template v-if="item.isSortable">
-                        <div @click="toggleSort(item)" class="pl-2 pt-2">
-                          <v-btn large v-if="item.sort == null" icon>
-                            <v-icon large>fa-sort</v-icon></v-btn
-                          >
-                          <v-btn
-                            v-if="item.sort != null && item.sort == '-'"
-                            icon
-                            x-large
-                            ><v-icon color="primary" x-large>fa-sort-amount-down</v-icon></v-btn
-                          >
-                          <v-btn
-                            v-if="item.sort != null && item.sort == '+'"
-                            icon
-                            x-large
-                            ><v-icon color="primary" x-large
-                              >fa-sort-amount-up</v-icon
-                            ></v-btn
-                          >
-                        </div>
-                      </template>
-                    </div>
-                    <div class="d-flex justify-space-between">
-                      <v-btn icon @click="move('start', index)"
-                        ><v-icon>fa-step-backward</v-icon></v-btn
+                    <v-switch
+                      v-model="item.include"
+                      :label="lt('Include')"
+                      :ref="item.key"
+                      :disabled="
+                        item.sort != null || item.filter.items.length > 0
+                      "
+                      @change="includeChanged(item)"
+                    ></v-switch>
+                    <div class="d-flex justify-space-between pt-3">
+                      <v-btn large icon @click="move('start', index)"
+                        ><v-icon large>fa-step-backward</v-icon></v-btn
                       >
-                      <v-btn icon @click="move('left', index)"
-                        ><v-icon>fa-backward</v-icon></v-btn
+                      <v-btn large icon @click="move('left', index)"
+                        ><v-icon large>fa-backward</v-icon></v-btn
                       >
-                      <v-btn icon @click="move('right', index)"
-                        ><v-icon>fa-forward</v-icon></v-btn
+                      <v-btn large icon @click="move('right', index)"
+                        ><v-icon large>fa-forward</v-icon></v-btn
                       >
-                      <v-btn icon @click="move('end', index)"
-                        ><v-icon>fa-step-forward</v-icon></v-btn
+                      <v-btn large icon @click="move('end', index)"
+                        ><v-icon large>fa-step-forward</v-icon></v-btn
                       >
                     </div>
+                    <template v-if="item.isSortable">
+                      <div @click="toggleSort(item)" class="pt-6">
+                        <v-btn large v-if="item.sort == null" icon>
+                          <v-icon large>fa-sort</v-icon></v-btn
+                        >
+                        <v-btn
+                          v-if="item.sort != null && item.sort == '-'"
+                          icon
+                          x-large
+                          ><v-icon color="primary" x-large
+                            >fa-sort-amount-down</v-icon
+                          ></v-btn
+                        >
+                        <v-btn
+                          v-if="item.sort != null && item.sort == '+'"
+                          icon
+                          x-large
+                          ><v-icon color="primary" x-large
+                            >fa-sort-amount-up</v-icon
+                          ></v-btn
+                        >
+                        <label class="v-label theme--light"
+                          >&nbsp;{{ lt("Sort") }}</label
+                        >
+                      </div>
+                    </template>
 
                     <template v-if="item.isFilterable">
                       <v-divider class="mx-4 my-5"></v-divider>
                       <div>
-                        <v-icon large>fa-filter</v-icon>
+                        <v-icon
+                          v-if="item.filter.items.length > 0"
+                          color="primary"
+                          x-large
+                          >fa-filter</v-icon
+                        >
+                        <v-icon v-else>fa-filter</v-icon>
                         <label class="v-label theme--light"
                           >&nbsp;{{ lt("Filter") }}</label
                         >