hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rework homepage and add a (fancy) about section

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-10-07 16:48:13 +02:00
parent bcab397b4f
commit fa781fc840
24 changed files with 624 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
js/src/components/Event/EventCard.vue
View File

@@ -33,7 +33,8 @@ A simple card for an event
<div class="tag-container" v-if="event.tags">
<b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
</div>
<img src="https://picsum.photos/g/400/225/?random" />
<img v-if="event.picture" :src="event.picture.url" />
<img v-else src="https://picsum.photos/g/400/225/?random" />
</figure>
</div>
<div class="content">
@@ -78,7 +79,6 @@ import { IEvent, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { IActor, IPerson, Person } from '@/types/actor';
const lineClamp = require('line-clamp');
export interface IEventCardOptions {
hideDate: boolean;
@@ -91,9 +91,6 @@ export interface IEventCardOptions {
components: {
DateCalendarIcon,
},
mounted() {
lineClamp(this.$refs.title, 3);
},
})
export default class EventCard extends Vue {
@Prop({ required: true }) event!: IEvent;
@@ -124,9 +121,35 @@ export default class EventCard extends Vue {
@import "../../variables";
a.card {
border: none;
display: block;
background: $secondary;
&:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
transform: scale(1.01, 1.01);
&:after {
opacity: 1;
}
}
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
&:after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
div.tag-container {
position: absolute;
top: 10px;
@@ -166,11 +189,14 @@ export default class EventCard extends Vue {
}
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400;
line-height: 1em;
font-size: 1.6em;
padding-bottom: 5px;
margin-top: auto;
min-height: 3.5rem;
}
}
span.organizer-place-wrapper {

14
js/src/components/Event/EventListCard.vue
View File

@@ -52,14 +52,14 @@ export default {
<template>
<article class="box">
<div class="title-wrapper">
<div class="date-component" v-if="!mergedOptions.hideDate">
<date-calendar-icon :date="participation.event.beginsOn" />
</div>
<h2 class="title" ref="title">{{ participation.event.title }}</h2>
</div>
<div class="columns">
<div class="content column">
<div class="title-wrapper">
<div class="date-component" v-if="!mergedOptions.hideDate">
<date-calendar-icon :date="participation.event.beginsOn" />
</div>
<h2 class="title" ref="title">{{ participation.event.title }}</h2>
</div>
<div>
<span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span>
<span v-if="participation.actor.id === participation.event.organizerActor.id">{{ $t("You're organizing this event") }}</span>
@@ -211,6 +211,7 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
div.title-wrapper {
display: flex;
align-items: center;
div.date-component {
flex: 0;
@@ -222,6 +223,7 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
line-height: 1em;
font-size: 1.6em;
padding-bottom: 5px;
margin: auto 0;
}
}