Art by pipivovott
diff --git a/public/static/splash.css b/public/static/splash.css
index abdc19fc2..f56f33d07 100644
--- a/public/static/splash.css
+++ b/public/static/splash.css
@@ -5,15 +5,14 @@ body {
#splash {
--scale: 1;
+
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
align-content: center;
- align-items: center;
- justify-content: center;
- justify-items: center;
+ place-items: center;
flex-direction: column;
background: #0f161e;
font-family: sans-serif;
@@ -21,13 +20,20 @@ body {
position: absolute;
z-index: 9999;
font-size: calc(1vw + 1vh + 1vmin);
+ opacity: 1;
+ transition: opacity 500ms ease-out 2s;
+}
+
+#splash.hidden,
+#splash.initial-hidden {
+ opacity: 0;
}
#splash-credit {
position: absolute;
- font-size: 14px;
- bottom: 16px;
- right: 16px;
+ font-size: 1em;
+ bottom: 1em;
+ right: 1em;
}
#splash-container {
diff --git a/src/App.js b/src/App.js
index a251682dc..0027d908a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -214,6 +214,9 @@ export default {
splashscreenRoot.addEventListener('transitionend', () => {
splashscreenRoot.remove()
})
+ setTimeout(() => {
+ splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
+ }, 600)
splashscreenRoot.classList.add('hidden')
document.querySelector('#app').classList.remove('hidden')
}
diff --git a/src/App.scss b/src/App.scss
index 51f2c9af3..00a8e9547 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -21,7 +21,7 @@
}
html {
- font-size: var(--textSize, 14px);
+ font-size: var(--textSize, 1rem);
--navbar-height: var(--navbarSize, 3.5rem);
--emoji-size: var(--emojiSize, 32px);
@@ -382,6 +382,10 @@ nav {
font-family: sans-serif;
font-family: var(--font);
+ &.-transparent {
+ backdrop-filter: blur(0.125em) contrast(60%);
+ }
+
&::-moz-focus-inner {
border: none;
}
@@ -741,17 +745,17 @@ option {
}
&.-dot {
- min-height: 8px;
- max-height: 8px;
- min-width: 8px;
- max-width: 8px;
+ min-height: 0.6em;
+ max-height: 0.6em;
+ min-width: 0.6em;
+ max-width: 0.6em;
padding: 0;
line-height: 0;
font-size: 0;
- left: calc(50% - 4px);
- top: calc(50% - 4px);
- margin-left: 6px;
- margin-top: -6px;
+ left: calc(50% - 0.6em);
+ top: calc(50% - 0.6em);
+ margin-left: 0.4em;
+ margin-top: -0.4em;
}
&.-counter {
@@ -929,12 +933,7 @@ option {
#splash {
pointer-events: none;
- transition: opacity 0.5s;
- opacity: 1;
-
- &.hidden {
- opacity: 0;
- }
+ // transition: opacity 0.5s;
#status {
&.css-ok {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 16346c97c..97515eb32 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -107,9 +107,9 @@
.play-icon {
position: absolute;
- font-size: 64px;
- top: calc(50% - 32px);
- left: calc(50% - 32px);
+ font-size: 4.5em;
+ top: calc(50% - 2.25rem);
+ left: calc(50% - 2.25rem);
color: rgb(255 255 255 / 75%);
text-shadow: 0 0 2px rgb(0 0 0 / 40%);
diff --git a/src/components/button.style.js b/src/components/button.style.js
index ecbf54d9e..c32a232f4 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -64,6 +64,26 @@ export default {
opacity: 0.5
}
},
+ {
+ component: 'Text',
+ parent: {
+ component: 'Button',
+ variant: 'transparent'
+ },
+ directives: {
+ textColor: '--text'
+ }
+ },
+ {
+ component: 'Icon',
+ parent: {
+ component: 'Button',
+ variant: 'transparent'
+ },
+ directives: {
+ textColor: '--text'
+ }
+ },
{
state: ['hover'],
directives: {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 17a317a4d..8e572d1d2 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -140,13 +140,13 @@ const EmojiPicker = {
},
updateEmojiSize () {
const css = window.getComputedStyle(this.$refs.popover.$el)
- const fontSize = css.getPropertyValue('font-size') || '14px'
+ const fontSize = css.getPropertyValue('font-size') || '1rem'
const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem'
- const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
+ const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim()
const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
- const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+ const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '').trim()
const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
let fontSizeMultiplier
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 7209e9144..eb1054df6 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -129,7 +129,7 @@
.gallery-item {
margin: 0;
- height: 200px;
+ height: 15em;
}
}
}
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 5cc8c50a3..7f625755c 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -168,7 +168,7 @@ $modal-view-button-icon-margin: 0.5em;
flex: 0 0 auto;
overflow-y: auto;
min-height: 1em;
- max-width: 500px;
+ max-width: 35.8em;
max-height: 9.5em;
overflow-wrap: break-word;
text-wrap: pretty;
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index c3261e17d..3aa7816be 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -7,7 +7,6 @@
& .new,
& .original {
display: inline;
- border-radius: 2px;
}
.mention-avatar {
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
index a262ed1c5..8e2fa553a 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
@@ -4,13 +4,13 @@
table {
width: 100%;
text-align: left;
- padding-left: 10px;
- padding-bottom: 20px;
+ padding-left: 0.5em;
+ padding-bottom: 1.1em;
th,
td {
- width: 180px;
- max-width: 360px;
+ width: 11em;
+ max-width: 25em;
overflow: hidden;
vertical-align: text-top;
}
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 043be1b1a..3edf21de7 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -42,6 +42,7 @@ library.add(
const Notification = {
data () {
return {
+ selecting: false,
statusExpanded: false,
unmuted: false,
showingApproveConfirmDialog: false,
@@ -62,10 +63,35 @@ const Notification = {
UserLink,
ConfirmModal
},
+ mounted () {
+ document.addEventListener('selectionchange', this.onContentSelect)
+ },
+ unmounted () {
+ document.removeEventListener('selectionchange', this.onContentSelect)
+ },
methods: {
toggleStatusExpanded () {
+ if (!this.expandable) return
this.statusExpanded = !this.statusExpanded
},
+ onContentSelect () {
+ const { isCollapsed, anchorNode, offsetNode } = document.getSelection()
+ if (isCollapsed) {
+ this.selecting = false
+ return
+ }
+ const within = this.$refs.root.contains(anchorNode) || this.$refs.root.contains(offsetNode)
+ if (within) {
+ this.selecting = true
+ } else {
+ this.selecting = false
+ }
+ },
+ onContentClick (e) {
+ if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) {
+ this.toggleStatusExpanded()
+ }
+ },
generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
},
@@ -136,6 +162,9 @@ const Notification = {
const user = this.notification.from_profile
return highlightStyle(highlight[user.screen_name])
},
+ expandable () {
+ return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
+ },
user () {
return this.$store.getters.findUser(this.notification.from_profile.id)
},
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index e8895ce59..934d3e58d 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,10 +1,15 @@
// TODO Copypaste from Status, should unify it somehow
+
.Notification {
border-bottom: 1px solid;
border-color: var(--border);
overflow-wrap: break-word;
text-wrap: pretty;
+ .status-content {
+ cursor: pointer;
+ }
+
&.Status {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 648bdb41f..7165289dc 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,6 +1,7 @@
-
+
@@ -246,8 +255,11 @@
/>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 4fb8e0428..238be88df 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -726,10 +726,6 @@ const PostStatusForm = {
scrollerRef.scrollTop = targetScroll
}
},
- showEmojiPicker () {
- this.$refs.textarea.focus()
- this.$refs['emoji-input'].triggerShowPicker()
- },
clearError () {
this.error = null
},
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index a79cae4a6..78b93fd28 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -41,10 +41,12 @@
.form-bottom-left {
display: flex;
- flex: 1;
- padding-right: 7px;
- margin-right: 7px;
- max-width: 10em;
+ gap: 1.5em;
+
+ button {
+ padding: 0.5em;
+ margin: -0.5em;
+ }
}
.preview-heading {
@@ -102,10 +104,16 @@
.visibility-tray {
display: flex;
justify-content: space-between;
- padding-top: 5px;
+ padding-top: 0.5em;
align-items: baseline;
}
+ .visibility-notice {
+ border: 1px solid var(--border);
+ border-radius: var(--roundness);
+ padding: 0.5em 1em
+ }
+
.visibility-notice.edit-warning {
> :first-child {
margin-top: 0;
@@ -193,6 +201,10 @@
line-height: 1.85;
}
+ .inputs-wrapper {
+ padding: 0;
+ }
+
.input.form-post-body {
// TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
@@ -200,6 +212,7 @@
transition: min-height 200ms 100ms;
// stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+ padding-right: 1.5em;
// two lines of text
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
@@ -216,6 +229,10 @@
position: relative;
}
+ .subject-input {
+ border-bottom: 1px solid var(--border);
+ }
+
.character-counter {
position: absolute;
bottom: 0;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 303413b55..f661a980d 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -156,67 +156,68 @@
class="preview-status"
/>