From 19439910772ed5205edbb258b3d8a97315dde9b5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 30 Mar 2022 12:33:56 +0300 Subject: make all clickable icons into actual buttons --- src/components/notifications/notifications.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'src/components/notifications/notifications.scss') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9e5663ed..a285027d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -64,8 +64,6 @@ } .follow-request-accept { - cursor: pointer; - &:hover { color: $fallback--text; color: var(--text, $fallback--text); @@ -73,8 +71,6 @@ } .follow-request-reject { - cursor: pointer; - &:hover { color: $fallback--cRed; color: var(--cRed, $fallback--cRed); -- cgit v1.2.3-70-g09d2 From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 23:44:33 +0300 Subject: more em-sized fonts --- src/components/emoji_input/emoji_input.vue | 2 +- src/components/emoji_picker/emoji_picker.scss | 6 ++++-- src/components/link-preview/link-preview.vue | 2 +- src/components/notifications/notifications.scss | 8 ++++---- src/components/registration/registration.vue | 2 +- src/components/status/status.scss | 9 ++++----- src/components/still-image/still-image.vue | 8 ++++---- src/components/user_card/user_card.scss | 5 ++--- src/components/user_list_popover/user_list_popover.vue | 2 +- 9 files changed, 22 insertions(+), 22 deletions(-) (limited to 'src/components/notifications/notifications.scss') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index aa2950ce..7d95ab7e 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -78,7 +78,7 @@ top: 0; right: 0; margin: .2em .25em; - font-size: 16px; + font-size: 1.3em; cursor: pointer; line-height: 24px; diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 1a696584..2055e02e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -73,12 +73,13 @@ &-item { padding: 0 7px; cursor: pointer; - font-size: 24px; + font-size: 1.85em; &.disabled { opacity: 0.5; pointer-events: none; } + &.active { border-bottom: 4px solid; @@ -151,9 +152,10 @@ justify-content: left; &-title { - font-size: 12px; + font-size: 0.85em; width: 100%; margin: 0; + &.disabled { display: none; } diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index d3ca39b8..220527f2 100644 --- a/src/components/link-preview/link-preview.vue +++ b/src/components/link-preview/link-preview.vue @@ -63,7 +63,7 @@ } .card-host { - font-size: 12px; + font-size: 0.85em; } .card-description { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index a285027d..aa4ae346 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -113,13 +113,13 @@ } .emoji-reaction-emoji { - font-size: 16px; + font-size: 1.3em; } .notification-details { - min-width: 0px; + min-width: 0; word-wrap: break-word; - line-height:18px; + line-height: 1.4; position: relative; overflow: hidden; width: 100%; @@ -142,7 +142,7 @@ } .timeago { - margin-right: .2em; + margin-right: 0.2em; } .status-content { diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 1c83a47e..c3fee6f8 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -318,7 +318,7 @@ $validations-cRed: #f04124; text-align: left; span { - font-size: 12px; + font-size: 0.85em; } } diff --git a/src/components/status/status.scss b/src/components/status/status.scss index e38e2a53..36a2cca1 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -82,7 +82,6 @@ .status-username { white-space: nowrap; - font-size: 14px; overflow: hidden; max-width: 85%; font-weight: bold; @@ -160,7 +159,7 @@ & .heading-reply-row { position: relative; align-content: baseline; - font-size: 12px; + font-size: 0.85em; margin-top: 0.2em; line-height: 130%; max-width: 100%; @@ -229,7 +228,7 @@ .replies { margin-top: 0.25em; line-height: 18px; - font-size: 12px; + font-size: 0.85em; display: flex; flex-wrap: wrap; @@ -389,14 +388,14 @@ .stat-title { color: var(--faint, $fallback--faint); - font-size: 12px; + font-size: 0.85em; text-transform: uppercase; position: relative; } .stat-number { font-weight: bolder; - font-size: 16px; + font-size: 1.1em; line-height: 1em; } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index e939b532..ab3080c8 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -58,10 +58,10 @@ zoom: var(--_still_image-label-scale, 1); content: 'gif'; position: absolute; - line-height: 10px; - font-size: 10px; - top: 5px; - left: 5px; + line-height: 1; + font-size: 0.7em; + top: 0.5em; + left: 0.5em; background: rgba(127, 127, 127, 0.5); color: #fff; display: block; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 4dabafa2..44657bdf 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -189,12 +189,12 @@ overflow: hidden; flex: 1 1 auto; margin-right: 1em; - font-size: 15px; + font-size: 1.1em; } .bottom-line { font-weight: light; - font-size: 15px; + font-size: 1.1em; align-items: baseline; .lock-icon { @@ -232,7 +232,6 @@ margin-bottom: .15em; display: flex; align-items: baseline; - font-size: 14px; line-height: 22px; flex-wrap: wrap; diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index 8706d0ff..bdc3aa92 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -73,7 +73,7 @@ } .user-list-screen-name { - font-size: 9px; + font-size: 0.65em; } } } -- cgit v1.2.3-70-g09d2 From 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 23:55:34 +0300 Subject: relative units in line-height + some cleanup --- src/App.scss | 6 +++--- src/components/notifications/notifications.scss | 3 ++- src/components/password_reset/password_reset.vue | 7 ++++--- src/components/react_button/react_button.vue | 2 +- src/components/status/status.scss | 4 ++-- src/components/user_card/user_card.scss | 2 +- src/components/user_profile/user_profile.vue | 2 +- src/panel.scss | 2 +- 8 files changed, 15 insertions(+), 13 deletions(-) (limited to 'src/components/notifications/notifications.scss') diff --git a/src/App.scss b/src/App.scss index 8c59c77a..3d30ec79 100644 --- a/src/App.scss +++ b/src/App.scss @@ -457,7 +457,7 @@ textarea, display: inline-block; position: relative; height: 2em; - line-height: 16px; + line-height: 1.2; hyphens: none; padding: 8px 0.5em; @@ -508,7 +508,7 @@ textarea, background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; - line-height: 1.1em; + line-height: 1.1; font-size: 1.1em; box-sizing: border-box; color: transparent; @@ -548,7 +548,7 @@ textarea, background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; - line-height: 1.1em; + line-height: 1.1; font-size: 1.1em; box-sizing: border-box; color: transparent; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index aa4ae346..976688d1 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -155,7 +155,8 @@ margin: 0 0 0.3em; padding: 0; font-size: 1em; - line-height:20px; + line-height: 1.5; + small { font-weight: lighter; } diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue index e0579568..90673f44 100644 --- a/src/components/password_reset/password_reset.vue +++ b/src/components/password_reset/password_reset.vue @@ -91,6 +91,7 @@ flex-direction: column; margin-top: 0.6em; max-width: 18rem; + > * { min-width: 0; } @@ -100,8 +101,8 @@ display: flex; flex-direction: column; margin-bottom: 1em; - padding: 0.3em 0.0em 0.3em; - line-height: 24px; + padding: 0.3em 0; + line-height: 1.85em; } .error { @@ -113,7 +114,7 @@ .alert { padding: 0.5em; - margin: 0.3em 0.0em 1em; + margin: 0.3em 0 1em; } .password-reset-required { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index c69c315b..7f35b7b5 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -101,7 +101,7 @@ cursor: pointer; flex-basis: 20%; - line-height: 1.5em; + line-height: 1.5; align-content: center; &:hover { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 36a2cca1..b3ad3818 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -106,7 +106,7 @@ .heading-name-row { display: flex; justify-content: space-between; - line-height: 18px; + line-height: 1.3; a { display: inline-block; @@ -227,7 +227,7 @@ .replies { margin-top: 0.25em; - line-height: 18px; + line-height: 1.3; font-size: 0.85em; display: flex; flex-wrap: wrap; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 44657bdf..2e153120 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -55,7 +55,7 @@ &-bio { text-align: center; display: block; - line-height: 18px; + line-height: 1.3; padding: 1em; margin: 0; diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index f1e3cb72..67966ff4 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -176,7 +176,7 @@ } .user-profile-field-name, .user-profile-field-value { - line-height: 18px; + line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/src/panel.scss b/src/panel.scss index 637ea17c..776ed863 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -195,7 +195,7 @@ } .panel-body > p { - line-height: 18px; + line-height: 1.3; padding: 1em; margin: 0; } -- cgit v1.2.3-70-g09d2 From 2a6f42fef3ff9c087aab4589d229e0f6c1b45c90 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 25 Apr 2022 23:50:22 +0300 Subject: unified how panel-footer works between regular timelines and user timeline --- src/components/conversation/conversation.vue | 5 ++ src/components/notifications/notifications.scss | 8 ++-- src/components/notifications/notifications.vue | 2 +- src/components/timeline/timeline.js | 3 +- src/components/timeline/timeline.vue | 62 +++++++++++++------------ src/components/user_profile/user_profile.js | 6 ++- src/components/user_profile/user_profile.vue | 4 ++ 7 files changed, 53 insertions(+), 37 deletions(-) (limited to 'src/components/notifications/notifications.scss') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index c2c323c1..48e7934c 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -223,6 +223,7 @@ --text: var(--faint); color: var(--text); } + .thread-ancestor-dive-box { padding-left: var(--status-margin, $status-margin); border-bottom-width: 1px; @@ -254,6 +255,10 @@ border-bottom: none; } + &:last-child .conversation-status { + border-bottom: none; + } + .thread-ancestors + .thread-tree > .conversation-status { border-top-width: 1px; border-top-style: solid; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 976688d1..07abee27 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -11,10 +11,6 @@ color: var(--text, $fallback--text); } - .notifications-footer { - border: none; - } - .notification { position: relative; @@ -47,6 +43,10 @@ } } + &:last-child .Notification { + border-bottom: none; + } + .non-mention { display: flex; flex: 1; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index bfc97dc0..d5b2d1d5 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -36,7 +36,7 @@ -
+
-
- {{ $t('timeline.no_statuses') }} -
-
- {{ $t('timeline.no_more_statuses') }} -
- -
- -
+
+ {{ $t('timeline.no_more_statuses') }} +
+ +
+ +
+
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index eeb6ea40..f779b823 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -39,7 +39,8 @@ const UserProfile = { return { error: false, userId: null, - tab: defaultTabKey + tab: defaultTabKey, + footerRef: null } }, created () { @@ -78,6 +79,9 @@ const UserProfile = { } }, methods: { + setFooterRef (el) { + this.footerRef = el + }, load (userNameOrId) { const startFetchingTimeline = (timeline, userId) => { // Clear timeline only if load another user's profile diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 67966ff4..74d101c4 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -56,6 +56,7 @@ :user-id="userId" :pinned-status-ids="user.pinnedStatusIds" :in-profile="true" + :footerSlipgate="footerRef" />
+
Date: Tue, 26 Apr 2022 17:31:26 +0300 Subject: improvements and cleanup to input components --- src/App.scss | 14 ++++++++++---- src/components/chat_list_item/chat_list_item.scss | 4 ++-- src/components/notifications/notifications.scss | 2 +- src/components/post_status_form/post_status_form.vue | 15 ++++++++------- src/components/status_body/status_body.scss | 4 ++-- .../user_reporting_modal/user_reporting_modal.vue | 2 +- 6 files changed, 24 insertions(+), 17 deletions(-) (limited to 'src/components/notifications/notifications.scss') 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 { -- cgit v1.2.3-70-g09d2