patch: comminities-map - styles added

src/styles/admin-circles/_index.scss

@@ -187,10 +187,31 @@
   }
 
   .communities-profile-map .leaflet-pane.leaflet-popup-pane {
-    /*display: none;*/
+    display: none;
+  }
+
+  .communities-map {
 
     .leaflet-popup-content-wrapper {
-      white-space: normal;
+      border-radius: 5px;
+
+      .leaflet-popup-content {
+        width: 340px !important;
+        margin: 0;
+
+        .description {
+          height: 32px;
+        }
+
+        .title:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .leaflet-popup-close-button {
+      display: none;
     }
   }
 
@@ -239,6 +260,16 @@
       top: 70px;
       z-index: 1000;
       width: 97%;
+
+      button[type='submit'] {
+        background: var(--color-secondary) !important;
+        color: white !important;
+
+        &:hover {
+          background: white !important;
+          color: var(--color-secondary) !important;
+        }
+      }
     }
 
     .communities-map {

src/views/partials/communities/page-community-directory.pug

@@ -2,7 +2,7 @@
   h2.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-small.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
 
   div.padding-top-xxsmall.margin-left-xsmall.margin-right-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
-    div.segment.half.sm-full
+    div.segment.three-quarter.sm-full
       solid-form-search.form.search-form.search-button(
         id=`communities-filter`
         fields='name'
@@ -13,7 +13,7 @@
         submit-widget="button"
         data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
       )
-    div.segment.half.sm-full.text-right
+    div.segment.quarter.sm-full.text-right
       solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-map`)
         span
 

src/views/partials/communities/page-community-map.pug

@@ -2,7 +2,7 @@
   h2.segment.sm-hidden.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
 
   div.mobile-map-search-field.padding-top-xxsmall.margin-left-xsmall.margin-right-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
-    div.segment.half.sm-full
+    div.segment.three-quarter.sm-full
       solid-form-search.form.search-form.search-button(
         id=`communities-filter-map`
         fields='filter'
@@ -15,15 +15,25 @@
         submit-widget="button"
         data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
       )
-    div.segment.half.sm-full.text-right
+    div.segment.quarter.sm-full.text-right
       solid-link.segment.children-link-rounded.children-icon-grid.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
         span
 
   solid-map.communities-map.margin-right-xsmall.margin-left-xsmall.sm-margin-none.shadow(
       data-src=`${component.endpoints.addresses}`
       loader-id=`loader-${component.route}-map`
-      fields="position(community.name, community.profile.shortDescription, address_line1, address_line2)"
+      fields="position(segment1(community.logo), segment2(community.name, community.profile.shortDescription, community.members))"
-      class-position="segment"
+
+      class-segment1="segment block margin-medium"
+      class-segment2="segment full padding-top-xlarge padding-right-large padding-left-large sm-padding-medium border-top border-color-grey text-center whitespace-normal"
+      class-community.name="title segment block margin-bottom-xsmall text-color-heading text-xlarge text-bold"
+      class-community.profile.shortDescription="segment block description text-medium whitespace-normal two-lines-ellipsis"
+      
+      action-circle.name=`${getRoute(`community`, true)}-profile`
+      widget-circle.name='hubl-communities-map-fix-url-name'
+      widget-community.logo='hubl-admin-community-logo'
+      widget-community.members="hubl-communities-profile-members-counter"
+      
       clustering=""
       filtered-by=`communities-filter-map`
       style="display:block;height:698px;"

src/views/partials/widgets.pug

@@ -25,6 +25,7 @@ include widgets/hubl-communities-edit-button.pug
 include widgets/hubl-communities-edit-email.pug
 include widgets/hubl-communities-edit-website.pug
 include widgets/hubl-communities-logo.pug
+include widgets/hubl-communities-map-fix-url-name.pug
 include widgets/hubl-communities-profile-address.pug
 include widgets/hubl-communities-profile-email.pug
 include widgets/hubl-communities-profile-facebook.pug

src/views/partials/widgets/hubl-communities-map-fix-url-name.pug

@@ -0,0 +1,19 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-name')
+    template
+      solid-link(
+        data-src="${src || value}"
+        next=`${getRoute(`communities`, true)}-profile`
+      )
+        solid-display(
+          data-src="${src || value}"
+          fields="name"
+        )
+
+  solid-widget(name='hubl-communities-map-fix-url-name')
+    template
+      solid-display(
+        data-src="${src}"
+        fields="community"
+        widget-community='hubl-communities-name'
+      )