Skip to content

Commit

Permalink
Restyled default address block (#8289)
Browse files Browse the repository at this point in the history 
* This commit adds a different style for the `default` address block in the metadata page:
- labels are added
- it now has a bordered address card
- the title is in a header
- an address card icon is added to the heading

Furthermore, it changes the style for the `icon` layout a bit:
- the circled letter is smaller in size
- texts are now all right of the circle
- italic is changed to bold

* Add print styles to enable the printing of the address popover

* Fix for the print styles, the popup style now not only works in the emulated styles but also in the print preview and print.

This commit also contains a fix for the SVG 'named circle' that was displayed too big

* Fix failing unit tests.

Refactor variables used in the view and global styles.

---------

Co-authored-by: Jose García <[email protected]>
  • Loading branch information
@MichelGabriel @josegar74
MichelGabriel and josegar74 authored Dec 11, 2024
1 parent 31c641d commit 36ce40b
Show file tree
Hide file tree
Showing 8 changed files with 226 additions and 98 deletions.
210 changes: 125 additions & 85 deletions web-ui/src/main/resources/catalog/components/search/mdview/partials/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
>
<div gn-popover-anchor class="row">
<div
class="col-md-4"
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>

<div class="col-md-8">
<div class="col-md-9">
<div class="gn-contact-card-role">{{c.role | translate}}</div>
<div class="gn-contact-card-org">{{c.organisation}}</div>
</div>
Expand All @@ -29,6 +29,7 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
Expand Down Expand Up @@ -57,20 +58,16 @@
gn-popover
gn-popover-dismiss=".content"
>
<div gn-popover-anchor class="row">
<div class="col-md-12">
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
<div class="col-md-12" data-ng-repeat="c in cnts | orderBy:'organisation'">
<div class="row">
<div
class="col-md-4"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>
<div class="col-md-8">
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
</div>
</div>
<div gn-popover-anchor>
<div class="row" data-ng-repeat="c in cnts | orderBy:'organisation'">
<div
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>
<div class="col-md-9">
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
</div>
</div>
</div>
Expand All @@ -79,6 +76,9 @@
<!-- Removing for now, because if you close open popup
the title disappear. <h3 class="popover-title">{{cnts[0].role | translate}}</h3>-->
<div data-ng-repeat="c in cnts | orderBy:'organisation'">
<label class="visible-print" data-ng-if="::c.website" data-translate=""
>mdWebsite</label
>
<a data-ng-href="{{::c.website}}" data-ng-if="::c.website">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
Expand All @@ -87,6 +87,7 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
Expand Down Expand Up @@ -120,12 +121,12 @@
>
<div gn-popover-anchor class="row">
<div
class="col-md-4"
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="org"
data-org-key="contactByOrgRole[0].email | getMailDomain"
></div>

<div class="col-md-8" ng-repeat="c in contactByOrgRole">
<div class="col-md-9" ng-repeat="c in contactByOrgRole">
<div class="gn-contact-card-org-group">{{c.organisation}}</div>

<div class="gn-contact-card-group-role" data-ng-repeat="r in ::c.roles">
Expand All @@ -144,6 +145,7 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
Expand Down Expand Up @@ -174,30 +176,41 @@
data-ng-if="mode == 'default'"
data-ng-repeat="c in mdContacts track by $index"
>
<h3>
<i class="fa fa-envelope"></i>
{{c.role | translate}}
</h3>
<div class="row">
<div class="col-md-8">
<div class="panel panel-address">
<div class="panel-heading">
<h3>
<i class="fa fa-fw fa-address-card-o"></i>
{{c.role | translate}}
</h3>
</div>
<div class="panel-body">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
<address>
<strong data-ng-if="::c.website">
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
</strong>
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
<div data-ng-if="::c.website">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::c.website}}">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
</a>
</div>
<div data-ng-if="::!c.website">
<label data-translate="">mdOrganization</label>
{{c.organisation}}
</div>

<div data-gn-metadata-individual="c"></div>

<div data-ng-if="c.address != ''">{{c.address}}</div>
<div data-ng-if="c.address != ''">
<label data-translate="">mdAddress</label>
{{c.address}}
</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<label data-translate="">mdPhone</label>
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</address>
</div>
<div class="col-md-4">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
</div>
</div>
</div>

Expand All @@ -207,38 +220,55 @@ <h3>
data-ng-if="mode == 'role'"
data-ng-repeat="(roles, contactByRole) in mdContactsByRole"
>
<h3>
<i class="fa fa-envelope"></i>
<span> {{translateRoles(roles)}} </span>
</h3>
<div
class="row"
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
>
<div class="col-md-8">
<address>
<strong data-ng-if="::c.website">
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
</strong>
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
<div class="panel panel-address">
<div class="panel-heading">
<h3>
<i class="fa fa-fw fa-address-card-o"></i>
<span> {{translateRoles(roles)}} </span>
</h3>
</div>
<div class="panel-body">
<div
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
>
<!-- Logo for organisation: display for 1st contact in organisation -->
<div data-ng-repeat="c in contact | limitTo:1">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
</div>
<address>
<div data-ng-if="::c.website">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::c.website}}">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
</a>
</div>
<div data-ng-if="::!c.website">
<label data-translate="">mdOrganization</label>
{{c.organisation}}
</div>

