Various improvements to MyEvents & event cards
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
49df536b38
commit
b53867181f
|
|
@ -13,206 +13,208 @@
|
||||||
:small="true"
|
:small="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content-and-actions">
|
||||||
<div class="title-wrapper">
|
<div class="list-card-content">
|
||||||
<router-link
|
<div class="title-wrapper">
|
||||||
:to="{
|
|
||||||
name: RouteName.EVENT,
|
|
||||||
params: { uuid: participation.event.uuid },
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<h3 class="title">{{ participation.event.title }}</h3>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
<div class="participation-actor">
|
|
||||||
<span>
|
|
||||||
<b-icon
|
|
||||||
icon="earth"
|
|
||||||
v-if="participation.event.visibility === EventVisibility.PUBLIC"
|
|
||||||
/>
|
|
||||||
<b-icon
|
|
||||||
icon="link"
|
|
||||||
v-else-if="
|
|
||||||
participation.event.visibility === EventVisibility.UNLISTED
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<b-icon
|
|
||||||
icon="lock"
|
|
||||||
v-else-if="
|
|
||||||
participation.event.visibility === EventVisibility.PRIVATE
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="
|
|
||||||
participation.event.physicalAddress &&
|
|
||||||
participation.event.physicalAddress.locality
|
|
||||||
"
|
|
||||||
>{{ participation.event.physicalAddress.locality }} -</span
|
|
||||||
>
|
|
||||||
<i18n
|
|
||||||
tag="span"
|
|
||||||
path="Organized by {name}"
|
|
||||||
v-if="organizerActor.id !== currentActor.id"
|
|
||||||
>
|
|
||||||
<popover-actor-card
|
|
||||||
slot="name"
|
|
||||||
:actor="organizerActor"
|
|
||||||
:inline="true"
|
|
||||||
>
|
|
||||||
{{ organizerActor.displayName() }}
|
|
||||||
</popover-actor-card>
|
|
||||||
</i18n>
|
|
||||||
<span v-else>{{ $t("Organized by you") }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span
|
|
||||||
class="participant-stats"
|
|
||||||
v-if="
|
|
||||||
![
|
|
||||||
ParticipantRole.PARTICIPANT,
|
|
||||||
ParticipantRole.NOT_APPROVED,
|
|
||||||
].includes(participation.role)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="participation.event.options.maximumAttendeeCapacity !== 0"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
$tc(
|
|
||||||
"{available}/{capacity} available places",
|
|
||||||
participation.event.options.maximumAttendeeCapacity -
|
|
||||||
participation.event.participantStats.participant,
|
|
||||||
{
|
|
||||||
available:
|
|
||||||
participation.event.options.maximumAttendeeCapacity -
|
|
||||||
participation.event.participantStats.participant,
|
|
||||||
capacity:
|
|
||||||
participation.event.options.maximumAttendeeCapacity,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
{{
|
|
||||||
$tc(
|
|
||||||
"{count} participants",
|
|
||||||
participation.event.participantStats.participant,
|
|
||||||
{
|
|
||||||
count: participation.event.participantStats.participant,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
<span v-if="participation.event.participantStats.notApproved > 0">
|
|
||||||
<b-button
|
|
||||||
type="is-text"
|
|
||||||
@click="
|
|
||||||
gotToWithCheck(participation, {
|
|
||||||
name: RouteName.PARTICIPATIONS,
|
|
||||||
query: { role: ParticipantRole.NOT_APPROVED },
|
|
||||||
params: { eventId: participation.event.uuid },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
$tc(
|
|
||||||
"{count} requests waiting",
|
|
||||||
participation.event.participantStats.notApproved,
|
|
||||||
{
|
|
||||||
count: participation.event.participantStats.notApproved,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</b-button>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="actions">
|
|
||||||
<b-dropdown aria-role="list" position="is-bottom-left">
|
|
||||||
<b-button slot="trigger" role="button" icon-right="dots-horizontal">
|
|
||||||
{{ $t("Actions") }}
|
|
||||||
</b-button>
|
|
||||||
|
|
||||||
<b-dropdown-item
|
|
||||||
v-if="
|
|
||||||
![
|
|
||||||
ParticipantRole.PARTICIPANT,
|
|
||||||
ParticipantRole.NOT_APPROVED,
|
|
||||||
].includes(participation.role)
|
|
||||||
"
|
|
||||||
aria-role="listitem"
|
|
||||||
@click="
|
|
||||||
gotToWithCheck(participation, {
|
|
||||||
name: RouteName.EDIT_EVENT,
|
|
||||||
params: { eventId: participation.event.uuid },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<b-icon icon="pencil" />
|
|
||||||
{{ $t("Edit") }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
|
|
||||||
<b-dropdown-item
|
|
||||||
v-if="participation.role === ParticipantRole.CREATOR"
|
|
||||||
aria-role="listitem"
|
|
||||||
@click="
|
|
||||||
gotToWithCheck(participation, {
|
|
||||||
name: RouteName.DUPLICATE_EVENT,
|
|
||||||
params: { eventId: participation.event.uuid },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<b-icon icon="content-duplicate" />
|
|
||||||
{{ $t("Duplicate") }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
|
|
||||||
<b-dropdown-item
|
|
||||||
v-if="
|
|
||||||
![
|
|
||||||
ParticipantRole.PARTICIPANT,
|
|
||||||
ParticipantRole.NOT_APPROVED,
|
|
||||||
].includes(participation.role)
|
|
||||||
"
|
|
||||||
aria-role="listitem"
|
|
||||||
@click="openDeleteEventModalWrapper"
|
|
||||||
>
|
|
||||||
<b-icon icon="delete" />
|
|
||||||
{{ $t("Delete") }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
|
|
||||||
<b-dropdown-item
|
|
||||||
v-if="
|
|
||||||
![
|
|
||||||
ParticipantRole.PARTICIPANT,
|
|
||||||
ParticipantRole.NOT_APPROVED,
|
|
||||||
].includes(participation.role)
|
|
||||||
"
|
|
||||||
aria-role="listitem"
|
|
||||||
@click="
|
|
||||||
gotToWithCheck(participation, {
|
|
||||||
name: RouteName.PARTICIPATIONS,
|
|
||||||
params: { eventId: participation.event.uuid },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<b-icon icon="account-multiple-plus" />
|
|
||||||
{{ $t("Manage participations") }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
|
|
||||||
<b-dropdown-item aria-role="listitem" has-link>
|
|
||||||
<router-link
|
<router-link
|
||||||
:to="{
|
:to="{
|
||||||
name: RouteName.EVENT,
|
name: RouteName.EVENT,
|
||||||
params: { uuid: participation.event.uuid },
|
params: { uuid: participation.event.uuid },
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<b-icon icon="view-compact" />
|
<h3 class="title">{{ participation.event.title }}</h3>
|
||||||
{{ $t("View event page") }}
|
|
||||||
</router-link>
|
</router-link>
|
||||||
</b-dropdown-item>
|
</div>
|
||||||
</b-dropdown>
|
<div class="participation-actor">
|
||||||
|
<span>
|
||||||
|
<b-icon
|
||||||
|
icon="earth"
|
||||||
|
v-if="participation.event.visibility === EventVisibility.PUBLIC"
|
||||||
|
/>
|
||||||
|
<b-icon
|
||||||
|
icon="link"
|
||||||
|
v-else-if="
|
||||||
|
participation.event.visibility === EventVisibility.UNLISTED
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<b-icon
|
||||||
|
icon="lock"
|
||||||
|
v-else-if="
|
||||||
|
participation.event.visibility === EventVisibility.PRIVATE
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
participation.event.physicalAddress &&
|
||||||
|
participation.event.physicalAddress.locality
|
||||||
|
"
|
||||||
|
>{{ participation.event.physicalAddress.locality }} -</span
|
||||||
|
>
|
||||||
|
<i18n
|
||||||
|
tag="span"
|
||||||
|
path="Organized by {name}"
|
||||||
|
v-if="organizerActor.id !== currentActor.id"
|
||||||
|
>
|
||||||
|
<popover-actor-card
|
||||||
|
slot="name"
|
||||||
|
:actor="organizerActor"
|
||||||
|
:inline="true"
|
||||||
|
>
|
||||||
|
{{ organizerActor.displayName() }}
|
||||||
|
</popover-actor-card>
|
||||||
|
</i18n>
|
||||||
|
<span v-else>{{ $t("Organized by you") }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="participant-stats"
|
||||||
|
v-if="
|
||||||
|
![
|
||||||
|
ParticipantRole.PARTICIPANT,
|
||||||
|
ParticipantRole.NOT_APPROVED,
|
||||||
|
].includes(participation.role)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="participation.event.options.maximumAttendeeCapacity !== 0"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
$tc(
|
||||||
|
"{available}/{capacity} available places",
|
||||||
|
participation.event.options.maximumAttendeeCapacity -
|
||||||
|
participation.event.participantStats.participant,
|
||||||
|
{
|
||||||
|
available:
|
||||||
|
participation.event.options.maximumAttendeeCapacity -
|
||||||
|
participation.event.participantStats.participant,
|
||||||
|
capacity:
|
||||||
|
participation.event.options.maximumAttendeeCapacity,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
{{
|
||||||
|
$tc(
|
||||||
|
"{count} participants",
|
||||||
|
participation.event.participantStats.participant,
|
||||||
|
{
|
||||||
|
count: participation.event.participantStats.participant,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<span v-if="participation.event.participantStats.notApproved > 0">
|
||||||
|
<b-button
|
||||||
|
type="is-text"
|
||||||
|
@click="
|
||||||
|
gotToWithCheck(participation, {
|
||||||
|
name: RouteName.PARTICIPATIONS,
|
||||||
|
query: { role: ParticipantRole.NOT_APPROVED },
|
||||||
|
params: { eventId: participation.event.uuid },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
$tc(
|
||||||
|
"{count} requests waiting",
|
||||||
|
participation.event.participantStats.notApproved,
|
||||||
|
{
|
||||||
|
count: participation.event.participantStats.notApproved,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</b-button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<b-dropdown aria-role="list" position="is-bottom-left">
|
||||||
|
<b-button slot="trigger" role="button" icon-right="dots-horizontal">
|
||||||
|
{{ $t("Actions") }}
|
||||||
|
</b-button>
|
||||||
|
|
||||||
|
<b-dropdown-item
|
||||||
|
v-if="
|
||||||
|
![
|
||||||
|
ParticipantRole.PARTICIPANT,
|
||||||
|
ParticipantRole.NOT_APPROVED,
|
||||||
|
].includes(participation.role)
|
||||||
|
"
|
||||||
|
aria-role="listitem"
|
||||||
|
@click="
|
||||||
|
gotToWithCheck(participation, {
|
||||||
|
name: RouteName.EDIT_EVENT,
|
||||||
|
params: { eventId: participation.event.uuid },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<b-icon icon="pencil" />
|
||||||
|
{{ $t("Edit") }}
|
||||||
|
</b-dropdown-item>
|
||||||
|
|
||||||
|
<b-dropdown-item
|
||||||
|
v-if="participation.role === ParticipantRole.CREATOR"
|
||||||
|
aria-role="listitem"
|
||||||
|
@click="
|
||||||
|
gotToWithCheck(participation, {
|
||||||
|
name: RouteName.DUPLICATE_EVENT,
|
||||||
|
params: { eventId: participation.event.uuid },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<b-icon icon="content-duplicate" />
|
||||||
|
{{ $t("Duplicate") }}
|
||||||
|
</b-dropdown-item>
|
||||||
|
|
||||||
|
<b-dropdown-item
|
||||||
|
v-if="
|
||||||
|
![
|
||||||
|
ParticipantRole.PARTICIPANT,
|
||||||
|
ParticipantRole.NOT_APPROVED,
|
||||||
|
].includes(participation.role)
|
||||||
|
"
|
||||||
|
aria-role="listitem"
|
||||||
|
@click="openDeleteEventModalWrapper"
|
||||||
|
>
|
||||||
|
<b-icon icon="delete" />
|
||||||
|
{{ $t("Delete") }}
|
||||||
|
</b-dropdown-item>
|
||||||
|
|
||||||
|
<b-dropdown-item
|
||||||
|
v-if="
|
||||||
|
![
|
||||||
|
ParticipantRole.PARTICIPANT,
|
||||||
|
ParticipantRole.NOT_APPROVED,
|
||||||
|
].includes(participation.role)
|
||||||
|
"
|
||||||
|
aria-role="listitem"
|
||||||
|
@click="
|
||||||
|
gotToWithCheck(participation, {
|
||||||
|
name: RouteName.PARTICIPATIONS,
|
||||||
|
params: { eventId: participation.event.uuid },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<b-icon icon="account-multiple-plus" />
|
||||||
|
{{ $t("Manage participations") }}
|
||||||
|
</b-dropdown-item>
|
||||||
|
|
||||||
|
<b-dropdown-item aria-role="listitem" has-link>
|
||||||
|
<router-link
|
||||||
|
:to="{
|
||||||
|
name: RouteName.EVENT,
|
||||||
|
params: { uuid: participation.event.uuid },
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<b-icon icon="view-compact" />
|
||||||
|
{{ $t("View event page") }}
|
||||||
|
</router-link>
|
||||||
|
</b-dropdown-item>
|
||||||
|
</b-dropdown>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
@ -351,51 +353,72 @@ article.box {
|
||||||
|
|
||||||
.list-card {
|
.list-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.actions {
|
div.date-component {
|
||||||
padding-right: 7.5px;
|
align-self: flex-start;
|
||||||
cursor: pointer;
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin-top: 1px;
|
||||||
|
height: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.content {
|
.content-and-actions {
|
||||||
flex: 1;
|
display: flex;
|
||||||
padding: 5px;
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
|
||||||
.participation-actor span,
|
.actions {
|
||||||
.participant-stats span {
|
padding-right: 7.5px;
|
||||||
padding: 0 5px;
|
cursor: pointer;
|
||||||
|
|
||||||
button {
|
|
||||||
height: auto;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.title-wrapper {
|
div.list-card-content {
|
||||||
display: flex;
|
flex: 1;
|
||||||
align-items: center;
|
padding: 5px;
|
||||||
|
min-width: 350px;
|
||||||
|
|
||||||
div.date-component {
|
.participation-actor span,
|
||||||
flex: 0;
|
.participant-stats span {
|
||||||
margin-right: 16px;
|
padding: 0 5px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: auto;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
div.title-wrapper {
|
||||||
text-decoration: none;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
|
||||||
.title {
|
a {
|
||||||
display: -webkit-box;
|
text-decoration: none;
|
||||||
-webkit-line-clamp: 2;
|
padding-bottom: 5px;
|
||||||
-webkit-box-orient: vertical;
|
}
|
||||||
overflow: hidden;
|
|
||||||
font-weight: 400;
|
.title {
|
||||||
line-height: 1em;
|
display: -webkit-box;
|
||||||
font-size: 1.6em;
|
-webkit-line-clamp: 3;
|
||||||
padding-bottom: 5px;
|
-webkit-box-orient: vertical;
|
||||||
margin: auto 0;
|
overflow: hidden;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1em;
|
||||||
|
font-size: 1.4em;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
margin: auto 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -405,6 +428,7 @@ article.box {
|
||||||
background: $yellow-2;
|
background: $yellow-2;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
padding-left: calc(48px + 15px);
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
padding-right: 3px;
|
padding-right: 3px;
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,10 @@ export default class GroupMemberCard extends Vue {
|
||||||
& > div:last-child {
|
& > div:last-child {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.identity-header {
|
.identity-header {
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
</subtitle>
|
</subtitle>
|
||||||
<transition-group name="list" tag="p">
|
<transition-group name="list" tag="p">
|
||||||
<div v-for="month in monthlyPastParticipations" :key="month[0]">
|
<div v-for="month in monthlyPastParticipations" :key="month[0]">
|
||||||
<span>{{ month[0] }}</span>
|
<span class="past-month">{{ month[0] }}</span>
|
||||||
<EventListCard
|
<EventListCard
|
||||||
v-for="participation in month[1]"
|
v-for="participation in month[1]"
|
||||||
:key="participation.id"
|
:key="participation.id"
|
||||||
|
|
@ -304,8 +304,24 @@ main > .container {
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
.upcoming-month {
|
.upcoming-month,
|
||||||
|
.past-month {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: $orange-3;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
content: "";
|
||||||
|
width: calc(100% + 30px);
|
||||||
|
height: 3px;
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -608,7 +608,7 @@ export default class Home extends Vue {
|
||||||
|
|
||||||
main > div > .container {
|
main > div > .container {
|
||||||
background: $white;
|
background: $white;
|
||||||
padding: 1rem 1.5rem 3rem;
|
padding: 1rem 0.5rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-autocomplete {
|
.search-autocomplete {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue