patch: fix some styles + profile-edit - I broke it all

src/locales/en.json

@@ -180,7 +180,10 @@
       "subTitle": "Pictures",
       "subTitle1": "Address",
       "buttonSubmit": "Save",
-      "noPermission": "You don't have access to this page"
+      "noPermission": "You don't have access to this page",
+      "tableHeader1": "Address line 1",
+      "tableHeader2": "Address line 2",
+      "buttonDelete": "Delete"
     }
   },
   "project": {

src/locales/es.json

@@ -180,7 +180,10 @@
       "subTitle": "Foto",
       "subTitle1": "Dirección",
       "buttonSubmit": "Guardar",
-      "noPermission": "No tiene permiso"
+      "noPermission": "No tiene permiso",
+      "tableHeader1": "Dirección línea 1",
+      "tableHeader2": "Dirección línea 2",
+      "buttonDelete": "Eliminar"
     }
   },
   "project": {

src/locales/fr.json

@@ -178,7 +178,10 @@
       "subTitle": "Photos",
       "subTitle1": "Adresse",
       "buttonSubmit": "Enregistrer",
-      "noPermission": "Vous n'avez pas la permission"
+      "noPermission": "Vous n'avez pas la permission",
+      "tableHeader1": "Adresse ligne 1",
+      "tableHeader2": "Adresse ligne 2",
+      "buttonDelete": "Effacer"
     }
   },
   "project": {

src/styles/admin-circles/_index.scss

@@ -123,6 +123,21 @@
     }
   }
 
+  .community-profile solid-multiple {
+
+    &::before {
+      font-family: 'material-design-icons';
+      content: "\F34E";
+      position: relative;
+      top: 2px;
+    }
+  
+    [name="address_line2"] {
+      display: block;
+      margin-left: 33px;
+    }
+  }
+
   hubl-communities-profile-logo {
     height: 155px;
     width: 100%;
@@ -160,10 +175,6 @@
     }
   }
 
-  .communities-profile-map .leaflet-pane.leaflet-popup-pane {
-    display: none;
-  }
-
   .communities-map {
 
     .leaflet-popup-content-wrapper {
@@ -209,6 +220,20 @@
     }
 
     &.edit-picture {
+
+      &>div {
+        position: relative;
+
+        button {
+          position: absolute;
+          top: 86px;
+          right: 0;
+          color: #636363;
+          font-weight: bold;
+          line-height: 19px;
+          font-size: 22px;
+        }
+      }
       
       img {
         width: 100%;
@@ -285,6 +310,7 @@
         margin-right: 5px;
       }
     }
+
     .edit-img {
 
       &.edit-logo {

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

@@ -81,9 +81,9 @@ div.bg-color-white
         label-profile.picture2=""
         label-profile.picture3=""
 
-        class-profile.picture1="edit-img edit-picture segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+        class-profile.picture1="edit-img edit-picture segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading text-top"
-        class-profile.picture2="edit-img edit-picture segment margin-bottom-medium third sm-full padding-right-small padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+        class-profile.picture2="edit-img edit-picture segment margin-bottom-medium third sm-full padding-right-small padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading text-top"
-        class-profile.picture3="edit-img edit-picture segment margin-bottom-medium third sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+        class-profile.picture3="edit-img edit-picture segment margin-bottom-medium third sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading text-top"
 
         submit-button=""
         submit-widget="button"
@@ -93,23 +93,62 @@ div.bg-color-white
 
       h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans="communities.edit.subTitle1")
 
-      solid-form.form(
+      solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        bind-resources
+        solid-form.segment.half.sm-full.margin-bottom-xlarge.form(
-        nested-field="addresses"
+          bind-resources 
-        fields="address_line1, address_line2"
+          nested-field='addresses'
+          fields='address_line1'
 
-        label-address_line1=""
+          label-address_line1=""
-        label-address_line2=""
+          class-address_line1='add-member'
+          widget-address_line1="solid-form-label-text"
 
-        widget-community="solid-form-hidden"
+          submit-button=''
-        widget-address_line1="solid-form-label-text"
+          submit-widget="button"
-        widget-address_line2="solid-form-label-text"
+          data-trans="label-address_line1=communities.edit.labelAddressLine1"
+        )
 
-        submit-button=""
+        solid-form.segment.half-sm-full.margin-bottom-xlarge.form(
-        submit-widget="button"
+          bind-resources 
+          nested-field='addresses'
+          fields='address_line2'
 
-        data-trans="label-address_line1=communities.edit.labelAddressLine1;label-address_line2=communities.edit.labelAddressLine2"     
+          label-address_line2=""
-      )
+          class-address_line2='add-member'
+          widget-address_line2="solid-form-label-text"
+
+          submit-button=''
+          submit-widget="button"
+          data-trans="label-address_line1=communities.edit.labelAddressLine2"
+        )
+
+      .segment.table-wrapper.margin-top-medium
+        .table
+          div.table-header.bg-color-third.text-color-heading
+            div.segment.table-cell.third(data-trans='communities.edit.tableHeader1')
+            div.segment.table-cell.third(data-trans='communities.edit.tableHeader2')
+            div.segment.table-cell.third
+
+          solid-display(
+            class='table-body'
+            bind-resources
+            nested-field='addresses'
+            fields='segment1(address_line1), segment2(address_line2), remove'
+            loader-id=`loader-${component.route}-edit`
+
+            class-segment1='segment table-cell third'
+            class-segment2='segment table-cell third'
+            class-remove='segment table-cell third text-center'
+
+            class-address_line1='text-small text-semibold'
+            class-address_line2='text-small text-semibold'
+
+            multiple-addresses
+            multiple-addresses-fields="address_line1, address_line2"
+
+            action-remove='self'
+            widget-remove='hubl-circle-edit-members-delete'
+          )
 
     solid-ac-checker(no-permission="acl:Write", bind-resources)
       span(data-trans="communities.edit.noPermission")

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

@@ -25,9 +25,9 @@
       fields="position(segment1(community.logo), segment2(community.name, community.profile.shortDescription, community.members))"
 
       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-segment2="segment full padding-top-xlarge padding-right-large padding-bottom-xlarge padding-left-large sm-padding-medium border-top border-color-grey text-center whitespace-normal"
-      class-community.name="segment block margin-bottom-xsmall text-color-heading text-xlarge text-bold"
+      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"
+      class-community.profile.shortDescription="segment block description text-medium margin-bottom-xsmall whitespace-normal two-lines-ellipsis"
       
       action-community.name=`${component.route}-profile`
       widget-community.name='hubl-communities-map-fix-url-name'

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

@@ -30,7 +30,7 @@ div.community-profile.padding-medium.sm-padding-none
       class-segment7="segment lg-hidden sm-full"
 
       class-segment8="segment two-third sm-full padding-bottom-large padding-bottom-xxsmall sm-text-left"
-      class-addresses="segment block margin-bottom-xsmall icon mdi-map-marker icon-third icon-large icon-margin-right-xsmall"
+      class-addresses="segment block margin-bottom-xsmall icon icon-third icon-large icon-margin-right-xsmall"
       class-members="segment block margin-bottom-xsmall"
       class-profile.website="segment block"
       class-profile.email="segment block"
@@ -72,7 +72,7 @@ div.community-profile.padding-medium.sm-padding-none
       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-community.name="segment block margin-bottom-xsmall text-color-heading text-xlarge text-bold text-center"
       class-address_line1="segment block"
       class-address_line2="segment block"
       clustering=""

src/views/partials/widgets/hubl-communities-edit-address-delete.pug

@@ -0,0 +1,10 @@
+if componentSet.has('communities')
+  solid-widget(name="hubl-communities-edit-address-delete")
+    template
+      solid-ac-checker(permission="acl:Delete", data-src="${src}")
+        solid-delete(
+          class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered'
+          data-src="${src}"
+          data-label=''
+          data-trans='data-label=communities.edit.buttonDelete'
+        )

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

@@ -3,9 +3,9 @@ if componentSet.has('communities') && getRoute('communities')
     template
       span
         span.icon.icon-people.icon-third.icon-large.margin-right-xsmall
-        solid-display(
+        solid-display.text-medium(
           data-src="${src || value}"
           fields=''
           counter-template="\\\${counter}"
         )
-        span(data-trans="communities.profile.members")
+        span.text-medium(data-trans="communities.profile.members")