diff options
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/src/assets/scss/global.scss | 11 | ||||
-rw-r--r-- | viewer/src/components/LdDownload.vue | 9 | ||||
-rw-r--r-- | viewer/src/components/LdError.vue | 9 |
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 { | |||
51 | align-items: center; | 51 | align-items: center; |
52 | } | 52 | } |
53 | 53 | ||
54 | /** | ||
55 | * Class for containers that centers its content vertically and horizontally, | ||
56 | * preferably sticking to the container start if the container is smaller than the content. | ||
57 | */ | ||
58 | .container-vh-centering { | ||
59 | min-height: 100%; | ||
60 | display: flex; | ||
61 | align-items: center; | ||
62 | justify-content: center; | ||
63 | } | ||
64 | |||
54 | // === Links | 65 | // === Links |
55 | 66 | ||
56 | .link { | 67 | .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 @@ | |||
19 | --> | 19 | --> |
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <div :class="$style.container"> | 22 | <div class="container-vh-centering"> |
23 | <a :class="$style.content" :download="itemFileName()" :href="itemDownloadUrl()"> | 23 | <a :class="$style.content" :download="itemFileName()" :href="itemDownloadUrl()"> |
24 | <!-- TODO: show thumbnail instead of this generic file download icon? --> | 24 | <!-- TODO: show thumbnail instead of this generic file download icon? --> |
25 | <fa-icon :class="$style.icon" icon="file-download" size="6x" /> | 25 | <fa-icon :class="$style.icon" icon="file-download" size="6x" /> |
@@ -50,13 +50,6 @@ import { Component, Prop, Vue } from "vue-property-decorator"; | |||
50 | </script> | 50 | </script> |
51 | 51 | ||
52 | <style lang="scss" module> | 52 | <style lang="scss" module> |
53 | .container { | ||
54 | min-height: 100%; | ||
55 | display: flex; | ||
56 | align-items: center; | ||
57 | justify-content: center; | ||
58 | } | ||
59 | |||
60 | .content { | 53 | .content { |
61 | text-align: center; | 54 | text-align: center; |
62 | } | 55 | } |
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 @@ | |||
19 | --> | 19 | --> |
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <div :class="$style.container"> | 22 | <div class="container-vh-centering"> |
23 | <div :class="$style.content"> | 23 | <div :class="$style.content"> |
24 | <fa-icon :class="$style.icon" :icon="icon" size="6x" /> | 24 | <fa-icon :class="$style.icon" :icon="icon" size="6x" /> |
25 | <div :class="$style.message" v-html="message"></div> | 25 | <div :class="$style.message" v-html="message"></div> |
@@ -39,13 +39,6 @@ import { Component, Prop, Vue } from "vue-property-decorator"; | |||
39 | <style lang="scss" module> | 39 | <style lang="scss" module> |
40 | @import "~@/assets/scss/theme.scss"; | 40 | @import "~@/assets/scss/theme.scss"; |
41 | 41 | ||
42 | .container { | ||
43 | min-height: 100%; | ||
44 | display: flex; | ||
45 | align-items: center; | ||
46 | justify-content: center; | ||
47 | } | ||
48 | |||
49 | .content { | 42 | .content { |
50 | text-align: center; | 43 | text-align: center; |
51 | 44 | ||