initial scratch

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>