[Dataset page]: Align content

apps/datahub-e2e/src/e2e/search.cy.ts

@@ -11,7 +11,7 @@ describe('datahub-e2e', () => {
     cy.get('mel-datahub-footer').should('be.visible')
   })
   it('should display the result hits in search card', () => {
-    cy.get('mel-datahub-results-card-search').should('have.length', 12)
+    cy.get('mel-datahub-results-card-search').should('have.length', 14)
   })
 
   // If not logged in or no favorites exists
@@ -57,7 +57,7 @@ describe('datahub-e2e', () => {
         .find('h1')
         .should(
           'have.text',
-          ' Cartographie des sols agricoles de la plaine du Rhône '
+          ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) '
         )
 
       cy.get('mel-datahub-results-card-favorite')

apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.html

@@ -1,4 +1,4 @@
-<div class="mel-container-lg">
+<div>
   <p
     class="font-title text-[28px] font-medium mt-8 mb-5 text-title text-center sm:mt-12 sm:mb-[-22px] sm:text-left"
     translate

apps/datahub/src/app/dataset/dataset-header/dataset-header.component.html

@@ -1,5 +1,5 @@
-<div class="py-16 grid gap-8 grid-cols-1 sm:gap-6 sm:grid-cols-3">
-  <div class="sm:pl-72 sm:col-span-2">
+<div class="mel-grid-container-dataset py-16">
+  <div class="md:col-start-2 lg:col-start-2 md:col-span-6 lg:col-span-8">
     <div class="flex justify-end gap-2">
       <mel-datahub-favorite-heart
         [record]="record"
@@ -18,7 +18,9 @@
       ></mel-datahub-button>
       }
     </div>
-    <h1 class="mel-page-title sm:block my-4 -ml-20">
+    <h1
+      class="mel-page-title sm:block my-4 sm:-ml-20 sm:mr-10 md:mr-20 lg:mr-44"
+    >
       {{ record.title }}
     </h1>
     @if(record.abstract){
@@ -37,7 +39,7 @@ <h2 class="text-2xl font-title mb-6" translate>mel.dataset.abstract</h2>
     }
   </div>
   <!-- TODO: create corresponding UI component -->
-  <div class="overflow-hidden">
+  <div class="md:col-span-5 lg:col-span-3 overflow-hidden">
     <div translate="">mel.dataset.informations</div>
     <div>{{ record.recordUpdated }}</div>
     <div>{{ record.keywords }}</div>

apps/datahub/src/app/dataset/dataset-page/dataset-page.component.html

@@ -9,12 +9,12 @@
 
   }
 </div>
