editor: rework sections and layout

apps/metadata-editor-e2e/src/e2e/edit.cy.ts

@@ -404,6 +404,56 @@ describe('editor form', () => {
         })
       })
     })
+    describe('classification', () => {
+      describe('keywords', () => {
+        it('should show the current keywords', () => {
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-badge')
+            .should('have.length', 41)
+        })
+        it('should add a keyword', () => {
+          cy.editor_wrapPreviousDraft()
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .type('a')
+          cy.get('mat-option').first().click()
+          cy.editor_publishAndReload()
+          cy.get('@saveStatus').should('eq', 'record_up_to_date')
+          cy.get('@accessContactPageBtn').click()
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-badge')
+            .should('have.length', 42)
+            .last()
+            .find('span')
+            .should('have.text', 'Addresses ')
+        })
+        it('should close the autocomplete and clear the input after selecting a keyword', () => {
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .type('a')
+          cy.get('mat-option').first().click()
+          cy.get('mat-option').should('not.exist')
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .find('input')
+            .should('have.value', '')
+        })
+        it('should delete a keyword', () => {
+          cy.editor_wrapPreviousDraft()
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-badge')
+            .last()
+            .find('gn-ui-button')
+            .click()
+          cy.editor_publishAndReload()
+          cy.get('@saveStatus').should('eq', 'record_up_to_date')
+          cy.get('@accessContactPageBtn').click()
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-badge')
+            .should('have.length', 41)
+        })
+      })
+    })
     describe('geographical coverage', () => {
       it('should show a map', () => {
         cy.get('gn-ui-form-field-spatial-extent')
@@ -596,136 +646,6 @@ describe('editor form', () => {
         ).should('have.length', 1)
       })
     })
-    describe('classification', () => {
-      beforeEach(() => {
-        cy.get('@accessContactPageBtn').click()
-      })
-      describe('keywords', () => {
-        it('should show the current keywords', () => {
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-badge')
-            .should('have.length', 41)
-        })
-        it('should add a keyword', () => {
-          cy.editor_wrapPreviousDraft()
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-autocomplete')
-            .type('a')
-          cy.get('mat-option').first().click()
-          cy.editor_publishAndReload()
-          cy.get('@saveStatus').should('eq', 'record_up_to_date')
-          cy.get('@accessContactPageBtn').click()
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-badge')
-            .should('have.length', 42)
-            .last()
-            .find('span')
-            .should('have.text', 'Addresses ')
-        })
-        it('should close the autocomplete and clear the input after selecting a keyword', () => {
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-autocomplete')
-            .type('a')
-          cy.get('mat-option').first().click()
-          cy.get('mat-option').should('not.exist')
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-autocomplete')
-            .find('input')
-            .should('have.value', '')
-        })
-        it('should delete a keyword', () => {
-          cy.editor_wrapPreviousDraft()
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-badge')
-            .last()
-            .find('gn-ui-button')
-            .click()
-          cy.editor_publishAndReload()
-          cy.get('@saveStatus').should('eq', 'record_up_to_date')
-          cy.get('@accessContactPageBtn').click()
-          cy.get('gn-ui-form-field-keywords')
-            .find('gn-ui-badge')
-            .should('have.length', 41)
-        })
-      })
-
-      describe('data managers', () => {
-        describe('contacts for resources', () => {
-          beforeEach(() => {
-            cy.get('@accessContactPageBtn').click()
-          })
-
-          it('show the contacts for resource of the dataset', () => {
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .should('have.length', 3)
-          })
-
-          it('delete a contact for resource', () => {
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .find('gn-ui-contact-card')
-              .should('have.length', 3)
-            cy.editor_wrapPreviousDraft()
-
-            // delete 2 out of 3 contacts
-            cy.get('[data-test=displayedRoles] [data-test=remove-item]')
-              .first()
-              .click()
-            cy.get('[data-test=displayedRoles] [data-test=remove-item]')
-              .first()
-              .click()
-
-            cy.editor_publishAndReload()
-            cy.get('@saveStatus').should('eq', 'record_up_to_date')
-            cy.get('@accessContactPageBtn').click()
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .find('gn-ui-contact-card')
-              .should('have.length', 1)
-          })
-
-          it('show the roles available to add', () => {
-            cy.get('[data-test=rolesToPick]')
-              .children()
-              .should('have.length', 4)
-          })
-
-          it('click on a role adds it to the list of displayed role', () => {
-            cy.get('[data-test="rolesToPick"]').children().eq(2).click()
-            cy.get('[data-test=rolesToPick]')
-              .children()
-              .should('have.length', 3)
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .should('have.length', 2)
-          })
-
-          it('add a contact for resource', () => {
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .find('gn-ui-contact-card')
-              .should('have.length', 1)
-            cy.editor_wrapPreviousDraft()
-
-            cy.get('[data-test=displayedRoles]')
-              .find('gn-ui-autocomplete')
-              .type('bar')
-
-            cy.get('mat-option')
-              .should('have.text', ' Barbara Roberts (Barbie Inc.) ')
-              .click()
-            cy.editor_publishAndReload()
-            cy.get('@accessContactPageBtn').click()
-            cy.get('@saveStatus').should('eq', 'record_up_to_date')
-            cy.get('[data-test=displayedRoles]')
-              .children()
-              .find('gn-ui-contact-card')
-              .should('have.length', 2)
-          })
-        })
-      })
-    })
     describe('Access and constraints', () => {
       beforeEach(() => {
         cy.get('@accessContactPageBtn').click()
@@ -893,6 +813,82 @@ describe('editor form', () => {
             .should('have.length', 1)
         })
       })
+      describe('data managers', () => {
+        describe('contacts for resources', () => {
+          beforeEach(() => {
+            cy.get('@accessContactPageBtn').click()
+          })
+
+          it('show the contacts for resource of the dataset', () => {
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .should('have.length', 3)
+          })
+
+          it('delete a contact for resource', () => {
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .find('gn-ui-contact-card')
+              .should('have.length', 3)
+            cy.editor_wrapPreviousDraft()
+
+            // delete 2 out of 3 contacts
+            cy.get('[data-test=displayedRoles] [data-test=remove-item]')
+              .first()
+              .click()
+            cy.get('[data-test=displayedRoles] [data-test=remove-item]')
+              .first()
+              .click()
+
+            cy.editor_publishAndReload()
+            cy.get('@saveStatus').should('eq', 'record_up_to_date')
+            cy.get('@accessContactPageBtn').click()
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .find('gn-ui-contact-card')
+              .should('have.length', 1)
+          })
+
+          it('show the roles available to add', () => {
+            cy.get('[data-test=rolesToPick]')
+              .children()
+              .should('have.length', 4)
+          })
+
+          it('click on a role adds it to the list of displayed role', () => {
+            cy.get('[data-test="rolesToPick"]').children().eq(2).click()
+            cy.get('[data-test=rolesToPick]')
+              .children()
+              .should('have.length', 3)
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .should('have.length', 2)
+          })
+
+          it('add a contact for resource', () => {
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .find('gn-ui-contact-card')
+              .should('have.length', 1)
+            cy.editor_wrapPreviousDraft()
+
+            cy.get('[data-test=displayedRoles]')
+              .find('gn-ui-autocomplete')
+              .type('bar')
+
+            cy.get('mat-option')
+              .should('have.text', ' Barbara Roberts (Barbie Inc.) ')
+              .click()
+            cy.editor_publishAndReload()
+            cy.get('@accessContactPageBtn').click()
+            cy.get('@saveStatus').should('eq', 'record_up_to_date')
+            cy.get('[data-test=displayedRoles]')
+              .children()
+              .find('gn-ui-contact-card')
+              .should('have.length', 2)
+          })
+        })
+      })
     })
   })
 })

apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html

@@ -14,7 +14,7 @@
       *ngrxLet="isCurrentPage(index) as isCurrentPage"
     >
       <div
-        class="w-[40px] h-[40px] rounded-[8px] grid items-center font-bold transition-colors"
+        class="w-[40px] h-[40px] shrink-0 rounded-[8px] grid items-center font-bold transition-colors"
         data-test="page-number"
         [ngClass]="isCurrentPage ? 'bg-primary text-white' : 'bg-gray-200'"
       >

apps/metadata-editor/src/styles.css

@@ -36,3 +36,7 @@ body {
 .input-as-button {
   @apply border-2 border-gray-300 hover:border-main bg-transparent hover:text-main py-[11.5px] pl-[14px] pr-2;
 }
+
+.gn-ui-url-input {
+  @apply font-medium text-black;
+}

libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-3">
+<div class="flex flex-col gap-4">
   <gn-ui-autocomplete
     [placeholder]="placeholder"
     [displayWithFn]="displayWithFn"

libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
     [placeholder]="'Search for place keywords'"
     [keywords]="shownKeywords$ | async"
@@ -7,9 +7,9 @@
     (addedKeyword)="handleKeywordAdd($event)"
   >
   </gn-ui-generic-keywords>
-</div>
-<div class="w-full h-96 mt-2">
-  <gn-ui-form-field-map-container
-    [spatialExtents]="spatialExtents$ | async"
-  ></gn-ui-form-field-map-container>
+  <div class="w-full h-96 mt-2">
+    <gn-ui-form-field-map-container
+      [spatialExtents]="spatialExtents$ | async"
+    ></gn-ui-form-field-map-container>
+  </div>
 </div>

libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -30,7 +30,7 @@
           #autosize="cdkTextareaAutosize"
           cdkAutosizeMinRows="1"
           data-test="recordTitleInput"
-          class="grow font-title text-3xl font-normal overflow-hidden"
+          class="grow font-title text-3xl font-normal overflow-hidden text-black/80"
           (change)="valueChange.emit($event.target.value)"
           >{{ valueAsString }}</textarea
         >

libs/feature/editor/src/lib/components/record-form/record-form.component.html

@@ -6,14 +6,11 @@
     "
   >
     <ng-container *ngIf="!section.hidden">
-      <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
-        <div
-          class="flex flex-col gap-2"
-          [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
-        >
+      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+        <div class="flex flex-col gap-2">
           <div
             *ngIf="section.labelKey"
-            class="text-2xl font-title text-main"
+            class="text-2xl font-title text-black"
             translate
           >
             {{ section.labelKey }}