rework on table with 2 columns: flex to grid + wip on the column for buttons in the 3-col table

src/page-admin-circles.pug

@@ -67,7 +67,7 @@
       //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
       //-sib-display.table-body.test(
           data-src=`${endpoints.circles}`
-          fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'
+          fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)'
 
           multiple-groups=""
           widget-members="circle-admin-leave-button-template"
@@ -83,11 +83,17 @@
         class='table cols-3'
 
         data-src=`${endpoints.circles}`
-        fields='name, owner, action'
+        fields='name, owner, buttons(members, button)'
 
         class-name='cell'
         class-owner='cell'
-        class-action='cell action'
+        
+        multiple-groups=""
+        widget-members="circle-admin-leave-button-template"
+        multiple-members=""
+
+        widget-button="circle-admin-join-button-template"
+        action-button="button"
 
         widget-owner='circle-owner'
       )

src/page-circle-edit.pug

@@ -8,6 +8,7 @@ div.content-box__info
   sib-widget(name='team-template-edit')
     template
       sib-display(
+        class='cell'
         data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
@@ -18,6 +19,7 @@ div.content-box__info
       )
       
       sib-ac-checker(
+        class='cell'
         permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -29,6 +31,7 @@ div.content-box__info
 
       //- Only to show the table grid
       sib-ac-checker(
+        class='cell'
         no-permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -59,11 +62,13 @@ div.content-box__info
 
   h2 Members list
 
-  div.table-header
+  div.table.cols-2.table-no-border-bottom
-    div.cell Name
+    div.table-header Name
-    div.cell Access
+    div.table-header Access
     
-  sib-display.table-body(
+    //-class='table-body'
+  sib-display(
+    class='table cols-2'
     bind-resources
     fields='members'
 

src/styles/layout/circle/circle-admin.scss

@@ -14,135 +14,7 @@
 
 #admin-circle-list{
 
-  /* Table grid display */
-  .table {
-    display: grid;
   
-    &.cols-3 {
-      grid-template-columns: repeat(3, 33.3333%);
-    }
-
-    .cell, .table-header {
-      text-align: center;
-      word-wrap: break-word;
-    }
-
-    *:not(.cell) {
-      display: contents;
-    }
-  }
-
-  /* Table borders */
-  .table {
-    border-left: 1px solid $color-228-25-79;
-    border-top: 1px solid $color-228-25-79;
-
-    &.table-no-border-bottom .table-header {
-      border-bottom: 0;
-    }
-
-    .cell {
-      border-right: 1px solid $color-228-25-79;
-      border-bottom: 1px solid $color-228-25-79;
-    }
-  }
-
-  /* Table styles inside */
-
-  .table {
-    
-    .table-header {
-      background: $color-228-25-79;
-      border-right: 1px solid white;
-      color: white;
-      display: flex;
-      flex: 1;
-      font-size: 1.6rem;
-      font-weight: 600;
-      justify-content: space-around;
-      padding: 1rem;
-      text-align: center;
-
-      &:last-of-type {
-        border-right: 1px solid $color-228-25-79;
-      }
-    }
-
-    sib-display-value[name='name'] {
-      color: $color-233-18-29;
-      font-weight: 600;
-      padding-top: 2.5rem;
-    }
-
-    [name='owner']>sib-display>div {
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-      padding: 0 2.2rem;
-
-      >[name$='account.picture'] {
-        align-items: center;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-      }
-
-      >[name='sup'] {
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
-
-        [name$='name'] {
-          color: #7A7F85;
-          font-weight: 600;
-          margin-right: 1rem;
-        }
-      }
-
-      >[name='sub'] {
-        align-self: start;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
-
-        >[name$='username']:not(:empty) {
-          align-items: center;
-          display: flex;
-
-          &::before {
-            content: '@';
-            
-          }
-        }
-      }
-    }
-  }
 
   /*
     >sib-set-default[name='buttons'] {

src/styles/layout/circle/circle-edit.scss

@@ -14,7 +14,7 @@
     }
   }
 
-  .table-header {
+  /*.table-header {
     background: $color-228-25-79;
     color: white;
     display: flex;
@@ -37,9 +37,9 @@
         display: none;
       }
     }
-  }
+  }*/
 
-  .table-body div team-template-edit {
+  /*.table-body div team-template-edit {
     display: flex;
     justify-content: space-between;
 
@@ -66,7 +66,7 @@
         display: none;
       } 
     }
-  }
+  }*/
 
   .member-select.color {
 
@@ -75,7 +75,7 @@
     }
   }
 
-  sib-multiple[widget='team-template-edit'] {
+  /*sib-multiple[widget='team-template-edit'] {
 
     label {
       display: none;
@@ -156,6 +156,6 @@
         }
       }
     }
-  }
+  }*/
 }
 

src/styles/layout/circle/circle.scss

@@ -18,4 +18,150 @@
       display: block;
     }
   }
+
+  /* Table grid display */
+  .table {
+    display: grid;
+
+    &.cols-2 {
+      grid-template-columns: repeat(2, 50%);
+    }
+
+    &.cols-3 {
+      grid-template-columns: repeat(3, 33.3333%);
+    }
+
+    *:not(.cell) {
+      display: contents;
+    }
+
+    sib-set-default[name='buttons'],
+    .cell,
+    .table-header {
+      text-align: center;
+      word-wrap: break-word;
+    }
+  }
+
+  /* Table borders */
+  .table {
+    border-left: 1px solid $color-228-25-79;
+    border-top: 1px solid $color-228-25-79;
+
+    &.table-no-border-bottom .table-header {
+      border-bottom: 0;
+    }
+
+    sib-set-default[name='buttons'],
+    .cell {
+      border-right: 1px solid $color-228-25-79;
+      border-bottom: 1px solid $color-228-25-79;
+    }
+  }
+
+  /* Table styles inside */
+
+  .table {
+
+    .table-header {
+      background: $color-228-25-79;
+      border-right: 1px solid white;
+      color: white;
+      display: flex;
+      flex: 1;
+      font-size: 1.6rem;
+      font-weight: 600;
+      justify-content: space-around;
+      padding: 1rem;
+      text-align: center;
+
+      &:last-of-type {
+        border-right: 1px solid $color-228-25-79;
+      }
+    }
+
+    sib-display-value[name='name'] {
+      color: $color-233-18-29;
+      font-weight: 600;
+      padding-top: 2.5rem;
+    }
+
+    [name='members']>sib-display>div, 
+    [name='owner']>sib-display>div {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+      padding: 0 2.2rem;
+
+      >[name$='account.picture'] {
+        align-items: center;
+        align-self: center;
+        background-color: $color-213-20-91;
+        border-radius: 50%;
+        display: flex;
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
+        height: 7vh;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        width: 7vh;
+
+        img {
+          background-color: white;
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+
+        object {
+          height: 45%;
+          width: 45%;
+        }
+      }
+
+      >[name='sup'] {
+        align-self: end;
+        display: flex;
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
+        margin-bottom: 0.50rem;
+
+        [name$='name'] {
+          color: #7A7F85;
+          font-weight: 600;
+          margin-right: 1rem;
+        }
+
+        sib-multiple>div {
+          display: flex;
+
+          [name='groups'] {
+            @extend %user-role;
+          }
+        }
+      }
+
+      >[name='sub'] {
+        align-self: start;
+        grid-column: 2 / span 1;
+        grid-row: 2 / span 1;
+        margin-top: 0.50rem;
+
+        >[name$='username']:not(:empty) {
+          align-items: center;
+          display: flex;
+
+          &::before {
+            content: '@';
+
+          }
+        }
+      }
+    }
+  }
 }