diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 2b9c7a5d8..939655f65 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -45,10 +45,10 @@ inset: 0; justify-content: center; place-items: center center; - overflow: auto; } .dialog-modal.panel { + max-height: 80vh; max-width: 90vw; z-index: 2001; cursor: default; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 303413b55..26a2e2db0 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -13,7 +13,7 @@ v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning" keypath="post_status.account_not_locked_warning" tag="p" - class="visibility-notice" + class="alert neutral" scope="global" >

{{ $t('post_status.scope_notice.unlisted') }} - - +

{{ $t('post_status.scope_notice.private') }} - - +

{{ $t('post_status.direct_warning_to_first_only') }} {{ $t('post_status.direct_warning_to_all') }} diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index eda60a96a..7dd6ff28f 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -412,10 +412,6 @@ display: flex; padding: 0; margin: 0; - - .user-info { - margin: 1em; - } } .side-drawer ul { diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 7daee4b76..159d09e36 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -186,6 +186,14 @@ export default { relationship () { return this.$store.getters.relationship(this.userId) }, + style () { + return { + backgroundImage: [ + 'linear-gradient(to bottom, var(--profileTint), var(--profileTint))', + `url(${this.bannerImgSrc})` + ].join(', ') + } + }, isOtherUser () { return this.user.id !== this.$store.state.users.currentUser.id }, @@ -282,14 +290,12 @@ export default { // Editable stuff avatarImgSrc () { const currentUrl = this.user.profile_image_url_original || this.defaultAvatar - if (!this.editable) return currentUrl - const newUrl = this.newAvatar === null ? this.defaultAvatar : this.newAvatar + const newUrl = this.newAvatar === '' ? this.defaultAvatar : this.newAvatar return (this.newAvatar === null) ? currentUrl : newUrl }, bannerImgSrc () { const currentUrl = this.user.cover_photo || this.defaultBanner - if (!this.editable) return currentUrl - const newUrl = this.newBanner === null ? this.defaultBanner : this.newBanner + const newUrl = this.newBanner === '' ? this.defaultBanner : this.newBanner return (this.newBanner === null) ? currentUrl : newUrl }, defaultAvatar () { @@ -413,11 +419,11 @@ export default { }, resetImage () { if (this.editImage === 'avatar') { - this.newAvatar = null - this.newAvatarFile = null + this.newAvatar = '' + this.newAvatarFile = '' } else { - this.newBanner = null - this.newBannerFile = null + this.newBanner = '' + this.newBannerFile = '' } this.editImage = false }, @@ -432,9 +438,6 @@ export default { propsToNative (props) { return propsToNative(props) }, - cancelImageText () { - return - }, resetState () { const user = this.$store.state.users.currentUser diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 0d117182d..ce26fdfe7 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -111,8 +111,7 @@ } } - .banner-overlay, - .banner-image { + .background-image { position: absolute; inset: 0; right: -1.2em; @@ -120,24 +119,11 @@ top: -1.4em; padding: 0; mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat; + background-size: cover; + background-color: var(--profileBg); border-top-left-radius: calc(var(--roundness) - 1px); border-top-right-radius: calc(var(--roundness) - 1px); - } - - .banner-image { z-index: -2; - - img { - object-fit: cover; - height: 100%; - width: 100%; - } - } - - .banner-overlay { - background-color: var(--profileTint); - pointer-events: none; // let user copy bg url - z-index: -1; } .bottom-buttons { @@ -505,8 +491,6 @@ .edit-image { .panel-body { text-align: center; - display: flex; - flex-direction: column; } .current-avatar { @@ -515,19 +499,9 @@ .image-container { display: flex; - align-self: center; - margin: 0 0 1em; - max-height: 30em; - max-width: 100%; - flex: 1 0 20em; - aspect-ratio: 1; + margin: 0 1em 0.5em; gap: 0.5em; - &.-banner { - aspect-ratio: 3; - max-width: 100%; - } - .new-image { display: flex; flex-direction: column; @@ -535,7 +509,6 @@ .cropper { flex: 1; - overflow-x: auto; } > * { @@ -573,16 +546,4 @@ aspect-ratio: unset; } } - - #modal.-mobile & { - #pick-image { - height: 3em; - } - - .image-container { - &.-banner { - max-height: 10em; - } - } - } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index af3c56186..a993a87a5 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -3,15 +3,10 @@

-
-
- +
+ + +
+ + + + - -
- - - - +