feat(datahub): better layout for preview tabs

geonetwork · Nov 19, 2024 · 1abd2ec · 1abd2ec
1 parent 1230d6f
commit 1abd2ec
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.css b/apps/datahub/src/app/record/record-metadata/record-metadata.component.css
@@ -1,3 +1,8 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-tab-labels {
+  /* move tabs on the right to let the title show */
+  margin-left: 140px;
+}
 ::ng-deep .mat-mdc-tab.mdc-tab {
   letter-spacing: 0.88px;
 }
@@ -16,6 +21,9 @@
 }
 @media only screen and (max-width: 639px) {
   /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+  ::ng-deep .mat-mdc-tab-labels {
+    margin-left: 0px;
+  }
   ::ng-deep .mat-mdc-tab.mdc-tab {
     padding: 0px !important;
     margin-right: 24px;

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -79,9 +79,7 @@
           >
             <mat-tab [disabled]="(displayMap$ | async) === false">
               <ng-template mat-tab-label>
-                <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
-                >
+                <span class="tab-header-label" translate>record.tab.map</span>
               </ng-template>
               <div
                 class="block"

diff --git a/libs/feature/record/src/lib/data-view/data-view.component.html b/libs/feature/record/src/lib/data-view/data-view.component.html
@@ -2,7 +2,7 @@
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
     [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1"
+    class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"
     [choices]="choices"
     (selectValue)="selectLink($event)"

diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end mb-7 mt-1">
+  <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
-      class="truncate p-1 -mx-1"
+      class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"