diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 1378e73025cbbbbde60bc6f7bc4b6247a521ab50..8e3e07218c03d65b2cef727a0d67b40e73971b9e 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 180b86a1f4ffcd993cfd820b7658722262e11711..e0dcb12dfeab75852411f50af440d23839de14af 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 8a302e185f807f2bf7364894633009cca41c0bba..11280a081dd0862b451b4e372f5fac829d41c64c 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;