aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.scss14
-rw-r--r--src/components/chat_list_item/chat_list_item.scss4
-rw-r--r--src/components/notifications/notifications.scss2
-rw-r--r--src/components/post_status_form/post_status_form.vue15
-rw-r--r--src/components/status_body/status_body.scss4
-rw-r--r--src/components/user_reporting_modal/user_reporting_modal.vue2
6 files changed, 24 insertions, 17 deletions
diff --git a/src/App.scss b/src/App.scss
index 3a0204d1..3ea31b97 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,6 +3,7 @@
:root {
--navbar-height: 3.5rem;
+ --post-line-height: 1.4;
}
html {
@@ -440,7 +441,7 @@ textarea,
height: unset;
}
- --padding: 0.5em;
+ --_padding: 0.5em;
border: none;
border-radius: $fallback--inputRadius;
@@ -458,10 +459,9 @@ textarea,
box-sizing: border-box;
display: inline-block;
position: relative;
- height: 2.4em;
- line-height: 1.2;
+ line-height: 2;
hyphens: none;
- padding: var(--padding);
+ padding: 0 var(--_padding);
&:disabled,
&[disabled=disabled],
@@ -563,6 +563,12 @@ textarea,
}
}
+// Textareas should have stock line-height + vertical padding instead of huge line-height
+textarea {
+ padding: var(--_padding);
+ line-height: var(--post-line-height);
+}
+
option {
color: $fallback--text;
color: var(--text, $fallback--text);
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 57332bed..c6b45c34 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -43,7 +43,7 @@
white-space: nowrap;
overflow: hidden;
flex-shrink: 1;
- line-height: 1.4em;
+ line-height: var(--post-line-height);
}
.chat-preview {
@@ -82,7 +82,7 @@
}
.time-wrapper {
- line-height: 1.4em;
+ line-height: var(--post-line-height);
}
.chat-preview-body {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 07abee27..3d3408f7 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -119,7 +119,7 @@
.notification-details {
min-width: 0;
word-wrap: break-word;
- line-height: 1.4;
+ line-height: var(--post-line-height);
position: relative;
overflow: hidden;
width: 100%;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a967d3a3..62613bd1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -394,7 +394,6 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.5em;
margin: 0;
- line-height: 1.4em;
}
.text-format {
@@ -503,17 +502,19 @@
display: flex;
flex-direction: column;
padding: 0.25em 0.5em 0.5em;
- line-height: 1.85em;
+ line-height: 1.85;
}
.form-post-body {
- box-sizing: content-box;
+ // TODO: make a resizable textarea component?
+ box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden;
transition: min-height 200ms 100ms;
- padding-bottom: calc(var(--padding) + 1.2em);
- // Because we changed box-sizing original height values are no longer correct
- height: 1.2em;
- min-height: 1.2em;
+ // stock padding + 1 line of text (for counter)
+ padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+ // two lines of text
+ height: calc(var(--post-line-height) * 1em);
+ min-height: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index f261108e..1c1ecea2 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -19,7 +19,7 @@
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
- line-height: 1.4em;
+ line-height: var(--post-line-height);
}
.summary {
@@ -33,7 +33,7 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- height: 1.4em;
+ height: 1.4;
}
}
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index ba12a246..030ce2c4 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -87,7 +87,7 @@
&-left {
padding: 1.1em 0.7em 0.7em;
- line-height: 1.4em;
+ line-height: var(--post-line-height);
box-sizing: border-box;
> div {