Fix z-index, better clipping in notes
This commit is contained in:
Freeplay
parent
e04562cdc8
commit
cab146fb96
8 changed files with 93 additions and 54 deletions
|
|
@ -5,7 +5,6 @@
|
|||
class="akbvjaqn"
|
||||
:class="{ isMe }"
|
||||
:to="url"
|
||||
:style="{ background: bgCss }"
|
||||
@click.stop
|
||||
>
|
||||
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
|
||||
|
|
@ -37,7 +36,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { toUnicode } from "punycode";
|
||||
import {} from "vue";
|
||||
import tinycolor from "tinycolor2";
|
||||
import { host as localHost } from "@/config";
|
||||
import { $i } from "@/account";
|
||||
|
||||
|
|
@ -58,17 +56,11 @@ const isMe =
|
|||
`@${props.username}@${toUnicode(props.host)}` ===
|
||||
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
|
||||
|
||||
const bg = tinycolor(
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
isMe ? "--mentionMe" : "--mention"
|
||||
)
|
||||
);
|
||||
bg.setAlpha(0.1);
|
||||
const bgCss = bg.toRgbString();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.akbvjaqn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 2px 8px 2px 2px;
|
||||
margin-block: 2px;
|
||||
|
|
@ -78,8 +70,18 @@ const bgCss = bg.toRgbString();
|
|||
text-overflow: ellipsis;
|
||||
color: var(--mention);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: var(--mention);
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.isMe {
|
||||
color: var(--mentionMe);
|
||||
--mention: var(--mentionMe);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
|
|
|
|||
|
|
@ -575,6 +575,8 @@ defineExpose({
|
|||
}
|
||||
|
||||
.note-context {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 32px 0 32px;
|
||||
display: flex;
|
||||
&:first-child {
|
||||
|
|
@ -587,6 +589,8 @@ defineExpose({
|
|||
line-height: 28px;
|
||||
}
|
||||
> .line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: var(--avatarSize);
|
||||
display: flex;
|
||||
margin-right: 14px;
|
||||
|
|
@ -655,9 +659,15 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .article {
|
||||
overflow: hidden;
|
||||
padding: 4px 32px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child, &:nth-child(2) {
|
||||
margin-top: -100px;
|
||||
padding-top: 104px;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -721,7 +731,8 @@ defineExpose({
|
|||
flex-wrap: wrap;
|
||||
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
|
||||
margin-top: 0.4em;
|
||||
> .button {
|
||||
> :deep(.button) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
|
@ -730,9 +741,27 @@ defineExpose({
|
|||
width: max-content;
|
||||
min-width: max-content;
|
||||
pointer-events: all;
|
||||
height: auto;
|
||||
transition: opacity 0.2s;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
bottom: 2px;
|
||||
background: var(--panel);
|
||||
z-index: -1;
|
||||
transition: background .2s;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
&::before {
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
|
|
|
|||
|
|
@ -595,6 +595,7 @@ onUnmounted(() => {
|
|||
}
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
--panel: var(--panelHighlight);
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -395,7 +395,8 @@ function noteClick(e) {
|
|||
flex-wrap: wrap;
|
||||
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
|
||||
|
||||
> .button {
|
||||
> :deep(.button) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
|
@ -404,9 +405,27 @@ function noteClick(e) {
|
|||
width: max-content;
|
||||
min-width: max-content;
|
||||
pointer-events: all;
|
||||
height: auto;
|
||||
transition: opacity 0.2s;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
bottom: 2px;
|
||||
background: var(--panel);
|
||||
z-index: -1;
|
||||
transition: background .2s;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
&::before {
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
|
|
@ -425,9 +444,24 @@ function noteClick(e) {
|
|||
}
|
||||
}
|
||||
}
|
||||
&:first-child > .main > .body {
|
||||
margin-top: -200px;
|
||||
padding-top: 200px;
|
||||
|
||||
&.reply > .main {
|
||||
margin-inline: -200px;
|
||||
padding-inline: 200px;
|
||||
&::before {
|
||||
inset-inline: 176px !important;
|
||||
}
|
||||
}
|
||||
&.reply, &.reply-to {
|
||||
> .main > .body {
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
margin-top: -12px;
|
||||
padding-top: 12px;
|
||||
margin-left: calc(0px - var(--avatarSize) - 32px);
|
||||
padding-left: calc(var(--avatarSize) + 32px);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
&.reply {
|
||||
--avatarSize: 38px;
|
||||
|
|
@ -451,6 +485,8 @@ function noteClick(e) {
|
|||
padding-block: 10px;
|
||||
font-weight: 600;
|
||||
> .line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-grow: 0 !important;
|
||||
margin-top: -10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
|
|
@ -520,6 +556,7 @@ function noteClick(e) {
|
|||
}
|
||||
.line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: var(--avatarSize);
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
|
@ -562,6 +599,7 @@ function noteClick(e) {
|
|||
position: relative;
|
||||
> .line {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
v-if="canRenote"
|
||||
ref="buttonRef"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.renote"
|
||||
class="eddddedb _button canRenote"
|
||||
class="button _button canRenote"
|
||||
@click="renote(false, $event)"
|
||||
>
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
|
|
@ -248,25 +248,12 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.eddddedb {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: 2px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
|
||||
.button {
|
||||
&:not(.canRenote) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.renoted {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
> .count {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<button
|
||||
v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
|
||||
class="skdfgljsdkf _button"
|
||||
class="button _button"
|
||||
@click="star($event)"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -70,12 +70,3 @@ function star(ev?: MouseEvent): void {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skdfgljsdkf {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: 2px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<button
|
||||
v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
|
||||
class="_button"
|
||||
class="button _button"
|
||||
:class="$style.root"
|
||||
ref="buttonRef"
|
||||
@click="toggleStar($event)"
|
||||
|
|
@ -110,13 +110,6 @@ useTooltip(buttonRef, async (showing) => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: 2px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
|
@ -124,10 +117,4 @@ useTooltip(buttonRef, async (showing) => {
|
|||
.red {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.count {
|
||||
display: inline;
|
||||
margin: 0 0 0 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -243,6 +243,10 @@ function focusFooter(ev) {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(a) {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.reply-icon {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue