From 2454a9468f88bd941ae46c448edfbe21dee9ff9c Mon Sep 17 00:00:00 2001
From: Nick Sellen <git@nicksellen.co.uk>
Date: Mon, 12 Dec 2022 18:52:22 +0000
Subject: [PATCH] Small improvements to public activity listing UI (#2621)

* Small improvements to public activity listing UI

Fixes #2602

* Use translated name

* More improvements to public activity listing ui
---
 src/groupInfo/pages/GroupPreview.vue | 42 ++++++++++++++++++++++------
 src/locales/locale-en.json           |  3 +-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/groupInfo/pages/GroupPreview.vue b/src/groupInfo/pages/GroupPreview.vue
index 48820f95b5..7e569fc244 100644
--- a/src/groupInfo/pages/GroupPreview.vue
+++ b/src/groupInfo/pages/GroupPreview.vue
@@ -107,7 +107,7 @@
       </template>
       <QCardActions
         v-if="!application"
-        class="items-start q-gutter-sm"
+        class="items-start"
       >
         <template v-if="isLoggedIn">
           <template v-if="!group.isMember">
@@ -162,6 +162,9 @@
       </QCardActions>
       <template v-if="publicActivities.length > 0">
         <QSeparator />
+        <div class="text-subtitle1 q-pl-lg q-pt-lg">
+          {{ $t('ACTIVITYLIST.PUBLIC.UPCOMING_ACTIVITIES') }}
+        </div>
         <QInfiniteScroll v-bind="infiniteScroll">
           <QCardSection
             class="row public-activities"
@@ -184,17 +187,33 @@
                   class="full-width"
                   style="max-height: 80px;"
                 />
-                <QCardSection>
-                  <span
-                    :style="{ color: '#' + publicActivity.activityType.colour }"
+                <QItem>
+                  <QItemSection
+                    avatar
+                    style="min-width: unset;"
                   >
                     <QIcon
                       v-bind="getIconProps(publicActivity.activityType)"
                       class="q-pr-xs"
+                      :style="{ color: '#' + publicActivity.activityType.colour }"
                     />
-                  </span>
-                  {{ $d(publicActivity.date, 'shortDateAndTime') }}
-                  <Markdown :source="publicActivity.description" />
+                  </QItemSection>
+                  <QItemSection>
+                    <QItemLabel
+                      :style="{ color: '#' + publicActivity.activityType.colour }"
+                    >
+                      {{ getTranslatedName(publicActivity.activityType) }}
+                    </QItemLabel>
+                    <QItemLabel>
+                      {{ $d(publicActivity.date, 'shortDateAndTime') }}
+                    </QItemLabel>
+                  </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QCardSection>
+                  <Markdown
+                    :source="publicActivity.description"
+                  />
                 </QCardSection>
               </QCard>
             </div>
@@ -219,6 +238,9 @@ import {
   QImg,
   QInfiniteScroll,
   QSpace,
+  QItem,
+  QItemSection,
+  QItemLabel,
 } from 'quasar'
 import { computed, unref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -238,7 +260,7 @@ import Markdown from '@/utils/components/Markdown'
 import RandomArt from '@/utils/components/RandomArt'
 
 const { openApplication } = useDetailService()
-const { getIconProps } = useActivityTypeHelpers()
+const { getIconProps, getTranslatedName } = useActivityTypeHelpers()
 
 const { t } = useI18n()
 
@@ -295,8 +317,10 @@ async function withdraw () {
 ::v-deep(.q-banner__content)
   min-width: 200px
 
-.q-card *
+.q-card
   overflow: hidden
+  &:hover
+    border-color: $primary
 
 .photo
   &.hasPhoto
diff --git a/src/locales/locale-en.json b/src/locales/locale-en.json
index 896cec2b1d..013e1c37bc 100644
--- a/src/locales/locale-en.json
+++ b/src/locales/locale-en.json
@@ -98,7 +98,8 @@
       "WHEN": "When",
       "WHERE": "Where",
       "SHARE": "Public activity link",
-      "VIEW": "Public View"
+      "VIEW": "Public View",
+      "UPCOMING_ACTIVITIES": "Upcoming activities"
     },
     "JOINEDNOTICE": "You have one upcoming activity | You have {count} upcoming activities",
     "NONE": "No upcoming activities",