-@if ((displayMap$ | async) || (displayData$ | async)) {
-<!-- TODO: try to adapt tab layout to fit MEL -->
-<div style="height: 612px">
-  <div class="pt-8 overflow-visible sm:pt-5" style="height: 512px">
-    <div class="mel-container-lg">
-      <div>
+<div class="mel-grid-container-dataset">
+  <div class="sm:col-start-2 sm:col-span-8">
+    @if ((displayMap$ | async) || (displayData$ | async)) {
+    <!-- TODO: try to adapt tab layout to fit MEL -->
+    <div style="height: 612px">
+      <div class="pt-8 overflow-visible sm:pt-5" style="height: 512px">
         <div
           class="text-[28px] text-title font-title transform sm:translate-y-10"
           translate
@@ -67,59 +67,52 @@
         </mat-tab-group>
       </div>
     </div>
-  </div>
-</div>
-} @if((selectedTabIndex$ | async) === 2) {
-<!-- TODO: create corresponding UI component or provide GN_UI_VERSION-->
-<gn-ui-data-view-share></gn-ui-data-view-share>
-}
-<div class="mel-container-lg">
-  @if(displayDownload$ | async) {
-  <div id="download" class="block mt-6">
-    <!-- TODO: create corresponding components, uses GN-UI components for now -->
-    <mel-datahub-dataset-downloads></mel-datahub-dataset-downloads>
-  </div>
-  }
-</div>
-<div class="lg:mx-auto">
-  @if(displayApi$ | async) {
-  <div id="api" class="block mt-6">
-    <!-- TODO: create corresponding components, uses GN-UI components for now -->
-    <mel-datahub-dataset-apis></mel-datahub-dataset-apis>
-  </div>
-  }
-</div>
-@if(displayRelated$ | async) {
-<!-- TODO: create corresponding UI component-->
-<div>
-  <div>
-    <div class="h-48 overflow-visible">
-      <div class="mel-container-lg">
-        <div>
-          <p
-            class="font-title text-[28px] text-title font-medium mt-6 sm:mt-10 mb-4 text-center sm:text-left"
-            translate
-          >
-            mel.record.metadata.related
-          </p>
-          <div
-            class="mb-4 flex flex-wrap gap-6 justify-center sm:justify-start"
-          >
-            <gn-ui-related-record-card
-              *ngFor="let record of facade.related$ | async"
-              [record]="record"
+    } @if((selectedTabIndex$ | async) === 2) {
+    <!-- TODO: create corresponding UI component or provide GN_UI_VERSION-->
+    <gn-ui-data-view-share></gn-ui-data-view-share>
+    } @if(displayDownload$ | async) {
+    <div id="download" class="block mt-6">
+      <!-- TODO: create corresponding components, uses GN-UI components for now -->
+      <mel-datahub-dataset-downloads></mel-datahub-dataset-downloads>
+    </div>
+    }
+    <div class="lg:mx-auto">
+      @if(displayApi$ | async) {
+      <div id="api" class="block mt-6">
+        <!-- TODO: create corresponding components, uses GN-UI components for now -->
+        <mel-datahub-dataset-apis></mel-datahub-dataset-apis>
+      </div>
+      }
+    </div>
+    @if(displayRelated$ | async) {
+    <!-- TODO: create corresponding UI component-->
+    <div>
+      <div>
+        <div class="overflow-visible">
+          <div>
+            <p
+              class="font-title text-[28px] text-title font-medium mt-6 sm:mt-10 mb-4 text-center sm:text-left"
+              translate
             >
-            </gn-ui-related-record-card>
+              mel.record.metadata.related
+            </p>
+            <div
+              class="mb-4 flex flex-wrap gap-6 justify-center sm:justify-start"
+            >
+              <gn-ui-related-record-card
+                *ngFor="let record of facade.related$ | async"
+                [record]="record"
+              >
+              </gn-ui-related-record-card>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div class="bg-primary">
-    <div class="mel-container-lg h-[1096px] sm:h-96"></div>
+    }
   </div>
 </div>
-} } @else {
+} @else {
 <div class="mt-12 p-4 max-w-[600px] m-auto text-[13px]">
   @if((facade.error$ | async).notFound) {
   <gn-ui-search-results-error

apps/datahub/src/app/search/search-results/search-results.component.html

@@ -2,7 +2,7 @@
   <div class="mt-6 rounded-lg text-gray-800 p-4 bg-slate-100">
     <gn-ui-results-hits></gn-ui-results-hits>
   </div>
-  <div class="mt-8">
+  <div class="my-8">
     <mel-datahub-results-list-grid
       [numberOfResults]="18"
     ></mel-datahub-results-list-grid>

apps/datahub/src/styles.css

@@ -14,6 +14,9 @@
   .mel-container-lg {
     @apply max-w-[1320px] mx-auto px-4;
   }
+  .mel-grid-container-dataset {
+    @apply grid gap-8 grid-cols-1 md:grid-cols-12 mx-2 pb-64 sm:ml-24 md:mr-0 sm:gap-6;
+  }
   .mel-card {
     @apply bg-gray-8 flex flex-col justify-between rounded-lg border border-gray-6 filter cursor-pointer hover:drop-shadow-lg;
   }