mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-26 23:43:08 +02:00
merge: Bring note style closer to Firefish (#294)
Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/294
This commit is contained in:
Marie
commit
b928446ddd
16 changed files with 89 additions and 68 deletions
|
|
@ -5,7 +5,7 @@
|
|||
-
|
||||
|
||||
### Client
|
||||
-
|
||||
- Enhance: Adjusted styling to be closer to Firefish
|
||||
|
||||
### Server
|
||||
-
|
||||
|
|
|
|||
|
|
@ -120,8 +120,8 @@ onMounted(() => {
|
|||
|
||||
.iconFrame {
|
||||
position: relative;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -986,8 +986,8 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
flex-shrink: 0;
|
||||
display: block !important;
|
||||
margin: 0 14px 0 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
position: sticky !important;
|
||||
top: calc(22px + var(--stickyTop, 0px));
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -871,8 +871,8 @@ function animatedMFM() {
|
|||
.noteHeaderAvatar {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
}
|
||||
|
||||
.noteHeaderBody {
|
||||
|
|
|
|||
|
|
@ -65,8 +65,8 @@ defineProps<{
|
|||
top: 62px;
|
||||
left: 13px;
|
||||
z-index: 2;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
border: solid 4px var(--panel);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -199,8 +199,8 @@ onMounted(() => {
|
|||
right: 0;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ async function follow() {
|
|||
top: 30px;
|
||||
left: 13px;
|
||||
z-index: 2;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
border: solid 4px var(--panel);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ const bg = {
|
|||
align-items: center;
|
||||
height: 1.5ex;
|
||||
border-radius: var(--radius-xl);
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
overflow: clip;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
.replyTo {
|
||||
opacity: 0.7;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 38px 16px;
|
||||
padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(32px + .5 * var(--avatar));
|
||||
bottom: -8px;
|
||||
border-left: var(--thread-width) solid var(--thread);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 32px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + .article {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
|
@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
|
||||
.renoteAvatar {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 8px 0 0;
|
||||
|
|
@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
display: block !important;
|
||||
position: sticky !important;
|
||||
margin: 0 14px 0 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
position: sticky !important;
|
||||
top: calc(22px + var(--stickyTop, 0px));
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="!repliesLoaded" style="padding: 16px">
|
||||
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
|
||||
</div>
|
||||
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
|
||||
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
|
||||
</div>
|
||||
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
|
||||
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
|
||||
|
|
@ -807,12 +807,11 @@ function animatedMFM() {
|
|||
}
|
||||
|
||||
.replyTo {
|
||||
opacity: 0.7;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.replyToMore {
|
||||
opacity: 0.7;
|
||||
|
||||
}
|
||||
|
||||
.renote {
|
||||
|
|
@ -879,8 +878,8 @@ function animatedMFM() {
|
|||
.noteHeaderAvatar {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
}
|
||||
|
||||
.noteHeaderBody {
|
||||
|
|
|
|||
|
|
@ -116,6 +116,8 @@ const mock = inject<boolean>('mock', false);
|
|||
.root {
|
||||
display: flex;
|
||||
cursor: auto; /* not clickToOpen-able */
|
||||
min-height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.classicRoot {
|
||||
|
|
@ -135,6 +137,7 @@ const mock = inject<boolean>('mock', false);
|
|||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-left: auto;
|
||||
margin-bottom: auto;
|
||||
padding-left: 10px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -143,10 +146,9 @@ const mock = inject<boolean>('mock', false);
|
|||
.name {
|
||||
flex-shrink: 1;
|
||||
display: block;
|
||||
// note, these margin top values were done by hand may need futher checking if it actualy aligns pixel perfect
|
||||
margin: 3px .5em 0 0;
|
||||
margin: 0 .5em 0 0;
|
||||
padding: 0;
|
||||
overflow: scroll;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
|
|
@ -192,8 +194,7 @@ const mock = inject<boolean>('mock', false);
|
|||
|
||||
.username {
|
||||
flex-shrink: 9999999;
|
||||
// note these top margins were made to align with the instance ticker
|
||||
margin: 4px .5em 0 0;
|
||||
margin: 0 .5em 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: .95em;
|
||||
|
|
|
|||
|
|
@ -426,22 +426,22 @@ if (props.detail) {
|
|||
<style lang="scss" module>
|
||||
.root {
|
||||
padding: 28px 32px;
|
||||
font-size: 0.9em;
|
||||
position: relative;
|
||||
|
||||
--reply-indent: calc(.5 * var(--avatar));
|
||||
|
||||
&.children {
|
||||
padding: 10px 0 0 16px;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
height: calc(100% - 58px); // 58px of avatar height (see SkNote)
|
||||
left: 60px;
|
||||
left: calc(32px + .5 * var(--avatar));
|
||||
// using solid instead of dotted, stylelistic choice
|
||||
border-left: 2.5px solid rgb(174, 174, 174);
|
||||
top: 86px; // 28px of .root padding, plus 58px of avatar height (see SkNote)
|
||||
border-left: var(--thread-width) solid var(--thread);
|
||||
top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
|
||||
bottom: -28px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -471,8 +471,8 @@ if (props.detail) {
|
|||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin: 0 14px 0 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
|
|
@ -521,15 +521,11 @@ if (props.detail) {
|
|||
@container (max-width: 580px) {
|
||||
.root {
|
||||
padding: 28px 26px 0;
|
||||
--avatar: 46px;
|
||||
}
|
||||
|
||||
.line {
|
||||
left: 50.5px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: calc(26px + .5 * var(--avatar));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -537,6 +533,11 @@ if (props.detail) {
|
|||
.root {
|
||||
padding: 23px 25px;
|
||||
}
|
||||
|
||||
.line {
|
||||
top: calc(23px + var(--avatar));
|
||||
left: calc(25px + .5 * var(--avatar));
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 400px) {
|
||||
|
|
@ -586,16 +587,16 @@ if (props.detail) {
|
|||
padding: 10px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
top: calc(22px + var(--avatar));
|
||||
left: calc(24px + .5 * var(--avatar));
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 450px) {
|
||||
.line {
|
||||
left: 46px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
.root {
|
||||
--avatar: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -616,19 +617,19 @@ if (props.detail) {
|
|||
.threadLine {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
border-left: 2.5px solid rgb(174, 174, 174);
|
||||
margin-left: 29px;
|
||||
border-left: var(--thread-width) solid var(--thread);
|
||||
margin-left: var(--reply-indent);
|
||||
}
|
||||
|
||||
.reply {
|
||||
margin-left: 29px;
|
||||
margin-left: var(--reply-indent);
|
||||
}
|
||||
|
||||
.reply:not(:last-child) {
|
||||
border-left: 2.5px solid rgb(174, 174, 174);
|
||||
border-left: var(--thread-width) solid var(--thread);
|
||||
|
||||
&::before {
|
||||
left: -2px;
|
||||
left: calc(-1 * var(--thread-width));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -637,10 +638,10 @@ if (props.detail) {
|
|||
content: '';
|
||||
left: 0px;
|
||||
top: -10px;
|
||||
height: 49px;
|
||||
height: calc(10px + 10px + .5 * var(--avatar));
|
||||
width: 15px;
|
||||
border-left: 2.5px solid rgb(174, 174, 174);
|
||||
border-bottom: 2.5px solid rgb(174, 174, 174);
|
||||
border-left: var(--thread-width) solid var(--thread);
|
||||
border-bottom: var(--thread-width) solid var(--thread);
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -649,7 +650,7 @@ if (props.detail) {
|
|||
padding-left: 0 !important;
|
||||
|
||||
&::before {
|
||||
left: 29px;
|
||||
left: var(--reply-indent);
|
||||
width: 0;
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,8 +177,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
.noteHeaderAvatar {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
}
|
||||
|
||||
.noteHeaderBody {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@
|
|||
--margin: var(--marginHalf);
|
||||
}
|
||||
|
||||
--avatar: 48px;
|
||||
--thread-width: 2px;
|
||||
|
||||
//--ad: rgb(255 169 0 / 10%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
panelHeaderFg: '@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
thread: ':lighten<12<@panel',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
panelHeaderFg: '@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
thread: ':darken<12<@panel',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
|
|
|
|||
Loading…
Reference in a new issue