Multiple improvements

src/components/Channels.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="this.className">
+  <div>
     <div class="channels--channel" v-for="channel in channels" :key="channel.uid">
       <slot :channel="channel"></slot>
     </div>
@@ -12,7 +12,7 @@
   export default {
     name: "Channels",
     components: {ChannelCreator},
-    props: ['className', 'channels'],
+    props: ['channels'],
     methods: {
       open() {
         this.$store.dispatch('openChannelCreator')
@@ -22,4 +22,5 @@
 </script>
 
 <style scoped>
-</style>
+
+</style>

src/components/Entry.vue

@@ -38,9 +38,9 @@
           </div>
         </div>
         <div>
-          <div class="level" v-if="hasHiddenContent">
+          <div class="level">
             <div class="level-item">
-              <button class="is-link" @click.prevent="toggleHiddenContent">Read more</button>
+              <button class="is-link" v-if="hasHiddenContent" @click.prevent="toggleHiddenContent">Read more</button>
             </div>
             <div class="level-item">
                 <small>
@@ -133,6 +133,7 @@ export default {
         destinations: [],
         selectedDestinations: [],
         categories: [],
+        hasHiddenContent: true,
         hiddenContentVisible: false
       }
     },
@@ -215,23 +216,18 @@ export default {
       },
       toggleHiddenContent() {
         this.hiddenContentVisible = !this.hiddenContentVisible
+        const el = this.$refs['content-container']
+        el.scrollIntoView(true)
       }
     },
 
     mounted() {
       this.showFooterButtons = true
+      const el = this.$refs['content-container']
+      this.hasHiddenContent = el.scrollHeight > el.clientHeight
     },
 
     computed: {
-      hasHiddenContent () {
-        const el = this.$refs['content-container']
-        if (!el) {
-          // eslint-disable-next-line
-          console.log('ref content-container not found')
-          return true
-        }
-        return el.scrollHeight > el.clientHeight
-      },
       currentItem() {
         if (this.isRef) {
           return this.innerRef
@@ -363,6 +359,19 @@ export default {
         }
         return this.currentItem.author.photo
       }
+    },
+    watch: {
+      item(newItem, oldItem) {
+        this.$nextTick(() => {
+          const el = this.$refs['content-container']
+          if (!el) {
+            // eslint-disable-next-line
+            console.log('ref content-container not found')
+            return
+          }
+          this.hasHiddenContent = el.scrollHeight > el.clientHeight
+        })
+      }
     }
   }
 </script>

src/store.js

@@ -91,13 +91,10 @@ export default new Vuex.Store({
         }
       })
       state.eventSource.addEventListener('new item', evt => {
-        // eslint-disable-next-line
-        console.log(evt)
-
         try {
           let newItemMsg = JSON.parse(evt.data)
           if (state.channel.uid === newItemMsg.channel) {
-            state.timeline.items = [...state.timeline.items, newItemMsg.item]
+            state.timeline.items = [newItemMsg.item, ...state.timeline.items]
           }
           state.globalTimeline.items = _.takeRight([...state.globalTimeline.items, newItemMsg.item], 10)
         } catch (e) {
@@ -205,7 +202,7 @@ export default new Vuex.Store({
         }
       })
     },
-    configQuery: function (key) {
+    configQuery ({commit}, key) {
       let micropub = new Micropub({
         token: this.state.access_token,
         micropubEndpoint: this.state.micropubEndpoint
@@ -213,10 +210,10 @@ export default new Vuex.Store({
       return micropub.query(key)
     },
     fetchSyndicationTargets() {
-      return this.configQuery('syndicate-to')
+      return this.dispatch('configQuery', 'syndicate-to')
     },
     fetchDestinations() {
-      return this.configQuery('destination');
+      return this.dispatch('configQuery', 'destination')
     },
     micropubPost(_, mf2post) {
       let micropub = new Micropub({
@@ -226,7 +223,7 @@ export default new Vuex.Store({
       return micropub.create(mf2post)
     },
     micropubLikeOf(_, url) {
-      this.dispatch({
+      this.dispatch('micropubPost', {
         'type': ['h-entry'],
         'properties': {
           'like-of': [url]

src/views/Home.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="home columns">
-    <Channels class="channels column" :channels="this.$store.state.channels">
+    <div class="column" style="padding-top: 20px">
-      <div slot-scope="{ channel }">
+      <button class="channels-toggle button" type="button" @click="showChannels">Channels</button>
-        <Channel :channel="channel" @channel-selected="selectChannel"></Channel>
+
-      </div>
+      <Channels :class="channelsClass" :channels="this.$store.state.channels">
-    </Channels>
+        <div slot-scope="{ channel }">
+          <Channel :channel="channel" @channel-selected="selectChannel"></Channel>
+        </div>
+      </Channels>
+    </div>
 
     <div class="timeline column is-three-fifths">
       <div class="level">
         <div class="level-left">
           <h1 class="title is-5">{{ channel.name }}</h1>
         </div>
-        <div class="level-right">
+        <div class="level-right timeline-buttons">
           <div class="level-item">
             <button class="button" @click.prevent="openPost">New Post</button>
-          </div>
-          <div class="level-item">
             <button class="button" @click.prevent="openFeedFollower('')">Add feed</button>
           </div>
         </div>
@@ -59,7 +61,8 @@
       return {
         feedFollowerIsOpen: false,
         feedFollowerQuery: '',
-        showPost: false
+        showPost: false,
+        channelsVisible: false,
       }
     },
 
@@ -69,6 +72,12 @@
       },
       channel() {
         return this.$store.state.channel
+      },
+      channelsClass () {
+        return {
+          'channels-open': this.channelsVisible,
+          'channels': true
+        }
       }
     },
 
@@ -94,6 +103,9 @@
       },
       openPost() {
         this.showPost = true
+      },
+      showChannels () {
+        this.channelsVisible = !this.channelsVisible
       }
     },
 
@@ -119,6 +131,10 @@
 </script>
 
 <style scoped>
+  .home {
+    padding: 10px;
+  }
+
   .timeline {
     margin-top: 20px;
     padding-bottom: 100px;
@@ -131,5 +147,28 @@
     overflow-y: scroll;
     overflow-x: hidden;
     padding-bottom: 100px;
+    display: none;
   }
-</style>
+
+  .channels-open {
+    display: block;
+  }
+
+  .timeline-buttons {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .timeline-buttons .level-item .button + .button {
+    margin-left: 12px;
+  }
+
+  @media screen and (min-width: 600px) {
+    .channels-toggle {
+      display: none;
+    }
+    .channels {
+      display: block !important;
+    }
+  }
+</style>