Skip to content

Commit 521c345

Browse files
MichelGabrieljosegar74
MichelGabriel
and
josegar74
committed
Restyled default address block (#8289)
* 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]>
1 parent 546ca24 commit 521c345

File tree

8 files changed

+237
-104
lines changed

8 files changed

+237
-104
lines changed

‎web-ui/src/main/resources/catalog/components/search/mdview/partials/contact.html

+136-91
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
>
1010
<div gn-popover-anchor class="row">
1111
<div
12-
class="col-md-4"
12+
class="col-md-3 gn-nopadding-left"
1313
data-gn-circle-letter-icon="c.organisation"
1414
data-org-key="c.email | getMailDomain"
1515
></div>
1616

17-
<div class="col-md-8">
17+
<div class="col-md-9">
1818
<div class="gn-contact-card-role">{{c.role | translate}}</div>
1919
<div class="gn-contact-card-org">{{c.organisation}}</div>
2020
</div>
@@ -29,17 +29,19 @@
2929
<div data-gn-metadata-individual="c"></div>
3030

3131
<address data-ng-if="c.address != '' || c.phone != ''">
32+
<label class="visible-print" data-translate="">mdAddress</label>
3233
<div data-ng-if="c.address != ''">
3334
<i class="fa fa-fw fa-map-marker"></i>
3435
{{c.address}}
3536
</div>
3637
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
37-
<span data-translate="">call</span> {{c.phone}}
38+
<i class="fa fa-fw fa-phone"></i>
39+
{{c.phone}}
3840
</a>
3941
</address>
4042

4143
<div
42-
data-gn-search-filter-link="OrgForResource"
44+
data-gn-search-filter-link="OrgForResourceObject.default"
4345
data-filter="c.organisation"
4446
data-label="focusOnFrom"
4547
>
@@ -56,20 +58,16 @@
5658
gn-popover
5759
gn-popover-dismiss=".content"
5860
>
59-
<div gn-popover-anchor class="row">
60-
<div class="col-md-12">
61-
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
62-
<div class="col-md-12" data-ng-repeat="c in cnts | orderBy:'organisation'">
63-
<div class="row">
64-
<div
65-
class="col-md-4"
66-
data-gn-circle-letter-icon="c.organisation"
67-
data-org-key="c.email | getMailDomain"
68-
></div>
69-
<div class="col-md-8">
70-
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
71-
</div>
72-
</div>
61+
<div gn-popover-anchor>
62+
<div class="row" data-ng-repeat="c in cnts | orderBy:'organisation'">
63+
<div
64+
class="col-md-3 gn-nopadding-left"
65+
data-gn-circle-letter-icon="c.organisation"
66+
data-org-key="c.email | getMailDomain"
67+
></div>
68+
<div class="col-md-9">
69+
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
70+
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
7371
</div>
7472
</div>
7573
</div>
@@ -78,6 +76,9 @@
7876
<!-- Removing for now, because if you close open popup
7977
the title disappear. <h3 class="popover-title">{{cnts[0].role | translate}}</h3>-->
8078
<div data-ng-repeat="c in cnts | orderBy:'organisation'">
79+
<label class="visible-print" data-ng-if="::c.website" data-translate=""
80+
>mdWebsite</label
81+
>
8182
<a data-ng-href="{{::c.website}}" data-ng-if="::c.website">
8283
<i class="fa fa-fw fa-link"></i>
8384
{{c.organisation}}
@@ -86,17 +87,19 @@
8687
<div data-gn-metadata-individual="c"></div>
8788

8889
<address data-ng-if="c.address != '' || c.phone != ''">
90+
<label class="visible-print" data-translate="">mdAddress</label>
8991
<div data-ng-if="c.address != ''">
9092
<i class="fa fa-fw fa-map-marker"></i>
9193
{{c.address}}
9294
</div>
9395
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
94-
<span data-translate="">call</span> {{c.phone}}
96+
<i class="fa fa-fw fa-phone"></i>
97+
{{c.phone}}
9598
</a>
9699
</address>
97100

98101
<div
99-
data-gn-search-filter-link="OrgForResource"
102+
data-gn-search-filter-link="OrgForResourceObject.default"
100103
data-filter="c.organisation"
101104
data-label="focusOnFrom"
102105
>
@@ -118,12 +121,12 @@
118121
>
119122
<div gn-popover-anchor class="row">
120123
<div
121-
class="col-md-4"
124+
class="col-md-3 gn-nopadding-left"
122125
data-gn-circle-letter-icon="org"
123126
data-org-key="contactByOrgRole[0].email | getMailDomain"
124127
></div>
125128

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

