patch: community-map

package-lock.json

@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.8.17",
+      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.17.tgz",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.18.tgz",
-      "integrity": "sha512-x9TlnpLs/k2WyJAwlYyexSXs3q9QmSOe/43E1O8Scuh4V1qzs5pnMKz9B91lw9563d6u62Z5WyGPeqaS4detmA=="
+      "integrity": "sha512-GdtuX2AjYwPQfMqU7oCuFfjTS4B9UKdnllYDi9Eg/F6XCcUIdUGSG05TP5yNPkuyI1OZ0Rj/arzhchzLOWqHhA=="
     },
     "@types/q": {
       "version": "1.5.4",

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.8.17",
+    "@startinblox/hubl-styling-framework": "^1.8.18",
     "cross-env": "^7.0.3",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",

src/dependencies.pug

@@ -14,6 +14,10 @@ if componentSet.has("chat") || componentSet.has("circles") || componentSet.has("
   script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@5.2" defer)
   //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 
+if componentSet.has("communities")
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.16/dist/components/solid-map.js" defer)
+  //- script(type="module" src="/lib/sib-core/dist/components/solid-map.js" defer)
+
 if componentSet.has("dashboard")
   script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@4.0" defer)
   //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)

src/images/photos.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" fill="#D0D4DA" enable-background="new 0 0 512.002 512.002" height="512" viewBox="0 0 512.002 512.002" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m508.617 174.213c-2.762-3.771-6.828-6.241-11.447-6.954l-148.74-22.97v-126.78c0-9.649-7.851-17.5-17.5-17.5h-313.43c-9.649 0-17.5 7.851-17.5 17.5v313.628c0 9.649 7.851 17.5 17.5 17.5h116.806l-14.726 95.363c-1.458 9.436 5.187 18.511 14.624 19.967l309.757 47.837c9.224 1.424 18.53-5.332 19.965-14.625l8.01-51.867c1.48-9.583-13.345-11.875-14.824-2.289-1.009 6.531-5.669 54.737-10.862 53.957l-309.757-47.837c-1.484-.374-2.181-1.325-2.089-2.853l15.08-97.652h16.783l-12.199 78.99c-.632 4.094 2.174 7.925 6.268 8.557l267.09 41.248c3.77.58 7.964-2.431 8.557-6.268l41.321-267.566c.632-4.094-2.174-7.925-6.268-8.557l-122.607-18.935v-16.64l146.451 22.617c1.484.374 2.18 1.325 2.089 2.853l-34.017 220.267c-1.439 9.317 13.32 12.03 14.824 2.289l34.017-220.267c.714-4.62-.415-9.241-3.176-13.013zm-493.617 156.924v-313.628c0-1.379 1.122-2.5 2.5-2.5h313.429c1.378 0 2.5 1.121 2.5 2.5v313.628c0 1.379-1.122 2.5-2.5 2.5h-313.429c-1.378 0-2.5-1.121-2.5-2.5zm446.335-122.416-39.032 252.742-252.266-38.959 11.408-73.867h149.484c9.649 0 17.5-7.851 17.5-17.5v-139.853z"/><path d="m309.343 31.455h-270.257c-4.142 0-7.5 3.357-7.5 7.5v37.49c0 9.697 15 9.697 15 0v-29.99h255.256v255.738h-255.256v-185.86c0-9.697-15-9.697-15 0v193.36c0 4.143 3.358 7.5 7.5 7.5h270.256c4.142 0 7.5-3.357 7.5-7.5v-270.738c.001-4.143-3.357-7.5-7.499-7.5z"/><path d="m174.212 248.933c.979 0 1.958-.191 2.879-.575.842-.35 20.844-8.752 41.182-24.627 27.726-21.642 42.567-46.865 42.919-72.943.368-27.278-20.413-53.849-49.002-53.849-14.959 0-28.816 7.447-37.979 19.76-9.162-12.313-23.019-19.76-37.979-19.76-27.02 0-49.002 24.11-49.002 53.747 0 62.789 80.723 96.3 84.159 97.695.906.369 1.865.552 2.823.552zm-71.981-98.247c0-21.365 15.253-38.747 34.002-38.747 13.334 0 25.505 8.966 31.007 22.842 2.454 6.188 11.49 6.188 13.944 0 5.501-13.876 17.672-22.842 31.006-22.842 20.292 0 34.261 19.579 34.003 38.646-.626 46.424-58.409 76.256-72.02 82.64-13.707-6.278-71.942-35.715-71.942-82.539z"/></g></svg>

src/index.pug

@@ -112,7 +112,7 @@ html(lang="en")
                   include views/page-circle.pug
 
               if component.type == "communities"
-                .scrollbar-content
+                .scrollbar-content.whitespace-normal
                   include views/page-communities.pug
 
               if component.type == "dashboard"

src/locales/en.json

@@ -161,7 +161,13 @@
     "list": {
       "title": "Communities",
       "searchBy": "Find by name",
-      "searchButton": "Search"
+      "searchButton": "Search",
+      "members": "members"
+    },
+    "profile": {
+      "back": "Back",
+      "members": "members",
+      "edit": "Edit the page"
     }
   },
   "project": {

src/locales/es.json

@@ -161,7 +161,13 @@
     "list": {
       "title": "",
       "searchBy": "",
-      "searchButton": ""
+      "searchButton": "",
+      "members": ""
+    },
+    "profile": {
+      "back": "",
+      "members": "",
+      "edit": ""
     }
   },
   "project": {

src/locales/fr.json

@@ -161,7 +161,13 @@
     "list": {
       "title": "Les communautés",
       "searchBy": "Trouver par nom",
-      "searchButton": "Rechercher"
+      "searchButton": "Rechercher",
+      "members": "membres"
+    },
+    "profile": {
+      "back": "Retour",
+      "members": "membres",
+      "edit": "Editer la page"
     }
   },
   "project": {

src/styles/admin-circles/_index.scss

@@ -1,5 +1,6 @@
 #admin-circles,
-#admin-circles-leave {
+#admin-circles-leave,
+.communities-directory {
 
   /* Fix on Join button in admin (circles + projects) */
   /* Styles on buttons and .children-link don't work because this input is inside too many elements. */
@@ -115,12 +116,77 @@
     }
   }
 
+  hubl-communities-profile-logo {
+    height: 155px;
+    width: 100%;
+    display: block;
+
+    div {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+  }
+
   .tab.active {
     font-weight: bold;
     border-bottom: 5px solid var(--color-third);
     padding-bottom: 10px;
   }
 
+  .communities-profile-picture {
+    height: 200px;
+
+    div {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    .picture-empty {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      object {
+        height: 100px;
+        width: 100px;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    &:nth-child(2)>.picture-empty {
+      background: #E4E9F1;
+
+      svg {
+        fill: #D0D4DA;
+      }
+    }
+
+    &:nth-child(3)>.picture-empty {
+      background: #E9F2FF;
+
+      svg {
+        fill: #D7E2F3;
+      }
+    }
+  }
+
+  .communities-profile-map .leaflet-pane.leaflet-popup-pane {
+    /*display: none;*/
+
+    .leaflet-popup-content-wrapper {
+      white-space: normal;
+    }
+  }
+
   @media (max-width: 768px) {
 
     .tabs {
@@ -143,5 +209,37 @@
         }
       }
     }
+
+    .community-profile-logo {
+      border-bottom: 1px solid #D6CECE;
+    }
+
+    hubl-communities-profile-logo {
+      height: 100px;
+    }
+
+    .communities-profile-picture {
+      height: 180px;
+
+      object {
+        height: 80px;
+        width: 80px;
+      }
+    }
+
+    .mobile-map-search-field {
+      position: fixed;
+      top: 70px;
+      z-index: 1000;
+      width: 97%;
+    }
+
+    .communities-map {
+      height: calc(100vh - 50px) !important;
+
+      .leaflet-top.leaflet-left {
+        display: none;
+      }
+    }
   }
 }

src/styles/index.scss

@@ -88,15 +88,6 @@ hubl-menu-empty+hubl-menu-empty {
   justify-content: center;
 }
 
-/* Animation on cards in #communities */
-#communities {
-
-  .segment.hover:hover {
-    box-shadow: 0 0 16px 0 rgba(46, 63, 88, 0.34);
-    bottom: 2px;
-  }
-}
-
 /* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
 .two-lines-ellipsis {
   display: -webkit-box !important;

src/views/page-communities.pug

@@ -1,42 +1,34 @@
-div.padding-small.whitespace-normal.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
+div.communities-directory
-
+  solid-router(default-route=`${component.route}-directory` hidden)
-  h2.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')
+    solid-route(name=`${component.route}-directory`)
-
+    solid-route(name=`${component.route}-map`)
-  div.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
+    solid-route(name=`${component.route}-profile` use-id)
-    div.segment.half.sm-full
+    solid-route(name=`${component.route}-edit` use-id)
-      solid-form-search.form.search-form.search-button(
+  div(
-        id=`communities-filter-${page}`
+    id=`${component.route}-directory`
-        fields='name'
+    hidden
-        placeholder-name=''
+    data-view=`${component.route}-directory`
-        widget-name='solid-form-placeholder-text'
+    no-render
-        class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+  )
-        submit-button=""
+    include partials/communities/page-community-directory.pug
-        submit-widget="button"
+  div(
-        data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
+    id=`${component.route}-map`
-      )
+    hidden
-    div.segment.half.sm-full.text-right
+    data-view=`${component.route}-map`
-      solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered
+    no-render
-        span
+  )
-
+    include partials/communities/page-community-map.pug
-  div.segment.full.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
+  div(
-    solid-display(
+    id=`${component.route}-profile`
-      class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination'
+    hidden
-      data-src='https://api.test3.startinblox.com/communities/'
+    data-view=`${component.route}-profile`
-      fields='segment1(segment2(logo), segment3(name, profile.shortDescription, counter))'
+    no-render
-      filtered-by=`communities-filter-${page}`
+  )
-      order-by='name'
+    include partials/communities/page-community-profile.pug
-      paginate-by='20'
+  div(
-      loader-id=`loader-communities-${page}`
+    id=`${component.route}-edit`
-
+    hidden
-      class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal'
+    data-view=`${component.route}-edit`
-      class-segment2='segment block padding-xlarge text-center'
+    no-render
-      class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal'
+  )
-      class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall'
+    include partials/communities/page-community-edit.pug
-      class-profile.shortDescription='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom'
-      class-counter='segment block margin-bottom-large whitespace-normal'
-
-      widget-logo='hubl-communities-logo'
-      action-counter="counter"
-      widget-counter='hubl-communities-counter-alternate'
-      next=""
-    )

src/views/partials/admin/page-admin-circles.pug

@@ -22,18 +22,11 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
 
   solid-form-search.form.search-form.search-button(
     id=`admin-circle-filter-${page}`
-<<<<<<< HEAD
-    fields='name'
-    label-name=''
-    widget-name='solid-form-label-text'
-    class-name="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small"
-=======
     fields='searchname'
     search-searchname='name, circle.name'
     label-searchname=''
     widget-searchname='solid-form-label-text'
     class-searchname="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
->>>>>>> b9a8c8ba4de7985088e46bda8c024cf121439ff8
     submit-button=""
     submit-widget="button"
     data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'

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

@@ -1,7 +1,7 @@
-.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
+.padding-small.sm-padding-none.sm-padding-top-medium.sm-padding-bottom-medium
-  h2.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')
+  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.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
+  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
       solid-form-search.form.search-form.search-button(
         id=`communities-filter`
@@ -34,10 +34,10 @@
 
       class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal'
       class-segment2='segment block padding-xlarge text-center'
-      class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal'
+      class-segment3='segment full padding-xlarge sm-padding-medium border-top border-color-grey text-center whitespace-normal'
       class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall'
       class-profile.shortDescription='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom'
-      class-counter='segment block margin-bottom-large whitespace-normal'
+      class-counter='segment block whitespace-normal'
 
       widget-logo='hubl-admin-community-logo'
       action-counter="counter"

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

@@ -1,18 +1,30 @@
-.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
+.padding-small.sm-padding-none
-  h2.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')
+  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.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
+  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
       solid-form-search.form.search-form.search-button(
         id=`communities-filter-map`
         fields='name'
+        search-name='community.name'
         placeholder-name=''
         widget-name='solid-form-placeholder-text'
         class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+
         submit-button=""
         submit-widget="button"
         data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
       )
     div.segment.half.sm-full.text-right
-      solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
+      solid-link.segment.children-link-rounded.children-icon-grid.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
-        span
+        span
+
+  solid-map.communities-map.margin-right-xsmall.margin-left-xsmall.sm-margin-none.shadow(
+      data-src=`${component.endpoints.get}`
+      loader-id=`loader-${component.route}-map`
+      nested-field="addresses"
+      fields="position(community.name, community.profile.shortDescription, address_line1, address_line2)"
+      clustering=""
+      filtered-by=`communities-filter-map`
+      style="display:block;height:698px;"
+    )

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

@@ -0,0 +1,74 @@
+div.community-profile.padding-medium.sm-padding-none
+  div.segment.full.sm-hidden.text-right
+    solid-link.backlink.text-xlarge.line-xlarge.margin-right-xxsmall(next=`${component.route}-directory` data-trans="communities.profile.back")
+
+  div.segment.block.shadow.bg-color-white.margin-right-xxsmall.margin-top-large.margin-left-xxsmall.sm-margin-none
+
+    div.loader(id=`loader-${component.route}-profile`)
+      div
+      div
+      div
+      div
+
+    solid-display.segment.block.whitespace-normal(
+      fields="segment0(segment1(community-picture(logo)), segment2(segment3(segment4(name),segment5(profile.tweeter, profile.facebook, profile.linkedin, profile.instagram)), segment6(profile.shortDescription), segment7(profile.tweeter, profile.facebook, profile.linkedin, profile.instagram), segment8(addresses.adress_line1, addresses.address_line2, members, profile.website, profile.email, profile.phone), segment9(profile.description), segment10(edit))), segment11(profile.picture1, profile.picture2, profile.picture3)"
+      loader-id=`loader-${component.route}-profile`
+
+      class-segment0="segment full padding-xlarge sm-padding-none whitespace-normal"
+      class-segment1="community-profile-logo segment third sm-full margin-top-medium padding-top-medium padding-right-medium sm-margin-top-xsmall sm-padding-medium text-center"
+
+      class-segment2="segment two-third sm-full sm-padding-top-medium sm-padding-right-xsmall sm-padding-bottom-medium sm-padding-left-xsmall text-top sm-text-center whitespace-normal"
+
+      class-segment3="segment full sm-two-third text-center"
+      class-segment4="segment half sm-two-third padding-top-xsmall"
+      class-name="segment block text-color-heading text-xxlarge text-bold sm-text-center margin-bottom-xxsmall whitespace-normal"
+      class-segment5="segment half text-right sm-hidden"
+      
+      class-segment6="segment two-third sm-full padding-top-xsmall sm-text-center"
+      class-profile.shortDescription="segment block sm-text-center margin-bottom-large whitespace-normal"
+
+      class-segment7="segment lg-hidden sm-full"
+
+      class-segment8="segment two-third sm-full padding-bottom-large padding-bottom-xxsmall sm-text-left"
+
+      class-segment9="segment full"
+      class-profile.description="segment full whitespace-normal"
+
+      class-segment10="segment full text-right margin-top-xxlarge"
+      action-edit=`${component.route}-edit`
+      class-edit="segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil"
+      value-edit=""
+      data-trans='value-edit=communities.profile.edit'
+
+      class-segment11="segment full whitespace-normal"
+      class-profile.picture1="communities-profile-picture segment third"
+      class-profile.picture2="communities-profile-picture segment third"
+      class-profile.picture3="communities-profile-picture segment third"
+
+      widget-logo="hubl-communities-profile-logo"
+      widget-profile.tweeter="hubl-communities-profile-twitter"
+      widget-profile.facebook="hubl-communities-profile-facebook"
+      widget-profile.linkedin="hubl-communities-profile-linkedin"
+      widget-profile.instagram="hubl-communities-profile-instagram"
+      widget-addresses="hubl-communities-profile-address"
+      widget-members="hubl-communities-profile-members-counter"
+      widget-profile.website="hubl-communities-profile-website"
+      widget-profile.email="hubl-communities-profile-email"
+      widget-profile.phone="hubl-communities-profile-phone"
+      widget-profile.picture1="hubl-communities-profile-picture"
+      widget-profile.picture2="hubl-communities-profile-picture"
+      widget-profile.picture3="hubl-communities-profile-picture"
+
+      bind-resources
+    )
+
+    solid-map.communities-profile-map(
+      bind-resources
+      nested-field="addresses"
+      fields="position(community.name, address_line1, address_line2)"
+      class-community-name="segment block margin bottom-xsmall text-color-heading text-xlarge text-bold"
+      class-address_line1="segment block"
+      class-address_line2="segment block"
+      clustering=""
+      style="display:block;height:450px;"
+    )

src/views/partials/header.pug

@@ -99,7 +99,7 @@ div
                     if componentSet.has("communities")
                       solid-link.text-hover(next=`admin-${getRoute("chat", true)}`)
                         li.segment.padding-top-small.sm-padding-top-medium
-                          a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
+                          a.icon.icon-grid.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                     if componentSet.has("circles")
                       solid-link.text-hover(next=`admin-${getRoute("circles", true)}`)
                         li.segment.padding-top-small.sm-padding-top-medium

src/views/partials/menu-left.pug

@@ -28,6 +28,7 @@ solid-router#navbar-router(default-route='dashboard')
           div.segment.margin-right-xxsmall
             div.segment.icon.icon-small.icon-grid
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.communities")
+        solid-route(name=`${component.route}-profile`)
         div.divider
           
       if component.type == "circles"

src/views/partials/widgets.pug

@@ -22,6 +22,17 @@ include widgets/hubl-circle-team-contact.pug
 include widgets/hubl-circle-user-admin.pug
 include widgets/hubl-communities-counter-alternate.pug
 include widgets/hubl-communities-logo.pug
+include widgets/hubl-communities-profile-address.pug
+include widgets/hubl-communities-profile-email.pug
+include widgets/hubl-communities-profile-facebook.pug
+include widgets/hubl-communities-profile-instagram.pug
+include widgets/hubl-communities-profile-linkedin.pug
+include widgets/hubl-communities-profile-logo.pug
+include widgets/hubl-communities-profile-members-counter.pug
+include widgets/hubl-communities-profile-phone.pug
+include widgets/hubl-communities-profile-picture.pug
+include widgets/hubl-communities-profile-twitter.pug
+include widgets/hubl-communities-profile-website.pug
 include widgets/hubl-counter.pug
 include widgets/hubl-email-field.pug
 include widgets/hubl-menu-empty.pug

src/views/partials/widgets/hubl-admin-community-logo.pug

@@ -1,3 +1,3 @@
-if componentSet.has('admin') && componentSet.has('circles')
+if (componentSet.has('admin') && componentSet.has('circles')) || componentSet.has('communities')
   solid-widget(name='hubl-admin-community-logo')
     template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}

src/views/partials/widgets/hubl-communities-counter-alternate.pug

@@ -1,4 +1,4 @@
-if componentSet.has('admin') && componentSet.has('communities')
+if componentSet.has('communities')
   solid-widget(name='hubl-communities-counter-alternate')
     template
       div
@@ -9,4 +9,4 @@ if componentSet.has('admin') && componentSet.has('communities')
           nested-field="members"
           counter-template="\\\${counter}"
         )
-        span members
+        span(data-trans="communities.list.members")

src/views/partials/widgets/hubl-communities-logo.pug

@@ -1,3 +1,3 @@
-if componentSet.has('admin') && componentSet.has('communities')
+if componentSet.has('communities')
   solid-widget(name='hubl-communities-logo')
-    template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}
+    template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}

src/views/partials/widgets/hubl-communities-profile-address.pug

@@ -0,0 +1,4 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-address')
+    template
+      | ${await value != "" ? `<span class="icon mdi-map-marker icon-third icon-large icon-margin-right-xsmall">\${await value.adress_line1}<br>\${await value.adress_line2}</span>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-email.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-email')
+    template ${value != "" ? `<a class="link margin-bottom-xsmall icon mdi-email-outline icon-third icon-large icon-margin-right-xsmall" href="mailto:\${value}">\$value</a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-facebook.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-facebook')
+    template ${value != "" ? `<a class="segment children-link-rounded children-icon-social-facebook children-link-reversed color-secondary bordered margin-right-medium" href="${value}" target="_blank"><span></span></a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-instagram.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-instagram')
+    template ${value != "" ? `<a class="segment children-link-rounded children-icon-social-instagram children-link-reversed color-secondary bordered" href="${value}" target="_blank"><span></span></a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-linkedin.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-linkedin')
+    template ${value != "" ? `<a class="segment children-link-rounded children-icon-social-linkedin children-link-reversed color-secondary bordered margin-right-medium" href="${value}" target="_blank"><span></span></a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-logo.pug

@@ -1,3 +1,3 @@
-if componentSet.has('admin') && componentSet.has('communities')
+if componentSet.has('communities')
   solid-widget(name='hubl-communities-profile-logo')
     template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}

src/views/partials/widgets/hubl-communities-profile-members-counter.pug

@@ -1,4 +1,4 @@
-if componentSet.has('admin') && componentSet.has('communities')
+if componentSet.has('communities')
   solid-widget(name='hubl-communities-profile-members-counter')
     template
       p
@@ -8,4 +8,4 @@ if componentSet.has('admin') && componentSet.has('communities')
           fields=''
           counter-template="\\\${counter}"
         )
-        span members
+        span(data-trans="communities.profile.members")

src/views/partials/widgets/hubl-communities-profile-phone.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-phone')
+    template ${value != "" ? `<a class="link margin-bottom-xsmall icon mdi-cellphone-iphone icon-third icon-large icon-margin-right-xsmall" href="tel:\${value}">\$value</a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-picture.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-picture')
+    template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div class="picture-empty"><object type="image/svg+xml" data="/images/photos.svg"></object></div>`}

src/views/partials/widgets/hubl-communities-profile-profile.pug

@@ -1,6 +0,0 @@
-if componentSet.has('admin') && componentSet.has('communities')
-  solid-widget(name='hubl-communities-profile-profile')
-    template
-      | ${value.website != "" ? `<a class="link margin-bottom-xsmall icon mdi-link-variant icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.website}" target="_blank">\$value.website</a>` : `<div></div>`}
-      | ${value.email != "" ? `<a class="link margin-bottom-xsmall icon mdi-email-outline icon-third icon-large icon-margin-right-xsmall" href="mailto:\${value.email}">\$value.email</a>` : `<div></div>`}
-      | ${value.phone != "" ? `<a class="link margin-bottom-xsmall icon mdi-cellphone-iphone icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.phone}">\$value.phone</a>` : `<div></div>`}

src/views/partials/widgets/hubl-communities-profile-twitter.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-twitter')
+    template ${value != "" ? `<a class="segment children-link-rounded children-icon-social-twitter children-link-reversed color-secondary bordered margin-right-medium" href="${value}" target="_blank"><span></span></a>` : `<span></span>`}

src/views/partials/widgets/hubl-communities-profile-website.pug

@@ -0,0 +1,3 @@
+if componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-website')
+    template ${value != "" ? `<a class="link margin-bottom-xsmall icon mdi-link-variant icon-third icon-large icon-margin-right-xsmall" href="tel:\${value}" target="_blank">$value</a>` : `<span></span>`}