styles for admins ok. Need padding ? + refactoring

src/page-admin-circles.pug

@@ -34,7 +34,25 @@
           set-user-id-select="user"
         )
 
-    include templates/hd-user-avatar.pug
+
+
+
+    sib-widget(name='team-template-edit')
+      template
+        sib-display(
+          data-src='${await value.user}'
+          fields='account.picture, sup(name, groups), sub(profile.city)'
+
+          widget-account.picture='hd-user-avatar'
+
+          multiple-groups=''
+          widget-groups='hd-user-groups'
+        )
+
+
+
+
+
 
     div.content-box__info
       sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle
@@ -46,9 +64,10 @@
         div.cell Admins
         div.cell Join
 
-      sib-display.table-body(
+      //-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, owner.name), buttons(members, button)"
+        fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'
 
         multiple-groups=""
         widget-members="circle-admin-leave-button-template"

src/styles/base/form.scss

@@ -38,7 +38,7 @@
       flex-direction: column;
     }
 
-    sib-set-default {
+    /*sib-set-default {
 			clear: both;
 	    display: flex;
 			flex-wrap: wrap;
@@ -48,7 +48,7 @@
 				float: left;
 				width: 50%;
 			}
-		}
+		}*/
 
     label {
       display: flex;

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

@@ -26,6 +26,94 @@
     }
   }
 
+  .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;
+    }
+
+    >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: '@';
+            
+          }
+        }
+      }
+    }
+  }
+
   .table-body div team-template-edit {
     display: flex;
     justify-content: space-between;
@@ -74,7 +162,7 @@
       grid-template-columns: 7vh auto;
       grid-template-rows: repeat(2, 5.2vh);
 
-      >[name='account.picture'] {
+      >[name$='account.picture'] {
         align-items: center;
         align-self: center;
         background-color: $color-213-20-91;
@@ -111,7 +199,7 @@
         grid-row: 1 / span 1;
         margin-bottom: 0.50rem;
 
-        [name='name'] {
+        [name$='name'] {
           font-weight: 600;
           margin-right: 1rem;
         }