129132
<div class="gn-contact-card-group-role" data-ng-repeat="r in ::c.roles">
@@ -142,17 +145,19 @@
142145
<div data-gn-metadata-individual="c"></div>
143146

144147
<address data-ng-if="c.address != '' || c.phone != ''">
148+
<label class="visible-print" data-translate="">mdAddress</label>
145149
<div data-ng-if="c.address != ''">
146150
<i class="fa fa-fw fa-map-marker"></i>
147151
{{c.address}}
148152
</div>
149153
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
150-
<span data-translate="">call</span> {{c.phone}}
154+
<i class="fa fa-fw fa-phone"></i>
155+
{{c.phone}}
151156
</a>
152157
</address>
153158

154159
<div
155-
data-gn-search-filter-link="OrgForResource"
160+
data-gn-search-filter-link="OrgForResourceObject.default"
156161
data-filter="c.organisation"
157162
data-label="focusOnFrom"
158163
>
@@ -171,29 +176,41 @@
171176
data-ng-if="mode == 'default'"
172177
data-ng-repeat="c in mdContacts track by $index"
173178
>
174-
<h3>
175-
<i class="fa fa-envelope"></i>
176-
{{c.role | translate}}
177-
</h3>
178-
<div class="row">
179-
<div class="col-md-8">
179+
<div class="panel panel-address">
180+
<div class="panel-heading">
181+
<h3>
182+
<i class="fa fa-fw fa-address-card-o"></i>
183+
{{c.role | translate}}
184+
</h3>
185+
</div>
186+
<div class="panel-body">
187+
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
180188
<address>
181-
<strong data-ng-if="::c.website">
182-
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
183-
</strong>
184-
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
189+
<div data-ng-if="::c.website">
190+
<label data-translate="">mdWebsite</label>
191+
<a data-ng-href="{{::c.website}}">
192+
<i class="fa fa-fw fa-link"></i>
193+
{{c.organisation}}
194+
</a>
195+
</div>
196+
<div data-ng-if="::!c.website">
197+
<label data-translate="">mdOrganization</label>
198+
{{c.organisation}}
199+
</div>
185200

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

188-
<div data-ng-if="c.address != ''">{{c.address}}</div>
203+
<div data-ng-if="c.address != ''">
204+
<label data-translate="">mdAddress</label>
205+
{{c.address}}
206+
</div>
189207
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
190-
<span data-translate="">call</span> {{c.phone}}
208+
<label data-translate="">mdPhone</label>
209+
<i class="fa fa-fw fa-phone"></i>
210+
{{c.phone}}
191211
</a>
192212
</address>
193213
</div>
194-
<div class="col-md-4">
195-
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
196-
</div>
197214
</div>
198215
</div>
199216

@@ -203,37 +220,55 @@ <h3>
203220
data-ng-if="mode == 'role'"
204221
data-ng-repeat="(roles, contactByRole) in mdContactsByRole"
205222
>
206-
<h3>
207-
<i class="fa fa-envelope"></i>
208-
<span> {{translateRoles(roles)}} </span>
209-
</h3>
210-
<div
211-
class="row"
212-
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
213-
>
214-
<div class="col-md-8">
215-
<address>
216-
<strong data-ng-if="::c.website">
217-
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
218-
</strong>
219-
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
223+
<div class="panel panel-address">
224+
<div class="panel-heading">
225+
<h3>
226+
<i class="fa fa-fw fa-address-card-o"></i>
227+
<span> {{translateRoles(roles)}} </span>
228+
</h3>
229+
</div>
230+
<div class="panel-body">
231+
<div
232+
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
233+
>
234+
<!-- Logo for organisation: display for 1st contact in organisation -->
235+
<div data-ng-repeat="c in contact | limitTo:1">
236+
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
237+
</div>
238+
<address>
239+
<div data-ng-if="::c.website">
240+
<label data-translate="">mdWebsite</label>
241+
<a data-ng-href="{{::c.website}}">
242+
<i class="fa fa-fw fa-link"></i>
243+
{{c.organisation}}
244+
</a>
245+
</div>
246+
<div data-ng-if="::!c.website">
247+
<label data-translate="">mdOrganization</label>
248+
{{c.organisation}}
249+
</div>
220250

221-
<span data-ng-repeat="c in contact track by $index">
222-
<div data-gn-metadata-individual="c"></div>
223-
</span>
251+
<div data-ng-repeat="c in contact track by $index">
252+
<div data-gn-metadata-individual="c"></div>
253+
</div>
224254

