From 48f106b438e22d8289904c9f474819ad7b85d0e8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Feb 2024 19:17:17 +0200 Subject: separate greentext into "fun text" and make Post/Notification related components --- src/components/notification/notification.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components/notification/notification.scss') diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 654aca3c..86d3e31d 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -3,8 +3,7 @@ // TODO Copypaste from Status, should unify it somehow .Notification { border-bottom: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); + border-color: var(--border); word-wrap: break-word; word-break: break-word; -- cgit v1.2.3-70-g09d2 From 9a24d21bbdd77db808c09b7b5cad632bebbe2f13 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 27 Feb 2024 00:16:22 +0200 Subject: fix mobile badge in timeline --- src/App.scss | 22 +++++++++++++++++++--- src/components/notification/notification.scss | 18 +++++------------- src/components/timeline/timeline.vue | 2 +- 3 files changed, 25 insertions(+), 17 deletions(-) (limited to 'src/components/notification/notification.scss') diff --git a/src/App.scss b/src/App.scss index b9aded41..f94583c9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -620,22 +620,38 @@ option { overflow: hidden; text-overflow: ellipsis; + &.-dot, + &.-counter { + margin: 0; + position: absolute; + } + &.-dot { - border-radius: 100%; min-height: 8px; max-height: 8px; min-width: 8px; max-width: 8px; padding: 0; line-height: 0; - margin: 0; font-size: 0; - position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); margin-left: 6px; margin-top: -6px; } + + &.-counter { + border-radius: var(--roundness); + font-size: 0.75em; + line-height: 1; + text-align: right; + padding: 0.2em; + min-width: 0; + left: calc(50% - 0.5em); + top: calc(50% - 0.4em); + margin-left: 0.7em; + margin-top: -1em; + } } .alert { diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 86d3e31d..ad05a2f3 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -1,5 +1,3 @@ -@import "../../variables"; - // TODO Copypaste from Status, should unify it somehow .Notification { border-bottom: 1px solid; @@ -70,28 +68,22 @@ } &.-type--repeat .type-icon { - color: $fallback--cGreen; - color: var(--cGreen, $fallback--cGreen); + color: var(--cGreen); } &.-type--follow .type-icon { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); + color: var(--cBlue); } &.-type--follow-request .type-icon { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); + color: var(--cBlue); } &.-type--like .type-icon { - color: orange; - color: $fallback--cOrange; - color: var(--cOrange, $fallback--cOrange); + color: var(--cOrange); } &.-type--move .type-icon { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); + color: var(--cBlue); } } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 2279f21a..862a1972 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -38,7 +38,7 @@ fixed-width icon="circle-plus" /> -
+
{{ mobileLoadButtonString }}
-- cgit v1.2.3-70-g09d2 From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 18:24:29 +0200 Subject: panels/statuses are looking really good now even with transparency --- src/components/conversation/conversation.vue | 12 ++-- src/components/notification/notification.scss | 5 ++ src/components/panel.style.js | 1 + src/components/panel_header.style.js | 1 + src/components/status/post.style.js | 6 +- src/components/timeline/timeline.scss | 4 ++ src/components/user_card/user_card.scss | 8 --- src/components/user_card/user_card.vue | 5 +- src/components/user_panel/user_panel.vue | 13 +++- src/components/user_profile/user_profile.vue | 96 +++++++++++++++------------ src/panel.scss | 10 +++ src/services/theme_data/theme2_to_theme3.js | 3 + 12 files changed, 97 insertions(+), 67 deletions(-) (limited to 'src/components/notification/notification.scss') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 64aa1351..d3ebf791 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -28,7 +28,10 @@ class="rightside-button" />
-
+
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index ad05a2f3..2dbced09 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -5,6 +5,11 @@ word-wrap: break-word; word-break: break-word; + &.Status { + /* stylelint-disable-next-line declaration-no-important */ + background-color: transparent !important; + } + --emoji-size: 14px; &:hover { diff --git a/src/components/panel.style.js b/src/components/panel.style.js index d7459549..ad16c18f 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -23,6 +23,7 @@ export default { defaultRules: [ { directives: { + backgroundNoCssColor: 'yes', background: '--bg', roundness: 3, blur: '5px', diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js index 56879fba..32464bc5 100644 --- a/src/components/panel_header.style.js +++ b/src/components/panel_header.style.js @@ -15,6 +15,7 @@ export default { { component: 'PanelHeader', directives: { + backgroundNoCssColor: 'yes', background: '--fg', shadow: [] } diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js index 673f72e0..8dce527e 100644 --- a/src/components/status/post.style.js +++ b/src/components/status/post.style.js @@ -20,15 +20,13 @@ export default { defaultRules: [ { directives: { - background: '--bg', - opacity: 0 + background: '--bg' } }, { state: ['selected'], directives: { - background: '--inheritedBackground, 10', - opacity: 1 + background: '--inheritedBackground, 10' } } ] diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss index 7f886dc3..fccf28f4 100644 --- a/src/components/timeline/timeline.scss +++ b/src/components/timeline/timeline.scss @@ -1,6 +1,10 @@ @import "../../variables"; .Timeline { + .timeline-body { + background: none; + } + .alert-badge { font-size: 0.75em; line-height: 1; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 6dba3499..bf0ed5c2 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -21,14 +21,6 @@ position: relative; } - .panel-body { - word-wrap: break-word; - border-bottom-right-radius: inherit; - border-bottom-left-radius: inherit; - // create new stacking context - position: relative; - } - .background-image { position: absolute; top: 0; diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 0f627f62..70c4f67d 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -282,10 +282,7 @@ />
-
+
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 011f32da..2d8b33e7 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -4,52 +4,54 @@ v-if="user" class="user-profile panel panel-default" > - - - + - {{ $t('user_card.birthday', { birthday: formattedBirthday }) }} - -
-
+
{{ error }} diff --git a/src/panel.scss b/src/panel.scss index 5df9fee4..08339765 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -1,5 +1,8 @@ /* stylelint-disable no-descending-specificity */ .panel { + --__panel-background: var(--background); + --__panel-backdrop-filter: var(--backdrop-filter); + position: relative; display: flex; flex-direction: column; @@ -28,6 +31,8 @@ .panel-body { padding: var(--panel-body-padding, 0); + background: var(--background); + backdrop-filter: var(--__panel-backdrop-filter); &:empty::before { content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations @@ -50,6 +55,7 @@ --__panel-heading-height: 3.2em; --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0)); + backdrop-filter: var(--__panel-backdrop-filter); position: relative; box-sizing: border-box; display: grid; @@ -131,6 +137,9 @@ border-radius: var(--roundness) var(--roundness) 0 0; border-width: 0 0 1px; align-items: start; + background-image: + linear-gradient(to bottom, var(--background), var(--background)), + linear-gradient(to bottom, var(--__panel-background), var(--__panel-background)); &::after { background-color: var(--background); @@ -186,5 +195,6 @@ border-width: 1px 0 0; border-style: solid; border-color: var(--border); + background-color: var(--__panel-background); } /* stylelint-enable no-descending-specificity */ diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 8c623c69..75c82314 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => { newRules.push({ ...rule, component: 'Tab' }) newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } }) } + if (rule.component === 'Panel') { + newRules.push({ ...rule, component: 'Post' }) + } }) return newRules } -- cgit v1.2.3-70-g09d2