Optimize for mobile

carlobeltrame · Apr 3, 2024 · 7ca09d5 · 7ca09d5
1 parent ae4aeba
commit 7ca09d5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 26 deletions.
diff --git a/frontend/src/components/personal_invitations/PersonalInvitations.vue b/frontend/src/components/personal_invitations/PersonalInvitations.vue
@@ -1,32 +1,62 @@
 <template>
   <v-list class="py-0">
-    <v-list-item
-      v-for="invitation in invitations.items"
-      :key="invitation._meta.self"
-      two-line
-    >
-      <v-list-item-content>
-        <v-list-item-title>{{ invitation.campTitle }}</v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <PromptPersonalInvitationReject
-          :entity="invitation"
-          :camp-title="invitation.campTitle"
-          @submit="rejectInvitation(invitation)"
-        >
-          <template #activator="{ on }">
-            <v-btn class="px-4" text v-on="on">
-              {{ $tc('components.personalInvitations.personalInvitations.reject') }}
+    <template v-if="$vuetify.breakpoint.mdAndUp">
+      <v-list-item v-for="invitation in invitations.items" :key="invitation._meta.self">
+        <v-list-item-content>
+          <v-list-item-title>{{ invitation.campTitle }}</v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action>
+          <PromptPersonalInvitationReject
+            :entity="invitation"
+            :camp-title="invitation.campTitle"
+            align="right"
+            @submit="rejectInvitation(invitation)"
+          >
+            <template #activator="{ on }">
+              <v-btn class="px-4" text v-on="on">
+                {{ $tc('components.personalInvitations.personalInvitations.reject') }}
+              </v-btn>
+            </template>
+          </PromptPersonalInvitationReject>
+        </v-list-item-action>
+        <v-list-item-action>
+          <v-btn color="primary" @click="acceptInvitation(invitation)">
+            {{ $tc('components.personalInvitations.personalInvitations.accept') }}<br />
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </template>
+    <template v-else>
+      <v-list-group v-for="invitation in invitations.items" :key="invitation._meta.self">
+        <template #activator>
+          <v-list-item-content>
+            <v-list-item-title>{{ invitation.campTitle }}</v-list-item-title>
+          </v-list-item-content>
+        </template>
+        <v-list-item>
+          <v-list-item-action>
+            <PromptPersonalInvitationReject
+              :entity="invitation"
+              :camp-title="invitation.campTitle"
+              align="left"
+              @submit="rejectInvitation(invitation)"
+            >
+              <template #activator="{ on }">
+                <v-btn class="px-4" text v-on="on">
+                  {{ $tc('components.personalInvitations.personalInvitations.reject') }}
+                </v-btn>
+              </template>
+            </PromptPersonalInvitationReject>
+          </v-list-item-action>
+          <v-spacer />
+          <v-list-item-action>
+            <v-btn color="primary" @click="acceptInvitation(invitation)">
+              {{ $tc('components.personalInvitations.personalInvitations.accept') }}<br />
             </v-btn>
-          </template>
-        </PromptPersonalInvitationReject>
-      </v-list-item-action>
-      <v-list-item-action>
-        <v-btn color="primary" @click="acceptInvitation(invitation)">
-          {{ $tc('components.personalInvitations.personalInvitations.accept') }}<br />
-        </v-btn>
-      </v-list-item-action>
-    </v-list-item>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list-group>
+    </template>
   </v-list>
 </template>
 <script>

diff --git a/frontend/src/components/personal_invitations/PromptPersonalInvitationReject.vue b/frontend/src/components/personal_invitations/PromptPersonalInvitationReject.vue
@@ -14,6 +14,7 @@
     cancel-icon=""
     :cancel-action="close"
     position="top"
+    :align="align"
     v-bind="$attrs"
   >
     <template #activator="scope">
@@ -47,6 +48,7 @@ export default {
   props: {
     entity: { type: Object, required: true },
     campTitle: { type: String, required: true },
+    align: { type: String, required: true },
   },
   created() {
     this.entityUri = this.entity._meta.self