IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed post card links

Browse Source
This commit is contained in:
Grzegorz Leoniec 2018-12-29 18:36:17 +01:00
parent 5f8d94e13e
commit a9db76e24b
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
3 changed files with 122 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/styles/main.scss
View File

@ -126,3 +126,15 @@ hr {
background-color: $color-neutral-80; background-color: $color-neutral-80;
height: 1px !important; height: 1px !important;
} }
[class$=menu-trigger] {
user-select: none;
}
[class$=menu-popover] {
display: inline-block;
nav {
margin-left: -17px;
margin-right: -15px;
}
}

201
components/PostCard.vue
View File

@ -1,97 +1,92 @@
<template> <template>
<a <ds-card
v-router-link :header="post.title"
:href="href(post)" :image="post.image"
class="post-card"
> >
<ds-card <a
:header="post.title" v-router-link
:image="post.image" class="post-link"
style="cursor: pointer; position: relative;" :href="href(post)"
> >
<no-ssr> {{ post.title }}
<dropdown class="post-menu"> </a>
<template <no-ssr>
slot="default" <dropdown class="post-menu">
slot-scope="{toggleMenu}" <template
slot="default"
slot-scope="{toggleMenu}"
>
<a
class="post-menu-trigger"
href="#"
@click.prevent="toggleMenu()"
> >
<a <ds-icon name="angle-down" />
class="post-menu-trigger" </a>
href="#" </template>
@click.prevent="toggleMenu()" <template
> slot="popover"
Options slot-scope="{toggleMenu}"
</a> >
</template> <div class="post-menu-popover">
<template <ds-menu :routes="routes">
slot="popover" <ds-menu-item
slot-scope="{toggleMenu}" slot="Navigation"
> slot-scope="item"
<div class="post-menu-popover"> :route="item.route"
<ds-menu :parents="item.parents"
:routes="routes" @click.native="toggleMenu"
:is-exact="isExact"
> >
<ds-menu-item <ds-icon :name="item.route.icon" /> {{ item.route.name }}
slot="Navigation" </ds-menu-item>
slot-scope="item" </ds-menu>
:route="item.route" </div>
:parents="item.parents" </template>
@click.native="toggleMenu" </dropdown>
> </no-ssr>
<ds-icon :name="item.route.icon" /> {{ item.route.name }} <!-- eslint-disable vue/no-v-html -->
</ds-menu-item> <!-- TODO: replace editor content with tiptap render view -->
</ds-menu> <ds-space margin-bottom="large">
<ds-space margin="xx-small" /> <div
<nuxt-link :to="{ name: 'logout'}"> class="hc-editor-content"
<ds-icon name="sign-out" /> {{ $t('login.logout') }} v-html="excerpt"
</nuxt-link> />
</div> </ds-space>
</template> <!-- eslint-enable vue/no-v-html -->
</dropdown> <ds-space
</no-ssr> margin="small"
<!-- eslint-disable vue/no-v-html --> style="position: absolute; bottom: 44px; z-index: 1;"
<!-- TODO: replace editor content with tiptap render view --> >
<ds-space margin-bottom="large"> <!-- TODO: find better solution for rendering errors -->
<div <no-ssr>
class="hc-editor-content" <hc-author
v-html="excerpt" :post="post"
:trunc="35"
:show-author-popover="showAuthorPopover"
/> />
</ds-space> </no-ssr>
<!-- eslint-enable vue/no-v-html --> </ds-space>
<ds-space <template slot="footer">
margin="small" <div style="display: inline-block; opacity: .5;">
style="position: absolute; bottom: 44px;" <ds-icon
> v-for="category in post.categories"
<!-- TODO: find better solution for rendering errors --> :key="category.id"
<no-ssr> v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
<hc-author :name="category.icon"
:post="post" />&nbsp;
:trunc="35" </div>
:show-author-popover="showAuthorPopover" <div style="display: inline-block; float: right">
/> <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
</no-ssr> <ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
</ds-space> </span>
<template slot="footer"> &nbsp;
<div style="display: inline-block; opacity: .5;"> <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
<ds-icon <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
v-for="category in post.categories" </span>
:key="category.id" </div>
v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}" </template>
:name="category.icon" </ds-card>
/>&nbsp;
</div>
<div style="display: inline-block; float: right">
<span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
<ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
</span>
&nbsp;
<span :style="{ opacity: post.commentsCount ? 1 : .5 }">
<ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
</span>
</div>
</template>
</ds-card>
</a>
</template> </template>
<script> <script>
@ -155,10 +150,34 @@ export default {
name: 'post-slug', name: 'post-slug',
params: { slug: post.slug } params: { slug: post.slug }
}).href }).href
},
isExact(url) {
return this.$route.path.indexOf(url) === 0
} }
} }
} }
</script> </script>
<style lang="scss">
.post-card {
cursor: pointer;
position: relative;
.ds-card-footer {
z-index: 1;
}
}
.post-menu {
position: absolute;
top: $space-small;
right: $space-small;
z-index: 1;
}
.post-link {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -999999px;
}
</style>

6
layouts/default.vue
View File

@ -138,17 +138,11 @@ export default {
float: right; float: right;
} }
.avatar-menu-trigger {
user-select: none;
}
.avatar-menu-popover { .avatar-menu-popover {
display: inline-block;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
nav { nav {
margin-left: -15px;
margin-right: -15px;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }