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

enhance(client): use container queries if available to improve perf

Browse source
This commit is contained in:
syuilo 2022-12-26 08:40:13 +09:00
parent af649b0480
commit c95da27019
20 changed files with 420 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/client/src/components/MkContainer.vue
View file

@ -246,6 +246,17 @@ export default defineComponent({
}
}
@container (max-width: 380px) {
.ukygtjoj {
> header {
> .title {
padding: 8px 10px;
font-size: 0.9em;
}
}
}
}
._forceContainerFull_ .ukygtjoj {
> header {
> .title {

2
packages/client/src/components/MkDateSeparatedList.vue
View file

@ -108,6 +108,8 @@ export default defineComponent({
<style lang="scss">
.sqadhkmv {
container-type: inline-size;
> *:empty {
display: none;
}

18
packages/client/src/components/MkNote.vue
View file

@ -433,6 +433,8 @@ function readPromo() {
min-width: 0;
> .body {
container-type: inline-size;
> .cw {
cursor: default;
display: block;
@ -573,8 +575,10 @@ function readPromo() {
> .reply {
border-top: solid 0.5px var(--divider);
}
}
&.max-width_500px {
@container (max-width: 500px) {
.tkcbzcuz {
font-size: 0.9em;
> .article {
@ -584,8 +588,10 @@ function readPromo() {
}
}
}
}
&.max-width_450px {
@container (max-width: 450px) {
.tkcbzcuz {
> .renote {
padding: 8px 16px 0 16px;
}
@ -605,8 +611,10 @@ function readPromo() {
}
}
}
}
&.max-width_350px {
@container (max-width: 350px) {
.tkcbzcuz {
> .article {
> .main {
> .footer {
@ -619,8 +627,10 @@ function readPromo() {
}
}
}
}
&.max-width_300px {
@container (max-width: 300px) {
.tkcbzcuz {
> .article {
> .avatar {
width: 44px;

68
packages/client/src/components/MkNoteDetailed.vue
View file

@ -444,6 +444,8 @@ if (appearNote.replyId) {
> .main {
> .body {
container-type: inline-size;
> .cw {
cursor: default;
display: block;
@ -601,6 +603,72 @@ if (appearNote.replyId) {
}
}
@container (max-width: 500px) {
.lxwezrsl {
font-size: 0.9em;
}
}
@container (max-width: 450px) {
.lxwezrsl {
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 16px;
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
}
}
}
@container (max-width: 350px) {
.lxwezrsl {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
}
}
}
@container (max-width: 300px) {
.lxwezrsl {
font-size: 0.825em;
> .article {
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
.muted {
padding: 8px;
text-align: center;

20
packages/client/src/components/MkNotePreview.vue
View file

@ -89,4 +89,24 @@ const props = defineProps<{
}
}
}
@container (min-width: 350px) {
.fefdfafb {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
}
@container (min-width: 500px) {
.fefdfafb {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
}
</style>

20
packages/client/src/components/MkNoteSimple.vue
View file

@ -96,4 +96,24 @@ const showContent = $ref(false);
}
}
}
@container (min-width: 350px) {
.yohlumlk {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
}
@container (min-width: 500px) {
.yohlumlk {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
}
</style>

10
packages/client/src/components/MkNoteSub.vue
View file

@ -127,4 +127,14 @@ if (props.detail) {
padding: 10px 0 0 16px;
}
}
@container (max-width: 450px) {
.wrpstxzv {
padding: 14px 16px;
&.children {
padding: 10px 0 0 8px;
}
}
}
</style>

14
packages/client/src/components/MkNotification.vue
View file

@ -306,4 +306,18 @@ useTooltip(reactionRef, (showing) => {
}
}
}
@container (max-width: 600px) {
.qglefbjs {
padding: 16px;
font-size: 0.9em;
}
}
@container (max-width: 500px) {
.qglefbjs {
padding: 12px;
font-size: 0.85em;
}
}
</style>

57
packages/client/src/components/MkPostForm.vue
View file

@ -990,4 +990,61 @@ onMounted(() => {
}
}
}
@container (max-width: 500px) {
.gafaadew {
> header {
height: 50px;
> .cancel {
width: 50px;
line-height: 50px;
}
> .right {
> .text-count {
line-height: 50px;
}
> .submit {
margin: 8px;
}
}
}
> .form {
> .to-specified {
padding: 6px 16px;
}
> .cw,
> .hashtags,
> .text {
padding: 0 16px;
}
> .text {
min-height: 80px;
}
> footer {
padding: 0 8px 8px 8px;
}
}
}
}
@container (max-width: 310px) {
.gafaadew {
> .form {
> footer {
> button {
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
}
}
</style>

67
packages/client/src/components/MkUrlPreview.vue
View file

@ -313,4 +313,71 @@ onUnmounted(() => {
}
}
}
@container (max-width: 400px) {
.mk-url-preview {
> .link {
font-size: 12px;
> .thumbnail {
height: 80px;
}
> article {
padding: 12px;
}
}
}
}
@container (max-width: 350px) {
.mk-url-preview {
> .link {
font-size: 10px;
> .thumbnail {
height: 70px;
}
> article {
padding: 8px;
> header {
margin-bottom: 4px;
}
> footer {
margin-top: 4px;
> img {
width: 12px;
height: 12px;
}
}
}
&.compact {
> .thumbnail {
position: absolute;
width: 56px;
height: 100%;
}
> article {
left: 56px;
width: calc(100% - 56px);
padding: 4px;
> header {
margin-bottom: 2px;
}
> footer {
margin-top: 2px;
}
}
}
}
}
}
</style>

2
packages/client/src/components/MkWidgets.vue
View file

@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
<style lang="scss" scoped>
.vjoppmmu {
container-type: inline-size;
> header {
margin: 16px 0;

1
packages/client/src/components/global/MkSpacer.vue
View file

@ -72,5 +72,6 @@ onUnmounted(() => {
.content {
margin: 0 auto;
container-type: inline-size;
}
</style>