From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Apr 2022 19:41:09 +0300 Subject: fixed tons of stuff, at least it looks normalish on desktop --- src/components/notifications/notifications.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 2ce5d56f..9d8fa059 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -6,7 +6,7 @@
{{ $t('notifications.notifications') }} -- cgit v1.2.3-70-g09d2 From 6a319154d94c51f0464e0de31c6f88fbe20defea Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 5 Apr 2022 19:22:15 +0300 Subject: teleport bread --- src/App.js | 4 +- src/App.scss | 10 ++- src/App.vue | 9 +- src/components/mobile_nav/mobile_nav.js | 3 +- src/components/mobile_nav/mobile_nav.vue | 5 +- src/components/notifications/notifications.js | 15 +++- src/components/notifications/notifications.vue | 116 +++++++++++++------------ 7 files changed, 88 insertions(+), 74 deletions(-) (limited to 'src/components/notifications') diff --git a/src/App.js b/src/App.js index b2ec95d4..827692a6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,5 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' -import Notifications from './components/notifications/notifications.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' @@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import { windowWidth, windowHeight } from './services/window_utils/window_utils' import { mapGetters } from 'vuex' +import { defineAsyncComponent } from 'vue' export default { name: 'app', components: { UserPanel, NavPanel, - Notifications, + Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')), InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, diff --git a/src/App.scss b/src/App.scss index e32a2d36..1867a54d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,10 +64,10 @@ nav { #sidebar { grid-area: sidebar; +} - @media all and (max-width: 800px) { - display: none; - } +#notifs-column { + grid-area: notifs; } #main-scroller { @@ -177,6 +177,10 @@ nav { .underlay { display: none; } + + #sidebar { + display: none; + } } } diff --git a/src/App.vue b/src/App.vue index f87d895b..70084538 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,23 +9,21 @@ /> +
-
+
@@ -42,6 +40,7 @@
+
= scrollHeight) { diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 09680910..6c810bba 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -69,12 +69,9 @@
-
-
-
-
-
- {{ $t('notifications.notifications') }} - {{ unseenCount }} -
- - -
-
+ +
+
-
- +
+ {{ $t('notifications.notifications') }} + {{ unseenCount }} +
+ +
-
-
-
- {{ $t('notifications.no_more_notifications') }} +
+
+
+ +
- +
+
- -
-
-
+ -- cgit v1.2.3-70-g09d2 From d3d219f15d4bac88f58d4fd0fed6f798b81cca82 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 7 Apr 2022 14:37:16 +0300 Subject: fix interactions page --- src/components/notifications/notifications.js | 3 +-- src/components/notifications/notifications.vue | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 2bb8a1d1..fb2579a5 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -65,8 +65,7 @@ const Notifications = { }, noHeading () { const { layoutType } = this.$store.state.interface - console.log(layoutType) - return layoutType === 'mobile' + return this.minimalMode || layoutType === 'mobile' }, teleportTarget () { const { layoutType } = this.$store.state.interface diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index f50d3d38..bfc97dc0 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,5 +1,5 @@ @@ -106,17 +106,13 @@ export default { .NotificationFilters { align-self: stretch; - > button { + .filter-trigger-button { font-size: 1.2em; padding-left: 0.7em; padding-right: 0.2em; line-height: 100%; height: 100%; } - - .dropdown-item { - margin: 0; - } } diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index e1eb2c21..044b887d 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -95,7 +95,7 @@ line-height: 21px; overflow: auto; display: block; - padding: .5em 0.75em; + padding: 0.25em 0.75em; clear: both; font-weight: 400; text-align: inherit; diff --git a/src/panel.scss b/src/panel.scss index f3e51d39..147b17a9 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -110,8 +110,8 @@ overflow-x: hidden; } - .button-default, - .alert { + > .button-default, + > .alert { height: var(--__panel-heading-height-inner); min-height: 0; box-sizing: border-box; @@ -122,7 +122,7 @@ padding-bottom: 0; } - .button-default { + > .button-default { flex-shrink: 0; &, -- cgit v1.2.3-70-g09d2 From 85c515b3952d819b4bb983426ac562c4c00a193d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 19:57:01 +0300 Subject: more fixes for timeline headers --- src/components/notifications/notification_filters.vue | 11 +++++++---- src/components/popover/popover.vue | 2 +- src/components/timeline/timeline.vue | 2 +- src/components/timeline/timeline_quick_settings.vue | 9 ++++++--- 4 files changed, 15 insertions(+), 9 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue index 7418fc7c..d0b11a13 100644 --- a/src/components/notifications/notification_filters.vue +++ b/src/components/notifications/notification_filters.vue @@ -106,12 +106,15 @@ export default { .NotificationFilters { align-self: stretch; - .filter-trigger-button { - font-size: 1.2em; - padding-left: 0.7em; - padding-right: 0.2em; + > button { line-height: 100%; height: 100%; + width: var(--__panel-heading-height-inner); + text-align: center; + + svg { + font-size: 1.2em; + } } } diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 0350daa1..d98ca8e7 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -5,7 +5,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') 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 From c3c120e91da987ecb54c7d743b6791f904b56f4d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 22 May 2022 21:50:30 +0300 Subject: fix? --- src/components/notifications/notifications.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index d5b2d1d5..794ef51d 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -30,7 +30,7 @@ v-for="notification in notificationsToDisplay" :key="notification.id" class="notification" - :class="{"unseen": !minimalMode && !notification.seen}" + :class="{unseen: !minimalMode && !notification.seen}" >
-- cgit v1.2.3-70-g09d2