twitter-like highlights and clicks.

src/components/Post.vue

@@ -1,6 +1,12 @@
 <template>
   <q-item
-    :class="highlighted ? 'py-6' : 'py-4'"
+    :class="{
+      'transition-colors': true,
+      'py-4': !highlighted,
+      'hover:bg-white/50': !highlighted && item,
+      'py-6': highlighted,
+      'bg-white/70': highlighted
+    }"
     :style="{backgroundColor: highlighted ? 'rgba(255, 255, 255, 0.7)' : null}"
   >
     <q-item-section avatar>
@@ -45,7 +51,12 @@
           {{ niceDate(event.created_at) }}
         </div>
       </q-item-label>
-      <q-item-label class="break-all pt-1 pl-1 text-base font-sans">
+      <q-item-label
+        class="break-all pt-1 pl-1 text-base font-sans"
+        :class="{'cursor-pointer': item}"
+        @mousedown="startClicking"
+        @mouseup="finishClicking"
+      >
         {{ event.content }}
       </q-item-label>
     </q-item-section>
@@ -60,11 +71,14 @@ export default {
   props: {
     event: {type: Object, required: true},
     highlighted: {type: Boolean, default: false},
-    standalone: {type: Boolean, default: false}
+    standalone: {type: Boolean, default: false},
+    item: {type: Boolean, default: false}
   },
 
   data() {
-    return {}
+    return {
+      clicking: false
+    }
   },
 
   computed: {
@@ -77,6 +91,19 @@ export default {
       }
       return null
     }
+  },
+
+  methods: {
+    startClicking() {
+      this.clicking = true
+      setTimeout(() => {
+        this.clicking = false
+      }, 300)
+    },
+
+    finishClicking() {
+      if (this.clicking) this.toEvent(this.event.id)
+    }
   }
 }
 </script>

src/components/Publish.vue

@@ -1,11 +1,11 @@
 <template>
-  <q-card class="no-shadow p-6 bg-inherit">
+  <q-card class="no-shadow py-6 bg-inherit">
     <q-card-section>
       <q-form @submit="sendPost">
         <q-input v-model="text" dense label="Say something" maxlength="280">
           <template #before>
-            <q-btn round class="mr-3" @click="toProfile($store.state.keys.pub)">
-              <q-avatar round size="42px">
+            <q-btn round class="mr-4" @click="toProfile($store.state.keys.pub)">
+              <q-avatar round size="70px">
                 <img :src="$store.getters.avatar($store.state.keys.pub)" />
               </q-avatar>
             </q-btn>

src/pages/Event.vue

@@ -15,7 +15,7 @@
 
     <div v-if="related.length">
       <div class="text-lg mx-4">Related</div>
-      <Post v-for="rel in related" :key="rel.id" :event="rel" />
+      <Post v-for="rel in related" :key="rel.id" :event="rel" item />
     </div>
   </q-page>
 </template>

src/pages/Home.vue

@@ -1,12 +1,16 @@
 <template>
-  <q-page>
+  <q-page class="px-4 pt-6">
+    <div class="text-xl">Home</div>
+
     <Publish />
+
     <q-infinite-scroll :disable="reachedEnd" :offset="150" @load="loadMore">
       <Post
         v-for="event in homeFeed"
         :key="event.id"
         :event="event"
         standalone
+        item
       />
     </q-infinite-scroll>
   </q-page>

src/pages/Profile.vue

@@ -56,7 +56,13 @@
 
     <div>
       <div class="text-lg mx-4">Notes</div>
-      <Post v-for="event in events" :key="event.id" :event="event" standalone />
+      <Post
+        v-for="event in events"
+        :key="event.id"
+        :event="event"
+        standalone
+        item
+      />
     </div>
   </q-page>
 </template>