changeset 2640:4bcb26542767

client: use new btn-xs class in tables
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 11:23:42 +0100
parents 0db742c7813d
children a735119e4f5c f90557a8c960
files client/src/components/ImportStretches.vue client/src/components/importschedule/Importschedule.vue client/src/components/systemconfiguration/PDFTemplates.vue client/src/components/ui/UITableBody.vue client/src/components/usermanagement/Usermanagement.vue
diffstat 5 files changed, 38 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Thu Mar 14 11:15:43 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Thu Mar 14 11:23:42 2019 +0100
@@ -15,7 +15,7 @@
         :sortable="false"
       />
       <UITableBody :data="stretches" v-slot="{ item: stretch }">
-        <div class="py-2 col-4 ">
+        <div class="py-1 col-4 ">
           <a
             class="linkto text-info"
             v-if="isInStaging(stretch.properties.name)"
@@ -33,20 +33,20 @@
             stretch.properties.name
           }}</a>
         </div>
-        <div class="py-2 col-2">
+        <div class="py-1 col-2">
           {{ stretch.properties["date_info"] | surveyDate }}
         </div>
-        <div class="py-2 col-3">
+        <div class="py-1 col-3">
           {{ stretch.properties["source_organization"] }}
         </div>
-        <div class="py-2 col text-right">
+        <div class="py-1 col text-right">
           <button
-            class="btn btn-sm btn-dark mr-1"
+            class="btn btn-xs btn-dark mr-1"
             @click="editStretch(stretch)"
           >
             <font-awesome-icon icon="pencil-alt" fixed-width />
           </button>
-          <button class="btn btn-sm btn-dark" @click="deleteStretch(stretch)">
+          <button class="btn btn-xs btn-dark" @click="deleteStretch(stretch)">
             <font-awesome-icon icon="trash" fixed-width />
           </button>
         </div>
--- a/client/src/components/importschedule/Importschedule.vue	Thu Mar 14 11:15:43 2019 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Thu Mar 14 11:23:42 2019 +0100
@@ -32,11 +32,11 @@
           :sortable="false"
         />
         <UITableBody :data="schedules" v-slot="{ item: schedule }">
-          <div class="py-2 col-1">{{ schedule.id }}</div>
-          <div class="py-2 col-2">{{ schedule.kind.toUpperCase() }}</div>
-          <div class="py-2 col-2">{{ schedule.user }}</div>
-          <div class="py-2 col-2">{{ schedule.config.cron }}</div>
-          <div class="py-2 col-2">
+          <div class="py-1 col-1">{{ schedule.id }}</div>
+          <div class="py-1 col-2">{{ schedule.kind.toUpperCase() }}</div>
+          <div class="py-1 col-2">{{ schedule.user }}</div>
+          <div class="py-1 col-2">{{ schedule.config.cron }}</div>
+          <div class="py-1 col-2 text-center">
             <font-awesome-icon
               v-if="schedule.config['send-email']"
               class="fa-fw mr-2"
@@ -44,10 +44,10 @@
               icon="check"
             ></font-awesome-icon>
           </div>
-          <div class="py-2 col text-right">
+          <div class="py-1 col text-right">
             <button
               @click="editSchedule(schedule.id)"
-              class="btn btn-sm btn-dark mr-1"
+              class="btn btn-xs btn-dark mr-1"
               :disabled="importScheduleDetailVisible"
             >
               <font-awesome-icon
@@ -57,14 +57,14 @@
             </button>
             <button
               @click="deleteSchedule(schedule)"
-              class="btn btn-sm btn-dark mr-1"
+              class="btn btn-xs btn-dark mr-1"
               :disabled="importScheduleDetailVisible"
             >
               <font-awesome-icon icon="trash" fixed-width></font-awesome-icon>
             </button>
             <button
               @click="triggerManualImport(schedule.id)"
-              class="btn btn-sm btn-dark"
+              class="btn btn-xs btn-dark"
               :disabled="importScheduleDetailVisible"
             >
               <font-awesome-icon icon="play" fixed-width></font-awesome-icon>
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Thu Mar 14 11:15:43 2019 +0100
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Thu Mar 14 11:23:42 2019 +0100
@@ -20,22 +20,22 @@
         :sortable="false"
       />
       <UITableBody :data="templates" v-slot="{ item: template }">
