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

i18n, banner, apps button, i don't know how v-bind in css works

Browse source
This commit is contained in:
Freeplay 2023-06-15 16:15:37 -04:00
parent 2ec8a6e2ef
commit c09b1d3847
4 changed files with 169 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/en-US.yml
View file

@ -20,6 +20,7 @@ renotedBy: "Boosted by {user}"
noNotes: "No posts" noNotes: "No posts"
noNotifications: "No notifications" noNotifications: "No notifications"
instance: "Server" instance: "Server"
findAnotherInstance: "Find another server"
settings: "Settings" settings: "Settings"
basicSettings: "Basic Settings" basicSettings: "Basic Settings"
otherSettings: "Other Settings" otherSettings: "Other Settings"

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

@ -8,107 +8,106 @@
:noTabCollapse="true" :noTabCollapse="true"
:displayHomeButton="false" :displayHomeButton="false"
/></template> /></template>
<div id="visitor-view"> <swiper
<swiper id="visitor-view"
:round-lengths="true" :round-lengths="true"
:touch-angle="25" :touch-angle="25"
:threshold="10" :threshold="10"
:centeredSlides="true" :centeredSlides="true"
:space-between="20" :space-between="20"
:allow-touch-move=" :allow-touch-move="
!( !(
deviceKind === 'desktop' && deviceKind === 'desktop' &&
!defaultStore.state.swipeOnDesktop !defaultStore.state.swipeOnDesktop
) )
" "
@swiper="setSwiperRef" @swiper="setSwiperRef"
@slide-change="onSlideChange" @slide-change="onSlideChange"
> >
<swiper-slide v-slot="{ isActive }"> <swiper-slide v-slot="{ isActive }">
<XKanban v-if="isActive"/> <XKanban v-if="isActive"/>
</swiper-slide> </swiper-slide>
<swiper-slide v-slot="{ isActive }"> <swiper-slide v-slot="{ isActive }">
<MkSpacer :content-max="800" v-if="isActive"> <MkSpacer :content-max="800" v-if="isActive">
<XNotes :pagination="paginationForLocal" /> <XNotes :pagination="paginationForLocal" />
</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="800" v-if="isActive">
<XNotes :pagination="paginationForRemote" /> <XNotes :pagination="paginationForRemote" />
</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="800" v-if="isActive">
<XChannelList <XChannelList
key="featured" key="featured"
:pagination="featuredPagination" :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"
/> />
</MkSpacer> </MkPagination>
</swiper-slide> </MkSpacer>
<swiper-slide v-slot="{ isActive }"> </swiper-slide>
<MkSpacer :content-max="800" v-if="isActive"> <swiper-slide v-slot="{ 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="featuredPagesPagination" :pagination="recentPostsPagination"
:disable-auto-load="true"
> >
<MkPagePreview <div class="vfpdbgtk">
v-for="page in items" <MkGalleryPostPreview
:key="page.id" v-for="post in items"
class="ckltabjg" :key="post.id"
:page="page" :post="post"
/> class="post"
/>
</div>
</MkPagination> </MkPagination>
</MkSpacer> </MkFolder>
</swiper-slide> <MkFolder class="_gap">
<swiper-slide v-slot="{ isActive }"> <template #header
<MkSpacer :content-max="1200" v-if="isActive"> ><i class="ph-fire-simple ph-bold ph-lg"></i>
<MkFolder class="_gap"> {{ i18n.ts.popularPosts }}</template
<template #header >
><i class="ph-clock ph-bold ph-lg"></i> <MkPagination
{{ i18n.ts.recentPosts }}</template v-slot="{ items }"
> :pagination="popularPostsPagination"
<MkPagination :disable-auto-load="true"
v-slot="{ items }" >
:pagination="recentPostsPagination" <div class="vfpdbgtk">
:disable-auto-load="true" <MkGalleryPostPreview
> v-for="post in items"
<div class="vfpdbgtk"> :key="post.id"
<MkGalleryPostPreview :post="post"
v-for="post in items" class="post"
:key="post.id" />
:post="post" </div>
class="post" </MkPagination>
/> </MkFolder>
</div> </MkSpacer>
</MkPagination> </swiper-slide>
</MkFolder> <swiper-slide v-slot="{ isActive }">
<MkFolder class="_gap"> <XUsers v-if="isActive" />
<template #header </swiper-slide>
><i class="ph-fire-simple ph-bold ph-lg"></i> </swiper>
{{ 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>
@ -219,9 +218,11 @@ onMounted(() => {
}); });
let meta = $ref<DetailedInstanceMetadata>(); let meta = $ref<DetailedInstanceMetadata>();
let wallpaper = $ref(String);
os.api("meta", { detail: true }).then((res) => { os.api("meta", { detail: true }).then((res) => {
meta = res; meta = res;
wallpaper = `url("${res.backgroundImageUrl}")`
}); });
@ -261,3 +262,15 @@ const popularPostsPagination = {
limit: 5, limit: 5,
}; };
</script> </script>
<style lang="scss">
#visitor-view {
margin-top: -55px;
padding-top: 55px;
&::before {
content: "";
position: absolute;
inset: 0;
background-image: v-bind("wallpaper");
}
}
</style>

