diff options
Diffstat (limited to 'src/components/update_notification')
3 files changed, 99 insertions, 0 deletions
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js new file mode 100644 index 00000000..6b8665dd --- /dev/null +++ b/src/components/update_notification/update_notification.js @@ -0,0 +1,24 @@ +import Modal from 'src/components/modal/modal.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import pleromaTan from 'src/assets/pleromatan_apology.png' +import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png' + +import { + faTimes +} from '@fortawesome/free-solid-svg-icons' +library.add( + faTimes +) + +const SettingsModal = { + data () { + return { + pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox + } + }, + components: { + Modal + } +} + +export default SettingsModal diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss new file mode 100644 index 00000000..5fd9eb9b --- /dev/null +++ b/src/components/update_notification/update_notification.scss @@ -0,0 +1,34 @@ +@import 'src/_variables.scss'; +.UpdateNotificationModal { + /* Explanation: + * Modal is positioned vertically centered. + * 100vh - 100% = Distance between modal's top+bottom boundaries and screen + * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen + * + 10% - we move modal completely off-screen, it's top boundary touches + * bottom of the screen + * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible + */ + transform: translateY(calc(((100vh - 100%) / 2 + 5%))); + max-width: 90vh; + width: 30em; + position: relative; + + @media all and (max-width: 800px) { + /* For mobile, the modal takes 100% of the available screen. + This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. + */ + transform: translateY(calc(100% - 50px)); + } + .panel-body > p { + width: calc(100% - 10em) + } + + .pleroma-tan { + max-width: 20em; + max-height: 40em; + position: absolute; + right: -5em; + top: -10em; + z-index: 10; + } +} diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue new file mode 100644 index 00000000..e7118d81 --- /dev/null +++ b/src/components/update_notification/update_notification.vue @@ -0,0 +1,41 @@ +<template> + <Modal + :is-open="true" + class="UpdateNotification" + :class="{ peek: modalPeeked }" + :no-background="true" + > + <div class="UpdateNotificationModal panel"> + <div class="panel-heading"> + <span class="title"> + {{ $t('update.big_update_title') }} + </span> + </div> + <div class="panel-body"> + <p> + {{ $t('update.big_update_content') }} + </p> + <p> + <button + class="button-unstyled -link tall-status-hider" + @click.prevent="toggleShowMore" + > + {{ $t("general.show_more") }} + </button> + {{ ' ' }} + <button + class="button-unstyled -link tall-status-hider" + @click.prevent="toggleShowMore" + > + {{ $t("general.never_show_again") }} + </button> + </p> + <img class="pleroma-tan" :src="pleromaTanVariant"/> + </div> + </div> + </Modal> +</template> + +<script src="./update_notification.js"></script> + +<style src="./update_notification.scss" lang="scss"></style> |