amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend changes

Browse Source
This commit is contained in:
piuvas 2024-09-22 14:35:36 -03:00
parent 1af6f8c5da
commit ec5b3c8788
No known key found for this signature in database
GPG Key ID: 82743F52454C621D
4 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/src/components/MkVisitorDashboard.vue
View File

@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div v-if="instance" :class="$style.root"> <div v-if="instance" :class="$style.root">
<div :class="[$style.main, $style.panel]"> <div :class="[$style.main, $style.panel]">
<img :src="instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/> <img v-if="instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl" alt="" :class="$style.wideIcon"/>
<img v-if="!instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/>
<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button> <button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
<div :class="$style.mainFg"> <div :class="$style.mainFg">
<h1 :class="$style.mainTitle"> <h1 :class="$style.mainTitle">
@ -126,6 +127,14 @@ function showMenu(ev: MouseEvent) {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
} }
.wideIcon {
min-width: 85px;
max-width: 60%;
margin-top: -47px;
vertical-align: bottom;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.mainMenu { .mainMenu {
position: absolute; position: absolute;
top: 16px; top: 16px;

4
packages/frontend/src/pages/about.overview.vue
View File

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"> <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
<div style="overflow: clip;"> <div style="overflow: clip;">
<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/> <img :src="instance.sidebarLogoUrl ?? instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
<div :class="$style.bannerName"> <div :class="$style.bannerName">
<b>{{ instance.name ?? host }}</b> <b>{{ instance.name ?? host }}</b>
</div> </div>
@ -160,7 +160,7 @@ const initStats = () => misskeyApi('stats', {});
.bannerIcon { .bannerIcon {
display: block; display: block;
margin: 16px auto 0 auto; margin: 16px auto 0 auto;
height: 64px; max-height: 96px;
border-radius: var(--radius-sm);; border-radius: var(--radius-sm);;
} }

11
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.top"> <div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div> <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button class="_button" :class="$style.instance" @click="openInstanceMenu"> <button class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/> <img v-if="instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl" alt="" :class="$style.wideInstanceIcon"/>
<img v-if="!instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl || instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
</div> </div>
<div :class="$style.middle"> <div :class="$style.middle">
@ -121,6 +122,14 @@ function more() {
aspect-ratio: 1; aspect-ratio: 1;
} }
.wideInstanceIcon {
display: inline-block;
min-width: 38px;
max-width: 100%;
max-height: 80px;
}
.bottom { .bottom {
position: sticky; position: sticky;
bottom: 0; bottom: 0;

11
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.top"> <div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div> <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"> <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/> <img v-if="instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl" alt="" :class="$style.wideInstanceIcon"/>
<img v-if="!instance.sidebarLogoUrl" :src="instance.sidebarLogoUrl || instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
</div> </div>
<div :class="$style.middle"> <div :class="$style.middle">
@ -183,6 +184,14 @@ function more(ev: MouseEvent) {
aspect-ratio: 1; aspect-ratio: 1;
} }
.wideInstanceIcon {
display: inline-block;
min-width: 38px;
max-width: 100%;
max-height: 80px;
}
.bottom { .bottom {
position: sticky; position: sticky;
bottom: 0; bottom: 0;