mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 05:23:28 +00:00
Feed styling
This commit is contained in:
parent
cc2ae64ea3
commit
48c5314c18
@ -1,5 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="340" height="340">
|
||||
<path fill="#DDD" d="m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1
|
||||
1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 220 B |
@ -1,33 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <q-separator color='accent'/> -->
|
||||
<q-btn-group
|
||||
spread
|
||||
dense
|
||||
outline
|
||||
rounded
|
||||
text-color="accent"
|
||||
>
|
||||
<q-btn
|
||||
dense
|
||||
:loading='loadingMore'
|
||||
outline
|
||||
rounded
|
||||
color="accent"
|
||||
class='text-weight-light q-ma-sm'
|
||||
style='letter-spacing: .1rem;'
|
||||
:label='reachedEnd ? "reached end" : label'
|
||||
:disable='reachedEnd'
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<template #loading>
|
||||
<div class='row justify-center'>
|
||||
<q-spinner-orbit color="accent" size='sm' />
|
||||
</div>
|
||||
</template>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
<!-- <q-separator color='accent'/> -->
|
||||
<div class="load-more">
|
||||
<q-btn
|
||||
flat
|
||||
size="md"
|
||||
:loading="loading"
|
||||
color="accent"
|
||||
style="letter-spacing: .1rem;"
|
||||
:label="reachedEnd ? 'reached end' : label"
|
||||
:disable="reachedEnd"
|
||||
@click="$emit('click')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,7 +20,7 @@ export default defineComponent({
|
||||
name: 'BaseButtonLoadMore',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
loadingMore: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
@ -54,8 +36,8 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='css' scoped>
|
||||
.q-btn-group {
|
||||
background: var(--q-background);
|
||||
<style lang="scss">
|
||||
.load-more button {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<div :class="(bordered ? 'bordered-avatar' : '') + (hoverEffect ? ' hovered-avatar' : '')">
|
||||
<q-avatar :rounded="!round" class="relative-position" :size="size" @click.stop="toProfile(pubkey)">
|
||||
<img :src="$store.getters.avatar(pubkey)" loading="lazy" crossorigin async />
|
||||
<q-avatar
|
||||
:rounded="!round"
|
||||
:size="size"
|
||||
@click.stop="toProfile(pubkey)"
|
||||
class="relative-position"
|
||||
>
|
||||
<img
|
||||
:src="$store.getters.avatar(pubkey)"
|
||||
loading="lazy"
|
||||
crossorigin
|
||||
@error.once="setDefaultAvatar"
|
||||
/>
|
||||
<div :class="alignRight ? 'icon-right' : 'icon-left'" class="q-pt-xs">
|
||||
<BaseButtonNIP05
|
||||
v-if="showVerified"
|
||||
@ -16,6 +26,7 @@
|
||||
<script>
|
||||
import helpersMixin from '../utils/mixin'
|
||||
import BaseButtonNIP05 from 'components/BaseButtonNIP05.vue'
|
||||
import Identicon from 'identicon.js'
|
||||
|
||||
export default {
|
||||
mixins: [helpersMixin],
|
||||
@ -31,6 +42,11 @@ export default {
|
||||
showVerified: {type: Boolean, default: false},
|
||||
hoverEffect: {type: Boolean, default: false},
|
||||
},
|
||||
methods: {
|
||||
setDefaultAvatar(event) {
|
||||
event.target.src = 'data:image/png;base64,' + new Identicon(this.pubkey, 40).toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,9 +14,7 @@
|
||||
<span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="post-content-body"
|
||||
>
|
||||
<div class="post-content-body">
|
||||
<p>
|
||||
<base-markdown :content="post.content" />
|
||||
</p>
|
||||
@ -71,18 +69,21 @@ function countRepliesRecursive(event) {
|
||||
if (!event.replies) {
|
||||
return 0
|
||||
}
|
||||
let count = event.replies.length
|
||||
for (const reply of event.replies) {
|
||||
count += countRepliesRecursive(reply)
|
||||
let count = 0
|
||||
for (const thread of event.replies) {
|
||||
if (!thread || !Array.isArray(thread)) {
|
||||
continue
|
||||
}
|
||||
count += thread.length
|
||||
for (const reply of thread) {
|
||||
count += countRepliesRecursive(reply)
|
||||
}
|
||||
}
|
||||
return count
|
||||
}
|
||||
|
||||
function postFromEvents(events) {
|
||||
const event = events[0]
|
||||
if (event.replies.length) {
|
||||
console.log(event)
|
||||
}
|
||||
return {
|
||||
id: event.id,
|
||||
author: event.pubkey,
|
||||
@ -149,22 +150,22 @@ export default {
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
margin-left: 10px;
|
||||
margin-left: 12px;
|
||||
flex-grow: 1;
|
||||
&-header {
|
||||
p {
|
||||
margin: 8px 0;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin: 0 0 8px;
|
||||
> span {
|
||||
color: $color-dark-gray;
|
||||
&:first-child {
|
||||
color: #fff;
|
||||
}
|
||||
& + span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
&.nip05 {
|
||||
}
|
||||
&.created-at {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -197,6 +198,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
margin-left: -9px;
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -22,7 +22,7 @@
|
||||
<div class="layout-flow">
|
||||
<q-page-container ref="pageContainer">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="['Feed', 'Messages', 'Notifications']">
|
||||
<keep-alive :include="['Feed', 'Feed2', 'Messages', 'Notifications']">
|
||||
<component :is="Component" :key="$route.path" :looking-around="lookingAround" @scroll-to-rect="scrollToRect" @reply-event="setReplyEvent"/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
@ -120,7 +120,7 @@ export default defineComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
cachedPages: ['Feed', 'Notifications', 'Messages'],
|
||||
cachedPages: ['Feed', 'Feed2', 'Notifications', 'Messages'],
|
||||
middlePagePos: {},
|
||||
broadcastChannel: new BroadcastChannel('hamstr'),
|
||||
activeWindow: false,
|
||||
|
@ -23,18 +23,20 @@
|
||||
<q-icon name="info" color="accent" size="sm"/>
|
||||
<div>to chat with the AI bot create a new post and mention it by typing '@gpt3' and selecting the AI bot from the user list</div>
|
||||
</div>
|
||||
<BaseButtonLoadMore
|
||||
v-if='unreadFeed[tab].length'
|
||||
:loading-more="loadingUnread"
|
||||
:label="'load ' + unreadFeed[tab].length + ' unread'"
|
||||
@click="loadUnread"
|
||||
/>
|
||||
<Post v-for="(item, index) in items" :key="index" :events="item" class="full-width" @add-event="processEvent"/>
|
||||
<BaseButtonLoadMore
|
||||
:loading-more="loadingMore"
|
||||
:label="items.length === feed[tab].length ? 'load another day' : 'load 100 more'"
|
||||
@click="loadMore"
|
||||
/>
|
||||
<div class="feed">
|
||||
<BaseButtonLoadMore
|
||||
v-if="unreadFeed[tab].length"
|
||||
:loading="loadingUnread"
|
||||
:label="'load ' + unreadFeed[tab].length + ' unread'"
|
||||
@click="loadUnread"
|
||||
/>
|
||||
<Post v-for="item in items" :key="item[0].id" :events="item" class="full-width" @add-event="processEvent"/>
|
||||
<BaseButtonLoadMore
|
||||
:loading="loadingMore"
|
||||
:label="items.length === feed[tab].length ? 'load another day' : 'load 100 more'"
|
||||
@click="loadMore"
|
||||
/>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
@ -47,6 +49,7 @@ import {dbFeed, dbUserFollows} from '../query'
|
||||
import BaseButtonLoadMore from 'components/BaseButtonLoadMore.vue'
|
||||
import { createMetaMixin } from 'quasar'
|
||||
import Post from 'components/Post/index.vue'
|
||||
//import BasePostThread from 'components/BasePostThread.vue'
|
||||
|
||||
|
||||
// const debouncedAddToThread = mergebounce(
|
||||
@ -76,6 +79,7 @@ export default defineComponent({
|
||||
mixins: [helpersMixin, createMetaMixin(metaData)],
|
||||
|
||||
components: {
|
||||
//BasePostThread,
|
||||
Post,
|
||||
BaseButtonLoadMore,
|
||||
},
|
||||
@ -269,12 +273,24 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang='css' scoped>
|
||||
<style lang="scss" scoped>
|
||||
@import 'assets/theme/colors.scss';
|
||||
|
||||
.q-tabs {
|
||||
border-bottom: 1px solid var(--q-accent)
|
||||
border-bottom: $border-dark;
|
||||
}
|
||||
|
||||
.q-page::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.feed {
|
||||
.load-more:first-child {
|
||||
border-bottom: $border-dark;
|
||||
}
|
||||
.load-more:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user