pleroma-fe

commit: 079e289260bfdf0ac8804f43b09f0c14c5338f5d
parent a96367139ca1c5716dce738c0e24300fadaeafac
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 26 Apr 2022 17:31:26 +0300

improvements and cleanup to input components

Diffstat:
M
src/App.scss
14
++++++++++----
M
src/components/chat_list_item/chat_list_item.scss
4
++--
M
src/components/notifications/notifications.scss
2
+-
M
src/components/post_status_form/post_status_form.vue
15
++++++++-------
M
src/components/status_body/status_body.scss
4
++--
M
src/components/user_reporting_modal/user_reporting_modal.vue
2
+-

6 files changed, 24 insertions(+), 17 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {