HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

both logo & icon + wallpaper

Browse source
This commit is contained in:
Freeplay 2023-06-16 19:17:50 -04:00
parent f23d702119
commit 2822b82e99
3 changed files with 142 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
packages/client/src/pages/welcome.entrance.a.vue
View file

@ -8,107 +8,109 @@
:noTabCollapse="true" :noTabCollapse="true"
:displayHomeButton="false" :displayHomeButton="false"
/></template> /></template>
<swiper <div id="visitor-view">
id="visitor-view" <swiper
:round-lengths="true" class="swiper"
:touch-angle="25" :round-lengths="true"
:threshold="10" :touch-angle="25"
:centeredSlides="true" :threshold="10"
:space-between="20" :centeredSlides="true"
:allow-touch-move=" :space-between="20"
!( :allow-touch-move="
deviceKind === 'desktop' && !(
!defaultStore.state.swipeOnDesktop deviceKind === 'desktop' &&
) !defaultStore.state.swipeOnDesktop
" )
:set-wrapper-size="true" "
@swiper="setSwiperRef" :set-wrapper-size="true"
@slide-change="onSlideChange" @swiper="setSwiperRef"
> @slide-change="onSlideChange"
<swiper-slide v-slot="{ isActive }"> >
<XKanban v-if="isActive" /> <swiper-slide v-slot="{ isActive }">
</swiper-slide> <XKanban v-if="isActive" />
<swiper-slide v-slot="{ isActive }"> </swiper-slide>
<MkSpacer :content-max="800" v-if="isActive"> <swiper-slide v-slot="{ isActive }">
<XNotes :pagination="paginationForLocal" /> <MkSpacer :content-max="800" v-if="isActive">
</MkSpacer> <XNotes :pagination="paginationForLocal" />
</swiper-slide> </MkSpacer>
<swiper-slide v-slot="{ isActive }"> </swiper-slide>
<MkSpacer :content-max="800" v-if="isActive"> <swiper-slide v-slot="{ isActive }">
<XNotes :pagination="paginationForRemote" /> <MkSpacer :content-max="800" v-if="isActive">
</MkSpacer> <XNotes :pagination="paginationForRemote" />
</swiper-slide> </MkSpacer>
<swiper-slide v-slot="{ isActive }"> </swiper-slide>
<MkSpacer :content-max="800" v-if="isActive"> <swiper-slide v-slot="{ isActive }">
<XChannelList <MkSpacer :content-max="800" v-if="isActive">
key="featured" <XChannelList
:pagination="featuredPagination" key="featured"
/> :pagination="featuredPagination"
</MkSpacer>
</swiper-slide>
<swiper-slide v-slot="{ isActive }">
<MkSpacer :content-max="800" v-if="isActive">
<MkPagination
v-slot="{ items }"
:pagination="featuredPagesPagination"
>
<MkPagePreview
v-for="page in items"
:key="page.id"
class="ckltabjg"
:page="page"
/> />
</MkPagination> </MkSpacer>
</MkSpacer> </swiper-slide>
</swiper-slide> <swiper-slide v-slot="{ isActive }">
<swiper-slide v-slot="{ isActive }"> <MkSpacer :content-max="800" v-if="isActive">
<MkSpacer :content-max="1200" v-if="isActive">
<MkFolder class="_gap">
<template #header
><i class="ph-clock ph-bold ph-lg"></i>
{{ i18n.ts.recentPosts }}</template
>
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="recentPostsPagination" :pagination="featuredPagesPagination"
:disable-auto-load="true"
> >
<div class="vfpdbgtk"> <MkPagePreview
<MkGalleryPostPreview v-for="page in items"
v-for="post in items" :key="page.id"
:key="post.id" class="ckltabjg"
:post="post" :page="page"
class="post" />
/>
</div>
</MkPagination> </MkPagination>
</MkFolder> </MkSpacer>
<MkFolder class="_gap"> </swiper-slide>
<template #header <swiper-slide v-slot="{ isActive }">
><i class="ph-fire-simple ph-bold ph-lg"></i> <MkSpacer :content-max="1200" v-if="isActive">
{{ i18n.ts.popularPosts }}</template <MkFolder class="_gap">
> <template #header
<MkPagination ><i class="ph-clock ph-bold ph-lg"></i>
v-slot="{ items }" {{ i18n.ts.recentPosts }}</template
:pagination="popularPostsPagination" >
:disable-auto-load="true" <MkPagination
> v-slot="{ items }"
<div class="vfpdbgtk"> :pagination="recentPostsPagination"
<MkGalleryPostPreview :disable-auto-load="true"
v-for="post in items" >
:key="post.id" <div class="vfpdbgtk">
:post="post" <MkGalleryPostPreview
class="post" v-for="post in items"
/> :key="post.id"
</div> :post="post"
</MkPagination> class="post"
</MkFolder> />
</MkSpacer> </div>
</swiper-slide> </MkPagination>
<swiper-slide v-slot="{ isActive }"> </MkFolder>
<XUsers v-if="isActive" /> <MkFolder class="_gap">
</swiper-slide> <template #header
</swiper> ><i class="ph-fire-simple ph-bold ph-lg"></i>
{{ i18n.ts.popularPosts }}</template
>
<MkPagination
v-slot="{ items }"
:pagination="popularPostsPagination"
:disable-auto-load="true"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="post in items"
:key="post.id"
:post="post"
class="post"
/>
</div>
</MkPagination>
</MkFolder>
</MkSpacer>
</swiper-slide>
<swiper-slide v-slot="{ isActive }">
<XUsers v-if="isActive" />
</swiper-slide>
</swiper>
</div>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -266,25 +268,31 @@ const popularPostsPagination = {
#visitor-view { #visitor-view {
margin-top: -55px; margin-top: -55px;
padding-top: 55px; padding-top: 55px;
.swiper {
margin-top: -55px;
padding-top: 55px;
}
@media (min-width: 1100px) {
.swiper {
mask: linear-gradient(to bottom, black 70%, transparent 97%);
-webkit-mask: linear-gradient(to bottom, black 70%, transparent 97%);
padding-block: calc(2.5vw + 55px) 30vh;
margin-top: -55px;
max-height: 100vh;
box-sizing: border-box;
overflow: hidden auto !important;
}
&::before {
content: "";
position: fixed;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: .5;
// filter: blur(4px);
background-image: v-bind("wallpaper");
}
}
} }
// :deep(.swiper-wrapper) {
// mask: linear-gradient(to bottom, black 70%, transparent 95%);
// padding-block: calc(2.5vw + 55px) 30vh;
// margin-top: -55px;
// max-height: 100vh;
// box-sizing: border-box;
// overflow: hidden auto !important;
// }
// &::before {
// content: "";
// position: fixed;
// inset: 0;
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
// opacity: .5;
// filter: blur(4px);
// background-image: v-bind("wallpaper");
// }
// }
</style> </style>

