UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-22 22:41:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update landing components

Browse source
This commit is contained in:
Daniel Supernault 2023-04-08 00:04:01 -06:00
parent 5465f2834f
commit 48f3d2c397
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
5 changed files with 100 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/assets/components/landing/Index.vue
View file

@ -31,7 +31,7 @@
<div class="server-header"> <div class="server-header">
<p class="server-header-domain">{{ config.domain }}</p> <p class="server-header-domain">{{ config.domain }}</p>
<p class="server-header-attribution"> <p class="server-header-attribution">
Decentralized photo sharing social media powered by <a href="https://pixelfed.org">Pixelfed</a> Decentralized photo sharing social media powered by <a href="https://pixelfed.org" target="_blank">Pixelfed</a>
</p> </p>
</div> </div>
@ -56,7 +56,7 @@
<div class="list-group"> <div class="list-group">
<div v-if="config.contact.account" class="list-group-item bg-transparent"> <div v-if="config.contact.account" class="list-group-item bg-transparent">
<p class="item-label">Managed By</p> <p class="item-label">Managed By</p>
<a :href="config.contact.account.url" class="admin-card"> <a :href="config.contact.account.url" class="admin-card" target="_blank">
<div class="d-flex"> <div class="d-flex">
<img <img
:src="config.contact.account.avatar" :src="config.contact.account.avatar"
@ -77,7 +77,7 @@
<div v-if="config.contact.email" class="list-group-item bg-transparent"> <div v-if="config.contact.email" class="list-group-item bg-transparent">
<p class="item-label">Contact</p> <p class="item-label">Contact</p>
<a :href="`mailto:${config.contact.email}`" class="admin-email">{{ config.contact.email }}</a> <a :href="`mailto:${config.contact.email}?subject=Regarding ${config.domain}`" class="admin-email" target="_blank">{{ config.contact.email }}</a>
</div> </div>
</div> </div>
</div> </div>

8
resources/assets/components/landing/partials/PostCard.vue
View file

@ -3,18 +3,18 @@
<div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;"> <div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;">
<div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;"> <div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
<div class="media align-items-center"> <div class="media align-items-center">
<a :href="post.account.url" class="mr-2"> <a :href="post.account.url" class="mr-2" target="_blank">
<img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;"> <img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;">
</a> </a>
<div class="media-body d-flex justify-content-between align-items-center"> <div class="media-body d-flex justify-content-between align-items-center">
<p class="font-weight-bold username mb-0"> <p class="font-weight-bold username mb-0">
<a :href="post.account.url" class="text-white">&commat;{{ post.account.username }}</a> <a :href="post.account.url" class="text-white" target="_blank">&commat;{{ post.account.username }}</a>
</p> </p>
<p class="font-weight-bold mb-0"> <p class="font-weight-bold mb-0">
<a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500">Posted {{ timeago(post.created_at) }} ago</a> <a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500" target="_blank">Posted {{ timeago(post.created_at) }} ago</a>
<a v-else :href="post.url" class="text-bluegray-400">View Post</a> <a v-else :href="post.url" class="text-bluegray-400" target="_blank">View Post</a>
</p> </p>
</div> </div>
</div> </div>

12
resources/assets/components/landing/partials/UserCard.vue
View file

@ -3,23 +3,23 @@
<div class="card-body"> <div class="card-body">
<div class="d-flex" style="gap: 15px;"> <div class="d-flex" style="gap: 15px;">
<div class="flex-shrink-1"> <div class="flex-shrink-1">
<a :href="account.url"> <a :href="account.url" target="_blank">
<img class="rounded-circle" :src="account.avatar" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" width="50" height="50"> <img class="rounded-circle" :src="account.avatar" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" width="50" height="50">
</a> </a>
</div> </div>
<div class="flex-grow-1"> <div class="flex-grow-1">
<div v-if="account.name" class="display-name"> <div v-if="account.name" class="display-name">
<a :href="account.url">{{ account.name }}</a> <a :href="account.url" target="_blank">{{ account.name }}</a>
</div> </div>
<p class="username"> <p class="username">
<a :href="account.url">&commat;{{ account.username }}</a> <a :href="account.url" target="_blank">&commat;{{ account.username }}</a>
</p> </p>
<div class="user-stats"> <div class="user-stats">
<div class="user-stats-item">{{ formatCount(account.statuses_count) }} Posts</div> <div class="user-stats-item user-select-none">{{ formatCount(account.statuses_count) }} Posts</div>
<div class="user-stats-item">{{ formatCount(account.followers_count) }} Followers</div> <div class="user-stats-item user-select-none">{{ formatCount(account.followers_count) }} Followers</div>
<div class="user-stats-item">{{ formatCount(account.following_count) }} Following</div> <div class="user-stats-item user-select-none">{{ formatCount(account.following_count) }} Following</div>
</div> </div>
<div v-if="account.bio" class="user-bio"> <div v-if="account.bio" class="user-bio">

35
resources/assets/components/landing/sections/footer.vue
View file

@ -1,21 +1,22 @@
<template> <template>
<div class="py-5"> <div class="footer-component">
<p class="text-center text-uppercase font-weight-bold small text-justify"> <div class="footer-component-links">
<a href="/site/help" class="text-bluegray-400 p-2">Help</a> <a href="/site/help">Help</a>
<span class="mx-2 text-muted">·</span> <div class="spacer">·</div>
<a href="/site/terms" class="text-bluegray-400 p-2">Terms</a> <a href="/site/terms">Terms</a>
<span class="mx-2 text-muted">·</span> <div class="spacer">·</div>
<a href="/site/privacy" class="text-bluegray-400 p-2">Privacy</a> <a href="/site/privacy">Privacy</a>
<span class="mx-2 text-muted">·</span> <div class="spacer">·</div>
<a href="https://pixelfed.org/mobile-apps" class="text-bluegray-400 p-2" target="_blank">Mobile Apps</a> <a href="https://pixelfed.org/mobile-apps" target="_blank">Mobile Apps</a>
</p> </div>
<p class="text-center text-bluegray-500 small mb-0">
<span class="text-bluegray-500">© {{ getYear() }} {{config.domain}}</span> <div class="footer-component-attribution">
<span class="mx-2 text-muted">·</span> <div><span>© {{ getYear() }} {{config.domain}}</span></div>
<a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a> <div class="spacer">·</div>
<span class="mx-2 text-muted">·</span> <div><a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a></div>
<span class="text-bluegray-500">v{{config.version}}</span> <div class="spacer">·</div>
</p> <div><span>v{{config.version}}</span></div>
</div>
</div> </div>
</template> </template>

69
resources/assets/sass/landing.scss vendored
View file

@ -206,6 +206,75 @@ body {
} }
} }
.footer-component {
padding: 3rem 1rem 1rem 1rem;
&-links {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
margin-bottom: 3rem;
font-size: 15px;
a {
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.spacer {
display: none;
@include media-breakpoint-up(md) {
color: #64748b;
display: block !important;
}
}
}
&-attribution {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
color: #64748b;
font-size: 13px;
a {
color: #64748b;
font-weight: 700;
}
.spacer {
display: none;
@include media-breakpoint-up(md) {
color: #64748b;
display: block !important;
}
}
}
@include media-breakpoint-up(md) {
padding: 3rem 0;
&-links {
margin-bottom: 1rem;
flex-direction: row;
justify-content: center;
font-size: 13px;
}
&-attribution {
flex-direction: row;
justify-content: center;
font-size: 11.5px;
}
}
}
.landing-index-component { .landing-index-component {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;