patch: list - display + styles (wip)

src/locales/en.json

@@ -154,6 +154,11 @@
       "email": "Email*",
       "password": "Password*",
       "formCreateAccount": "Create an account"
+    },
+    "list": {
+      "title": "Communities",
+      "searchBy": "Find by name",
+      "searchButton": "Search"
     }
   },
   "project": {

src/locales/es.json

@@ -154,6 +154,11 @@
       "email": "Correo electrónico*",
       "password": "Contraseña*",
       "formCreateAccount": "Crear una cuenta"
+    },
+    "list": {
+      "title": "",
+      "searchBy": "",
+      "searchButton": ""
     }
   },
   "project": {

src/locales/fr.json

@@ -154,6 +154,11 @@
       "email": "E-mail*",
       "password": "Mot de passe*",
       "formCreateAccount": "Créer un compte"
+    },
+    "list": {
+      "title": "Les communautés",
+      "searchBy": "Trouver par nom",
+      "searchButton": "Rechercher"
     }
   },
   "project": {

src/views/page-communities.pug

@@ -1,21 +1,39 @@
 div.padding-top-xlarge.padding-right-small.padding-bottom-xlarge.padding-left-small.whitespace-normal
 
-  h2.margin-left-xsmall.sm-margin-none.text-xlarge.text-bold.text-color-heading.text-uppercase Les communautés
+  h2.margin-left-xsmall.sm-margin-none.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
 
   div
     solid-form-search.form.search-form.search-button(
       id=`communities-filter-${page}`
       fields='name'
       label-name=''
-      widget-name='solid-form-label-text'
+      widget-name='solid-form-text'
       class-name="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"
       submit-button=""
       submit-widget="button"
+      data-trans='label-name=communities.list.searchBy;submit-button=communities.list.searchButton'
     )
-    //-  data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton'
-
 
+div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
   solid-display(
-  data-src=`${getComponent('communities')}`
-  fields='logo, name, shortDescription'
+    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'
+    data-src='https://api.test3.startinblox.com/communities/'
+    fields='segment1(segment2(logo), segment3(name, shortDescription, counter))'
+    filtered-by=`communities-filter-${page}`
+    order-by='name'
+    paginate-by='20'
+    loader-id=`loader-communities-${page}`
+
+    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-name='segment block text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal'
+    class-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-name=``
+    widget-name='hubl-communities-name'
+    action-counter="counter"
+    widget-counter='hubl-communities-counter-alternate'
   )

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

@@ -25,7 +25,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
     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 text-semibold text-uppercase text-color-heading"
+    class-name="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small"
     submit-button=""
     submit-widget="button"
     data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton'

src/views/partials/widgets.pug

@@ -20,6 +20,9 @@ include widgets/hubl-circle-join-button.pug
 include widgets/hubl-circle-owner.pug
 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-name.pug
 include widgets/hubl-counter.pug
 include widgets/hubl-create-contact.pug
 include widgets/hubl-email-field.pug

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

@@ -0,0 +1,12 @@
+if componentSet.has('admin') && componentSet.has('communities')
+  solid-widget(name='hubl-communities-counter-alternate')
+    template
+      div
+        span.icon.icon-people.icon-third.icon-large.margin-right-xsmall
+        solid-display(
+          fields=''
+          data-src="${src || value}"
+          nested-field="members"
+          counter-template="\\\${counter}"
+        )
+        span members

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

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

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

@@ -0,0 +1,18 @@
+if componentSet.has('admin') && componentSet.has('communities')
+  solid-widget(name='hubl-communities-name-title')
+    template
+      div.segment.block.one-line-ellipsis(
+        title="\${value}"
+      ) ${value}
+
+  solid-widget(name='hubl-communities-name')
+    template
+      solid-link(
+        data-src="${src || value}"
+        next=``
+      )
+        solid-display(
+          data-src="${src || value}"
+          fields="name"
+          widget-name="hubl-communities-name-title"
+        )