natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes!!

This commit is contained in:
Freeplay 2023-05-22 15:20:05 -04:00
parent f4e4dd6b5e
commit 9f360606a0
1 changed files with 129 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
packages/client/src/components/global/MkPageHeader.vue
View File

@ -3,27 +3,28 @@
v-if="show" v-if="show"
ref="el" ref="el"
class="fdidabkb" class="fdidabkb"
:class="{ slim: narrow, thin: thin_ }" :class="{ thin: thin_ }"
:style="{ background: bg }" :style="{ background: bg }"
@click="onClick" @click="onClick"
> >
<div class="left"> <div class="left">
<button <div class="buttons">
v-if="props.displayBackButton" <button
class="_button button icon backButton" v-if="props.displayBackButton"
@click.stop="goBack()" class="_button button icon backButton"
@touchstart="preventDrag" @click.stop="goBack()"
v-tooltip.noDelay="i18n.ts.goBack" @touchstart="preventDrag"
> v-tooltip.noDelay="i18n.ts.goBack"
<i class="ph-caret-left ph-bold ph-lg"></i> >
</button> <i class="ph-caret-left ph-bold ph-lg"></i>
<div v-if="narrow" class="buttons left" @click="openAccountMenu"> </button>
<MkAvatar <MkAvatar
v-if="props.displayMyAvatar && $i" v-if="narrow && props.displayMyAvatar && $i"
class="avatar" class="avatar button"
:user="$i" :user="$i"
:disable-preview="true" :disable-preview="true"
disableLink disableLink
@click.stop="openAccountMenu"
/> />
</div> </div>
<div <div
@ -92,11 +93,13 @@
v-if="narrow" v-if="narrow"
:user="metadata.avatar" :user="metadata.avatar"
:full="false" :full="false"
class="fullButton"
></MkFollowButton> ></MkFollowButton>
<MkFollowButton <MkFollowButton
v-else v-else
:user="metadata.avatar" :user="metadata.avatar"
:full="true" :full="true"
class="fullButton"
></MkFollowButton> ></MkFollowButton>
</template> </template>
<template v-for="action in actions"> <template v-for="action in actions">
@ -295,10 +298,26 @@ onUnmounted(() => {
.fdidabkb { .fdidabkb {
--height: 55px; --height: 55px;
display: flex; display: flex;
justify-content: space-between;
width: 100%; width: 100%;
height: var(--height); height: var(--height);
max-width: 850px; padding-inline: 24px;
margin: auto; box-sizing: border-box;
overflow: hidden;
@media (max-width: 500px) {
padding-inline: 12px;
> .left {
// flex-basis: unset !important;
min-width: max-content !important;
}
.titleContainer {
min-width: 0;
}
.buttons:empty {
width: 0;
flex-basis: 0;
}
}
&::before { &::before {
content: ""; content: "";
@ -328,87 +347,33 @@ onUnmounted(() => {
} }
} }
&.slim {
> .left > .titleContainer {
flex: 1;
margin: 0 auto;
> *:first-child {
margin-left: auto;
}
> *:last-child {
margin-right: auto;
}
}
> .tabs {
padding-inline: 12px;
mask: linear-gradient(
to right,
transparent,
black 10px 80%,
transparent
);
-webkit-mask: linear-gradient(
to right,
transparent,
black 10px 80%,
transparent
);
margin-left: -10px;
padding-left: 22px;
scrollbar-width: none;
&::before {
content: unset;
}
&::-webkit-scrollbar {
display: none;
}
&::after {
// Force right padding
content: "";
display: inline-block;
min-width: 20%;
}
}
}
> .left { > .left {
display: flex; display: flex;
> .buttons { > .buttons {
margin-right: auto; &:not(:empty) {
margin-left: calc(0px - var(--margin));
}
> .avatar { > .avatar {
$size: 32px; width: 32px;
display: inline-block; height: 32px;
width: $size;
height: $size;
vertical-align: bottom;
margin: 0 8px;
pointer-events: none;
} }
} }
} }
> .buttons { .buttons {
--margin: 8px; --margin: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--height); height: var(--height);
margin: 0 var(--margin);
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; // margin-right: calc(0px - var(--margin));
:deep(.follow-button) { // margin-left: var(--margin);
margin-right: 6px; > .button:last-child {
margin-right: calc(0px - var(--margin));
} }
} }
&:empty {
display: none;
}
> .button/*, @at-root .backButton*/ { > .button/*, @at-root .backButton*/ {
/* I don't know how to get this to work */ /* I don't know how to get this to work */
display: flex; display: flex;
@ -436,71 +401,81 @@ onUnmounted(() => {
} }
} }
> .backButton { > .left {
display: flex; > .backButton {
align-items: center; display: flex;
justify-content: center; align-items: center;
margin-left: 1rem; justify-content: center;
}
> .left > .titleContainer {
display: flex;
align-items: center;
max-width: 400px;
overflow: auto;
white-space: nowrap;
text-align: left;
font-weight: bold;
flex-shrink: 0;
margin-left: 24px;
margin-right: 1rem;
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: bottom;
margin: 0 8px;
pointer-events: none;
} }
> .titleContainer {
> .icon { display: flex;
margin-right: 8px; align-items: center;
width: 16px; max-width: 400px;
text-align: center; overflow: auto;
transform: translate(0em);
}
> .title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 1.1; text-align: left;
font-weight: bold;
flex-shrink: 0;
margin-right: 1rem;
max-width: 20vw;
> .subtitle { > .avatar {
opacity: 0.6; $size: 32px;
font-size: 0.8em; display: inline-block;
font-weight: normal; width: $size;
white-space: nowrap; height: $size;
vertical-align: bottom;
margin: 0 8px;
pointer-events: none;
}
> .icon {
margin-right: 8px;
width: 16px;
text-align: center;
}
> .title {
min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.1;
&.activeTab { > .subtitle {
text-align: center; opacity: 0.6;
font-size: 0.8em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> .chevron { &.activeTab {
display: inline-block; text-align: center;
margin-left: 6px;
> .chevron {
display: inline-block;
margin-left: 6px;
}
} }
} }
} }
} }
} }
> .buttons, > .left {
width: 20%; > .left, > .right {
flex-basis: 100%;
flex-shrink: 9999;
}
> .left {
// margin-right: auto;
min-width: 20%;
// min-width: max-content;
}
> .right {
// margin-left: auto;
min-width: max-content;
} }
> .tabs { > .tabs {
@ -508,31 +483,35 @@ onUnmounted(() => {
font-size: 1em; font-size: 1em;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
contain: strict; contain: content;
display: flex; display: flex;
flex-grow: 1; padding-inline: 20px;
justify-content: center; margin-inline: -20px;
mask: linear-gradient(
to right,
transparent,
black 20px calc(100% - 20px),
transparent
);
-webkit-mask: linear-gradient(
to right,
transparent,
black 20px calc(100% - 20px),
transparent
);
scrollbar-width: none;
&.collapse { &.collapse {
--width: 38px; --width: 38px;
> .tab { > .tab {
width: 38px; width: 38px;
min-width: unset !important; min-width: 38px !important;
&:not(.active) > .title { &:not(.active) > .title {
opacity: 0; opacity: 0;
} }
} }
} }
// &::before {
// content: "";
// display: inline-block;
// height: 40%;
// border-left: 1px solid var(--divider);
// margin-right: 1em;
// margin-left: 10px;
// vertical-align: -1px;
// }
> .tab { > .tab {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -543,7 +522,7 @@ onUnmounted(() => {
font-weight: normal; font-weight: normal;
opacity: 0.7; opacity: 0.7;
overflow: hidden; overflow: hidden;
transition: color 0.2s, opacity 0.2s, width 0.2s; transition: color 0.2s, opacity 0.2s, width 0.2s, min-width .2s;
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -554,6 +533,7 @@ onUnmounted(() => {
color: var(--accent); color: var(--accent);
font-weight: 600; font-weight: 600;
width: var(--width); width: var(--width);
min-width: var(--width) !important;
} }
> .icon + .title { > .icon + .title {