225-
<!-- Address for organisation: display for 1st contact in organisation -->
226-
<span data-ng-repeat="c in contact | limitTo:1">
227-
<div data-ng-if="c.address != ''">{{c.address}}</div>
228-
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
229-
<span data-translate="">call</span> {{c.phone}}
230-
</a>
231-
</span>
232-
</address>
233-
</div>
234-
<!-- Logo for organisation: display for 1st contact in organisation -->
235-
<div class="col-md-4" data-ng-repeat="c in contact | limitTo:1">
236-
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
255+
<!-- Address for organisation: display for 1st contact in organisation -->
256+
<div data-ng-repeat="c in contact | limitTo:1">
257+
<div data-ng-if="c.address != ''">
258+
<label data-translate="">mdAddress</label>
259+
{{c.address}}
260+
</div>
261+
262+
<div data-ng-if="c.phone != ''">
263+
<label data-translate="">mdPhone</label>
264+
<a href="tel:{{c.phone}}">
265+
<i class="fa fa-fw fa-phone"></i>
266+
{{c.phone}}
267+
</a>
268+
</div>
269+
</div>
270+
</address>
271+
</div>
237272
</div>
238273
</div>
239274
</div>
@@ -244,32 +279,42 @@ <h3>
244279
data-ng-if="mode == 'org-role'"
245280
data-ng-repeat="(org, contactByOrgRole) in mdContactsByOrgRole"
246281
>
247-
<address>
248-
<strong data-ng-if="::orgWebsite[org]">
249-
<i class="fa fa-fw fa-link"></i>
250-
<a data-ng-href="{{::orgWebsite[org]}}">{{org}}</a><br />
251-
</strong>
252-
<strong data-ng-if="::!orgWebsite[org]"> {{org}} </strong>
282+
<div class="panel panel-address">
283+
<div class="panel-body">
284+
<address>
285+
<div data-ng-if="::orgWebsite[org]">
286+
<label data-translate="">mdWebsite</label>
287+
<a data-ng-href="{{::orgWebsite[org]}}">
288+
<i class="fa fa-fw fa-link"></i>
289+
{{org}}
290+
</a>
291+
</div>
292+
<div data-ng-if="::!orgWebsite[org]">
293+
<label data-translate="">mdOrganization</label>
294+
{{org}}
295+
</div>
253296

254-
<div
255-
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
256-
>
257-
<span data-ng-if="key != ''">
258-
<i class="fa fa-fw fa-map-marker"></i>
259-
{{key}}<br />
260-
</span>
261-
<ul>
262-
<li
263-
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
297+
<div
298+
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
264299
>
265-
{{translateRoles(roles)}}:<br />
266-
<span data-ng-repeat="c in contactGroupByRole track by $index">
267-
<div data-gn-metadata-individual="c"></div>
268-
<span data-ng-if="!$last"><hr /></span>
300+
<span data-ng-if="key != ''">
301+
<i class="fa fa-fw fa-map-marker"></i>
302+
{{key}}<br />
269303
</span>
270-
</li>
271-
</ul>
304+
<ul>
305+
<li
306+
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
307+
>
308+
{{translateRoles(roles)}}:<br />
309+
<div data-ng-repeat="c in contactGroupByRole track by $index">
310+
<div data-gn-metadata-individual="c"></div>
311+
<span data-ng-if="!$last"><hr /></span>
312+
</div>
313+
</li>
314+
</ul>
315+
</div>
316+
</address>
272317
</div>
273-
</address>
318+
</div>
274319
</div>
275320
</div>

‎web-ui/src/main/resources/catalog/components/search/mdview/partials/individual.html

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div data-ng-if="c.email != ''">
2+
<label data-translate="">mdEmail</label>
23
<a href="mailto:{{c.email}}">
34
<i class="fa fa-fw fa-envelope"></i>
45
<span data-ng-hide="c.individual">{{c.email}}</span>

‎web-ui/src/main/resources/catalog/locales/en-v4.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -409,5 +409,10 @@
409409
"lastCreatedRecords": "Last created records",
410410
"associationType": "Association type",
411411
"initiativeType": "Initiative type",
412-
"associatedTo": "Associated "
412+
"associatedTo": "Associated ",
413+
"mdEmail": "Email",
414+
"mdWebsite": "Website",
415+
"mdOrganization": "Organization",
416+
"mdAddress": "Address",
417+
"mdPhone": "Phone"
413418
}

0 commit comments

Comments
 (0)