diff client/src/components/systemconfiguration/PDFTemplates.vue @ 3597:d1bbfb9635ca

client: configuration: unified styles of different config components
author Markus Kottlaender <markus@intevation.de>
date Tue, 04 Jun 2019 16:54:45 +0200
parents 63322cd63a57
children f96def15847e
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -1,82 +1,75 @@
 <template>
-  <div class="d-flex flex-column">
-    <div class="d-flex flex-row justify-content-between">
-      <h5><translate>PDF-Templates</translate></h5>
-      <input
-        @change="uploadTemplate"
-        id="uploadTemplate"
-        ref="uploadTemplate"
-        type="file"
-        style="visibility:hidden"
-      />
-    </div>
-    <div class="mt-1 border-bottom pb-4">
-      <UITableHeader
-        :columns="[
-          { id: 'name', title: `${nameLabel}`, class: 'col-3' },
-          { id: 'time', title: `${dateLabel}`, class: 'col-3' },
-          { id: 'type', title: `${typeLabel}`, class: 'col-2' },
-          { id: 'country', title: `${countryLabel}`, class: 'col-2' }
-        ]"
-      />
-      <UITableBody :data="templates | sortTable(sortColumn, sortDirection)">
-        <template v-slot:row="{ item: template }">
-          <div class="py-1 col-3">{{ template.name }}</div>
-          <div class="py-1 col-3">{{ template.time }}</div>
-          <div class="py-1 col-2">{{ template.type }}</div>
-          <div class="py-1 col-2" v-if="template.country">
-            {{ template.country }}
-          </div>
-          <div class="py-1 col-2" v-else><i>global</i></div>
-          <div class="col py-1 text-right">
-            <button
-              class="btn btn-xs btn-info mr-1"
-              ref="downloadTemplate"
-              @click="downloadTemplate(template)"
-            >
-              <font-awesome-icon icon="download" fixed-width />
-            </button>
-            <button
-              class="btn btn-xs btn-dark"
-              @click="deleteTemplate(template)"
-            >
-              <font-awesome-icon icon="trash" fixed-width />
-            </button>
-          </div>
-        </template>
-      </UITableBody>
-      <div class="mt-2">
-        <button
-          class="btn btn-info btn-sm mr-2"
-          @click="
-            type = 'map';
-            $refs.uploadTemplate.click();
-          "
-        >
-          <font-awesome-icon
-            icon="spinner"
-            class="fa-spin fa-fw"
-            v-if="uploading"
-          />
-          <font-awesome-icon icon="upload" class="fa-fw" v-else />
-          <translate>Upload new map template</translate>
-        </button>
-        <button
-          class="btn btn-info btn-sm"
-          @click="
-            type = 'diagram';
-            $refs.uploadTemplate.click();
-          "
-        >
-          <font-awesome-icon
-            icon="spinner"
-            class="fa-spin fa-fw"
-            v-if="uploading"
-          />
-          <font-awesome-icon icon="upload" class="fa-fw" v-else />
-          <translate>Upload new diagram template</translate>
-        </button>
-      </div>
+  <div class="d-flex flex-column pb-4 border-bottom">
+    <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5>
+    <input
+      @change="uploadTemplate"
+      id="uploadTemplate"
+      ref="uploadTemplate"
+      type="file"
+      style="visibility: hidden; position: absolute;"
+    />
+    <UITableHeader
+      :columns="[
+        { id: 'name', title: `${nameLabel}`, class: 'col-3' },
+        { id: 'time', title: `${dateLabel}`, class: 'col-3' },
+        { id: 'type', title: `${typeLabel}`, class: 'col-2' },
+        { id: 'country', title: `${countryLabel}`, class: 'col-2' }
+      ]"
+    />
+    <UITableBody :data="templates | sortTable(sortColumn, sortDirection)">
+      <template v-slot:row="{ item: template }">
+        <div class="py-1 col-3">{{ template.name }}</div>
+        <div class="py-1 col-3">{{ template.time }}</div>
+        <div class="py-1 col-2">{{ template.type }}</div>
+        <div class="py-1 col-2" v-if="template.country">
+          {{ template.country }}
+        </div>
+        <div class="py-1 col-2" v-else><i>global</i></div>
+        <div class="col py-1 text-right">
+          <button
+            class="btn btn-xs btn-info mr-1"
+            ref="downloadTemplate"
+            @click="downloadTemplate(template)"
+          >
+            <font-awesome-icon icon="download" fixed-width />
+          </button>
+          <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)">
+            <font-awesome-icon icon="trash" fixed-width />
+          </button>
+        </div>
+      </template>
+    </UITableBody>
+    <div class="px-2 mt-2">
+      <button
+        class="btn btn-info btn-sm mr-2"
+        @click="
+          type = 'map';
+          $refs.uploadTemplate.click();
+        "
+      >
+        <font-awesome-icon
+          icon="spinner"
+          class="fa-spin fa-fw"
+          v-if="uploading"
+        />
+        <font-awesome-icon icon="upload" class="fa-fw" v-else />
+        <translate>Upload new map template</translate>
+      </button>
+      <button
+        class="btn btn-info btn-sm"
+        @click="
+          type = 'diagram';
+          $refs.uploadTemplate.click();
+        "
+      >
+        <font-awesome-icon
+          icon="spinner"
+          class="fa-spin fa-fw"
+          v-if="uploading"
+        />
+        <font-awesome-icon icon="upload" class="fa-fw" v-else />
+        <translate>Upload new diagram template</translate>
+      </button>
     </div>
   </div>
 </template>