feature: new circles-admin panel

src/locales/en.json

@@ -102,12 +102,12 @@
       "buttonMobile": "MENU",
       "subTitle": "Circles",
       "buttonCreate": " Create a circle",
-      "tableHeader1": "Name",
-      "tableHeader2": "Admins",
-      "tableHeader3": "Join",
       "buttonQuit": "Leave",
       "buttonJoin": "Join",
-      "searchBy": "Find a circle by name"
+      "searchBy": "Find a circle",
+      "searchButton": "search",
+      "tabJoin": "Discover circles",
+      "tabLeave": "My circles"
     },
     "left": {
       "paragraphQuit": "You left this circle.",

src/locales/es.json

@@ -102,12 +102,12 @@
       "buttonMobile": "MENÚ",
       "subTitle": "Círculos",
       "buttonCreate": "Crear un círculo",
-      "tableHeader1": "Nombre",
-      "tableHeader2": "Administradorxs",
-      "tableHeader3": "Unirse",
       "buttonQuit": "Salir",
       "buttonJoin": "Unirse",
-      "searchBy": "Busca un círculo por nombre "
+      "searchBy": "Busca un círculo",
+      "searchButton": "Buscar",
+      "tabJoin": "Descubrir los círculos",
+      "tabLeave": "Mis círculos"
     },
     "left": {
       "paragraphQuit": "Dejaste este círculo.",

src/locales/fr.json

@@ -91,7 +91,6 @@
       "labelDescription": "Description du cercle",
       "descriptionHelp": "Vous pouvez utiliser Markdown",
       "labelSubtitle": "Sous-titre du cercle *",
-      "labelStatus": "Statut *",
       "subTitle": "Liste des membres :",
       "tableHeader1": "Nom",
       "tableHeader2": "Accès",
@@ -103,12 +102,12 @@
       "buttonMobile": "MENU",
       "subTitle": "Cercles",
       "buttonCreate": "Créer un cercle",
-      "tableHeader1": "Nom",
-      "tableHeader2": "Administrateurs",
-      "tableHeader3": "Rejoindre",
       "buttonQuit": "Quitter",
       "buttonJoin": "Rejoindre",
-      "searchBy": "Rechercher un cercle par nom"
+      "searchBy": "Trouver un cercle",
+      "searchButton": "Rechercher",
+      "tabJoin": "Découvrir des cercles",
+      "tabLeave": "Mes cercles"
     },
     "left": {
       "paragraphQuit": "Tu as quitté ce cercle.",

src/scripts/masonry.js

@@ -0,0 +1,2 @@
+var grid = document.querySelector('.masonry > div:nth-child(2)');
+console.log(grid);

src/styles/admin-circles/_index.scss

@@ -0,0 +1,58 @@
+#admin-circles {
+
+  .masonry>div:nth-child(1) {
+    /* change from directory (nth-child(2))*/
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .circle-subtitle-custom {
+      height: 32px;
+    }
+  }
+
+  .segment.hover:hover {
+    box-shadow: 0 0 16px 0 rgba(46, 63, 88, 0.34);
+    bottom: 2px;
+  }
+
+  hubl-admin-circle-name:hover {
+    text-decoration: underline;
+  }
+
+  hubl-community-logo {
+    max-height: 76px;
+    width: 206px;
+    max-width: 100%;
+  }
+
+  .tab.active {
+    font-weight: bold;
+    border-bottom: 5px solid var(--color-third);
+    padding-bottom: 10px;
+  }
+
+  @media (max-width: 768px) {
+
+    .tabs {
+
+      &>li {
+        color: #3C3F57;
+        font-size: 13px;
+        letter-spacing: 0.18px;
+        line-height: 17px;
+
+        &>.tab {
+          border-radius: 5px;
+          box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.17);
+
+          &.active {
+            color: var(--color-primary);
+            border: 1px solid var(--color-primary);
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/index.scss

@@ -42,6 +42,7 @@ solid-display>div {
 @import 'chat';
 @import 'forms';
 @import 'communities';
+@import 'admin-circles';
 
 nav#main__menu {
   @media (min-width: 768.01px) {
@@ -125,4 +126,15 @@ hubl-create-contact {
       color: var(--color-secondary);
     }
   }
+
+  @media (max-width: 768px) {
+
+    &.sm-full {
+
+      input,
+      button {
+        width: 100%;
+      }
+    }
+  }
 }

src/views/page-admin.pug

@@ -8,7 +8,16 @@
           data-view=`admin-${component.route}`
           no-render
         )
-          include partials/admin/page-admin-circles.pug
+          - var page = 'join';
+          include partials/admin/page-admin-circles-join.pug
+        div(
+          id=`admin-${component.route}-leave`
+          hidden
+          data-view=`admin-${component.route}-leave`
+          no-render
+        )
+          - var page = 'leave';
+          include partials/admin/page-admin-circles-leave.pug
         div(
           id=`admin-${component.route}-create`
           hidden

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

@@ -0,0 +1,46 @@
+solid-widget(name=`hubl-admin-circle-join-button`)
+  template
+    solid-form(
+      class='join-button sm-full text-xsmall'
+      data-src='${value}'
+
+      fields='user.username'
+      value-user.username='hubl-workaround-493'
+      widget-user.username='solid-form-hidden'
+
+      submit-button=''
+      submit-widget="button"
+      data-trans='submit-button=circle.list.buttonJoin'
+    )
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}')
+    hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
+
+include page-admin-circles.pug
+
+div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
+  solid-display(
+    class='segment full children children-third 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=`${getComponent('circles').endpoints.get}joinable/`
+    fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))'
+    filtered-by=`admin-circle-filter-${page}`
+    order-by='name'
+    paginate-by='4'
+    loader-id=`loader-admin-circles-${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 one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal'
+    class-subtitle='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-community.community.logo='hubl-admin-community-logo'
+    action-name=`${getRoute(`circles`, true)}-information`
+    widget-name='hubl-admin-circle-name'
+    action-counter="counter"
+    widget-counter='hubl-admin-circle-counter-alternate'
+    widget-members=`hubl-admin-circle-join-button`
+  )

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

@@ -0,0 +1,57 @@
+solid-widget(name=`leave-circle-reactivity`)
+  template
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}')
+    hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
+
+solid-widget(name=`hubl-admin-circle-leave-button`)
+  template
+    solid-delete(
+      class='segment sm-full 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=circle.list.buttonQuit'
+    )
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}')
+    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}')
+    hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
+    solid-display(
+      data-src="${src}"
+      fields="circle"
+      widget-circle=`leave-circle-reactivity`
+      hidden
+    )
+
+include page-admin-circles.pug
+
+div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
+  solid-display(
+    bind-user
+    nested-field='circles'
+    class='segment full children children-third 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'
+    fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))'
+    filtered-by=`admin-circle-filter-${page}`
+    order-by='name'
+    paginate-by='4'
+    loader-id=`loader-admin-circles-${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-circle.name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal'
+    class-circle.subtitle='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-circle.community.community.logo='hubl-admin-community-logo'
+    action-circle.name=`${getRoute(`circles`, true)}-information`
+    widget-circle.name='hubl-admin-circle-fix-url-name'
+    action-counter="counter"
+    widget-counter='hubl-admin-circle-counter-alternate-fix'
+    action-leaveButton="joinButton"
+    widget-leaveButton=`hubl-admin-circle-leave-button`
+  )
+  

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

@@ -1,15 +1,15 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
   h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
 
-div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
+div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal
 
-  div#loader-admin-circles.loader.loader-top
+  div(id=`loader-admin-circles-${page}`).loader.loader-top
     div
     div
     div
     div
 
-  div.segment.full.margin-bottom-xlarge.whitespace-normal
+  div.segment.full.margin-bottom-medium.padding-right-xsmall.padding-left-xsmall.sm-padding-none.whitespace-normal
     div.segment.half.sm-full
       h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
     div.segment.half.sm-full.text-right
@@ -20,119 +20,36 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac
           data-trans='circle.list.buttonCreate'
         )
 
-  solid-form-search.form.search-form(
+  solid-form-search.form.search-form.search-button(
-    id="admin-circle-filter"
+    id=`admin-circle-filter-${page}`
     fields='name'
     label-name=''
     widget-name='solid-form-label-text'
-    class-name="segment margin-bottom-medium 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 padding-left-xsmall 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=circle.list.searchBy;submit-button=goButton'
+    data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton'
   )
 
-  .segment.table-wrapper
+  ul(class='segment full margin-top-xsmall sm-margin-top-none padding-right-xsmall padding-left-xsmall sm-padding-none whitespace-normal tabs')
-    .table
+    li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall')
-
+      solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false})
-      div.table-header.bg-color-third.text-color-heading
+        span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall')
-        div.segment.table-cell.third(data-trans='circle.list.tableHeader1')
+        span(data-trans='circle.list.tabJoin')
-        div.segment.table-cell.third(data-trans='circle.list.tableHeader2')
-        div.segment.table-cell.third(data-trans='circle.list.tableHeader3')
-
-      solid-widget(name=`leave-circle-reactivity`)
-        template
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}')
-          hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
-
-      solid-widget(name=`hubl-admin-circle-leave-button`)
-        template
-          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=circle.list.buttonQuit'
-          )
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}')
-          hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
         solid-display(
-            data-src="${src}"
+          class="margin-left-xxsmall"
-            fields="circle"
-            widget-circle=`leave-circle-reactivity`
-            hidden
-          )
-
-      solid-display(
-        class='table-body'
-        filtered-by="admin-circle-filter"
-        bind-user
-        nested-field='circles'
-        fields='cell1(name(circle.name), counter, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
-        loader-id='loader-admin-circles'
-
-        class-cell1='segment table-cell third whitespace-normal'
-        class-cell2='segment table-cell third text-center text-left'
-        class-cell3='segment table-cell third text-center'
-
-        action-circle.name='circle.name'
-        widget-circle.name='hubl-admin-circle-link-alternate'
-        class-circle.subtitle='segment full text-ellipsis'
-
-        action-leaveButton="joinButton"
-        widget-leaveButton=`hubl-admin-circle-leave-button`
-        widget-circle.owner='hubl-circle-owner'
-        action-counter="counter"
-        widget-counter="hubl-admin-circle-counter-alternate"
-
-        order-by="circle.name"
-      )
-
-      solid-widget(name=`hubl-admin-circle-join-button`)
-        template
-          solid-form(
-            class='join-button text-xsmall'
-            data-src='${value}'
-
-            fields='user.username'
-            value-user.username='hubl-workaround-493'
-            widget-user.username='solid-form-hidden'
-
-            submit-button=''
-            submit-widget="button"
-            data-trans='submit-button=circle.list.buttonJoin'
-          )
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
-          hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}')
-          hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
-
-      solid-display(
-        class='table-body'
-        filtered-by="admin-circle-filter"
-
           data-src=`${getComponent('circles').endpoints.get}joinable/`
-        fields='cell1(name, counter, subtitle), cell2(owner), cell3(members)'
+          fields=""
-        loader-id='loader-admin-circles'
+          counter-template="(${counter})"
-
+        )
-        class-cell1='segment table-cell third whitespace-normal'
+    li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none')
-        class-cell2='segment table-cell third text-center text-left'
+      solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false})
-        class-cell3='segment table-cell third text-center'
+        span(class='segment lg-hidden icon icon-check icon-margin-right-xsmall')
-
+        span(data-trans='circle.list.tabLeave')
-        class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline text-ellipsis admin-name-ellipsis'
+        solid-display(
-        action-name='name'
+          class="margin-left-xxsmall"
-        widget-name='hubl-admin-circle-link'
+          bind-user
-        class-subtitle='segment full text-ellipsis'
+          nested-field="circles"
-
+          fields=""
-        widget-owner='hubl-circle-owner'
+          counter-template="(${counter})"
-        widget-members=`hubl-admin-circle-join-button`
-        action-counter="counter"
-        widget-counter="hubl-admin-circle-counter"
-
-        order-by="name"
         )

