geonetwork-ui 2.9.0-dev.ec873d387 → 2.9.0-dev.ec9c4ffe1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,7 +14,7 @@
14
14
  </div>
15
15
  }
16
16
  <div class="grow pt-1" [ngClass]="shouldShowThumbnail ? 'sm:w-0' : ''">
17
- <div class="flex flex-col gap-2 h-full">
17
+ <div class="flex flex-col gap-2" [class.h-full]="size !== 'M'">
18
18
  <h4
19
19
  class="record-card__title"
20
20
  data-cy="recordTitle"
@@ -32,63 +32,70 @@
32
32
  [title]="abstract"
33
33
  ></gn-ui-markdown-parser>
34
34
  </div>
35
- <div class="record-card__footer">
36
- @if (record.ownerOrganization?.name) {
37
- <div
38
- data-cy="recordOrg"
39
- class="grow flex flex-row gap-1 items-center text-primary-lighter"
40
- [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
35
+ @if (size !== 'M') {
36
+ <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
37
+ }
38
+ </div>
39
+ </div>
40
+ @if (size === 'M') {
41
+ <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
42
+ }
43
+ </a>
44
+
45
+ <ng-template #footerTpl>
46
+ <div class="record-card__footer">
47
+ @if (record.ownerOrganization?.name) {
48
+ <div
49
+ data-cy="recordOrg"
50
+ class="grow flex flex-row gap-1 items-center text-primary-lighter"
51
+ [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
52
+ >
53
+ <ng-icon
54
+ name="iconoirBank"
55
+ class="text-primary -translate-y-[0.5px] shrink-0"
56
+ [title]="record.ownerOrganization.name"
57
+ ></ng-icon>
58
+ @if (!displayContactIconOnly) {
59
+ <span
60
+ data-cy="recordOrgName"
61
+ class="line-clamp-1"
62
+ [title]="record.ownerOrganization.name"
63
+ >{{ record.ownerOrganization.name }}</span
41
64
  >
42
- <ng-icon
43
- name="iconoirBank"
44
- class="text-primary -translate-y-[0.5px] shrink-0"
45
- [title]="record.ownerOrganization.name"
46
- ></ng-icon>
47
- @if (!displayContactIconOnly) {
48
- <span
49
- data-cy="recordOrgName"
50
- class="line-clamp-1"
51
- [title]="record.ownerOrganization.name"
52
- >{{ record.ownerOrganization.name }}</span
53
- >
54
- }
55
- </div>
56
65
  }
57
- <div class="record-card__footer__other">
58
- <div
59
- class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0"
60
- >
61
- <gn-ui-kind-badge
62
- [extraClass]="'text-[1.2em]'"
63
- [styling]="'gray'"
64
- [kind]="record?.kind"
65
- [contentTemplate]="customTemplate"
66
- class="pt-1"
67
- >
68
- <ng-template #customTemplate></ng-template
69
- ></gn-ui-kind-badge>
70
- @if (metadataQualityDisplay) {
71
- <gn-ui-metadata-quality
72
- class="flex items-center min-w-[113px]"
73
- [smaller]="true"
74
- [metadata]="record"
75
- [metadataQualityDisplay]="metadataQualityDisplay"
76
- [popoverDisplay]="true"
77
- ></gn-ui-metadata-quality>
78
- }
79
- </div>
80
- <div
81
- class="flex justify-center"
82
- data-cy="recordFav"
83
- [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
84
- >
85
- <ng-container
86
- [ngTemplateOutlet]="favoriteTemplate"
87
- [ngTemplateOutletContext]="{ $implicit: record }"
88
- ></ng-container>
89
- </div>
90
- </div>
66
+ </div>
67
+ }
68
+ <div class="record-card__footer__other">
69
+ <div class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0">
70
+ <gn-ui-kind-badge
71
+ [extraClass]="'text-[1.2em]'"
72
+ [styling]="'gray'"
73
+ [kind]="record?.kind"
74
+ [contentTemplate]="customTemplate"
75
+ class="pt-1"
76
+ >
77
+ <ng-template #customTemplate></ng-template
78
+ ></gn-ui-kind-badge>
79
+ @if (metadataQualityDisplay) {
80
+ <gn-ui-metadata-quality
81
+ class="flex items-center min-w-[113px]"
82
+ [smaller]="true"
83
+ [metadata]="record"
84
+ [metadataQualityDisplay]="metadataQualityDisplay"
85
+ [popoverDisplay]="true"
86
+ ></gn-ui-metadata-quality>
87
+ }
88
+ </div>
89
+ <div
90
+ class="flex justify-center"
91
+ data-cy="recordFav"
92
+ [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
93
+ >
94
+ <ng-container
95
+ [ngTemplateOutlet]="favoriteTemplate"
96
+ [ngTemplateOutletContext]="{ $implicit: record }"
97
+ ></ng-container>
91
98
  </div>
92
99
  </div>
93
100
  </div>
94
- </a>
101
+ </ng-template>
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  &.size-M {
9
- @apply max-w-[940px] md:h-[231px] gap-4;
9
+ @apply max-w-[940px] gap-4 flex-wrap;
10
10
  }
11
11
 
12
12
  &.size-S {
@@ -28,11 +28,11 @@
28
28
  @apply border rounded-lg overflow-hidden shrink-0;
29
29
 
30
30
  .size-L & {
31
- @apply w-full w-[190px] h-[184px];
31
+ @apply w-[184px] h-[184px];
32
32
  }
33
33
 
34
34
  .size-M & {
35
- @apply w-full w-[138px] h-[207px];
35
+ @apply w-[138px] h-[138px];
36
36
  }
37
37
  }
38
38
 
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .size-M & {
47
- @apply line-clamp-2 ml-2;
47
+ @apply line-clamp-2;
48
48
  }
49
49
 
50
50
  .size-S & {
@@ -64,7 +64,7 @@
64
64
  }
65
65
 
66
66
  .size-M & {
67
- @apply line-clamp-3 ml-2;
67
+ @apply line-clamp-3;
68
68
  }
69
69
 
70
70
  .size-S & {
@@ -30,7 +30,7 @@
30
30
  ></gn-ui-thumbnail>
31
31
  }
32
32
  </div>
33
- <div class="flex flex-col overflow-hidden items-start">
33
+ <div class="flex flex-col overflow-hidden items-start grow">
34
34
  @if (hasOrganization) {
35
35
  <span
36
36
  class="font-bold transition duration-200 text-primary truncate max-w-full"
@@ -51,32 +51,35 @@
51
51
  >
52
52
  </p>
53
53
  </div>
54
- </div>
55
- <div class="pt-5 pb-5 px-10 relative">
56
- <div class="absolute top-[0.85em] right-[0.85em]">
54
+ <div class="ml-3 shrink-0">
57
55
  <ng-container
58
56
  [ngTemplateOutlet]="favoriteTemplate"
59
57
  [ngTemplateOutletContext]="{ $implicit: record }"
60
58
  ></ng-container>
61
59
  </div>
62
- <h1
63
- class="font-title text-black text-[21px] font-medium mb-3 pr-8"
64
- data-cy="recordTitle"
65
- >
66
- {{ record.title }}
67
- </h1>
60
+ </div>
61
+ <div class="pt-5 pb-5 px-10 relative">
62
+ <div class="flex flex-col sm:flex-row gap-4 mb-3">
63
+ @if (record.overviews?.[0]) {
64
+ <gn-ui-thumbnail
65
+ class="block shrink-0 w-[120px] h-[120px] border border-gray-100 rounded-lg overflow-hidden"
66
+ [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
67
+ [fit]="'cover'"
68
+ ></gn-ui-thumbnail>
69
+ }
70
+ <h1
71
+ class="font-title text-black text-[21px] font-medium"
72
+ data-cy="recordTitle"
73
+ >
74
+ {{ record.title }}
75
+ </h1>
76
+ </div>
68
77
  <p class="line-clamp-3">
69
78
  <gn-ui-markdown-parser
70
79
  [textContent]="abstract"
71
80
  [whitoutStyles]="true"
72
81
  />
73
82
  </p>
74
- @if (record.overviews?.[0]) {
75
- <gn-ui-thumbnail
76
- class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
77
- [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
78
- ></gn-ui-thumbnail>
79
- }
80
83
  @if (isDownloadable || isViewable) {
81
84
  <div class="flex flex-row mt-3">
82
85
  @if (isDownloadable) {