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

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

@@ -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>
@@ -57,22 +57,22 @@
       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 gn-popover-anchor>
+<!--        <div class="col-md-12">-->
+          <div class="row" data-ng-repeat="c in cnts | orderBy:'organisation'">
+<!--            <div 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">{{cnts[0].role | translate}}</div>
                 <div class="gn-contact-card-org-group">{{c.organisation}}</div>
               </div>
             </div>
-          </div>
-        </div>
+<!--          </div>-->
+<!--        </div>-->
       </div>
 
       <div gn-popover-content>
@@ -120,12 +120,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">
@@ -174,29 +174,42 @@
     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>
@@ -207,38 +220,58 @@ <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>
-
-          <span data-ng-repeat="c in contact track by $index">
-            <div data-gn-metadata-individual="c"></div>
-          </span>
-
-          <!-- 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 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>
-      <!-- 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}}" />
+      <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>
+
+            <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 -->
+            <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>
@@ -249,32 +282,43 @@ <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
-        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 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'"
           >
-            {{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>

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

@@ -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>

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

@@ -449,5 +449,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"
 }

web-ui/src/main/resources/catalog/style/gn_metadata.less

@@ -622,16 +622,11 @@ ul.container-list {
         padding-left: 0px;
         padding-right: 0px;
       }
-      .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 {

web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less

@@ -97,6 +97,39 @@
       background-color: @brand-danger !important;
     }
   }
+  // address card
+  .panel-address {
+    padding-bottom: 0;
+    box-shadow: none;
+    border: 1px solid @panel-default-border;
+    .panel-heading {
+      padding: @gn-spacing-lg;
+      border-bottom: 1px solid @panel-default-border;
+      background-color: @panel-default-heading-bg;
+      height: auto;
+      line-height: normal;
+      h3 {
+        margin: 0;
+        padding: 0;
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+    .panel-body {
+      padding: 0;
+      address {
+        padding: @gn-spacing-lg;
+
+        border-radius: @panel-border-radius;
+        margin: 0;
+        label {
+          min-width: 20%;
+          margin-right: @gn-spacing;
+        }
+      }
+    }
+
+  }
   // card
   .gn-card-view-header {
     padding: 15px;