From b53867181f8591467eed74764d27c1065a627134 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 11 Jun 2021 18:31:24 +0200 Subject: [PATCH] Various improvements to MyEvents & event cards Signed-off-by: Thomas Citharel --- js/src/components/Event/EventListCard.vue | 478 ++++++++++---------- js/src/components/Group/GroupMemberCard.vue | 4 + js/src/views/Event/MyEvents.vue | 20 +- js/src/views/Home.vue | 2 +- 4 files changed, 274 insertions(+), 230 deletions(-) diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue index 26f92609a..7d3dc515e 100644 --- a/js/src/components/Event/EventListCard.vue +++ b/js/src/components/Event/EventListCard.vue @@ -13,206 +13,208 @@ :small="true" /> -
-
- -

{{ participation.event.title }}

-
-
-
- - - - - - {{ participation.event.physicalAddress.locality }} - - - - {{ organizerActor.displayName() }} - - - {{ $t("Organized by you") }} -
-
- - - {{ - $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, - } - ) - }} - - - {{ - $tc( - "{count} participants", - participation.event.participantStats.participant, - { - count: participation.event.participantStats.participant, - } - ) - }} - - - - {{ - $tc( - "{count} requests waiting", - participation.event.participantStats.notApproved, - { - count: participation.event.participantStats.notApproved, - } - ) - }} - - - -
-
-
- - - {{ $t("Actions") }} - - - - - {{ $t("Edit") }} - - - - - {{ $t("Duplicate") }} - - - - - {{ $t("Delete") }} - - - - - {{ $t("Manage participations") }} - - - +
+
+
- - {{ $t("View event page") }} +

{{ participation.event.title }}

- - +
+
+ + + + + + {{ participation.event.physicalAddress.locality }} - + + + {{ organizerActor.displayName() }} + + + {{ $t("Organized by you") }} +
+
+ + + {{ + $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, + } + ) + }} + + + {{ + $tc( + "{count} participants", + participation.event.participantStats.participant, + { + count: participation.event.participantStats.participant, + } + ) + }} + + + + {{ + $tc( + "{count} requests waiting", + participation.event.participantStats.notApproved, + { + count: participation.event.participantStats.notApproved, + } + ) + }} + + + +
+
+
+ + + {{ $t("Actions") }} + + + + + {{ $t("Edit") }} + + + + + {{ $t("Duplicate") }} + + + + + {{ $t("Delete") }} + + + + + {{ $t("Manage participations") }} + + + + + + {{ $t("View event page") }} + + + +
@@ -351,51 +353,72 @@ article.box { .list-card { display: flex; - align-items: center; padding: 0 6px; + position: relative; + flex-direction: column; - .actions { - padding-right: 7.5px; - cursor: pointer; + div.date-component { + align-self: flex-start; + 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 { - flex: 1; - padding: 5px; + .content-and-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding-bottom: 1rem; - .participation-actor span, - .participant-stats span { - padding: 0 5px; - - button { - height: auto; - padding-top: 0; - } + .actions { + padding-right: 7.5px; + cursor: pointer; } - div.title-wrapper { - display: flex; - align-items: center; + div.list-card-content { + flex: 1; + padding: 5px; + min-width: 350px; - div.date-component { - flex: 0; - margin-right: 16px; + .participation-actor span, + .participant-stats span { + padding: 0 5px; + + button { + height: auto; + padding-top: 0; + } } - a { - text-decoration: none; - } + div.title-wrapper { + display: flex; + align-items: center; + padding-top: 5px; - .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: auto 0; + a { + text-decoration: none; + padding-bottom: 5px; + } + + .title { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + 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; display: flex; padding: 5px; + padding-left: calc(48px + 15px); figure { padding-right: 3px; diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue index 69bd79004..784f6fc11 100644 --- a/js/src/components/Group/GroupMemberCard.vue +++ b/js/src/components/Group/GroupMemberCard.vue @@ -97,6 +97,10 @@ export default class GroupMemberCard extends Vue { & > div:last-child { cursor: pointer; } + + .media-content { + overflow: hidden; + } } .identity-header { diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue index 788518dd8..0e4ebc4ac 100644 --- a/js/src/views/Event/MyEvents.vue +++ b/js/src/views/Event/MyEvents.vue @@ -67,7 +67,7 @@
- {{ month[0] }} + {{ month[0] }} .container { } section { - .upcoming-month { + .upcoming-month, + .past-month { 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; + } } } diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue index fa743a7e9..38337dd88 100644 --- a/js/src/views/Home.vue +++ b/js/src/views/Home.vue @@ -608,7 +608,7 @@ export default class Home extends Vue { main > div > .container { background: $white; - padding: 1rem 1.5rem 3rem; + padding: 1rem 0.5rem 3rem; } .search-autocomplete {