Improved homepage cards UI when different sized content

membermatters · Jul 13, 2024 · c56c8b9 · c56c8b9
1 parent d3996e7
commit c56c8b9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 54 deletions.
diff --git a/src-frontend/src/components/DashboardCard.vue b/src-frontend/src/components/DashboardCard.vue
@@ -1,56 +1,60 @@
 <template>
-  <div class="q-pa-md">
-    <q-card class="my-card">
-      <q-item>
-        <q-item-section avatar>
-          <q-avatar>
-            <q-icon :name="icon" />
-          </q-avatar>
-        </q-item-section>
+  <div class="q-pa-md flex col">
+    <q-card class="flex col items-stretch content-between justify-left">
+      <div class="grow-1">
+        <q-item>
+          <q-item-section avatar>
+            <q-avatar>
+              <q-icon :name="icon" />
+            </q-avatar>
+          </q-item-section>
 
-        <q-item-section>
-          <q-item-label>{{ title }}</q-item-label>
-        </q-item-section>
-      </q-item>
+          <q-item-section>
+            <q-item-label>{{ title }}</q-item-label>
+          </q-item-section>
+        </q-item>
 
-      <q-separator />
+        <q-separator />
 
-      <q-card-section>
-        {{ description }}
-      </q-card-section>
+        <q-card-section>
+          {{ description }}
+        </q-card-section>
+      </div>
 
-      <q-separator dark />
+      <div class="full-width">
+        <q-separator dark />
 
-      <q-card-actions v-if="Platform.is.electron">
-        <q-btn v-if="routerLink" :to="routerLink" flat>
-          {{ linkText }}
-        </q-btn>
-        <q-btn v-else :href="linkLocation" target="_blank" flat>
-          {{ linkLocation }}
-        </q-btn>
-      </q-card-actions>
+        <q-card-actions v-if="Platform.is.electron">
+          <q-btn v-if="routerLink" :to="routerLink" flat>
+            {{ linkText }}
+          </q-btn>
+          <q-btn v-else :href="linkLocation" target="_blank" flat>
+            {{ linkLocation }}
+          </q-btn>
+        </q-card-actions>
 
-      <q-card-actions v-else>
-        <q-btn v-if="routerLink" :to="routerLink" flat>
-          {{ linkText }}
-        </q-btn>
-        <q-btn
-          v-else-if="linkLocation"
-          :href="linkLocation"
-          target="_blank"
-          flat
-        >
-          {{ linkText }}
-        </q-btn>
-        <div v-else>
-          <template :key="link.url" v-for="link in links">
-            <q-btn :href="link.url" target="_blank" flat>
-              {{ link.btn_text }}
-            </q-btn>
-            <q-separator v-if="link.newLine" vertical />
-          </template>
-        </div>
-      </q-card-actions>
+        <q-card-actions v-else>
+          <q-btn v-if="routerLink" :to="routerLink" flat>
+            {{ linkText }}
+          </q-btn>
+          <q-btn
+            v-else-if="linkLocation"
+            :href="linkLocation"
+            target="_blank"
+            flat
+          >
+            {{ linkText }}
+          </q-btn>
+          <div v-else>
+            <template :key="link.url" v-for="link in links">
+              <q-btn :href="link.url" target="_blank" flat>
+                {{ link.btn_text }}
+              </q-btn>
+              <q-separator v-if="link.newLine" vertical />
+            </template>
+          </div>
+        </q-card-actions>
+      </div>
     </q-card>
   </div>
 </template>

diff --git a/src-frontend/src/i18n/en-AU/index.ts b/src-frontend/src/i18n/en-AU/index.ts
@@ -201,9 +201,7 @@ export default {
   },
   access: {
     pageDescription:
-      'Your access permissions for doors and interlocks are shown below. Please ' +
-      'report an issue if you believe you should have access to something that ' +
-      "you don't.",
+      'Your access permissions are shown below. Let us know if this needs updating.',
     inactive: 'Membership is currently inactive. This may affect access.',
     authorised: 'Authorised',
     unauthorised: 'Unauthorised',
@@ -460,7 +458,7 @@ export default {
     sendWelcomeEmailSuccess: 'Successfully sent the welcome email.',
 
     access: 'Access',
-    accessDescription: "Tap an icon below to change a member's access.",
+    accessDescription: 'Tap an icon to change access.',
     log: 'log | logs',
     userEvents: 'Event Logs',
     userDoorLogs: 'Door Swipe Logs',

diff --git a/src-frontend/src/pages/CheckAccess.vue b/src-frontend/src/pages/CheckAccess.vue
@@ -1,9 +1,9 @@
 <template>
-  <q-page class="column flex content-center justify-start">
-    <p class="text-body1 page-description q-pa-md">
+  <q-page class="column flex content-center justify-center justify-start">
+    <p class="text-body1 text-center q-pa-md">
       {{ $t('access.pageDescription') }}
     </p>
-    <div class="column flex content-start justify-center">
+    <div class="column full-width" style="max-width: 800px">
       <q-banner
         v-if="profile.memberStatus !== 'active'"
         inline-actions

diff --git a/src-frontend/src/pages/Dashboard.vue b/src-frontend/src/pages/Dashboard.vue
@@ -28,7 +28,7 @@
       <h5 class="q-ma-md">
         {{ $t('dashboard.usefulResources') }}
       </h5>
-      <div class="row">
+      <div class="row flex items-stretch justify-start">
         <dashboard-card
           v-for="card in homepageCards"
           :key="card.title"