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

Improve layout and humanize time

Browse Source
This commit is contained in:
Peter Stuifzand 2018-08-30 21:43:31 +02:00
parent dc72d1bdaa
commit 284f6256a6
2 changed files with 71 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Entry.vue
View File

@ -10,52 +10,68 @@
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48"> <p class="image is-48x48">
<img :src="author_photo"/> <img :src="author_photo"/>
</figure> </p>
</div> </div>
<div v-if="isRef"> <div class="content">
<div><a :href="author_url">{{ author_name }}</a> reposted:</div>
<Entry :item="innerRef" :isMainEntry="false"></Entry>
</div>
<div class="content" v-else> <div v-if="isRef">
<div><a :href="author_url">{{ author_name }}</a></div> <div><a :href="author_url">{{ author_name }}</a> reposted:</div>
<h3 class="title is-6" v-if="item.name" v-text="item.name"></h3> <Entry :item="innerRef" :isMainEntry="false"></Entry>
<div class="content" v-html="main_content"></div> </div>
<div class="photos"> <div v-else>
<div class="photo" v-for="photo in photo_rest" :key="photo"> <div><a :href="author_url">{{ author_name }}</a></div>
<img :src="photo" class="image"/>
<h3 class="title is-6" v-if="item.name" v-text="item.name"></h3>
<div class="content" v-html="main_content"></div>
<div class="photos">
<div class="photo" v-for="photo in photo_rest" :key="photo">
<img :src="photo" class="image"/>
</div>
</div> </div>
</div> </div>
<a :href="item.url" target="_new"> <p>
<span class="published" v-html="item.published"></span> <small>
</a> <span v-if="showFooterButtons">
<a @click="like">Like</a>
&middot; <a @click.prevent="openReply">Reply</a>
&middot; <a @click.prevent="repost">Repost</a>
&middot; <a @click.prevent="debug">Debug</a>
&middot;
</span><a :href="item.url" target="_new">
<span class="published" v-html="niceTime"></span></a>
</small>
</p>
</div>
</div>
<div class="media" v-if="replying">
<div class="media-content">
<div class="field">
<label class="label">Write your reply:</label>
<div class="control">
<textarea class="textarea" v-model="replyText"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" @click="reply">Reply</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<footer class="card-footer" v-if="showFooterButtons">
<a class="card-footer-item" @click.prevent="debug">Debug</a>
<a class="card-footer-item" @click.prevent="like">Like</a>
<a class="card-footer-item" @click.prevent="repost">Repost</a>
<a class="card-footer-item" @click.prevent="openReply">Reply</a>
</footer>
</div>
<div class="card" v-if="replying">
<div class="card-content">
<textarea class="textarea" v-model="replyText"></textarea>
</div>
<footer class="card-footer">
<a class="card-footer-item" @click="reply">Reply</a>
</footer>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'
export default { export default {
name: "Entry", name: "Entry",
props: ['item', 'is-main-entry'], props: ['item', 'is-main-entry'],
@ -121,6 +137,12 @@
}, },
computed: { computed: {
niceTime() {
return moment(this.item.published).fromNow()
},
refNiceTime() {
return moment(this.innerRef.published).fromNow()
},
classes() { classes() {
return { return {
'entry': true, 'entry': true,
@ -215,12 +237,15 @@
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
} }
.unread { .unread {
box-shadow: 0 4px 8px 0 rgba(255, 255, 0, 0.8), 0 6px 20px 0 rgba(255, 255, 0, 0.5); box-shadow: 0 4px 8px 0 rgba(255, 255, 0, 0.8), 0 6px 20px 0 rgba(255, 255, 0, 0.5);
} }
.media .entry { .media .entry {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.media .entry .media { .media .entry .media {
margin-top: 0; margin-top: 0;
} }

22
src/components/Timeline.vue
View File

@ -6,11 +6,21 @@
<div class="card-header-title">What are you thinking about?</div> <div class="card-header-title">What are you thinking about?</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<textarea class="textarea" v-model="newPost"></textarea> <div class="media">
<div class="media-content">
<div class="field">
<div class="control">
<textarea class="textarea" v-model="newPost"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" @click="post">Post</button>
</div>
</div>
</div>
</div>
</div> </div>
<footer class="card-footer has-buttons">
<button class="button is-primary" @click="post">Post</button>
</footer>
</div> </div>
</div> </div>
@ -96,7 +106,7 @@
if (child.$props.item && !child.$props.item._is_read) { if (child.$props.item && !child.$props.item._is_read) {
child.$props.item._is_read = true child.$props.item._is_read = true
let item = child.$props.item let item = child.$props.item
this.markRead(this.channel.uid, item._id) this.markRead(this.channel.uid, item)
count++ count++
} }
}) })
@ -111,7 +121,7 @@
if (child.$props.item && !child.$props.item._is_read) { if (child.$props.item && !child.$props.item._is_read) {
child.$props.item._is_read = true child.$props.item._is_read = true
let item = child.$props.item let item = child.$props.item
this.markRead(this.channel.uid, item._id).then(() => { this.markRead(this.channel.uid, item).then(() => {
this.$store.dispatch('fetchChannels') this.$store.dispatch('fetchChannels')
}) })
} }