Merge branch 'feature/load-new-statuses-in-heading' into 'develop'

Improvements in loading statuses interface

See merge request !42

src/App.scss

@@ -109,8 +109,8 @@ main-router {
 .panel-heading {
     border-radius: 10px 10px 0 0;
     background-size: cover;
-    padding: 0.6em 0;
-    text-align: center;
+    padding: 0.6em 1.0em;
+    text-align: left;
     font-size: 1.3em;
     line-height: 24px;
 }

src/components/conversation/conversation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="timeline panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base01-background base04" style="justify-content:space-between;">
       Conversation
       <div v-if="collapsable">
         <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>

src/components/login_form/login_form.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading base01-background">
+    <div class="panel-heading base01-background base04">
       Log in
     </div>
     <div class="panel-body">

src/components/notifications/notifications.scss

@@ -9,7 +9,7 @@
     button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
-      right: 0.6em;
+      right: 0.7em;
     }
   }
 

src/components/notifications/notifications.vue

@@ -3,7 +3,7 @@
     <div class="panel panel-default base00-background">
       <div class="panel-heading base01-background base04">
         Notifications ({{unseenCount}})
-        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+        <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>

src/components/timeline/timeline.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">{{title}}</div>
+    <div class="panel-heading base01-background base04">
+      <div class="title">
+        {{title}}
+      </div>
+      <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">
-        <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-          <div class="base01-background base05-border new-status-notification">
-            <p class="text-center" >
-              {{timeline.newStatusCount}} new statuses
-            </p>
-          </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>
-          </div>
+          <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>
     </div>
   </div>
@@ -25,14 +25,38 @@
 <script src="./timeline.js"></script>
 
 <style lang="scss">
- .new-status-notification {
-   border-style: solid;
-   border-width: 1px 0 1px 0;
-   font-size: 1.1em;
 
-   p {
-     margin: 0px;
-     padding: 10px;
+  .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>

src/components/user_card_content/user_card_content.vue

@@ -104,6 +104,11 @@
 .profile-panel-background {
   background-size: cover;
   border-radius: 10px;
+
+  .panel-heading {
+    padding: 0.6em 0em;
+    text-align: center;
+  }
 }
 
 .profile-panel-body {