better layouting for import-export, error display fixes

1 files changed, 14 insertions, 2 deletions

diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index 9914d54a..451a2668 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -1,8 +1,11 @@
 <template>
-<div class="import-export">
+<div class="import-export-container">
+  <slot name="before"/>
   <button class="btn" @click="exportData">{{ exportLabel }}</button>
   <button class="btn" @click="importData">{{ importLabel }}</button>
-  <p v-if="importFailed" class="import-warning">{{ importFailedText }}</p>
+  <slot name="afterButtons"/>
+  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+  <slot name="afterError"/>
 </div>
 </template>
 
@@ -73,3 +76,12 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>