mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 13:33:22 +00:00
fix: small UI issues
This commit is contained in:
parent
0fa5aa8915
commit
75d885ccf0
@ -236,6 +236,10 @@ p:last-of-type {
|
||||
word-break: break-word;
|
||||
hyphens: auto !important;
|
||||
line-height: 1.3rem !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
.break-word-wrap pre {
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<q-item
|
||||
<div
|
||||
color='accent'
|
||||
class='post-padding cursor-pointer no-hover'
|
||||
class='post-padding cursor-pointer no-hover flex row no-wrap'
|
||||
clickable
|
||||
manual-focus
|
||||
:class='(hasReply ? "post-has-reply" : "") +
|
||||
@ -11,94 +11,80 @@
|
||||
(hasReplyChildren ? " post-has-child-reply" : "")'
|
||||
@click.stop="toEvent(event.id)"
|
||||
>
|
||||
<!-- <div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
|
||||
<q-item-label caption style='opacity: .8;'>{{ niceDate(event.created_at) }}</q-item-label>
|
||||
<BaseButtonRelays
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
<BaseButtonInfo
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
</div> -->
|
||||
<div
|
||||
clickable
|
||||
avatar
|
||||
top
|
||||
class='relative-position'
|
||||
>
|
||||
<div v-if="isReply" class="is-reply-connector"></div>
|
||||
<BaseUserAvatar
|
||||
:pubkey='event.pubkey'
|
||||
size='1.5rem'
|
||||
:round='true'
|
||||
:bordered='hasReply || isReply || hasReplyChildren || isChildReply'
|
||||
:hover-effect='true'
|
||||
style='z-index: 1;'
|
||||
/>
|
||||
<div v-if="hasReply" class="has-reply-connector"></div>
|
||||
<div
|
||||
v-if="replyMode === 'reply'"
|
||||
class="has-replying-connector"
|
||||
:style='"height: " + (postHeight) + "px;"'
|
||||
/>
|
||||
<div
|
||||
ref='hasChildReplyConnector'
|
||||
v-if="hasReplyChildren"
|
||||
class="has-child-reply-connector"
|
||||
style='visibility: hidden;'
|
||||
:style='childReplyConnectorStyle()'
|
||||
clickable
|
||||
avatar
|
||||
top
|
||||
class='relative-position'
|
||||
>
|
||||
<div v-if="isReply" class="is-reply-connector"></div>
|
||||
<BaseUserAvatar
|
||||
:pubkey='event.pubkey'
|
||||
size='1.5rem'
|
||||
:round='true'
|
||||
:bordered='hasReply || isReply || hasReplyChildren || isChildReply'
|
||||
:hover-effect='true'
|
||||
style='z-index: 1;'
|
||||
/>
|
||||
<div v-if="hasReply" class="has-reply-connector"></div>
|
||||
<div
|
||||
v-for="(thread, index) in event.replies"
|
||||
:key="thread[0].id"
|
||||
ref="hasChildReplyConnectorTick"
|
||||
class="has-child-reply-tick"
|
||||
:style='childReplyTickStyle(index)'
|
||||
v-if="replyMode === 'reply'"
|
||||
class="has-replying-connector"
|
||||
:style='"height: " + (postHeight) + "px;"'
|
||||
/>
|
||||
<div
|
||||
ref='hasChildReplyConnector'
|
||||
v-if="hasReplyChildren"
|
||||
class="has-child-reply-connector"
|
||||
style='visibility: hidden;'
|
||||
:style='childReplyConnectorStyle()'
|
||||
>
|
||||
<div
|
||||
v-for="(thread, index) in event.replies"
|
||||
:key="thread[0].id"
|
||||
ref="hasChildReplyConnectorTick"
|
||||
class="has-child-reply-tick"
|
||||
:style='childReplyTickStyle(index)'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-item-section>
|
||||
<q-item-section ref='postContent' class='relative-position' style='padding-left: .2rem;'>
|
||||
<div class='flex column no-wrap col full-width'>
|
||||
<q-item-section ref='postContent' class='relative-position' style='padding: 0 .2rem;'>
|
||||
|
||||
<div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
|
||||
<q-item-label caption style='opacity: .8;'>{{ niceDate(event.created_at) }}</q-item-label>
|
||||
<BaseButtonRelays
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
<BaseButtonInfo
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
</div>
|
||||
<div class='q-pb-sm'>
|
||||
<q-item-label caption class="text-secondary" style='opacity: .7;'>
|
||||
<span @click.stop="toProfile(event.pubkey)">{{ shorten(event.pubkey) }}</span>
|
||||
</q-item-label>
|
||||
<q-space/>
|
||||
<q-item-label :line='1' clickable>
|
||||
<BaseUserName :pubkey="event.pubkey" :show-verified='true' class='text-bold' :show-following='true'/>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-if="
|
||||
tagged &&
|
||||
($route.name === 'feed' || $route.name === 'profile' || $route.name === 'notifications') &&
|
||||
!(isReply || isChildReply)
|
||||
"
|
||||
caption
|
||||
class='q-pl-sm'
|
||||
>
|
||||
<span>in reply to </span>
|
||||
<a @click.stop="toEvent(tagged)">
|
||||
{{ shorten(tagged) }}
|
||||
</a>
|
||||
</q-item-label>
|
||||
</div>
|
||||
<!-- <q-item-label
|
||||
class='q-pt-xs break-word-wrap'
|
||||
> -->
|
||||
<div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
|
||||
<q-item-label class='q-pr-xs' style='opacity: .8; font-size: 90%;'>{{ niceDate(event.created_at) }}</q-item-label>
|
||||
<BaseButtonRelays
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
<BaseButtonInfo
|
||||
button-class='text-secondary'
|
||||
:event='event'
|
||||
/>
|
||||
</div>
|
||||
<div class='q-pb-sm'>
|
||||
<q-item-label caption class="text-secondary" style='opacity: .7;'>
|
||||
<span @click.stop="toProfile(event.pubkey)">{{ shorten(event.pubkey) }}</span>
|
||||
</q-item-label>
|
||||
<q-space/>
|
||||
<q-item-label :line='1' clickable>
|
||||
<BaseUserName :pubkey="event.pubkey" :show-verified='true' class='text-bold' :show-following='true'/>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-if="
|
||||
tagged &&
|
||||
($route.name != 'event') &&
|
||||
!(isReply || isChildReply)
|
||||
"
|
||||
|
||||
class='q-pl-sm'
|
||||
>
|
||||
<span >in reply to </span>
|
||||
<a @click.stop="toEvent(tagged)">
|
||||
{{ shorten(tagged) }}
|
||||
</a>
|
||||
</q-item-label>
|
||||
</div>
|
||||
<BaseMarkdown v-if="event.kind === 1">
|
||||
{{ event.interpolated.text }}
|
||||
</BaseMarkdown>
|
||||
@ -106,7 +92,7 @@
|
||||
<BaseMarkdown v-else> {{ cleanEvent }} </BaseMarkdown>
|
||||
<div
|
||||
v-if='!isEmbeded && (isQuote || isRepost)'
|
||||
class='reposts flex column q-my-sm q-pa-sm'
|
||||
class='reposts flex column'
|
||||
:clickable='false'
|
||||
>
|
||||
<BasePost
|
||||
@ -120,77 +106,77 @@
|
||||
/>
|
||||
</div>
|
||||
<!-- </q-item-label> -->
|
||||
<div
|
||||
v-if='!isRepost && $store.state.keys.pub && (replyDepth !== -1)'
|
||||
class='flex row items-center no-wrap reply-buttons'
|
||||
:color="replying ? 'primary' : ''"
|
||||
:class='replying ? "justify-between" : "justify-end"'
|
||||
>
|
||||
<div class='text-primary text-thin col q-pl-xs' style=' font-size: 90%; font-weight: 300;'>{{replyMode}}</div>
|
||||
<div class='flex row no-wrap'>
|
||||
<q-tabs
|
||||
v-model='replyMode'
|
||||
class='no-padding no-margin'
|
||||
unelevated
|
||||
dense
|
||||
flat
|
||||
active-color='primary'
|
||||
:size='highlighted ? "md" : "sm"'
|
||||
@click.stop
|
||||
>
|
||||
<q-tab name='embed' class='no-padding'>
|
||||
<q-icon name='link' >
|
||||
<q-tooltip>
|
||||
embed
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='repost' class='no-padding'>
|
||||
<q-icon name='repeat' >
|
||||
<q-tooltip>
|
||||
repost
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='quote' class='no-padding'>
|
||||
<q-icon name='format_quote' >
|
||||
<q-tooltip>
|
||||
quote
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='reply' class='no-padding'>
|
||||
<q-icon name='chat_bubble_outline' class='flip-horizontal' >
|
||||
<q-tooltip>
|
||||
reply
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<div class='flex row no-wrap items-center'>
|
||||
<q-separator v-if='replyMode' color='primary' size='1px' vertical spaced :class='highlighted ? "q-mt-sm" : "q-mt-xs"'/>
|
||||
<q-btn
|
||||
v-if='replyMode'
|
||||
icon="close"
|
||||
color='primary'
|
||||
flat
|
||||
<div
|
||||
v-if='!isRepost && $store.state.keys.pub && (replyDepth !== -1)'
|
||||
class='flex row items-center no-wrap reply-buttons'
|
||||
:color="replying ? 'primary' : ''"
|
||||
:class='replying ? "justify-between" : "justify-end"'
|
||||
>
|
||||
<div class='text-primary text-thin col q-pl-xs' style=' font-size: 90%; font-weight: 300;'>{{replyMode}}</div>
|
||||
<div class='flex row no-wrap'>
|
||||
<q-tabs
|
||||
v-model='replyMode'
|
||||
class='no-padding no-margin'
|
||||
unelevated
|
||||
dense
|
||||
@click.stop='replyMode = null'
|
||||
flat
|
||||
active-color='primary'
|
||||
:size='highlighted ? "md" : "sm"'
|
||||
@click.stop
|
||||
>
|
||||
<q-tooltip>
|
||||
cancel
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<q-tab name='embed' class='no-padding'>
|
||||
<q-icon name='link' >
|
||||
<q-tooltip>
|
||||
embed
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='repost' class='no-padding'>
|
||||
<q-icon name='repeat' >
|
||||
<q-tooltip>
|
||||
repost
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='quote' class='no-padding'>
|
||||
<q-icon name='format_quote' >
|
||||
<q-tooltip>
|
||||
quote
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
<q-tab name='reply' class='no-padding'>
|
||||
<q-icon name='chat_bubble_outline' class='flip-horizontal' >
|
||||
<q-tooltip>
|
||||
reply
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<div class='flex row no-wrap items-center'>
|
||||
<q-separator v-if='replyMode' color='primary' size='1px' vertical spaced :class='highlighted ? "q-mt-sm" : "q-mt-xs"'/>
|
||||
<q-btn
|
||||
v-if='replyMode'
|
||||
icon="close"
|
||||
color='primary'
|
||||
flat
|
||||
dense
|
||||
@click.stop='replyMode = null'
|
||||
:size='highlighted ? "md" : "sm"'
|
||||
>
|
||||
<q-tooltip>
|
||||
cancel
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section v-if="replyMode" class='full-width new-reply-box' ref='replyContent'>
|
||||
<q-item-section v-if="replyMode" class='new-reply-box' ref='replyContent'>
|
||||
<q-tab-panels
|
||||
v-model="replyPanel"
|
||||
class='no-padding full-width overflow-hidden'
|
||||
style='background-color: inherit; max-width: 100%;'
|
||||
style='background-color: inherit; max-width: 100%; padding: 0 .25 0 0;'
|
||||
@transition='calcConnectorValues(10)'
|
||||
>
|
||||
<q-tab-panel name="embed" class='no-padding' @click.stop>
|
||||
@ -214,17 +200,17 @@
|
||||
</q-tab-panels>
|
||||
</q-item-section>
|
||||
|
||||
<q-item v-if='hasReplyChildren' class='no-padding no-border no-margin column full-width' >
|
||||
<div v-for="thread in event.replies" :key="thread[0].id" ref="childReplyContent">
|
||||
<BasePostThread
|
||||
:events="thread"
|
||||
:reply-depth='replyDepth + 1'
|
||||
@resized='calcConnectorValues(10)'
|
||||
/>
|
||||
<div v-if='hasReplyChildren' class='full-width' >
|
||||
<div v-for="thread in event.replies" :key="thread[0].id" ref="childReplyContent">
|
||||
<BasePostThread
|
||||
:events="thread"
|
||||
:reply-depth='replyDepth + 1'
|
||||
@resized='calcConnectorValues(10)'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -419,9 +405,11 @@ export default defineComponent({
|
||||
.post-padding {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dotted var(--q-accent);
|
||||
padding: .5rem 0 0;
|
||||
padding: .5rem 0 0 .25rem;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: .9rem;
|
||||
}
|
||||
@ -433,7 +421,9 @@ export default defineComponent({
|
||||
.post-highlighted .reposts {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.reposts {
|
||||
margin: .5rem .5rem 0 0;
|
||||
}
|
||||
.reposts .post-padding {
|
||||
border: 0;
|
||||
}
|
||||
@ -446,10 +436,15 @@ export default defineComponent({
|
||||
.post-has-reply {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.post-is-reply,
|
||||
.post-is-child-reply {
|
||||
padding: 0;
|
||||
}
|
||||
.has-reply-connector,
|
||||
.is-reply-connector,
|
||||
.has-child-reply-connector,
|
||||
.has-child-reply-tick {
|
||||
opacity: .7;
|
||||
}
|
||||
.has-reply-connector {
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
@ -473,9 +468,10 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
left: calc((100% / 2) - 1px);
|
||||
top: 1.5rem;
|
||||
border-left: 2px dotted var(--q-accent);
|
||||
border-bottom: 2px dotted var(--q-accent);
|
||||
border-left: 2px solid var(--q-accent);
|
||||
border-bottom: 2px solid var(--q-accent);
|
||||
z-index: 0;
|
||||
opacity: .3;
|
||||
}
|
||||
.post-highlighted .has-replying-connector {
|
||||
top: 1.9rem;
|
||||
@ -498,10 +494,10 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.new-reply-box {
|
||||
border: 1px dashed var(--q-primary);
|
||||
border: 1px solid var(--q-primary);
|
||||
border-radius: .4rem;
|
||||
padding: .3rem .3rem 0;
|
||||
margin: 0 0 .3rem;
|
||||
margin: 0 .3rem .3rem 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@ -510,8 +506,8 @@ export default defineComponent({
|
||||
|
||||
<style lang="css">
|
||||
.reposts {
|
||||
border-radius: .25rem;
|
||||
border: 1px dotted var(--q-accent);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 0 .3rem -.0rem var(--q-accent);
|
||||
min-width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<q-list ref='thread'>
|
||||
<q-list ref='thread' class='no-padding'>
|
||||
<div
|
||||
v-for="(event, index) in filledEvents"
|
||||
:key="event.id + index"
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex column q-gutter-md">
|
||||
<div v-if='!listView' class="" caption>added relay:</div>
|
||||
<div v-if='!listView'>added relay:</div>
|
||||
<BaseRelayCard :url='url' />
|
||||
</div>
|
||||
</template>
|
||||
|
@ -34,10 +34,10 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang='css' scoped>
|
||||
.bordered-avatar .q-avatar img {
|
||||
border: 2px solid $accent;
|
||||
background: $dark;
|
||||
border: 2px solid var(--q-accent);
|
||||
background: var(--q-dark);
|
||||
z-index: 1;
|
||||
}
|
||||
.hovered-avatar .q-avatar:hover {
|
||||
|
@ -39,6 +39,7 @@
|
||||
clickable
|
||||
class='menu-item'
|
||||
:dense='compactMode'
|
||||
:style='compactMode ? "" : "min-height: 2.75rem;"'
|
||||
:active="$route.name === item.title"
|
||||
active-class=''
|
||||
:to="item.to"
|
||||
@ -46,7 +47,7 @@
|
||||
:class="($route.path.split('/')[1] === item.match ? 'menu-item-active text-accent ' : '') +
|
||||
(compactMode ? 'no-margin no-padding col' : 'self-end q-px-none')"
|
||||
>
|
||||
<q-item-section v-if='!compactMode' class='gt-sm text-uppercase'>
|
||||
<q-item-section v-if='!compactMode' class='gt-sm text-uppercase' style='font-size: 1rem;'>
|
||||
<div>
|
||||
{{ $t(item.title) }}
|
||||
</div>
|
||||
@ -56,6 +57,7 @@
|
||||
v-if="item.icon && !compactMode"
|
||||
avatar
|
||||
class="relative-position no-padding"
|
||||
style="min-width: 2.5rem;"
|
||||
>
|
||||
<q-icon outline :name="item.icon"/>
|
||||
<!-- <q-badge
|
||||
@ -206,18 +208,6 @@ export default defineComponent({
|
||||
to: '/messages/inbox',
|
||||
match: 'messages',
|
||||
},
|
||||
// {
|
||||
// title: 'lists',
|
||||
// // caption: 'forum.quasar.dev',
|
||||
// icon: 'list',
|
||||
// to: '/lists',
|
||||
// },
|
||||
// {
|
||||
// title: 'profile',
|
||||
// icon: 'account_circle',
|
||||
// to: '/' + this.$store.state.keys.pub,
|
||||
// match: this.$store.state.keys.pub,
|
||||
// },
|
||||
{
|
||||
title: 'settings',
|
||||
icon: 'settings',
|
||||
|
@ -320,7 +320,6 @@ body {
|
||||
border-left: 2px solid var(--q-accent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
#middle-page .q-page-container {
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
|
||||
<q-page ref='page'>
|
||||
<div class="text-h5 text-bold q-py-md">{{ $t('thread') }}</div>
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('thread') }}</div>
|
||||
<q-separator color='accent' size='2px'/>
|
||||
<div v-if="ancestorsCompiled.length || rootAncestor">
|
||||
<BasePostThread :events="ancestorsCompiled" is-ancestors @add-event='addEventAncestors'/>
|
||||
@ -18,13 +18,13 @@
|
||||
<div v-else>
|
||||
{{ $t('event') }} {{ $route.params.eventId }}
|
||||
</div>
|
||||
<BaseRelayList v-if="event?.seen_on?.length" :event='event'/>
|
||||
<BaseRelayList v-if="event?.seen_on?.length" :event='event' class='q-px-sm'/>
|
||||
</q-item>
|
||||
|
||||
<q-separator color='accent' size='2px'/>
|
||||
|
||||
<div v-if="childrenThreadsFiltered.length">
|
||||
<div class="text-h6 text-bold">{{ $t('replies') }}</div>
|
||||
<div class="text-h6 text-bold q-px-sm">{{ $t('replies') }}</div>
|
||||
<div v-for="(thread) in childrenThreadsFiltered" :key="thread[0].id">
|
||||
<BasePostThread :events="thread" @add-event='processChildEvent'/>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div>
|
||||
<div class="text-h5 text-bold q-py-md full-width flex row justify-start">
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm full-width flex row justify-start">
|
||||
{{ $t('feed') }}
|
||||
</div>
|
||||
<q-tabs
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="text-h5 text-bold q-py-md">{{'#' + this.$route.params.hashtagId}}</div>
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm">{{'#' + this.$route.params.hashtagId}}</div>
|
||||
<q-separator color='accent' size='2px'/>
|
||||
<div>
|
||||
<BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='processEvent'/>
|
||||
@ -77,8 +77,3 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.q-tabs {
|
||||
border-bottom: 1px solid $accent
|
||||
}
|
||||
</style>
|
||||
|
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="text-h5 text-bold q-py-md full-width flex row justify-start">
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm full-width flex row justify-start">
|
||||
{{ $t('inbox') }}
|
||||
</div>
|
||||
<q-separator color='accent' size='2px'/>
|
||||
|
||||
<q-list class='q-py-sm q-gutter-sm'>
|
||||
<q-list class='q-py-sm q-pr-sm q-gutter-sm'>
|
||||
<div v-if="loading" class='flex row justify-center items-start q-my-md'>
|
||||
<q-spinner-orbit color="accent" size='md'/>
|
||||
</div>
|
||||
@ -107,5 +107,3 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="text-h5 text-bold q-py-md">{{ $t('notifications') }}</div>
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('notifications') }}</div>
|
||||
|
||||
<q-separator color='accent' size='2px'/>
|
||||
<q-infinite-scroll
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<q-page id='settings-page'>
|
||||
<div class="text-h5 text-bold q-py-md">{{ $t('settings') }}</div>
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('settings') }}</div>
|
||||
<q-separator color='accent' size='2px'/>
|
||||
<q-form class="q-gutter-md q-pt-sm" @submit="setMetadata">
|
||||
<q-form class="q-gutter-md section" @submit="setMetadata">
|
||||
<div v-if='editingMetadata' class='flex justify-between' style='display: flex; gap: .2rem;'>
|
||||
<q-btn label="save" color="primary" outline size="sm" type="submit"/>
|
||||
<q-btn label="cancel" color="negative" outline size="sm" @click='cancel("metadata")'/>
|
||||
@ -47,9 +47,9 @@
|
||||
/>
|
||||
</q-form>
|
||||
|
||||
<q-separator color='accent' spaced/>
|
||||
<q-separator color='accent'/>
|
||||
|
||||
<div v-if='Object.keys(preferences).length'>
|
||||
<div v-if='Object.keys(preferences).length' class='section'>
|
||||
<div v-if='editingPreferences' class='flex justify-between' style='display: flex; gap: .2rem;'>
|
||||
<q-btn label="save" color="primary" outline size="sm" @click='savePreferences'/>
|
||||
<q-btn label="cancel" color="negative" outline size="sm" @click='cancel("preferences")'/>
|
||||
@ -74,8 +74,8 @@
|
||||
<label for="accent">accent</label>
|
||||
<input type="color" id="accent" name="accent" :value='this.preferences.color.accent' @input='(event) => updateColor(event, "accent")'> -->
|
||||
</div>
|
||||
<q-separator color='accent' spaced/>
|
||||
<div>
|
||||
<q-separator color='accent'/>
|
||||
<div class='section'>
|
||||
<div v-if='editingRelays' class='flex justify-between' style='display: flex; gap: .2rem;'>
|
||||
<q-btn label="save" color="primary" outline size="sm" @click='saveRelays'/>
|
||||
<q-btn label="cancel" color="negative" outline size="sm" @click='cancel("relays")'/>
|
||||
@ -162,9 +162,9 @@
|
||||
</q-form>
|
||||
</div>
|
||||
|
||||
<q-separator color='accent' spaced/>
|
||||
<q-separator color='accent'/>
|
||||
|
||||
<div class="flex no-wrap" style='gap: .2rem;'>
|
||||
<div class="flex no-wrap section" style='gap: .2rem;'>
|
||||
<q-btn label="View your keys" color="primary" outline @click="keysDialog = true" />
|
||||
<q-btn label="logout" color="primary" outline @click="logout" />
|
||||
<q-btn label="Delete Local Data" color="negative" outline @click="hardReset" />
|
||||
@ -409,3 +409,9 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='css' scoped>
|
||||
.section {
|
||||
padding: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="text-h5 text-bold q-py-md">dev tools</div>
|
||||
<div class="text-h5 text-bold q-py-md q-px-sm">dev tools</div>
|
||||
<q-separator color='accent' size='2px'/>
|
||||
<div class="text-bold q-py-md">sql query</div>
|
||||
<div class='q-py-md q-px-sm'>
|
||||
<div class="text-bold">sql query</div>
|
||||
|
||||
<!-- <h2> sql query </h2> -->
|
||||
<!-- <label for='commands'>Enter some SQL</label> -->
|
||||
@ -10,7 +11,7 @@
|
||||
|
||||
<textarea v-model='sql' id="editor"/>
|
||||
<div style='display: flex; flex-direction: row; gap: 1rem; padding: .5rem 0; align-items: center'>
|
||||
<q-btn id="execute" color='primary' @click='execEditorContents'>Execute</q-btn>
|
||||
<q-btn id="execute" color='primary' outline @click='execEditorContents'>Execute</q-btn>
|
||||
<!-- <button id='savedb' class="btn btn-secondary btn-sm">Save the db</button> -->
|
||||
<!-- <label class="button">Load an SQLite database file: <input type='file' id='dbfile' /></label> -->
|
||||
</div>
|
||||
@ -23,6 +24,7 @@
|
||||
:rows-per-page-options='[10, 50, 100, 0]'
|
||||
/>
|
||||
<pre id="output">Results will be displayed here</pre>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
|
@ -176,7 +176,7 @@ export default {
|
||||
${item.original.value.nip05
|
||||
? '<i class="notranslate material-icons text-accent mr-1 -ml-1" aria-hidden="true" role="presentation">verified</i>'
|
||||
: ''}
|
||||
<div class="text-secondary caption">${shorten(item.original.value.pubkey)}</div>
|
||||
<div class="text-secondary text-caption">${shorten(item.original.value.pubkey)}</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user