WR-1557: Location formatting

src/config/sync/core.entity_view_display.node.workbc_centre.default.yml

@@ -35,8 +35,8 @@ third_party_settings:
     group_address_contact_informatio:
       children:
         - field_address
-        - field_phone
         - field_geolocation
+        - field_phone
         - field_email
         - field_website
       label: 'Address & Contact Information'
@@ -95,7 +95,7 @@ content:
     weight: 7
     region: content
   field_email:
-    type: email_mailto
+    type: basic_string
     label: hidden
     settings: {  }
     third_party_settings: {  }
@@ -109,7 +109,7 @@ content:
         value: "<p><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://google.com/maps/search/?api=1&amp;query=[geolocation_current_item:lat],[geolocation_current_item:lng]\" target=\"_blank\">Get Directions</a></p>\r\n"
         format: full_html
     third_party_settings: {  }
-    weight: 16
+    weight: 15
     region: content
   field_hero_image:
     type: image
@@ -152,7 +152,7 @@ content:
     settings:
       link_to_entity: false
     third_party_settings: {  }
-    weight: 15
+    weight: 16
     region: content
   field_scheduled_publish:
     type: scheduled_publish_generic_formatter

src/web/themes/custom/workbc/scss/components/_hero-banner.scss

@@ -119,7 +119,7 @@
 
 .profile-header-banner .hero-content-wrapper {
   @include media-breakpoint-up(lg) {
-    max-width: 540px;
+    width: 70%;
     padding: 30px 20px 10px 20px;
     background: $workbc_palette_light_primary;
     border-bottom: $workbc_trim_ultra_thin_size solid

src/web/themes/custom/workbc/scss/components/_workbc-centre.scss

@@ -1,112 +1,110 @@
 .workbc_centre__hero-content {
-    display: flex;
-    flex-flow: row wrap;
-    column-gap: 30px;
-    row-gap: 30px;
-    margin: 30px 0;
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: 30px;
+  row-gap: 30px;
+  margin: 30px 0;
 }
 
 .workbc-centre__address {
-    flex: 1 0 100%;
-    position: relative; // begin positional context %workbc-centre__address
-    padding-left: 30px;
+  flex: 1 0 100%;
+  position: relative; // begin positional context %workbc-centre__address
+  padding-left: 30px;
 
-    @include media-breakpoint-up(lg) {
-        flex-basis: 0;
-    }
+  @include media-breakpoint-up(lg) {
+    flex-basis: 0;
+  }
 
-    h3 {
-        font-size: 1.313rem;
-    }
+  h3 {
+    margin-bottom: 12px;
+    font-size: 1.313rem;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 25px;
+    height: 25px;
+    background: url(../assets/images/icon-location-blue.svg) center center
+      no-repeat;
+    background-size: 25px;
+  }
+}
 
-    &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 25px;
-        height: 25px;
-        background: url(../assets/images/icon-location-blue.svg) center center no-repeat;
-        background-size: 25px;
-    }
+.workbc-centre__address .field--name-field-phone,
+.workbc-centre__address .field--name-field-geolocation {
+  margin-bottom: 6px;
 }
 
 .workbc-centre__hours {
-    flex: 1 0 100%;
-    position: relative; // begin positional context %workbc-centre__hours
-    padding-left: 30px;
+  flex: 1 0 100%;
+  position: relative; // begin positional context %workbc-centre__hours
+  padding-left: 30px;
 
-    @include media-breakpoint-up(lg) {
-        flex-basis: 0;
-    }
+  @include media-breakpoint-up(lg) {
+    flex-basis: 0;
+  }
 
-    h3 {
-        font-size: 1.313rem;
-    }
-
-    &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 25px;
-        height: 25px;
-        background: url(../assets/images/icon-duration-blue.svg) center center no-repeat;
-        background-size: 25px;
-    }
-}
-
-.workbc_centre__content-container {
+  h3 {
+    margin-bottom: 12px;
+    font-size: 1.313rem;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 25px;
+    height: 25px;
+    background: url(../assets/images/icon-duration-blue.svg) center center
+      no-repeat;
+    background-size: 25px;
+  }
 }
 
 .workbc_centre__alert {
-    background-color: rgb(35, 64, 117);
-    display: flex;
-    flex-flow: column wrap;
-    justify-content: center;
-    align-items: center;
-    padding: 30px;
-    margin-bottom: 30px;
+  background-color: rgb(35, 64, 117);
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  margin-bottom: 30px;
 }
 
 .workbc_centre__alert-header {
-    position: relative; // begin positional context %workbc_centre__alert-header
-    color: rgb(255, 207, 38);
-    font-size: 1.313rem;
-    line-height: 36px;
-
-    &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -50px;
-        width: 35px;
-        height: 35px;
-        background: url(../assets/images/icon-warning-yellow.svg) center center no-repeat;
-        background-size: 35px;
-    }
+  position: relative; // begin positional context %workbc_centre__alert-header
+  color: rgb(255, 207, 38);
+  font-size: 1.313rem;
+  line-height: 36px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -50px;
+    width: 35px;
+    height: 35px;
+    background: url(../assets/images/icon-warning-yellow.svg) center center
+      no-repeat;
+    background-size: 35px;
+  }
 }
 
 .workbc_centre__alert-content {
-    margin-top: 30px;
-    color: $workbc_dark_theme_text;
-}
-
-.workbc_centre__content-main {
+  margin-top: 30px;
+  color: $workbc_dark_theme_text;
 }
 
 .workbc_centre__recent-jobs {
-    display: flex;
-    flex-flow: column wrap;
-    justify-content: center;
-    align-items: center;
-}
-
-.workbc_centre__recent-jobs-header {
-}
-
-.workbc_centre__recent-jobs-content {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: center;
+  align-items: center;
 }

src/web/themes/custom/workbc/templates/field/field--node--field-email--workbc-centre.html.twig

@@ -0,0 +1,4 @@
+
+{% for item in items %}
+  <a href="mailto:{{ item.content }}">{{label}}</a>
+{% endfor %}