NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-02-01 00:52:01 +01:00
Code Issues Projects Releases Packages Wiki Activity

start with event card refactoring

Browse source
This commit is contained in:
les 2021-03-05 14:21:01 +01:00
parent aa146e55ff
commit 2953eb39ea
1 changed files with 58 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
components/Event.vue
View file

@ -1,21 +1,19 @@
<template lang="pug" functional> <template lang="pug" functional>
v-card.h-event.event v-card.h-event.event
nuxt-link(:to='`/event/${props.event.id}`') nuxt-link(:to='`/event/${props.event.id}`')
v-img.align-end(:src="`/media/thumb/${props.event.image_path || 'logo.png' }`" img(:src="`/media/thumb/${props.event.image_path || 'logo.png' }`")
height="250" position="top top" ) v-icon.float-right.mr-1(v-if='props.event.parentId' color='success') mdi-repeat
v-icon.float-right(v-if='props.event.parentId' color='success') mdi-repeat .title.p-name {{props.event.title}}
v-card-title.p-name.pb-0 {{props.event.title}}
//- gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7), rgba(0,0,0,.9)" v-card-text.body
v-card-text.pb-0
time.dt-start.subtitle-1(:datetime='props.event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")') {{ props.event|when }} time.dt-start.subtitle-1(:datetime='props.event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")') {{ props.event|when }}
.d-none.dt-end {{props.event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}} .d-none.dt-end {{props.event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
v-btn.place.d-block.p-location.pl-0(text color='primary' @click="listeners['placeclick'](props.event.place.id)") <v-icon>mdi-map-marker</v-icon> {{props.event.place.name}} a.place.d-block.p-location.pl-0(text color='primary' @click="listeners['placeclick'](props.event.place.id)") <v-icon>mdi-map-marker</v-icon> {{props.event.place.name}}
v-card-actions v-card-actions.actions
v-chip.ml-1(v-for='tag in props.event.tags' link small .tags
:key='tag' outlined color='primary' @click="listeners['tagclick'](tag)") {{tag}} v-chip.ml-1(v-for='tag in props.event.tags' small
v-spacer :key='tag' outlined color='primary' @click="listeners['tagclick'](tag)") {{tag}}
v-menu(offset-y) v-menu(offset-y)
template(v-slot:activator="{on}") template(v-slot:activator="{on}")
@ -46,12 +44,58 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.event { .event {
display: flex;
position: relative;
flex-direction: column;
width: 330px; width: 330px;
height: 380px;
max-width: 500px; max-width: 500px;
transition: all .5s;
flex-grow: 1; flex-grow: 1;
margin-top: .3em; margin-top: .4em;
margin-left: .3em; margin-right: .4em;
overflow: hidden;
&:hover img {
transform: scale(1.02);
}
.title {
display: block;
max-height: 2.8em;
overflow: hidden;
margin: 0.5rem 1rem 0.5rem 1rem;
color: white;
border-bottom: 1px solid #333;
font-size: 1.2em !important;
line-height: 1.4em;
font-weight: 700;
}
.body {
flex: 1 1 auto;
}
// .actions {
// justify-content: flex-end;
// overflow: hidden;
// align-content: flex-end;
// text-align: right;
// .tags {
// order: 0;
// flex-grow: 1;
// align-self:center;
// max-height: 1.6em;
// overflow: hidden;
// }
// }
img {
transition: transform .2s ease;
width: 100%;
max-height: 250px;
object-fit: cover;
object-position: top;
}
.place { .place {
max-width: 100%; max-width: 100%;