<span data-ng-repeat="c in contact track by $index">
<div data-gn-metadata-individual="c"></div>
</span>
<div data-ng-repeat="c in contact track by $index">
<div data-gn-metadata-individual="c"></div>
</div>

<!-- Address for organisation: display for 1st contact in organisation -->
<span data-ng-repeat="c in contact | limitTo:1">
<div data-ng-if="c.address != ''">{{c.address}}</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</span>
</address>
</div>
<!-- Logo for organisation: display for 1st contact in organisation -->
<div class="col-md-4" data-ng-repeat="c in contact | limitTo:1">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
<!-- Address for organisation: display for 1st contact in organisation -->
<div data-ng-repeat="c in contact | limitTo:1">
<div data-ng-if="c.address != ''">
<label data-translate="">mdAddress</label>
{{c.address}}
</div>

<div data-ng-if="c.phone != ''">
<label data-translate="">mdPhone</label>
<a href="tel:{{c.phone}}">
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
Expand All @@ -249,32 +279,42 @@ <h3>
data-ng-if="mode == 'org-role'"
data-ng-repeat="(org, contactByOrgRole) in mdContactsByOrgRole"
>
<address>
<strong data-ng-if="::orgWebsite[org]">
<i class="fa fa-fw fa-link"></i>
<a data-ng-href="{{::orgWebsite[org]}}">{{org}}</a><br />
</strong>
<strong data-ng-if="::!orgWebsite[org]"> {{org}} </strong>
<div class="panel panel-address">
<div class="panel-body">
<address>
<div data-ng-if="::orgWebsite[org]">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::orgWebsite[org]}}">
<i class="fa fa-fw fa-link"></i>
{{org}}
</a>
</div>
<div data-ng-if="::!orgWebsite[org]">
<label data-translate="">mdOrganization</label>
{{org}}
</div>

<div
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
>
<span data-ng-if="key != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{key}}<br />
</span>
<ul>
<li
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
<div
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
>
{{translateRoles(roles)}}:<br />
<span data-ng-repeat="c in contactGroupByRole track by $index">
<div data-gn-metadata-individual="c"></div>
<span data-ng-if="!$last"><hr /></span>
<span data-ng-if="key != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{key}}<br />
</span>
</li>
</ul>
<ul>
<li
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
>
{{translateRoles(roles)}}:<br />
<div data-ng-repeat="c in contactGroupByRole track by $index">
<div data-gn-metadata-individual="c"></div>
<span data-ng-if="!$last"><hr /></span>
</div>
</li>
</ul>
</div>
</address>
</div>
</address>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions web-ui/src/main/resources/catalog/components/search/mdview/partials/individual.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div data-ng-if="c.email != ''">
<label data-translate="">mdEmail</label>
<a href="mailto:{{c.email}}">
<i class="fa fa-fw fa-envelope"></i>
<span data-ng-hide="c.individual">{{c.email}}</span>
Expand Down
7 changes: 6 additions & 1 deletion web-ui/src/main/resources/catalog/locales/en-v4.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,5 +457,10 @@
"linkStatus": "Link status",
"requestStatus": "Request status",
"linkUrl": "Link url",
"associatedUuid": "Associated to metadata UUID"
"associatedUuid": "Associated to metadata UUID",
"mdEmail": "Email",
"mdWebsite": "Website",
"mdOrganization": "Organization",
"mdAddress": "Address",
"mdPhone": "Phone"
}
39 changes: 31 additions & 8 deletions web-ui/src/main/resources/catalog/style/gn_metadata.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "gn_search.less";
@import "gn_variables.less";

.panel-body .gn-metadata-view {
width: 100%;
Expand Down Expand Up @@ -617,24 +618,46 @@ ul.container-list {
}
.col-md-6,
.col-md-4 {
padding-left: 0px;
padding-right: 0px;
padding-left: 0;
padding-right: 0;
}
.gn-contact-card-org {
.gn-contact-card-org,
.gn-contact-card-org-group {
padding: 5px 0;
margin-bottom: 10px;
}
.gn-contact-card-role {
font-style: italic;
font-weight: bolder;
}
.gn-contact-card-org-group {
font-style: italic;
font-weight: bolder;
}
.gn-contact-card-group-role {
padding: 5px;
}
@media print {
svg {
max-width: 75px;
margin: 15px;
}
[gn-popover-content] {
.make-md-column-offset(3);
padding: 0 @gn-spacing-lg;
display: block !important;
label,
a {
display: block;
margin-bottom: @gn-spacing;
}
[data-label="focusOnFrom"] {
display: none;
}
.fa {
display: none;
}
[data-ng-href] {
margin-bottom: @gn-spacing;
display: inline-block;
}
}
}
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions web-ui/src/main/resources/catalog/style/gn_variables.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// variables used in custom styles
// -------------------------------

@gn-spacing: 10px;
@gn-spacing-sm: 5px;
@gn-spacing-lg: 15px;
Loading

0 comments on commit 36ce40b

Please sign in to comment.