Responsive updates, breathing room for projects table

MerginMaps · Dec 12, 2023 · c39c275 · c39c275
1 parent 1d6f4a8
commit c39c275
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     PAvatar: typeof import('primevue/avatar')['default']
+    PBreadcrumb: typeof import('primevue/breadcrumb')['default']
     PButton: typeof import('primevue/button')['default']
     PColumn: typeof import('primevue/column')['default']
     PDataTable: typeof import('primevue/datatable')['default']

diff --git a/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue b/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
@@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :dismissableMask="!dialogProps.persistent"
     :close-on-escape="!dialogProps.persistent"
     :header="dialogProps.header ?? 'Action'"
+    :draggable="false"
     @close="close"
     :pt="{
       root: {

diff --git a/web-app/packages/lib/src/modules/project/components/ProjectForm.vue b/web-app/packages/lib/src/modules/project/components/ProjectForm.vue
@@ -26,19 +26,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </span>
     </div>
 
-    <tip-message class="mb-4">
+    <tip-message class="mb-6">
       ><template #description
-        >A good candidate for a project name is name of the location, or purpose
+        >A good candidate for a project name is name of the location or purpose
         of the field survey.</template
       ></tip-message
     >
 
-    <div class="flex justify-content-between align-items-center">
+    <div
+      class="flex flex-column lg:flex-row justify-content-between align-items-center"
+    >
       <PButton
         severity="secondary"
         outlined
         @click="close"
-        class="flex w-6 mr-1 justify-content-center"
+        class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         >Cancel</PButton
       >
 
@@ -47,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         :disabled="!name"
         @click="create"
         data-cy="project-form-create-btn"
-        class="flex w-6 justify-content-center"
+        class="flex w-12 lg:w-6 justify-content-center"
       >
         Create project
       </PButton>

diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -7,13 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container>
     <template v-if="!namespace">
-      <app-section ground class="py-2">
+      <app-section ground class="py-4">
         <!-- Title with buttons -->
         <header class="flex flex-wrap align-items-center">
           <h1 class="text-3xl font-semibold">
             {{ header }}
           </h1>
-          <div class="flex flex-grow-1 align-items-center justify-content-end">
+          <div
+            class="flex flex-grow-1 align-items-center lg:justify-content-end mb-4 lg:mb-0"
+          >
             <PButton
               v-if="canCreateProject && loggedUser && loggedUser.email"
               @click="newProjectDialog"