From f559c237caa479b6c19ed6f41a0c8c16461b92f3 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Mon, 18 Apr 2022 14:17:37 +0200
Subject: [PATCH] Problem: UI uses too much space

Solution: use smaller buttons and simplify language
---
 src/components/Channels.vue | 2 +-
 src/components/Timeline.vue | 3 +++
 src/store.js                | 3 +++
 src/views/Home.vue          | 6 +++---
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Channels.vue b/src/components/Channels.vue
index e25f3dc..e879e57 100644
--- a/src/components/Channels.vue
+++ b/src/components/Channels.vue
@@ -3,7 +3,7 @@
     <div class="channels--channel" v-for="channel in channels" :key="channel.uid">
       <slot :channel="channel"></slot>
     </div>
-    <button class="button is-primary" @click="open">+ New Channel</button>
+    <button class="button is-primary is-small" @click="open">New Channel</button>
   </div>
 </template>
 
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 8598305..ea4b65f 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -4,6 +4,9 @@
       <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)" @followFeed="$emit('followFeed', arguments[0])"
                      :is-main-entry="true"/>
     </div>
+    <div v-if="items.length === 0">
+      <p class="text-center">No items in this timeline</p>
+    </div>
     <div class="level">
       <div class="level-item">
         <button class="button" @click="prevPage" v-if="timeline.paging.before">Prev Page</button>
diff --git a/src/store.js b/src/store.js
index dddec94..0cc408e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -179,6 +179,9 @@ export default new Vuex.Store({
       commit('clearTimeline', {channel: channel})
     },
     fetchTimeline({commit}, channel) {
+      if (!channel.uid) {
+        channel.uid = 'home';
+      }
       let url = this.state.microsubEndpoint + '?action=timeline&channel=' + channel.uid
       if (channel.after) {
         url += '&after=' + channel.after;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ac906ca..1a6a434 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,14 +11,14 @@
     </div>
 
     <div class="timeline column is-three-fifths">
-      <div class="level">
+      <div class="level is-mobile">
         <div class="level-left">
           <h1 class="title is-5">{{ channel.name }}</h1>
         </div>
         <div class="level-right timeline-buttons">
           <div class="level-item">
-            <button class="button" @click.prevent="openPost">New Post</button>
-            <button class="button" @click.prevent="openFeedFollower('')">Add feed</button>
+            <button class="button is-small" @click.prevent="openPost">New Post</button>
+            <button class="button is-small" @click.prevent="openFeedFollower('')">Add feed</button>
           </div>
         </div>
       </div>