-        <div class="py-2 col-4">{{ template.name }}</div>
-        <div class="py-2 col-4">{{ template.time }}</div>
-        <div class="py-2 col-2" v-if="template.country">
+        <div class="py-1 col-4">{{ template.name }}</div>
+        <div class="py-1 col-4">{{ template.time }}</div>
+        <div class="py-1 col-2" v-if="template.country">
           {{ template.country }}
         </div>
-        <div class="py-2 col-2" v-else><i>global</i></div>
-        <div class="col py-2 text-right">
+        <div class="py-1 col-2" v-else><i>global</i></div>
+        <div class="col py-1 text-right">
           <button
-            class="btn btn-sm btn-info m-1"
+            class="btn btn-xs btn-info mr-1"
             ref="downloadTemplate"
             @click="downloadTemplate(template)"
           >
-            <font-awesome-icon icon="download" />
+            <font-awesome-icon icon="download" fixed-width />
           </button>
-          <button class="btn btn-sm btn-dark" @click="deleteTemplate(template)">
-            <font-awesome-icon icon="trash" />
+          <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)">
+            <font-awesome-icon icon="trash" fixed-width />
           </button>
         </div>
       </UITableBody>
--- a/client/src/components/ui/UITableBody.vue	Thu Mar 14 11:15:43 2019 +0100
+++ b/client/src/components/ui/UITableBody.vue	Thu Mar 14 11:23:42 2019 +0100
@@ -9,7 +9,10 @@
     <div
       v-for="(item, index) in data"
       :key="key(index)"
-      :class="['border-top row mx-0', { active: active === item }]"
+      :class="[
+        'border-top row mx-0 align-items-center',
+        { active: active === item }
+      ]"
     >
       <slot :item="item" :index="index"></slot>
     </div>
--- a/client/src/components/usermanagement/Usermanagement.vue	Thu Mar 14 11:15:43 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Thu Mar 14 11:23:42 2019 +0100
@@ -20,37 +20,37 @@
             :active="currentUser"
             v-slot="{ item: user }"
           >
-            <div class="py-2 col-1" @click="selectUser(user.user)">
+            <div class="py-1 col-1" @click="selectUser(user.user)">
               <font-awesome-icon
                 v-tooltip="roleLabel(user.role)"
                 :icon="roleIcon(user.role)"
                 class="fa-lg"
               ></font-awesome-icon>
             </div>
-            <div class="py-2 col-3" @click="selectUser(user.user)">
+            <div class="py-1 col-3" @click="selectUser(user.user)">
               {{ user.user }}
             </div>
-            <div class="py-2 col-2" @click="selectUser(user.user)">
+            <div class="py-1 col-2" @click="selectUser(user.user)">
               {{ user.country }}
             </div>
-            <div class="py-2 col-3" @click="selectUser(user.user)">
+            <div class="py-1 col-3" @click="selectUser(user.user)">
               {{ user.email }}
             </div>
-            <div class="py-2 col text-right">
+            <div class="py-1 col text-right">
               <button
                 @click="sendTestMail(user.user)"
-                class="btn btn-sm btn-dark mr-1"
+                class="btn btn-xs btn-dark mr-1"
                 v-tooltip="sendMailLabel"
                 v-if="user.email"
               >
-                <font-awesome-icon icon="paper-plane"></font-awesome-icon>
+                <font-awesome-icon icon="paper-plane" fixed-width />
               </button>
               <button
                 @click="deleteUser(user.user)"
-                class="btn btn-sm btn-dark"
+                class="btn btn-xs btn-dark"
                 v-tooltip="deleteUserLabel"
               >
-                <font-awesome-icon icon="trash" />
+                <font-awesome-icon icon="trash" fixed-width />
               </button>
             </div>
           </UITableBody>
@@ -154,7 +154,7 @@
     return {
       sortColumn: "user",
       sortDirection: "ASC",
-      pageSize: 15,
+      pageSize: 20,
       currentPage: 1
     };
   },