1 files changed, 52 insertions, 29 deletions
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 078d954c..8a302e18 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,39 +1,62 @@
 <template>
-  <div class="timeline">
-    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="base00-background base05-border new-status-notification">
-        <p class="text-center" >
-          {{timeline.newStatusCount}} new statuses
-        </p>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading base01-background base04">
+      <div class="title">
+        {{title}}
       </div>
-    </a>
-    <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
-    <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-      <div class="base01-background base05-border new-status-notification">
-        <p class="text-center" >
-          Load older statuses.
-        </p>
+      <button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
+        Show new ({{timeline.newStatusCount}})
+      </button>
+      <button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
+        Up-to-date
+      </button>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
+        <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+          <div class="base01-background base05-border new-status-notification text-center">Load older statuses.</div>
+        </a>
+          <div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
       </div>
-    </a>
+    </div>
   </div>
 </template>
 <script src="./timeline.js"></script>
 
 <style lang="scss">
- .new-status-notification {
-   border-style: solid;
-   float: right;
-   border-width: 1px 1px 0px 1px;
-   border-radius: 5px 5px 0 0;
-   font-size: 1.1em;
-   margin-top: -2.08em;
-   margin-right: 0.8em;
-   max-width: 200px;
-   max-height: 2em;
 
-   p {
-     margin: 0px;
-     padding: 0.6em;
-   }
- }
+  .timeline .panel-heading {
+    position: relative;
+    display: flex;
+
+    .title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 70%;
+    }
+    button {
+      position: absolute;
+      right: 0.6em;
+      padding: 0.1em 0.3em 0.25em 0.3em;
+      min-width: 6em;
+    }
+    .no-press {
+      opacity: 0.8;
+      cursor: default;
+    }
+  }
+
+
+  .new-status-notification {
+    position:relative;
+    margin-top: -1px;
+    font-size: 1.1em;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-radius: 0 0 10px 10px;
+    padding: 10px;
+    z-index: 1;
+  }
 </style>