13
packages/client/src/style.scss
View file

@ -477,6 +477,19 @@ hr {
} }
} }
._formLinksGridFlex { // "grid", anyways display flex my beloved
display: flex;
flex-wrap: wrap;
gap: 12px;
> ._button {
flex-basis: 34%;
flex-grow: 1;
min-width: max-content !important;
max-width: 100% !important;
margin: 0 !important;
}
}
._flexList { ._flexList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

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

@ -25,7 +25,9 @@
@click.stop="expanded = true" @click.stop="expanded = true"
>{{ i18n.ts.instanceInfo }}</MkButton> >{{ i18n.ts.instanceInfo }}</MkButton>
</div> --> </div> -->
<img class="banner" :src="meta.backgroundImageUrl" /> <div class="banner">
<img :src="meta.backgroundImageUrl" />
</div>
<div class="content"> <div class="content">
<div class="header"> <div class="header">
<img <img
@ -38,7 +40,10 @@
>{{ instanceName }}</MkA> >{{ instanceName }}</MkA>
</h1> </h1>
</div> </div>
<button class="_button _acrylic menu" @click="showMenu"> <!-- <MkA class="_buttonIcon home" :to="'/'" v-tooltip="i18n.ts.home">
<i class="ph-house ph-bold ph-lg"></i>
</MkA> -->
<button class="_buttonIcon menu" @click="showMenu" v-tooltip="i18n.ts.more">
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button> </button>
<div v-if="meta" class="about"> <div v-if="meta" class="about">
@ -54,7 +59,7 @@
</div> </div>
<section> <section>
<div class="_formLinksGrid"> <div class="_formLinksGridFlex">
<MkButton <MkButton
primary gradate primary gradate
rounded rounded
@ -63,7 +68,7 @@
<i <i
class="ph-sign-in ph-bold" class="ph-sign-in ph-bold"
></i> ></i>
Sign Up {{ i18n.ts.signup }}
</MkButton> </MkButton>
<MkButton <MkButton
rounded rounded
@ -72,20 +77,30 @@
<i <i
class="ph-sign-out ph-bold" class="ph-sign-out ph-bold"
></i> ></i>
Log In {{ i18n.ts.login }}
</MkButton> </MkButton>
<MkButton <MkButton
:link="true" :link="true"
:behavior="'browser'" :behavior="'browser'"
rounded rounded
full
to="https://calckey.org/join/" to="https://calckey.org/join/"
class="_full"
> >
<i <i
class="ph-airplane-tilt ph-bold" class="ph-airplane-tilt ph-bold"
></i> ></i>
Find another server {{ i18n.ts.findAnotherInstance }}
</MkButton>
<MkButton
v-if="!sticky"
:link="true"
:behavior="'browser'"
rounded
to="https://calckey.org/apps/"
>
<i
class="ph-device-mobile ph-bold"
></i>
{{ i18n.ts.apps }}
</MkButton> </MkButton>
</div> </div>
</section> </section>
@ -208,12 +223,10 @@ let meta = $ref<DetailedInstanceMetadata>();
let isLong = $ref(false); let isLong = $ref(false);
let collapsed = $ref(!isLong); let collapsed = $ref(!isLong);
let wallpaper = $ref();
os.api("meta", { detail: true }).then((res) => { os.api("meta", { detail: true }).then((res) => {
meta = res; meta = res;
isLong = meta.description && (meta.description.length > 500); isLong = meta.description && (meta.description.length > 500);
wallpaper = `url("${meta.wallpaper}")`
}); });
let announcement = $ref(); let announcement = $ref();
@ -257,16 +270,20 @@ function onScroll(ev) {
<style lang="scss" scoped> <style lang="scss" scoped>
.instance-info-container { .instance-info-container {
margin-top: -55px;
&.sticky { &.sticky {
position: sticky; position: sticky;
top: 0; top: 0;
max-height: 100vh; max-height: 100vh;
overflow: hidden auto; overflow: hidden auto;
min-width: 400px; min-width: 400px;
width: 450px; width: 470px;
border-right: 1px solid var(--divider);
.content {
max-width: 450px;
}
} }
margin-left: -1px; margin-left: -1px;
border-right: 1px solid var(--divider);
box-shadow: 0 0 48px -24px rgba(0,0,0,0.1); box-shadow: 0 0 48px -24px rgba(0,0,0,0.1);
z-index: 9000; z-index: 9000;
} }
@ -275,18 +292,24 @@ function onScroll(ev) {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
height: max-content;
min-height: 100%;
transition: transform .4s cubic-bezier(.5,0,0,1); transition: transform .4s cubic-bezier(.5,0,0,1);
.banner { .banner {
position: sticky; position: sticky;
top: 0; top: 0;
width: calc(100% + 2px); width: calc(100% + 2px);
margin-inline: -1px; margin-inline: -1px;
min-height: 250px; padding-top: 56.25%;
max-height: 250px;
object-fit: cover;
object-position: center;
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent); mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
transition: min-height .4s, max-height .4s, filter .7s; transition: min-height .4s, max-height .4s, filter .7s;
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
} }
> .content { > .content {
--margin: 32px; --margin: 32px;
@ -300,7 +323,7 @@ function onScroll(ev) {
padding: 0 var(--margin); padding: 0 var(--margin);
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
max-width: 600px; // max-width: 600px;
margin-inline: auto; margin-inline: auto;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -324,6 +347,7 @@ function onScroll(ev) {
> .logo { > .logo {
height: 90px; height: 90px;
min-width: 90px; min-width: 90px;
max-width: 100%;
border-radius: var(--radius); border-radius: var(--radius);
margin-top: -5px; margin-top: -5px;
transition: transform .4s cubic-bezier(0.5,0,0,1); transition: transform .4s cubic-bezier(0.5,0,0,1);
@ -334,7 +358,7 @@ function onScroll(ev) {
color: var(--fgHighlighted) color: var(--fgHighlighted)
} }
} }
.menu { .menu, .home {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -343,9 +367,12 @@ function onScroll(ev) {
border-radius: 100px; border-radius: 100px;
background: var(--buttonBg) background: var(--buttonBg)
} }
.home {
right: unset;
left: 10px;
}
.about { .about {
position: relative; position: relative;
font-size: 1.05em;
.desc { .desc {
display: block; display: block;
} }
@ -376,16 +403,3 @@ section {
text-align: initial; text-align: initial;
} }
</style> </style>
<style lang="scss">
#maincontent {
--background-image: v-bind(wallpaper);
}
#visitor-view {
&::before {
content: "";
position: fixed;
inset: 0;
background-image: var(--background-image);
}
}
</style>