initial scratch

This commit is contained in:
Henry Jameson 2022-08-02 00:37:48 +03:00
parent 3fc9673a7d
commit 5b7c653874
8 changed files with 110 additions and 0 deletions

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 KiB

View File

@ -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

View File

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

View File

@ -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>

View File

@ -71,6 +71,7 @@
"optional": "optional", "optional": "optional",
"show_more": "Show more", "show_more": "Show more",
"show_less": "Show less", "show_less": "Show less",
"never_show_again": "Never show again",
"dismiss": "Dismiss", "dismiss": "Dismiss",
"cancel": "Cancel", "cancel": "Cancel",
"disable": "Disable", "disable": "Disable",
@ -956,5 +957,13 @@
}, },
"display_date": { "display_date": {
"today": "Today" "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"
} }
} }