src/views/partials/menu-left.pug

@@ -19,6 +19,7 @@ solid-router#navbar-router(default-route='dashboard')
               div.menu-chevron.segment
                 div.menu-icon.icon-arrow-right-circle
             solid-route(name=`admin-${component.route}-create`)
+            solid-route(name=`admin-${component.route}-leave`)
           else
             div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
               div.segment.margin-right-xxsmall

src/views/partials/widgets.pug

@@ -1,11 +1,14 @@
 //- Import your widgets from the `widget`folder here
 
 include widgets/hubl-action-community.pug
+include widgets/hubl-admin-circle-counter-alternate-fix.pug
 include widgets/hubl-admin-circle-counter-alternate.pug
 include widgets/hubl-admin-circle-counter.pug
 include widgets/hubl-admin-circle-link-alternate.pug
 include widgets/hubl-admin-circle-link.pug
+include widgets/hubl-admin-circle-name.pug
 include widgets/hubl-admin-community-counter.pug
+include widgets/hubl-admin-community-logo.pug
 include widgets/hubl-admin-project-counter-alternate.pug
 include widgets/hubl-admin-project-counter.pug
 include widgets/hubl-admin-project-link-alternate.pug

src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug

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

src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug

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

src/views/partials/widgets/hubl-admin-circle-name.pug

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

src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug

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

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

@@ -0,0 +1,3 @@
+if componentSet.has('admin') && componentSet.has('circles')
+  solid-widget(name='hubl-admin-community-logo')
+    template ${value != "" ? `<img style="height:76px; max-width:100%;" src="${value}" alt="community's logo" />` : `<div style="height:76px;"></div>`}

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

@@ -0,0 +1,2 @@
+solid-widget(name='hubl-community-logo')
+  template ${value != "" ? `<img src="${value}" />` : `<img src="/images/alien.webp" />`}