fedward/custom-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Improvements in loading statuses interface

See merge request !42
This commit is contained in:
lambadalambda 2017-03-06 07:58:32 -05:00
commit eab4b76951
7 changed files with 57 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.scss
View file

@ -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;
}

2
src/components/conversation/conversation.vue
View file

@ -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>

2
src/components/login_form/login_form.vue
View file

@ -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">

2
src/components/notifications/notifications.scss
View file

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

2
src/components/notifications/notifications.vue
View file

@ -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}'>

64
src/components/timeline/timeline.vue
View file

@ -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>

5
src/components/user_card_content/user_card_content.vue
View file

@ -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 {