@@ -149,7 +149,7 @@ export default {
background-position: 50% 50%;
.theme-preview-content {
- padding: 20px;
+ padding: 1.5em;
}
.dummy {
@@ -203,19 +203,21 @@ export default {
.avatar-alt {
flex: 0 auto;
- margin-left: 28px;
- font-size: 12px;
- min-width: 20px;
- min-height: 20px;
- line-height: 20px;
+ margin-left: 2em;
+ font-size: 0.85em;
+ min-width: 2.2rem;
+ min-height: 2.2rem;
+ line-height: 1.5em;
+ align-content: center;
}
.avatar {
flex: 0 auto;
- width: 48px;
- height: 48px;
- font-size: 14px;
- line-height: 48px;
+ width: 3.5em;
+ height: 3.5em;
+ font-size: 1rem;
+ line-height: 3.5em;
+ justify-content: center;
}
.actions {
@@ -241,7 +243,7 @@ export default {
.underlay-preview {
position: absolute;
- inset: 0 10px;
+ inset: 0 0.9em;
}
}
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index d83beffa0..ae2364dcc 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -107,7 +107,7 @@
justify-content: space-between;
align-items: baseline;
width: 100%;
- min-height: 30px;
+ min-height: 2.1em;
margin-bottom: 1em;
p {
@@ -212,7 +212,7 @@
.theme-color-cl,
.theme-radius-in,
.theme-color-in {
- margin-left: 4px;
+ margin-left: 0.3em;
}
.theme-radius-in {
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 1b2b591c2..184fe81e0 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -122,8 +122,8 @@
.shout-avatar {
img {
- height: 24px;
- width: 24px;
+ height: 0.6em;
+ width: 0.6em;
border-radius: var(--roundness);
margin-right: 0.5em;
margin-top: 0.25em;
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 93253b1a7..0f325ea7f 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -76,9 +76,10 @@
}
.status-favicon {
- height: 18px;
- width: 18px;
+ height: 1.2em;
+ width: 1.2em;
margin-right: 0.4em;
+ object-fit: contain;
}
.status-heading {
@@ -100,7 +101,8 @@
}
.account-name {
- min-width: 1.6em;
+ display: inline-block;
+ min-width: 1em;
margin-right: 0.4em;
white-space: nowrap;
overflow: hidden;
@@ -116,10 +118,11 @@
.heading-right {
display: flex;
flex-shrink: 0;
+ align-self: baseline;
.button-unstyled {
- padding: 5px;
- margin: -5px;
+ padding: 0.2em;
+ margin: -0.2em;
}
.svg-inline--fa {
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index aa334499e..e89d1d173 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -22,6 +22,7 @@ const StatusContent = {
name: 'StatusContent',
props: [
'compact',
+ 'collapse', // replaces newlines with spaces
'status',
'focused',
'noHeading',
@@ -95,6 +96,9 @@ const StatusContent = {
attachmentTypes () {
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
},
+ collapsedStatus () {
+ return this.status.raw_html.replace(/(\n|
)/g, ' ')
+ },
...mapGetters(['mergedConfig'])
},
components: {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 0fc024b04..1035d04c6 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -38,7 +38,7 @@
v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
:class="{ '-single-line': singleLine }"
class="text media-body"
- :html="status.raw_html"
+ :html="collapse ? collapsedStatus : status.raw_html"
:emoji="status.emojis"
:handle-links="true"
:faint="compact"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 3bf25c75b..f61ba0d05 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -53,6 +53,7 @@ const StatusContent = {
props: [
'status',
'compact',
+ 'collapse',
'focused',
'noHeading',
'fullContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 64a1d6a53..fb08186b4 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -14,6 +14,7 @@
:toggle-showing-tall="toggleShowingTall"
:toggle-expanding-subject="toggleExpandingSubject"
:toggle-showing-long-subject="toggleShowingLongSubject"
+ :collapse="collapse"
@parse-ready="$emit('parseReady', $event)"
>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 60413c5f4..b7274d86d 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -202,9 +202,9 @@
}
img {
- max-height: 26px;
+ max-height: 1.9em;
vertical-align: top;
- margin-top: -5px;
+ margin-top: -0.3em;
}
}
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index c0336d407..d9e96d52d 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -41,7 +41,7 @@
display: inline-block;
position: relative;
width: 3.5em;
- height: 48px;
+ height: 3.5em;
&.-compact {
width: 2.2em;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4fdc73777..c0d079575 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -272,6 +272,11 @@
// big one
z-index: 1;
line-height: 2em;
+ text-shadow:
+ 0 0 5em var(--profileTint),
+ 0 0 1em var(--profileTint),
+ 0 0 0.5em var(--profileTint),
+ 0 0 0.2em var(--profileTint);
--emoji-size: 1.7em;
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 0e93824b7..dbd7e7e56 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -10,7 +10,7 @@
keypath="user_reporting.title"
class="title"
>
-
+
@@ -74,10 +74,14 @@