mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 13:33:22 +00:00
* Fix UserAvatar / UserName click-through
* Feed scroll to highlight (somewhat broken) * Mobile layout optimizations
This commit is contained in:
parent
0b9c4a7f33
commit
cb06ac099c
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-avatar
|
<q-avatar
|
||||||
:size="size"
|
:size="size"
|
||||||
@click.stop="clickable && toProfile(pubkey)"
|
@click="clickable && toProfile(pubkey)"
|
||||||
class="relative-position"
|
class="relative-position"
|
||||||
:class="{'cursor-pointer': clickable}"
|
:class="{'cursor-pointer': clickable}"
|
||||||
>
|
>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
class="username"
|
class="username"
|
||||||
:class="{'two-line': wrap, clickable}"
|
:class="{'two-line': wrap, clickable}"
|
||||||
>
|
>
|
||||||
<a @click.stop="clickable && toProfile(pubkey)">
|
<a @click="clickable && toProfile(pubkey)">
|
||||||
<span
|
<span
|
||||||
v-if="$store.getters.name(pubkey)"
|
v-if="$store.getters.name(pubkey)"
|
||||||
class="name"
|
class="name"
|
||||||
|
@ -44,7 +44,7 @@ export default {
|
|||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits: ['mobile-menu-close'],
|
emits: ['click'],
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -7,18 +7,25 @@
|
|||||||
>
|
>
|
||||||
<base-icon icon="back" />
|
<base-icon icon="back" />
|
||||||
</div>
|
</div>
|
||||||
<h2>{{ title || titleFromRoute() || 'Home' }}</h2>
|
<div :class="{'profile-info': !!subline}">
|
||||||
<span v-if="subline">{{ subline }}</span>
|
<h2>{{ title || titleFromRoute() || 'Home' }}</h2>
|
||||||
|
<span v-if="subline">{{ subline }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="logo">
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import BaseIcon from 'components/BaseIcon/index.vue'
|
import BaseIcon from 'components/BaseIcon/index.vue'
|
||||||
|
import Logo from 'components/Logo.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'PageHeader',
|
name: 'PageHeader',
|
||||||
components: {
|
components: {
|
||||||
|
Logo,
|
||||||
BaseIcon
|
BaseIcon
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -45,7 +52,8 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'assets/theme/colors.scss';
|
@import "assets/theme/colors.scss";
|
||||||
|
@import "assets/variables.scss";
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@ -86,5 +94,24 @@ export default defineComponent({
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $phone) {
|
||||||
|
.page-header {
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 36px;
|
||||||
|
width: 36px;
|
||||||
|
left: calc(50% - 18px);
|
||||||
|
svg {
|
||||||
|
height: inherit;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<div class="connector-top">
|
<div class="connector-top">
|
||||||
<div v-if="connectorTop" class="connector-line"></div>
|
<div v-if="connectorTop" class="connector-line"></div>
|
||||||
</div>
|
</div>
|
||||||
<BaseUserAvatar :pubkey="post.author" />
|
<BaseUserAvatar :pubkey="post.author" @click.stop />
|
||||||
<div class="connector-bottom">
|
<div class="connector-bottom">
|
||||||
<div v-if="connectorBottom" class="connector-line"></div>
|
<div v-if="connectorBottom" class="connector-line"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -16,7 +16,7 @@
|
|||||||
<div class="post-content">
|
<div class="post-content">
|
||||||
<div class="post-content-header">
|
<div class="post-content-header">
|
||||||
<p>
|
<p>
|
||||||
<BaseUserName :pubkey="post.author" />
|
<BaseUserName :pubkey="post.author" @click.stop />
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
|
<span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
|
||||||
</p>
|
</p>
|
||||||
|
@ -11,29 +11,10 @@
|
|||||||
<q-page-container ref="pageContainer">
|
<q-page-container ref="pageContainer">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<keep-alive :include="['Feed', 'Messages', 'Notifications']">
|
<keep-alive :include="['Feed', 'Messages', 'Notifications']">
|
||||||
<component :is="Component" :key="$route.path" :looking-around="lookingAround" @scroll-to-rect="scrollToRect" @reply-event="setReplyEvent"/>
|
<component :is="Component" :key="$route.path" @scroll-to-rect="scrollToRect" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</router-view>
|
</router-view>
|
||||||
</q-page-container>
|
</q-page-container>
|
||||||
|
|
||||||
<!-- <div v-if="postEntryOpen || messageMode" id="post-entry" unelevated class="gt-xs flex column align-self relative-position"> -->
|
|
||||||
<div v-if="($q.screen.width >= 600) && postEntryOpen" id="post-entry" unelevated class="gt-xs flex column align-self relative-position">
|
|
||||||
<!-- <q-separator color="primary"/> -->
|
|
||||||
<!-- <q-btn v-if="!messageMode" icon="close" flat dense @click="togglePostEntry" class="self-end" style="position: absolute; top: 0; right: 0; z-index: 1;"/> -->
|
|
||||||
<q-btn icon="close" flat dense @click="togglePostEntry" class="self-end" style="position: absolute; top: 0; right: 0; z-index: 1;"/>
|
|
||||||
<!-- :message-mode="messageMode" -->
|
|
||||||
<BasePostEntry
|
|
||||||
:event="replyEvent"
|
|
||||||
@clear-event="replyEvent=null"
|
|
||||||
@sent="togglePostEntry"
|
|
||||||
class="q-px-md q-pt-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bottom-drawer-placeholder" />
|
|
||||||
<!-- <div id="bottom-post-entry-placeholder" />
|
|
||||||
<div id="bottom-message-entry-placeholder" />
|
|
||||||
<div id="bottom-menu-placeholder" /> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layout-sidebar">
|
<div class="layout-sidebar">
|
||||||
@ -105,8 +86,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
scrollingContainer() {
|
scrollingContainer() {
|
||||||
if (this.$q.screen.width < 600) return window
|
return window
|
||||||
return this.$refs.pageContainer?.$el
|
|
||||||
},
|
},
|
||||||
messageMode() {
|
messageMode() {
|
||||||
if (this.$route.name === 'messages') {
|
if (this.$route.name === 'messages') {
|
||||||
@ -116,7 +96,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// beforeCreate() {
|
|
||||||
created() {
|
created() {
|
||||||
this.loadPreferences()
|
this.loadPreferences()
|
||||||
},
|
},
|
||||||
@ -170,26 +149,9 @@ export default defineComponent({
|
|||||||
setVerticalScrollPosition(this.scrollingContainer, 0, 500)
|
setVerticalScrollPosition(this.scrollingContainer, 0, 500)
|
||||||
},
|
},
|
||||||
|
|
||||||
back() {
|
|
||||||
this.$router.go(-1)
|
|
||||||
},
|
|
||||||
|
|
||||||
forward() {
|
|
||||||
this.$router.go(1)
|
|
||||||
},
|
|
||||||
|
|
||||||
moveFab(ev) {
|
|
||||||
this.draggingFab = ev.isFirst !== true && ev.isFinal !== true
|
|
||||||
|
|
||||||
this.fabPos = [
|
|
||||||
this.fabPos[0] - ev.delta.x,
|
|
||||||
this.fabPos[1] + ev.delta.y
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
scrollToRect(rect) {
|
scrollToRect(rect) {
|
||||||
let offset = Math.max(rect.top, 0)
|
let offset = Math.max(rect.top, 0) - 78
|
||||||
setVerticalScrollPosition(this.scrollingContainer, offset, 500)
|
setVerticalScrollPosition(this.scrollingContainer, offset, 0)
|
||||||
},
|
},
|
||||||
|
|
||||||
async launch() {
|
async launch() {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<q-page>
|
<q-page>
|
||||||
<PageHeader />
|
<PageHeader />
|
||||||
|
|
||||||
<PostEditor v-if="$store.getters.isSignedIn" />
|
<PostEditor class="post-editor" v-if="$store.getters.isSignedIn" />
|
||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<q-tabs
|
<q-tabs
|
||||||
@ -260,6 +260,7 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "assets/theme/colors.scss";
|
@import "assets/theme/colors.scss";
|
||||||
|
@import "assets/variables.scss";
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
border-top: $border-dark;
|
border-top: $border-dark;
|
||||||
@ -292,4 +293,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $phone) {
|
||||||
|
.post-editor {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-item ref="main" class='no-padding column'>
|
<q-item ref="main" class="no-padding column">
|
||||||
<HeroPost
|
<HeroPost
|
||||||
v-if="event"
|
v-if="event"
|
||||||
:event="event"
|
:event="event"
|
||||||
@ -26,7 +26,6 @@
|
|||||||
<div v-else>
|
<div v-else>
|
||||||
{{ $t('event') }} {{ $route.params.eventId }}
|
{{ $t('event') }} {{ $route.params.eventId }}
|
||||||
</div>
|
</div>
|
||||||
<!-- <BaseRelayList v-if="event?.seen_on?.length" :event='event' class='q-px-sm'/>-->
|
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
||||||
<div v-if="childrenThreadsFiltered.length">
|
<div v-if="childrenThreadsFiltered.length">
|
||||||
@ -34,20 +33,20 @@
|
|||||||
<Thread :events="thread" @add-event='processChildEvent'/>
|
<Thread :events="thread" @add-event='processChildEvent'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style='min-height: 30vh;'/>
|
|
||||||
|
<div style="min-height: 70vh;" />
|
||||||
</q-page>
|
</q-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, nextTick } from 'vue'
|
import {defineComponent} from 'vue'
|
||||||
|
import {createMetaMixin, scroll} from 'quasar'
|
||||||
|
import PageHeader from 'components/PageHeader.vue'
|
||||||
|
import Thread from 'components/Post/Thread.vue'
|
||||||
|
import HeroPost from 'components/Post/HeroPost.vue'
|
||||||
import {dbStreamEvent, dbStreamTagKind} from '../query'
|
import {dbStreamEvent, dbStreamTagKind} from '../query'
|
||||||
import helpersMixin from '../utils/mixin'
|
import helpersMixin from '../utils/mixin'
|
||||||
import {addToThread} from '../utils/threads'
|
import {addToThread} from '../utils/threads'
|
||||||
//import BaseRelayList from 'components/BaseRelayList.vue'
|
|
||||||
import PageHeader from 'components/PageHeader.vue'
|
|
||||||
import { createMetaMixin } from 'quasar'
|
|
||||||
import Thread from 'components/Post/Thread.vue'
|
|
||||||
import HeroPost from 'components/Post/HeroPost.vue'
|
|
||||||
|
|
||||||
const metaData = {
|
const metaData = {
|
||||||
// sets document title
|
// sets document title
|
||||||
@ -69,7 +68,6 @@ export default defineComponent({
|
|||||||
HeroPost,
|
HeroPost,
|
||||||
Thread,
|
Thread,
|
||||||
PageHeader,
|
PageHeader,
|
||||||
//BaseRelayList
|
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
@ -120,7 +118,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
this.useProfile(event.pubkey)
|
this.useProfile(event.pubkey)
|
||||||
}, true)
|
}, true)
|
||||||
this.subAncestorsChildren()
|
await this.subAncestorsChildren()
|
||||||
},
|
},
|
||||||
|
|
||||||
stop() {
|
stop() {
|
||||||
@ -168,13 +166,14 @@ export default defineComponent({
|
|||||||
let prevAncestor = event
|
let prevAncestor = event
|
||||||
while (prevAncestor) {
|
while (prevAncestor) {
|
||||||
this.ancestors = [prevAncestor].concat(this.ancestors)
|
this.ancestors = [prevAncestor].concat(this.ancestors)
|
||||||
this.scrollToMainEvent()
|
|
||||||
this.useProfile(prevAncestor.pubkey)
|
this.useProfile(prevAncestor.pubkey)
|
||||||
currAncestor = prevAncestor
|
currAncestor = prevAncestor
|
||||||
prevAncestorId = currAncestor.interpolated.replyEvents[currAncestor.interpolated.replyEvents.length - 1]
|
prevAncestorId = currAncestor.interpolated.replyEvents[currAncestor.interpolated.replyEvents.length - 1]
|
||||||
prevAncestor = this.ancestorsSeen.get(prevAncestorId)
|
prevAncestor = this.ancestorsSeen.get(prevAncestorId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.scrollToMainEvent()
|
||||||
},
|
},
|
||||||
|
|
||||||
processChildEvent(event) {
|
processChildEvent(event) {
|
||||||
@ -188,10 +187,10 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
scrollToMainEvent() {
|
scrollToMainEvent() {
|
||||||
nextTick(() => {
|
setTimeout(() => {
|
||||||
let mainRect = this.$refs.main?.$el.getBoundingClientRect()
|
const offset = this.$refs.main?.$el.getBoundingClientRect().top - 78
|
||||||
this.$emit('scroll-to-rect', mainRect)
|
scroll.setVerticalScrollPosition(document.scrollingElement, offset, 0)
|
||||||
})
|
}, 500)
|
||||||
},
|
},
|
||||||
|
|
||||||
addEventAncestors(event) {
|
addEventAncestors(event) {
|
||||||
|
Loading…
Reference in New Issue
Block a user