admin-circle table: wip => problem with multiple-members

src/page-admin-circles.pug

@@ -9,6 +9,7 @@
 
 
   #admin-circle-list(hidden)
+
     sib-widget(name="circle-admin-leave-button-template")
       template
         sib-ac-checker(
@@ -35,16 +36,15 @@
           set-user-id-select="user"
         )
 
-    sib-widget(name='team-template-edit')
+    include templates/hd-user-avatar.pug
+
+    sib-widget(name='circle-owner')
       template
         sib-display(
-          data-src='${await value.user}'
+          data-src='${await value}'
-          fields='account.picture, sup(name, groups), sub(profile.city)'
+          fields='account.picture, sup(name), sub(username)'
 
           widget-account.picture='hd-user-avatar'
-
-          multiple-groups=''
-          widget-groups='hd-user-groups'
         )
 
 
@@ -59,24 +59,37 @@
           next='admin-circle-create'
         ) Create a new circle
 
-      div.table-header
+      div.table.cols-3.table-no-border-bottom
-        div.cell Name
+        div.table-header Name
-        div.cell Admins
+        div.table-header Admins
-        div.cell Join
+        div.table-header Join
 
       //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
-      sib-display.table-body.test(
+      //-sib-display.table-body.test(
+          data-src=`${endpoints.circles}`
+          fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'
+
+          multiple-groups=""
+          widget-members="circle-admin-leave-button-template"
+          multiple-members=""
+
+          widget-button="circle-admin-join-button-template"
+          action-button="button"
+
+          widget-owner.account.picture='hd-user-avatar'
+        )
+
+      sib-display(
+        class='table cols-3'
+
         data-src=`${endpoints.circles}`
-        fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'
+        fields='name, owner, action'
 
-        multiple-groups=""
+        class-name='cell'
-        widget-members="circle-admin-leave-button-template"
+        class-owner='cell'
-        multiple-members=""
+        class-action='cell action'
 
-        widget-button="circle-admin-join-button-template"
+        widget-owner='circle-owner'
-        action-button="button"
-
-        widget-owner.account.picture='hd-user-avatar'
       )
 
 

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

@@ -1,3 +1,354 @@
 .circle-admin-join-button select[name='user'] {
   display: none;
+}
+
+#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: #3C3F57;
+      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: '@';
+            
+          }
+        }
+      }
+    }
+  }
+
+  /*.table-body.test>div>sib-display>div {
+    border-bottom: 1px solid $color-228-25-79;
+    display: flex;
+    justify-content: space-around;
+
+    >* {
+      flex: 1;
+      border-left: 1px solid $color-228-25-79;
+      text-align: center;
+    }
+
+    >*:last-child {
+      border-right: 1px solid $color-228-25-79;
+    }
+
+    >sib-display-value[name='name'] {
+      color: #3C3F57;
+      font-weight: 600;
+      padding-top: 2.5rem;
+    }
+
+    >sib-set-default[name='own'] {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+
+      >[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'] {
+          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'] {
+      display: flex;
+      justify-content: center;
+
+      >sib-multiple {
+        align-items: center;
+        display: flex;
+      }
+    }
+  }*/
+
+  .table-body div team-template-edit {
+    display: flex;
+    justify-content: space-between;
+
+    >* {
+      border-bottom: 1px solid $color-228-25-79;
+      flex: 1;
+      width: 50%;
+    }
+
+    sib-display {
+      border-left: 1px solid $color-228-25-79;
+      padding: 0 2.2rem;
+    }
+
+    sib-ac-checker {
+      align-items: center;
+      border-left: 1px solid $color-228-25-79;
+      border-right: 1px solid $color-228-25-79;
+      display: flex;
+      justify-content: flex-end;
+      padding: 2.7rem 2.2rem;
+
+      @media (max-width: 1220px) {
+        display: none;
+      } 
+    }
+  }
+
+  .member-select.color {
+
+    .ss-main {
+      color: $color-233-18-29;
+    }
+  }
+
+  sib-multiple[widget='team-template-edit'] {
+
+    label {
+      display: none;
+    }
+
+    >div>team-template-edit>sib-display>div {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+
+      >[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'] {
+          font-weight: 600;
+          margin-right: 1rem;
+        }
+
+        sib-multiple {
+          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$='profile.city']:not(:empty) {
+          @include mdi('atom');
+          align-items: center;
+          display: flex;
+
+          &::before {
+            color: $color-43-100-50;
+            margin-right: 0.50rem;
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -1,5 +1,4 @@
-#circle-edit,
+#circle-edit {
-#admin-circle-list {
 
   .table-header {
     background: $color-228-25-79;
@@ -26,105 +25,6 @@
     }
   }
 
-  .table-body.test>div>sib-display>div {
-    border-bottom: 1px solid $color-228-25-79;
-    display: flex;
-    justify-content: space-around;
-
-    >* {
-      flex: 1;
-      border-left: 1px solid $color-228-25-79;
-      text-align: center;
-    }
-
-    >*:last-child {
-      border-right: 1px solid $color-228-25-79;
-    }
-
-    >sib-display-value[name='name'] {
-      color: #3C3F57;
-      font-weight: 600;
-      padding-top: 2.5rem;
-    }
-
-    >sib-set-default[name='own'] {
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-
-      >[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'] {
-          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'] {
-      display: flex;
-      justify-content: center;
-
-      >sib-multiple {
-        align-items: center;
-        display: flex;
-      }
-    }
-  }
-
   .table-body div team-template-edit {
     display: flex;
     justify-content: space-between;