Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upd: rework threading/post ui 1/2

Browse source 
Co-authored-by: Gaspard Wierzbinski <contact@cpluspatch.com>
Co-authored-by: Marie <marie@kaifa.ch>
This commit is contained in:
Insert5StarName 2023-12-02 01:39:29 +01:00
parent ad5a6c1e41
commit 1a4bff7698
8 changed files with 327 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

80
packages/frontend/src/components/MkNoteSub.vue
View file

@ -5,11 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<div :class="$style.body">
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<MkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
<div :class="$style.content">
<p v-if="note.cw != null" :class="$style.cw">
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'"/>
@ -106,6 +107,7 @@ import { getNoteMenu } from '@/scripts/get-note-menu.js';
import { useNoteCapture } from '@/scripts/use-note-capture.js';
const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
const hideLine = computed(() => { return props.detail ? true : false; });
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -361,7 +363,7 @@ if (props.detail) {
<style lang="scss" module>
.root {
padding: 16px 32px;
padding: 28px 32px;
font-size: 0.9em;
position: relative;
@ -371,12 +373,20 @@ if (props.detail) {
}
}
.line {
position: absolute;
height: 100%;
left: 60px;
// using solid instead of dotted, stylelistic choice
border-left: 2.5px solid rgb(174, 174, 174);
}
.footer {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
}
.main {
@ -396,9 +406,9 @@ if (props.detail) {
.avatar {
flex-shrink: 0;
display: block;
margin: 0 8px 0 0;
width: 38px;
height: 38px;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
border-radius: var(--radius-sm);
}
@ -411,6 +421,11 @@ if (props.detail) {
overflow: hidden;
}
.text {
margin: 0;
padding: 0;
}
.header {
margin-bottom: 2px;
}
@ -430,6 +445,36 @@ if (props.detail) {
}
}
.reply, .more {
border-left: solid 0.5px var(--divider);
margin-top: 10px;
}
.more {
padding: 10px 0 0 16px;
}
@container (max-width: 580px) {
.root {
padding: 28px 26px 0;
}
.line {
left: 50.5px;
}
.avatar {
width: 50px;
height: 50px;
}
}
@container (max-width: 500px) {
.root {
padding: 23px 25px;
}
}
@container (max-width: 400px) {
.noteFooterButton {
&:not(:last-child) {
@ -469,9 +514,9 @@ if (props.detail) {
padding: 10px 0 0 16px;
}
@container (max-width: 450px) {
@container (max-width: 480px) {
.root {
padding: 14px 16px;
padding: 22px 24px;
&.children {
padding: 10px 0 0 8px;
@ -479,6 +524,17 @@ if (props.detail) {
}
}
@container (max-width: 450px) {
.line {
left: 46px;
}
.avatar {
width: 46px;
height: 46px;
}
}
.muted {
text-align: center;
padding: 8px !important;