nostr/hamstr
1
0
Fork 0
mirror of https://github.com/styppo/hamstr.git synced 2024-10-18 13:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: small UI issues

Browse Source
This commit is contained in:
monica 2022-11-07 11:25:51 -06:00
parent 0fa5aa8915
commit 75d885ccf0
15 changed files with 202 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BaseMarkdown.vue
View File

@ -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>

70
src/components/BasePost.vue
View File

@ -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,17 +11,6 @@
(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
@ -59,11 +48,11 @@
/>
</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>
<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'
@ -84,10 +73,10 @@
<q-item-label
v-if="
tagged &&
($route.name === 'feed' || $route.name === 'profile' || $route.name === 'notifications') &&
($route.name != 'event') &&
!(isReply || isChildReply)
"
caption
class='q-pl-sm'
>
<span >in reply to&nbsp;</span>
@ -96,9 +85,6 @@
</a>
</q-item-label>
</div>
<!-- <q-item-label
class='q-pt-xs break-word-wrap'
> -->
<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
@ -186,11 +172,11 @@
</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,7 +200,7 @@
</q-tab-panels>
</q-item-section>
<q-item v-if='hasReplyChildren' class='no-padding no-border no-margin column full-width' >
<div v-if='hasReplyChildren' class='full-width' >
<div v-for="thread in event.replies" :key="thread[0].id" ref="childReplyContent">
<BasePostThread
:events="thread"
@ -222,9 +208,9 @@
@resized='calcConnectorValues(10)'
/>
</div>
</q-item>
</q-item-section>
</q-item>
</div>
</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>

2
src/components/BasePostThread.vue
View File

@ -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"

2
src/components/BaseRelayRecommend.vue
View File

@ -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>

6
src/components/BaseUserAvatar.vue
View File

@ -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 {

16
src/components/TheUserMenu.vue
View File

@ -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',

1
src/layouts/MainLayout.vue
View File

@ -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 {
}

6
src/pages/Event.vue
View File

@ -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>

2
src/pages/Feed.vue
View File

@ -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

7
src/pages/Hashtag.vue
View File

@ -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>

6
src/pages/Inbox.vue
View File

@ -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>

2
src/pages/Notifications.vue
View File

@ -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

22
src/pages/Settings.vue
View File

@ -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>

8
src/pages/devTools.vue
View File

@ -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>

2
src/utils/mixin.js
View File

@ -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>
`
},