peter/ekster-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix the layout so it works better with scrolling

Browse Source
This commit is contained in:
Peter Stuifzand 2018-09-08 14:51:29 +02:00
parent ec7e79c61a
commit cfd70999a3
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/Home.vue
View File

@ -1,18 +1,20 @@
<template> <template>
<div class="home"> <div class="home columns">
<Channels class="channels" :channels="this.$store.state.channels"> <Channels class="channels column" :channels="this.$store.state.channels">
<div slot-scope="{ channel }"> <div slot-scope="{ channel }">
<Channel :channel="channel" @channel-selected="selectChannel"></Channel> <Channel :channel="channel" @channel-selected="selectChannel"></Channel>
</div> </div>
</Channels> </Channels>
<div class="timeline"> <div class="timeline column is-three-fifths">
<button class="button" @click="openFeedFollower">Add feed</button> <button class="button" @click="openFeedFollower">Add feed</button>
<new-post class="mt-20"></new-post> <new-post class="mt-20"></new-post>
<h1>{{ channel.name }}</h1> <h1>{{ channel.name }}</h1>
<Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel" @getPage="getPage"></Timeline> <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel" @getPage="getPage"></Timeline>
</div> </div>
<div class="column"></div>
<channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator> <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
<feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower> <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower>
</div> </div>
@ -85,18 +87,13 @@
<style scoped> <style scoped>
.timeline { .timeline {
margin-top: 20px; margin-top: 20px;
width: 600px;
position: absolute;
left: 270px;
padding-bottom: 100px; padding-bottom: 100px;
} }
.channels { .channels {
position: fixed; position: sticky;
top: 52px; top: 40px;
height: calc(100vh - 52px); max-height: calc(100vh - 40px);
width: 250px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 100px; padding-bottom: 100px;