viewer/style/global: factorise flex centering container

3 files changed, 13 insertions, 16 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 9444548..5d2e6dc 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -51,6 +51,17 @@ button svg + span {
   align-items: center;
 }
 
+/**
+ * Class for containers that centers its content vertically and horizontally,
+ * preferably sticking to the container start if the container is smaller than the content.
+ */
+.container-vh-centering {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // === Links
 
 .link {
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue
index f86d455..aea4123 100644
--- a/viewer/src/components/LdDownload.vue
+++ b/viewer/src/components/LdDownload.vue
@@ -19,7 +19,7 @@
 -->
 
 <template>
-  <div :class="$style.container">
+  <div class="container-vh-centering">
     <a :class="$style.content" :download="itemFileName()" :href="itemDownloadUrl()">
       <!-- TODO: show thumbnail instead of this generic file download icon? -->
       <fa-icon :class="$style.icon" icon="file-download" size="6x" />
@@ -50,13 +50,6 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 </script>
 
 <style lang="scss" module>
-.container {
-  min-height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .content {
   text-align: center;
 }
diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue
index 4b958dc..a53942d 100644
--- a/viewer/src/components/LdError.vue
+++ b/viewer/src/components/LdError.vue
@@ -19,7 +19,7 @@
 -->
 
 <template>
-  <div :class="$style.container">
+  <div class="container-vh-centering">
     <div :class="$style.content">
       <fa-icon :class="$style.icon" :icon="icon" size="6x" />
       <div :class="$style.message" v-html="message"></div>
@@ -39,13 +39,6 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 <style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-.container {
-  min-height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .content {
   text-align: center;