Compare commits
2 Commits
snoot
...
feature/fl
Author | SHA1 | Date |
---|---|---|
Shpuld Shpuldson | b6d3f6f367 | |
Shpuld Shpuldson | d1dfb52feb |
|
@ -33,6 +33,7 @@ button{
|
|||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 1px black;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
|
|
|
@ -11,6 +11,7 @@ const conversation = {
|
|||
data () {
|
||||
return {
|
||||
highlight: null,
|
||||
floatHeading: 0,
|
||||
preview: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
@ -40,6 +41,7 @@ const conversation = {
|
|||
},
|
||||
created () {
|
||||
this.fetchConversation()
|
||||
window.onscroll = this.moveHeading
|
||||
},
|
||||
watch: {
|
||||
'$route': 'fetchConversation'
|
||||
|
@ -90,6 +92,25 @@ const conversation = {
|
|||
} else {
|
||||
this.preview.status = null
|
||||
}
|
||||
},
|
||||
moveHeading (e) {
|
||||
const rect = this.$el.getBoundingClientRect()
|
||||
if (rect.bottom - 50 < 50) {
|
||||
this.floatHeading = rect.bottom - rect.top - 50
|
||||
// console.log(this.floatHeading)
|
||||
} else if (rect.top < 50) {
|
||||
this.floatHeading = -rect.top + 50
|
||||
// console.log(this.floatHeading)
|
||||
} else {
|
||||
this.floatHeading = 0
|
||||
}
|
||||
},
|
||||
toggleExpanded () {
|
||||
if (this.floatHeading > 0) {
|
||||
window.scrollBy(0, -this.floatHeading - 200)
|
||||
console.log(this.floatHeading)
|
||||
}
|
||||
this.$emit('toggleExpanded')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
<div class="timeline panel panel-default base00-background">
|
||||
<div class="panel-heading base01-background base04 base03-border conversation-heading">
|
||||
Conversation
|
||||
<span v-if="collapsable" style="float:right;">
|
||||
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
|
||||
</span>
|
||||
<button v-if="collapsable" :style="{ top: floatHeading + 'px' }" class="collapser base06 base02-background" @click.prevent="toggleExpanded">
|
||||
Collapse
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="timeline">
|
||||
|
@ -30,6 +30,16 @@
|
|||
.conversation-heading {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
|
||||
.collapser {
|
||||
position: relative;
|
||||
float:right;
|
||||
height: 1.8em;
|
||||
line-height: 100%;
|
||||
padding: 0 0.6em 0 0.6em;
|
||||
margin-right: -0.4em;
|
||||
box-shadow: 0 0 1px black;
|
||||
}
|
||||
}
|
||||
|
||||
.status-preview {
|
||||
|
|
Loading…
Reference in New Issue