Consistency in permit and note card titles

bcgov · Apr 9, 2024 · 51fc346 · 51fc346
1 parent 17405a8
commit 51fc346
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 65 deletions.
diff --git a/frontend/src/components/note/NoteCard.vue b/frontend/src/components/note/NoteCard.vue
@@ -30,15 +30,19 @@ onMounted(() => {
 <template>
   <Card :id="props.note.noteId">
     <template #title>
-      <h3 class="mt-1 mb-1">
-        {{ props.note.title }}
-        <span
-          v-if="props.note.bringForwardState"
-          data-test="bf-title"
-        >
-          {{ `(${props.note.bringForwardState})` }}
-        </span>
-      </h3>
+      <div class="flex align-items-center">
+        <div class="flex-grow-1">
+          <h3 class="mb-0">
+            {{ props.note.title }}
+            <span
+              v-if="props.note.bringForwardState"
+              data-test="bf-title"
+            >
+              {{ `(${props.note.bringForwardState})` }}
+            </span>
+          </h3>
+        </div>
+      </div>
       <Divider type="solid" />
     </template>
     <template #content>
@@ -88,10 +92,6 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-h2 {
-  margin: 0;
-}
-
 p {
   margin-top: 0;
   margin-bottom: 0;
@@ -105,13 +105,8 @@ p {
   border-style: solid;
   border-width: 1px;
 
-  .p-card-body {
-    padding-top: 0;
+  :deep(.p-card-content) {
     padding-bottom: 0;
-
-    .p-card-content {
-      padding-bottom: 0;
-    }
   }
 }
 .note-content {

diff --git a/frontend/src/components/permit/PermitCard.vue b/frontend/src/components/permit/PermitCard.vue
@@ -86,28 +86,24 @@ onMounted(() => {
 
 <template>
   <Card>
-    <template #header>
-      <div class="flex flex-row px-3 pt-2">
+    <template #title>
+      <div class="flex align-items-center">
         <div class="flex-grow-1">
-          <h3>{{ permitType?.name }}</h3>
+          <h3 class="mb-0">{{ permitType?.name }}</h3>
         </div>
-        <div class="flex flex-none">
-          <Button
-            class="p-button-outlined"
-            aria-label="Edit"
-            @click="permitModalVisible = true"
-          >
-            <font-awesome-icon
-              class="pr-2"
-              icon="fa-solid fa-edit"
-            />
-            Edit
-          </Button>
-        </div>
-      </div>
-      <div class="flex flex-row px-3">
-        <Divider type="solid" />
+        <Button
+          class="p-button-outlined"
+          aria-label="Edit"
+          @click="permitModalVisible = true"
+        >
+          <font-awesome-icon
+            class="pr-2"
+            icon="fa-solid fa-edit"
+          />
+          Edit
+        </Button>
       </div>
+      <Divider type="solid" />
     </template>
     <template #content>
       <div class="grid nested-grid">
@@ -188,10 +184,6 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-h2 {
-  margin: 0;
-}
-
 p {
   margin-top: 0;
   margin-bottom: 0;
@@ -205,14 +197,8 @@ p {
   border-style: solid;
   border-width: 1px;
 
-  :deep(.p-card-body) {
-    padding-top: 0;
+  :deep(.p-card-content) {
     padding-bottom: 0;
-
-    :deep(.p-card-content) {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
   }
 }
 </style>
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
@@ -169,22 +169,20 @@ onMounted(async () => {
     </TabPanel>
     <TabPanel header="Permits">
       <span v-if="permitTypes.length">
-        <div class="flex flex-row pb-2">
-          <div class="flex flex-grow-1 align-items-end">
+        <div class="flex align-items-center pb-2">
+          <div class="flex-grow-1">
             <p class="font-bold">Applicable permits ({{ permits.length }})</p>
           </div>
-          <div class="flex flex-none">
-            <Button
-              aria-label="Add permit"
-              @click="permitModalVisible = true"
-            >
-              <font-awesome-icon
-                class="pr-2"
-                icon="fa-solid fa-plus"
-              />
-              Add permit
-            </Button>
-          </div>
+          <Button
+            aria-label="Add permit"
+            @click="permitModalVisible = true"
+          >
+            <font-awesome-icon
+              class="pr-2"
+              icon="fa-solid fa-plus"
+            />
+            Add permit
+          </Button>
         </div>
         <div
           v-for="(permit, index) in permits"
@@ -208,8 +206,8 @@ onMounted(async () => {
       </span>
     </TabPanel>
     <TabPanel header="Notes">
-      <div class="flex flex-row align-items-center pb-2">
-        <div class="flex flex-grow-1">
+      <div class="flex align-items-center pb-2">
+        <div class="flex-grow-1">
           <p class="font-bold">Notes ({{ notes.length }})</p>
         </div>
         <Button