Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
les
gancio
Commits
0b546b3a
Commit
0b546b3a
authored
Oct 20, 2019
by
les
Browse files
[feat] better event ux
parent
66aa6a86
Changes
1
Hide whitespace changes
Inline
Side-by-side
pages/event/_id.vue
View file @
0b546b3a
<
template
lang=
"pug"
>
el-
card
#eventDetail
el-
main
#eventDetail
//- close button
nuxt-link.float-right(to='/')
el-button(circle icon='el-icon-close' type='danger' size='
small
' plain)
//-
nuxt-link.float-right(to='/')
//-
el-button(circle icon='el-icon-close' type='danger' size='
mini
' plain)
div(v-if='!event
')
h5
{{
$t
(
'
event.not_found
'
)
}}
nuxt-link.mr-3(to='/
')
img#logo(src='/favicon.ico')
div(v-else)
//- title
h5.text-center
{{
event
.
title
}}
div.nextprev
nuxt-link(v-if='prev' :to='`/event/${prev}`')
el-button( type='success' size='mini')
v-icon(name='chevron-left')
nuxt-link.float-right(v-if='next' :to='`/event/${next}`')
el-button(type='success' size='mini')
v-icon(name='chevron-right')
span.title
{{
event
.
title
}}
//- image
img.main(:src='imgPath' v-if='event.image_path')
div.float-right
nuxt-link.mr-1(:to='`/event/${prev}`')
el-button(circle plain size='small' icon='el-icon-arrow-left' :disabled='!prev')
nuxt-link(:to='`/event/${next}`')
el-button(circle plain size='small' :disabled='!next' icon='el-icon-arrow-right')
.info
div
{{
event
|
when
}}
div
{{
event
.
place
.
name
}}
-
{{
event
.
place
.
address
}}
//- description and tags
div(v-if='event.description || event.tags')
//- image
el-row.mt-3
el-col(:sm='18')
img.main.mb-3(:src='imgPath' v-if='event.image_path')
pre(v-html='$options.filters.linkify(event.description)')
el-tag.mr-1(v-for='tag in event.tags'
el-tag.mr-1
.mb-1
(v-for='tag in event.tags'
size='mini' :key='tag.tag')
{{
tag
.
tag
}}
//- show hide, confirm, delete, edit buttons when allowed
div(v-if='mine')
hr
el-button(v-if='event.is_visible' size='mini' plain type='warning' @click.prevents='toggle')
{{
$t
(
'
common.hide
'
)
}}
el-button(v-else plain type='success' size='mini' @click.prevents='toggle')
{{
$t
(
'
common.confirm
'
)
}}
el-button(plain type='danger' size='mini' @click.prevent='remove')
{{
$t
(
'
common.remove
'
)
}}
el-button(plain type='primary' size='mini' @click='$router.replace(`/add/${event.id}`)')
{{
$t
(
'
common.edit
'
)
}}
el-col(:sm='6')
el-menu.menu
el-divider
{{
$t
(
'
common.when
'
)
}}
//- When(:event='event')
p
{{
event
|
when
}}
p
{{
event
|
to
}}
el-divider
{{
$t
(
'
common.where
'
)
}}
p
{{
event
.
place
.
name
}}
p
{{
event
.
place
.
address
}}
el-divider
{{
$t
(
'
common.actions
'
)
}}
el-menu-item(v-clipboard:success='copyLink'
v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i>
{{
$t
(
'
common.copy_link
'
)
}}
el-menu-item
a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`')
{{
$t
(
'
common.add_to_calendar
'
)
}}
//- el-button(plain size='mini' type='primary'
//- icon='el-icon-document' )
{{
$t
(
'
common.send_via_mail
'
)
}}
el-menu-item
div(@click.prevents='toggle')
{{
$t
(
event
.
is_visible
?
'
common.hide
'
:
'
common.confirm
'
)
}}
el-menu-item
div(@click.prevent='remove')
{{
$t
(
'
common.remove
'
)
}}
el-menu-item(@click='$router.replace(`/add/${event.id}`)')
{{
$t
(
'
common.edit
'
)
}}
//- comments from fediverse
#comments.card-body(v-if='settings.enable_federation')
small.float-right 🔖
{{
event
.
likes
.
length
}}
small.float-right.mr-3 ✊
{{
event
.
boost
.
length
}}
<br/>
strong
{{
$tc
(
'
common.comments
'
,
event
.
comments
.
length
)
}}
-
<small>
{{
$t
(
'
event.interact_with_me_at
'
)
}}
<u>
{{
fedi_user
}}
@
{{
settings
.
baseurl
|
url2host
}}
</u></small>
hr
//- comments from fediverse
#comments(v-if='settings.enable_federation')
small.float-right 🔖
{{
event
.
likes
.
length
}}
small.float-right.mr-3 ✊
{{
event
.
boost
.
length
}}
<br/>
strong
{{
$tc
(
'
common.comments
'
,
event
.
comments
.
length
)
}}
-
<small>
{{
$t
(
'
event.interact_with_me_at
'
)
}}
<u>
{{
fedi_user
}}
@
{{
settings
.
baseurl
|
url2host
}}
</u></small>
.card-header(v-for='comment in event.comments' :key='comment.id')
a.float-right(:href='comment.data.url')
small
{{
comment
.
data
.
published
|
datetime
}}
div.mt-1(v-html='comment_filter(comment.data.content)')
img(v-for='img in comment.data.media_attachments' :src='img.url')
.card-header(v-for='comment in event.comments' :key='comment.id')
a.float-right(:href='comment.data.url')
small
{{
comment
.
data
.
published
|
datetime
}}
div.mt-1(v-html='comment_filter(comment.data.content)')
img(v-for='img in comment.data.media_attachments' :src='img.url')
</
template
>
<
script
>
import
{
mapState
,
mapActions
,
mapGetters
}
from
'
vuex
'
import
{
MessageBox
}
from
'
element-ui
'
import
When
from
'
../../components/When
'
import
moment
from
'
dayjs
'
export
default
{
name
:
'
Event
'
,
transition
:
null
,
data
()
{
return
{
copied
:
false
}
},
components
:
{
When
},
// Watch for $route.query.page to call
// Component methods (asyncData, fetch, validate, layout, etc.)
// watchQuery: ['id'],
...
...
@@ -171,6 +185,10 @@ export default {
},
methods
:
{
...
mapActions
([
'
delEvent
'
]),
copyLink
()
{
this
.
copied
=
true
setTimeout
(()
=>
this
.
copied
=
false
,
3000
)
},
comment_filter
(
value
)
{
return
value
.
replace
(
/<a.*href="
([^
">
]
+
)
.*>
(?:
.
(?!
\<
\/
a
\>))
*.<
\/
a>/
,
(
orig
,
url
)
=>
{
// get extension
...
...
@@ -196,6 +214,7 @@ export default {
}
},
async
toggle
()
{
console
.
error
(
this
)
try
{
if
(
this
.
event
.
is_visible
)
{
await
this
.
$axios
.
$get
(
`/event/unconfirm/
${
this
.
id
}
`
)
...
...
@@ -214,9 +233,20 @@ export default {
<
style
lang=
'less'
>
#eventDetail {
max-width: 1000px;
border-radius: 0px;
margin: 0 auto;
.menu {
border-right: none;
border-left: 1px solid #e6e6e6;
p {
margin-left: 10px;
}
}
.title {
font-size: 1.6rem;
color: #404246;
line-height: 1;
}
pre {
color: #404246;
...
...
@@ -224,19 +254,6 @@ export default {
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif !important;
}
h5 {
font-size: 2em;
font-weight: 600;
min-height: 40px;
}
.info {
margin: 10px;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
img {
max-height: 89vh;
object-fit: contain;
...
...
@@ -268,7 +285,8 @@ export default {
@media only screen and (max-width: 768px) {
#eventDetail {
font-size: 12px;
font-size: 13px;
padding: 0 5px;
}
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment