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

upd: add option to select between note designs

Browse source 
Adds the ability to choose between `Sharkey` or `Misskey`
This commit is contained in:
Mar0xy 2023-12-02 13:09:25 +01:00
parent 1c75339471
commit f0fe8eceaf
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
16 changed files with 3404 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,12 +5,11 @@ 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" :classic="true" :mini="true"/>
<MkNoteHeader :class="$style.header" :note="note" :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'"/>
@ -107,7 +106,6 @@ 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;
@ -363,7 +361,7 @@ if (props.detail) {
<style lang="scss" module>
.root {
padding: 28px 32px;
padding: 16px 32px;
font-size: 0.9em;
position: relative;
@ -373,20 +371,12 @@ 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 {
@ -406,9 +396,9 @@ if (props.detail) {
.avatar {
flex-shrink: 0;
display: block;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
margin: 0 8px 0 0;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
}
@ -421,11 +411,6 @@ if (props.detail) {
overflow: hidden;
}
.text {
margin: 0;
padding: 0;
}
.header {
margin-bottom: 2px;
}
@ -445,36 +430,6 @@ 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) {
@ -514,9 +469,9 @@ if (props.detail) {
padding: 10px 0 0 16px;
}
@container (max-width: 480px) {
@container (max-width: 450px) {
.root {
padding: 22px 24px;
padding: 14px 16px;
&.children {
padding: 10px 0 0 8px;
@ -524,17 +479,6 @@ if (props.detail) {
}
}
@container (max-width: 450px) {
.line {
left: 46px;
}
.avatar {
width: 46px;
height: 46px;
}
}
.muted {
text-align: center;
padding: 8px !important;