diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 4 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 2 | ||||
| -rw-r--r-- | src/components/login_form/login_form.vue | 2 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 2 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 2 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 68 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 5 |
7 files changed, 57 insertions, 28 deletions
diff --git a/src/App.scss b/src/App.scss index 0945c76b..8a1942c6 100644 --- a/src/App.scss +++ b/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; } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 8803dd57..5f395f46 100644 --- a/src/components/conversation/conversation.vue +++ b/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> diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0ea4313..c0273bae 100644 --- a/src/components/login_form/login_form.vue +++ b/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"> diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 100349eb..1378e730 100644 --- a/src/components/notifications/notifications.scss +++ b/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; } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 41c274aa..180b86a1 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="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}'> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 15ac5ff8..8a302e18 100644 --- a/src/components/timeline/timeline.vue +++ b/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> diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 87a445ca..3fa34773 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/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 { |