Fix overlapping styles in timeline and notifications that screwed up user-card.

3 files changed, 11 insertions, 10 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1378e730..8e3e0721 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -6,7 +6,7 @@
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
-    button {
+    .read-button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
       right: 0.7em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 180b86a1..e0dcb12d 100644
--- a/src/components/notifications/notifications.vue
+++ b/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="base06 base02-background">Read!</button>
+        <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8a302e18..11280a08 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading timeline-heading base01-background base04">
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
+      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0">
         Show new ({{timeline.newStatusCount}})
       </button>
-      <button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
+      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0">
         Up-to-date
       </button>
     </div>
@@ -26,17 +26,18 @@
 
 <style lang="scss">
 
-  .timeline .panel-heading {
-    position: relative;
-    display: flex;
-
+  .timeline {
+    .timeline-heading {
+      position: relative;
+      display: flex;
+    }
     .title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 70%;
     }
-    button {
+    .loadmore-button {
       position: absolute;
       right: 0.6em;
       padding: 0.1em 0.3em 0.25em 0.3em;