Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(DH): Make font-sizes and colors same across the expandable panel #660

Merged
merged 3 commits into from
Oct 24, 2023
Merged

fix(DH): Make font-sizes and colors same across the expandable panel #660

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
152f6c6
fix(DH): Make font-sizes and colors same across the expandable panel
Angi-Kinas Oct 24, 2023
bf058f0
fix(DH): Add suggested changes
Angi-Kinas Oct 24, 2023
f6c3fe5
fix(DH): Make sure that the content ghost for abstract is shown
Angi-Kinas Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
>
record.metadata.about
</p>
<div class="mb-6 md-description sm:mb-4 sm:pr-16" *ngIf="metadata.abstract">
<div
class="text-gray-900 mb-6 md-description sm:mb-4 sm:pr-16"
*ngIf="metadata.abstract"
>
<gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
<p
class="whitespace-pre-line break-words"
Expand Down Expand Up @@ -32,27 +35,30 @@
*ngIf="metadata.lineage"
[title]="'record.metadata.origin' | translate"
>
<p class="mb-5 pt-4 whitespace-pre-line break-words" gnUiLinkify>
<p
class="text-gray-900 mb-5 pt-4 whitespace-pre-line break-words"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought, we would let the config set the main color here (as well as in the abstract above), but maybe I'm wrong (cc @fgravin @jahow)

gnUiLinkify
>
{{ metadata.lineage }}
</p>
<div
class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid"
>
<div *ngIf="metadata.recordUpdated">
<p class="text-sm" translate>record.metadata.updatedOn</p>
<p class="text-primary font-medium mt-2">
<p class="text-primary font-medium mt-[4px]">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mt-1 should be the same I think

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is more explixit to put it in px, because it reflects what is in the mockup. In terms of generated css it's almost the same.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, so far we've privileged the non interpolated values (also for the lightest CSS possible, I think). I don't have a strong opinion on this, but maybe we should agree on a best practice.

{{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
</p>
</div>
<div *ngIf="metadata.updateFrequency">
<p class="text-sm" translate>record.metadata.updateFrequency</p>
<p class="text-primary font-medium mt-2" translate>
<p class="text-primary font-medium mt-[4px]" translate>
domain.record.updateFrequency.{{ metadata.updateFrequency }}
</p>
</div>
<div *ngIf="metadata.status">
<p class="text-sm" translate>record.metadata.updateStatus</p>
<p class="text-primary font-medium mt-2" translate>
<p class="text-primary font-medium mt-[4px]" translate>
domain.record.status.{{ metadata.status }}
</p>
</div>
Expand All @@ -63,7 +69,11 @@
<gn-ui-badge *ngIf="metadata.extras?.isOpenData">
<span translate>record.metadata.isOpenData</span>
</gn-ui-badge>
<span *ngFor="let usage of usages" gnUiLinkify>
<span
class="text-primary font-medium"
*ngFor="let usage of usages"
gnUiLinkify
>
{{ usage }}
</span>
<span class="noUsage" *ngIf="!hasUsage">
Expand All @@ -79,7 +89,7 @@
<p class="text-sm" translate>record.metadata.sheet</p>
<a [href]="metadata.landingPage" target="_blank">
<mat-icon
class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black"
class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
>open_in_new</mat-icon
>
<span class="text-primary break-all">{{ metadata.landingPage }}</span>
Expand Down
5 changes: 1 addition & 4 deletions libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import {
Input,
Output,
} from '@angular/core'
import {
DatasetDistribution,
DatasetRecord,
} from '@geonetwork-ui/common/domain/record'
import { DatasetRecord } from '@geonetwork-ui/common/domain/record'

@Component({
selector: 'gn-ui-metadata-info',
Expand Down
2 changes: 1 addition & 1 deletion libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>
</div>
<div
class="content duration-500 overflow-hidden transition-[max-height]"
class="content duration-250 overflow-hidden transition-[max-height]"
[ngClass]="collapsed ? 'ease-out' : 'ease-in'"
[style.maxHeight]="maxHeight"
#contentDiv
Expand Down
Loading