fix: small UI issues

src/components/BaseMarkdown.vue

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

src/components/BasePost.vue

@@ -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>
+    <div class='flex column no-wrap col full-width'>
-    <q-item-section ref='postContent' class='relative-position' style='padding-left: .2rem;'>
+      <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>
+      </div>
-    </q-item-section>
+    </div>
-  </q-item>
+  </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-left: 2px solid var(--q-accent);
-  border-bottom: 2px dotted 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-radius: .75rem;
-  border: 1px dotted var(--q-accent);
+  box-shadow: 0 0 .3rem -.0rem var(--q-accent);
   min-width: 150px;
 }
 </style>

src/components/BasePostThread.vue

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

src/components/BaseRelayRecommend.vue

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

src/components/BaseUserAvatar.vue

@@ -34,10 +34,10 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='css' scoped>
 .bordered-avatar .q-avatar img {
-  border: 2px solid $accent;
+  border: 2px solid var(--q-accent);
-  background: $dark;
+  background: var(--q-dark);
   z-index: 1;
 }
 .hovered-avatar .q-avatar:hover {

src/components/TheUserMenu.vue

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

src/layouts/MainLayout.vue

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

src/pages/Event.vue

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

src/pages/Feed.vue

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

src/pages/Hashtag.vue

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

src/pages/Inbox.vue

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

src/pages/Notifications.vue

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

src/pages/Settings.vue

@@ -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/>
+    <q-separator color='accent'/>
-    <div>
+    <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>

src/pages/devTools.vue

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

src/utils/mixin.js

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