aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorpacien2020-05-08 19:10:52 +0200
committerpacien2020-05-08 19:10:52 +0200
commite02b09f405c81fd3eb612b0bb1f78f5860b0a5e8 (patch)
treee9752489fd04b57655430b7cddcb6deafe233f8b /viewer
parent3cf40298471995fddea8a66860353a2b1ceeeeee (diff)
downloadldgallery-e02b09f405c81fd3eb612b0bb1f78f5860b0a5e8.tar.gz
viewer/style/global: factorise flex centering container
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/assets/scss/global.scss11
-rw-r--r--viewer/src/components/LdDownload.vue9
-rw-r--r--viewer/src/components/LdError.vue9
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