Merge branch 'misskey-develop' into merge/2025-03-24
# Conflicts: # .github/workflows/api-misskey-js.yml # .github/workflows/changelog-check.yml # .github/workflows/check-misskey-js-autogen.yml # .github/workflows/get-api-diff.yml # .github/workflows/lint.yml # .github/workflows/locale.yml # .github/workflows/on-release-created.yml # .github/workflows/storybook.yml # .github/workflows/test-backend.yml # .github/workflows/test-federation.yml # .github/workflows/test-frontend.yml # .github/workflows/test-misskey-js.yml # .github/workflows/test-production.yml # .github/workflows/validate-api-json.yml # package.json # packages/backend/package.json # packages/backend/src/server/api/ApiCallService.ts # packages/backend/src/server/api/endpoints/drive/files/create.ts # packages/frontend-shared/js/url.ts # packages/frontend/package.json # packages/frontend/src/components/MkFileCaptionEditWindow.vue # packages/frontend/src/components/MkInfo.vue # packages/frontend/src/components/MkLink.vue # packages/frontend/src/components/MkNote.vue # packages/frontend/src/components/MkNotes.vue # packages/frontend/src/components/MkPageWindow.vue # packages/frontend/src/components/MkReactionsViewer.vue # packages/frontend/src/components/MkTimeline.vue # packages/frontend/src/components/MkUrlPreview.vue # packages/frontend/src/components/MkUserPopup.vue # packages/frontend/src/components/global/MkPageHeader.vue # packages/frontend/src/components/global/MkUrl.vue # packages/frontend/src/components/global/PageWithHeader.vue # packages/frontend/src/pages/about-misskey.vue # packages/frontend/src/pages/announcements.vue # packages/frontend/src/pages/antenna-timeline.vue # packages/frontend/src/pages/channel.vue # packages/frontend/src/pages/instance-info.vue # packages/frontend/src/pages/note.vue # packages/frontend/src/pages/page.vue # packages/frontend/src/pages/role.vue # packages/frontend/src/pages/tag.vue # packages/frontend/src/pages/timeline.vue # packages/frontend/src/pages/user-list-timeline.vue # packages/frontend/src/pages/user/followers.vue # packages/frontend/src/pages/user/following.vue # packages/frontend/src/pages/user/home.vue # packages/frontend/src/pages/user/index.vue # packages/frontend/src/ui/deck.vue # packages/misskey-js/generator/package.json # pnpm-lock.yaml # scripts/changelog-checker/package-lock.json # scripts/changelog-checker/package.json
This commit is contained in:
Hazelnoot
@@ -421,7 +421,7 @@ function getPointerEvents() {
|
||||
|
||||
#devTicker {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2147483647;
|
||||
color: #ff0;
|
||||
|
||||
@@ -79,10 +79,9 @@ watch(rootEl, () => {
|
||||
.root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--MI_THEME-navBg);
|
||||
@@ -91,6 +90,16 @@ watch(rootEl, () => {
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 12px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.post {
|
||||
.itemInner {
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
@@ -112,7 +121,7 @@ watch(rootEl, () => {
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
max-width: 45px;
|
||||
max-width: 42px;
|
||||
margin: auto;
|
||||
align-content: center;
|
||||
border-radius: 100%;
|
||||
|
||||
@@ -121,6 +121,7 @@ function more() {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.wideInstanceIcon {
|
||||
|
||||
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
|
||||
<div :class="$style.body">
|
||||
<div :class="$style.top">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
|
||||
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
|
||||
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
|
||||
</button>
|
||||
@@ -183,12 +182,9 @@ function menuEdit() {
|
||||
}
|
||||
|
||||
.body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
position: relative;
|
||||
width: var(--nav-icon-only-width);
|
||||
height: 100dvh;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
@@ -303,18 +299,6 @@ function menuEdit() {
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
|
||||
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
|
||||
}
|
||||
|
||||
.instance {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -335,6 +319,7 @@ function menuEdit() {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.wideInstanceIcon {
|
||||
@@ -566,6 +551,7 @@ function menuEdit() {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.title">
|
||||
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
|
||||
<span :class="$style.instanceTitle">{{ instance.name ?? host }}</span>
|
||||
</div>
|
||||
<div :class="$style.controls">
|
||||
<span :class="$style.left">
|
||||
<button v-if="canBack" class="_button" :class="$style.button" @click="goBack"><i class="ti ti-arrow-left"></i></button>
|
||||
</span>
|
||||
<span :class="$style.right">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { host } from '@@/js/config.js';
|
||||
import { ref } from 'vue';
|
||||
import { instance } from '@/instance.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const canBack = ref(true);
|
||||
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--height: 36px;
|
||||
|
||||
background: var(--MI_THEME-navBg);
|
||||
height: var(--height);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.instanceIcon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 5px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.instanceTitle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user