initial scratch

src/App.js

@@ -32,6 +32,7 @@ export default {
     MobileNav,
     DesktopNav,
     SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
+    UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
     UserReportingModal,
     PostStatusModal,
     GlobalNoticeList

src/App.vue

@@ -65,6 +65,7 @@
     <UserReportingModal />
     <PostStatusModal />
     <SettingsModal />
+    <UpdateNotification />
     <div id="modal" />
     <GlobalNoticeList />
     <div id="popovers" />

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

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;
+  }
+}

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>

src/i18n/en.json

@@ -71,6 +71,7 @@
     "optional": "optional",
     "show_more": "Show more",
     "show_less": "Show less",
+    "never_show_again": "Never show again",
     "dismiss": "Dismiss",
     "cancel": "Cancel",
     "disable": "Disable",
@@ -956,5 +957,13 @@
   },
   "display_date": {
     "today": "Today"
+  },
+  "update": {
+    "big_update_title": "Please bear with us",
+    "big_update_content": "We haven't had a release in a while, so there things might look and feel different than what you're used to.",
+    "update_bugs": "Please report any issues and bugs on {pleromaGitlab} we don't have a QA team so some things fall through the cracks, we're also open to feedback and suggestions.",
+    "update_bugs_gitlab": "Pleroma Gitlab",
+    "update_changelog": "You can see the full changelog {here}",
+    "update_changelog_here": "here"
   }
 }