mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 05:23:28 +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>
|
||||
<q-avatar
|
||||
:size="size"
|
||||
@click.stop="clickable && toProfile(pubkey)"
|
||||
@click="clickable && toProfile(pubkey)"
|
||||
class="relative-position"
|
||||
:class="{'cursor-pointer': clickable}"
|
||||
>
|
||||
|
@ -3,7 +3,7 @@
|
||||
class="username"
|
||||
:class="{'two-line': wrap, clickable}"
|
||||
>
|
||||
<a @click.stop="clickable && toProfile(pubkey)">
|
||||
<a @click="clickable && toProfile(pubkey)">
|
||||
<span
|
||||
v-if="$store.getters.name(pubkey)"
|
||||
class="name"
|
||||
|
@ -44,7 +44,7 @@ export default {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['mobile-menu-close'],
|
||||
emits: ['click'],
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -7,18 +7,25 @@
|
||||
>
|
||||
<base-icon icon="back" />
|
||||
</div>
|
||||
<h2>{{ title || titleFromRoute() || 'Home' }}</h2>
|
||||
<span v-if="subline">{{ subline }}</span>
|
||||
<div :class="{'profile-info': !!subline}">
|
||||
<h2>{{ title || titleFromRoute() || 'Home' }}</h2>
|
||||
<span v-if="subline">{{ subline }}</span>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<Logo />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import BaseIcon from 'components/BaseIcon/index.vue'
|
||||
import Logo from 'components/Logo.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageHeader',
|
||||
components: {
|
||||
Logo,
|
||||
BaseIcon
|
||||
},
|
||||
props: {
|
||||
@ -45,7 +52,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'assets/theme/colors.scss';
|
||||
@import "assets/theme/colors.scss";
|
||||
@import "assets/variables.scss";
|
||||
|
||||
.page-header {
|
||||
padding: 1rem;
|
||||
@ -86,5 +94,24 @@ export default defineComponent({
|
||||
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>
|
||||
|
@ -8,7 +8,7 @@
|
||||
<div class="connector-top">
|
||||
<div v-if="connectorTop" class="connector-line"></div>
|
||||
</div>
|
||||
<BaseUserAvatar :pubkey="post.author" />
|
||||
<BaseUserAvatar :pubkey="post.author" @click.stop />
|
||||
<div class="connector-bottom">
|
||||
<div v-if="connectorBottom" class="connector-line"></div>
|
||||
</div>
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="post-content">
|
||||
<div class="post-content-header">
|
||||
<p>
|
||||
<BaseUserName :pubkey="post.author" />
|
||||
<BaseUserName :pubkey="post.author" @click.stop />
|
||||
<span>·</span>
|
||||
<span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
|
||||
</p>
|
||||
|
@ -11,29 +11,10 @@
|
||||
<q-page-container ref="pageContainer">
|
||||
<router-view v-slot="{ Component }">
|
||||
<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>
|
||||
</router-view>
|
||||
</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 class="layout-sidebar">
|
||||
@ -105,8 +86,7 @@ export default defineComponent({
|
||||
|
||||
computed: {
|
||||
scrollingContainer() {
|
||||
if (this.$q.screen.width < 600) return window
|
||||
return this.$refs.pageContainer?.$el
|
||||
return window
|
||||
},
|
||||
messageMode() {
|
||||
if (this.$route.name === 'messages') {
|
||||
@ -116,7 +96,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
|
||||
// beforeCreate() {
|
||||
created() {
|
||||
this.loadPreferences()
|
||||
},
|
||||
@ -170,26 +149,9 @@ export default defineComponent({
|
||||
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) {
|
||||
let offset = Math.max(rect.top, 0)
|
||||
setVerticalScrollPosition(this.scrollingContainer, offset, 500)
|
||||
let offset = Math.max(rect.top, 0) - 78
|
||||
setVerticalScrollPosition(this.scrollingContainer, offset, 0)
|
||||
},
|
||||
|
||||
async launch() {
|
||||
|
@ -2,7 +2,7 @@
|
||||
<q-page>
|
||||
<PageHeader />
|
||||
|
||||
<PostEditor v-if="$store.getters.isSignedIn" />
|
||||
<PostEditor class="post-editor" v-if="$store.getters.isSignedIn" />
|
||||
|
||||
<div class="tabs">
|
||||
<q-tabs
|
||||
@ -260,6 +260,7 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "assets/theme/colors.scss";
|
||||
@import "assets/variables.scss";
|
||||
|
||||
.tabs {
|
||||
border-top: $border-dark;
|
||||
@ -292,4 +293,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $phone) {
|
||||
.post-editor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -14,7 +14,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-item ref="main" class='no-padding column'>
|
||||
<q-item ref="main" class="no-padding column">
|
||||
<HeroPost
|
||||
v-if="event"
|
||||
:event="event"
|
||||
@ -26,7 +26,6 @@
|
||||
<div v-else>
|
||||
{{ $t('event') }} {{ $route.params.eventId }}
|
||||
</div>
|
||||
<!-- <BaseRelayList v-if="event?.seen_on?.length" :event='event' class='q-px-sm'/>-->
|
||||
</q-item>
|
||||
|
||||
<div v-if="childrenThreadsFiltered.length">
|
||||
@ -34,20 +33,20 @@
|
||||
<Thread :events="thread" @add-event='processChildEvent'/>
|
||||
</div>
|
||||
</div>
|
||||
<div style='min-height: 30vh;'/>
|
||||
|
||||
<div style="min-height: 70vh;" />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<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 helpersMixin from '../utils/mixin'
|
||||
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 = {
|
||||
// sets document title
|
||||
@ -69,7 +68,6 @@ export default defineComponent({
|
||||
HeroPost,
|
||||
Thread,
|
||||
PageHeader,
|
||||
//BaseRelayList
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -120,7 +118,7 @@ export default defineComponent({
|
||||
}
|
||||
this.useProfile(event.pubkey)
|
||||
}, true)
|
||||
this.subAncestorsChildren()
|
||||
await this.subAncestorsChildren()
|
||||
},
|
||||
|
||||
stop() {
|
||||
@ -168,13 +166,14 @@ export default defineComponent({
|
||||
let prevAncestor = event
|
||||
while (prevAncestor) {
|
||||
this.ancestors = [prevAncestor].concat(this.ancestors)
|
||||
this.scrollToMainEvent()
|
||||
this.useProfile(prevAncestor.pubkey)
|
||||
currAncestor = prevAncestor
|
||||
prevAncestorId = currAncestor.interpolated.replyEvents[currAncestor.interpolated.replyEvents.length - 1]
|
||||
prevAncestor = this.ancestorsSeen.get(prevAncestorId)
|
||||
}
|
||||
}
|
||||
|
||||
this.scrollToMainEvent()
|
||||
},
|
||||
|
||||
processChildEvent(event) {
|
||||
@ -188,10 +187,10 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
scrollToMainEvent() {
|
||||
nextTick(() => {
|
||||
let mainRect = this.$refs.main?.$el.getBoundingClientRect()
|
||||
this.$emit('scroll-to-rect', mainRect)
|
||||
})
|
||||
setTimeout(() => {
|
||||
const offset = this.$refs.main?.$el.getBoundingClientRect().top - 78
|
||||
scroll.setVerticalScrollPosition(document.scrollingElement, offset, 0)
|
||||
}, 500)
|
||||
},
|
||||
|
||||
addEventAncestors(event) {
|
||||
|
Loading…
Reference in New Issue
Block a user