mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-26 00:03:16 +00:00
Update landing components
This commit is contained in:
parent
5465f2834f
commit
48f3d2c397
5 changed files with 100 additions and 30 deletions
|
@ -31,7 +31,7 @@
|
|||
<div class="server-header">
|
||||
<p class="server-header-domain">{{ config.domain }}</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
@ -56,7 +56,7 @@
|
|||
<div class="list-group">
|
||||
<div v-if="config.contact.account" class="list-group-item bg-transparent">
|
||||
<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">
|
||||
<img
|
||||
:src="config.contact.account.avatar"
|
||||
|
@ -77,7 +77,7 @@
|
|||
|
||||
<div v-if="config.contact.email" class="list-group-item bg-transparent">
|
||||
<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>
|
||||
|
|
|
@ -3,18 +3,18 @@
|
|||
<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="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;">
|
||||
</a>
|
||||
|
||||
<div class="media-body d-flex justify-content-between align-items-center">
|
||||
<p class="font-weight-bold username mb-0">
|
||||
<a :href="post.account.url" class="text-white">@{{ post.account.username }}</a>
|
||||
<a :href="post.account.url" class="text-white" target="_blank">@{{ post.account.username }}</a>
|
||||
</p>
|
||||
|
||||
<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-else :href="post.url" class="text-bluegray-400">View Post</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" target="_blank">View Post</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,23 +3,23 @@
|
|||
<div class="card-body">
|
||||
<div class="d-flex" style="gap: 15px;">
|
||||
<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">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<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>
|
||||
<p class="username">
|
||||
<a :href="account.url">@{{ account.username }}</a>
|
||||
<a :href="account.url" target="_blank">@{{ account.username }}</a>
|
||||
</p>
|
||||
|
||||
<div class="user-stats">
|
||||
<div class="user-stats-item">{{ formatCount(account.statuses_count) }} Posts</div>
|
||||
<div class="user-stats-item">{{ 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.statuses_count) }} Posts</div>
|
||||
<div class="user-stats-item user-select-none">{{ formatCount(account.followers_count) }} Followers</div>
|
||||
<div class="user-stats-item user-select-none">{{ formatCount(account.following_count) }} Following</div>
|
||||
</div>
|
||||
|
||||
<div v-if="account.bio" class="user-bio">
|
||||
|
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<div class="py-5">
|
||||
<p class="text-center text-uppercase font-weight-bold small text-justify">
|
||||
<a href="/site/help" class="text-bluegray-400 p-2">Help</a>
|
||||
<span class="mx-2 text-muted">·</span>
|
||||
<a href="/site/terms" class="text-bluegray-400 p-2">Terms</a>
|
||||
<span class="mx-2 text-muted">·</span>
|
||||
<a href="/site/privacy" class="text-bluegray-400 p-2">Privacy</a>
|
||||
<span class="mx-2 text-muted">·</span>
|
||||
<a href="https://pixelfed.org/mobile-apps" class="text-bluegray-400 p-2" target="_blank">Mobile Apps</a>
|
||||
</p>
|
||||
<p class="text-center text-bluegray-500 small mb-0">
|
||||
<span class="text-bluegray-500">© {{ getYear() }} {{config.domain}}</span>
|
||||
<span class="mx-2 text-muted">·</span>
|
||||
<a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a>
|
||||
<span class="mx-2 text-muted">·</span>
|
||||
<span class="text-bluegray-500">v{{config.version}}</span>
|
||||
</p>
|
||||
<div class="footer-component">
|
||||
<div class="footer-component-links">
|
||||
<a href="/site/help">Help</a>
|
||||
<div class="spacer">·</div>
|
||||
<a href="/site/terms">Terms</a>
|
||||
<div class="spacer">·</div>
|
||||
<a href="/site/privacy">Privacy</a>
|
||||
<div class="spacer">·</div>
|
||||
<a href="https://pixelfed.org/mobile-apps" target="_blank">Mobile Apps</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-component-attribution">
|
||||
<div><span>© {{ getYear() }} {{config.domain}}</span></div>
|
||||
<div class="spacer">·</div>
|
||||
<div><a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a></div>
|
||||
<div class="spacer">·</div>
|
||||
<div><span>v{{config.version}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
69
resources/assets/sass/landing.scss
vendored
69
resources/assets/sass/landing.scss
vendored
|
@ -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 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
Loading…
Reference in a new issue