From c5729d5b61fda36d6fb5ade9b97d7d077cc73844 Mon Sep 17 00:00:00 2001
From: Olivier Guyot <olivier.guyot@camptocamp.com>
Date: Mon, 29 Aug 2022 15:55:21 +0200
Subject: [PATCH] feat(datahub): fix spacing in different pages & responsive
 layout

---
 .../home/home-page/home-page.component.html    |  2 +-
 .../app/home/news-page/news-page.component.css |  6 ++++--
 .../home/news-page/news-page.component.html    |  2 +-
 .../organisations-page.component.html          |  2 +-
 .../record-preview-datahub.component.html      |  2 +-
 .../search-page/search-page.component.html     | 18 ++++++++++--------
 .../header-record/header-record.component.html |  2 +-
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/datahub/src/app/home/home-page/home-page.component.html b/apps/datahub/src/app/home/home-page/home-page.component.html
index bf5f1dfe0e..785ac558ba 100644
--- a/apps/datahub/src/app/home/home-page/home-page.component.html
+++ b/apps/datahub/src/app/home/home-page/home-page.component.html
@@ -4,7 +4,7 @@
       <datahub-home-header [expandRatio]="expandRatio"></datahub-home-header>
     </ng-template>
   </gn-ui-sticky-header>
-  <main>
+  <main class="px-5">
     <router-outlet></router-outlet>
   </main>
 </div>
diff --git a/apps/datahub/src/app/home/news-page/news-page.component.css b/apps/datahub/src/app/home/news-page/news-page.component.css
index 8c7d57cd32..309423b343 100644
--- a/apps/datahub/src/app/home/news-page/news-page.component.css
+++ b/apps/datahub/src/app/home/news-page/news-page.component.css
@@ -3,14 +3,16 @@
   --full-width: 100%;
   --container-width: min(1024px, var(--full-width));
   --right-col-width: 320px;
+  --padding: -20px; /* compensate from router outlet padding */
 }
 
 .backdrop {
   position: absolute;
   height: 100%;
   top: 0;
-  right: 0;
+  right: var(--padding);
   width: calc(
-    var(--right-col-width) + (var(--full-width) - var(--container-width)) / 2
+    var(--right-col-width) - var(--padding) +
+      (var(--full-width) - var(--container-width)) / 2
   );
 }
diff --git a/apps/datahub/src/app/home/news-page/news-page.component.html b/apps/datahub/src/app/home/news-page/news-page.component.html
index c429c68b52..eeba25dbd2 100644
--- a/apps/datahub/src/app/home/news-page/news-page.component.html
+++ b/apps/datahub/src/app/home/news-page/news-page.component.html
@@ -1,7 +1,7 @@
 <div class="relative">
   <div class="backdrop bg-gray-50"></div>
   <div class="relative pt-[44px] container-lg mx-auto flex">
-    <div class="pr-[61px] overflow-hidden flex-grow">
+    <div class="pr-0 lg:pr-[61px] overflow-hidden flex-grow">
       <h2
         class="text-2xl font-title text-primary leading-7 text-left mb-8"
         translate
diff --git a/apps/datahub/src/app/home/organisations-page/organisations-page.component.html b/apps/datahub/src/app/home/organisations-page/organisations-page.component.html
index 3dc94b7471..61063e0596 100644
--- a/apps/datahub/src/app/home/organisations-page/organisations-page.component.html
+++ b/apps/datahub/src/app/home/organisations-page/organisations-page.component.html
@@ -1,3 +1,3 @@
-<div>
+<div class="container-lg mx-auto">
   <gn-ui-organisations></gn-ui-organisations>
 </div>
diff --git a/apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.html b/apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.html
index e6eaadb988..f3a117d9e6 100644
--- a/apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.html
+++ b/apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.html
@@ -1,4 +1,4 @@
-<div class="flex cursor-pointer flex-wrap sm:flex-nowrap">
+<div class="container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap">
   <div class="flex-shrink-0 w-full sm:w-52">
     <div
       class="overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36"
diff --git a/apps/datahub/src/app/home/search/search-page/search-page.component.html b/apps/datahub/src/app/home/search/search-page/search-page.component.html
index edcd38a829..7bcd211420 100644
--- a/apps/datahub/src/app/home/search/search-page/search-page.component.html
+++ b/apps/datahub/src/app/home/search/search-page/search-page.component.html
@@ -1,9 +1,11 @@
-<div class="px-3 sm:p-7 sm:my-8 sm:shadow-primary-light sm:rounded-2xl">
-  <datahub-search-summary></datahub-search-summary>
-</div>
-<div>
-  <gn-ui-results-list-container
-    [scrollableOptions]="scrollableOptions"
-    (mdSelect)="onMetadataSelection($event)"
-  ></gn-ui-results-list-container>
+<div class="container-lg mx-auto">
+  <div class="px-3 sm:p-7 sm:my-8 sm:shadow-primary-light sm:rounded-2xl">
+    <datahub-search-summary></datahub-search-summary>
+  </div>
+  <div>
+    <gn-ui-results-list-container
+      [scrollableOptions]="scrollableOptions"
+      (mdSelect)="onMetadataSelection($event)"
+    ></gn-ui-results-list-container>
+  </div>
 </div>
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
index c5d2065b49..502dbffff7 100644
--- a/apps/datahub/src/app/record/header-record/header-record.component.html
+++ b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -10,7 +10,7 @@
       {{ metadata.title }}
     </div>
 
-    <div class="absolute" style="top: 20px">
+    <div class="absolute" style="left: 16px; top: 16px">
       <gn-ui-navigation-button
         (click)="back()"
         [label]="'datahub.search.back' | translate"