2
packages/client/src/ui/visitor.vue
View file

@ -6,7 +6,7 @@
v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'" v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
/> />
<RouterView /> <RouterView />
<footer class="powered-by"> <footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
<MkA to="/"> <MkA to="/">
<MkInstanceTicker :instance="meta"></MkInstanceTicker> <MkInstanceTicker :instance="meta"></MkInstanceTicker>
<small>{{ i18n.ts.poweredBy }}</small> <small>{{ i18n.ts.poweredBy }}</small>

31
packages/client/src/ui/visitor/kanban.vue
View file

@ -27,13 +27,17 @@
<img <img
class="logo" class="logo"
:src=" :src="
meta.logoImageUrl ||
$instance.iconUrl || $instance.iconUrl ||
$instance.faviconUrl || $instance.faviconUrl ||
'/favicon.ico' '/favicon.ico'
" "
/> />
<h1> <img
v-if="meta.logoImageUrl"
:src="meta.logoImageUrl"
class="logo"
/>
<h1 v-else>
<MkA to="/" class="link">{{ instanceName }}</MkA> <MkA to="/" class="link">{{ instanceName }}</MkA>
</h1> </h1>
</div> </div>
@ -315,6 +319,7 @@ function showMenu(ev) {
padding-top: min(56.25%, 70vh); padding-top: min(56.25%, 70vh);
margin-bottom: calc(-100px - var(--radius)); margin-bottom: calc(-100px - var(--radius));
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent); mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
-webkit-mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
transition: min-height 0.4s, max-height 0.4s, filter 0.7s; transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
img { img {
position: absolute; position: absolute;
@ -329,7 +334,7 @@ function showMenu(ev) {
opacity: 1 !important; opacity: 1 !important;
} }
> .logo { > .logo {
margin-top: -20px !important; margin-top: -10px !important;
} }
} }
} }
@ -369,19 +374,20 @@ function showMenu(ev) {
opacity: .5; opacity: .5;
clip-path: inset(55px 0 0 0 round var(--radius)); clip-path: inset(55px 0 0 0 round var(--radius));
mask: linear-gradient(transparent 55px, #000 50px, transparent); mask: linear-gradient(transparent 55px, #000 50px, transparent);
-webkit-mask: linear-gradient( -webkit-mask: llinear-gradient(transparent 55px, #000 50px, transparent);
transparent 55px,
#000 50px,
transparent
);
} }
> .logo { > .logo {
height: 90px; height: 80px;
min-width: 90px; min-width: 80px;
max-width: 100%; max-width: 100%;
border-radius: var(--radius); border-radius: var(--radius);
margin-top: -5px; margin-top: -5px;
transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1); transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
&:last-child {
display: block;
margin-inline: auto;
margin-block: .5em 1em !important;
}
} }
> h1 { > h1 {
margin-block: 0.7em; margin-block: 0.7em;
@ -412,10 +418,7 @@ function showMenu(ev) {
position: relative; position: relative;
max-height: calc(9em + 50px); max-height: calc(9em + 50px);
mask: linear-gradient(black calc(100% - 64px), transparent); mask: linear-gradient(black calc(100% - 64px), transparent);
-webkit-mask: linear-gradient( -webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
black calc(100% - 64px),
transparent
);
} }
} }
.announcements { .announcements {