Merge branch 'jbpasquier/circle-information' into circle-wip-merge

src/page-circle-profile.pug

@@ -16,86 +16,84 @@
           class-description='description'
         )
 
-    div.content-box__info
+    sib-ac-checker.content-box__info(permission='acl:Read', bind-resources)
+      sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources)
+        sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
 
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      sib-display.block(
-        sib-ac-checker(permission='acl:Write', bind-resources)
+        bind-resources
-          sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
+        fields='creationDateSet(title, creationDate)'
 
-        sib-display.block(
+        value-title='Creation date:'
+        
+        widget-creationDate='sib-display-date'
+      )
+
+    
+      h2(name="label-team") Members:
+
+      //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
+      //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
+      sib-form.block.team-form(
+        bind-resources 
+        nested-field='members'
+        fields='user'
+        range-user=`${endpoints.users}`
+
+        class-user='team form-label is-dark'
+        label-user=''
+        widget-user='sib-form-auto-completion'
+
+        submit-button='Add a member'
+      )
+
+      sib-display.block(
+        bind-resources
+        fields='team'
+
+        multiple-team=''
+        widget-team='circle-team-template'
+      )
+
+      sib-ac-checker(permission='acl:Delete', bind-resources)
+        sib-delete(
           bind-resources
-          fields='creationDateSet(title, creationDate)'
+          data-label='Delete Circle'
-
+          class='right-btn reversed-btn'
-          value-title='Creation date:'
-          
-          widget-creationDate='sib-display-date'
         )
 
-      
+      sib-widget(name='join-leave-circle-button')
-        h2(name="label-team") Members:
+        template
-
+          sib-ac-checker(
-        //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
+            permission="acl:Delete"
-        //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
+            data-src="${value['@id']}"
-        sib-form.block.team-form(
-          bind-resources 
-          nested-field='members'
-          fields='user'
-          range-user=`${endpoints.users}`
-
-          class-user='team form-label is-dark'
-          label-user=''
-          widget-user='sib-form-auto-completion'
-
-          submit-button='Add a member'
-        )
-
-        sib-display.block(
-          bind-resources
-          fields='team'
-
-          multiple-team=''
-          widget-team='circle-team-template'
-        )
-
-        sib-ac-checker(permission='acl:Delete', bind-resources)
-          sib-delete(
-            bind-resources
-            data-label='Delete Circle'
-            class='right-btn reversed-btn'
           )
-
+            sib-delete(
-        sib-widget(name='join-leave-circle-button')
-          template
-            sib-ac-checker(
-              permission="acl:Delete"
               data-src="${value['@id']}"
+              data-label='Leave circle'
             )
-              sib-delete(
-                data-src="${value['@id']}"
-                data-label='Leave circle'
-              )
 
-        sib-display(
+      sib-display(
-          bind-resources
+        bind-resources
-          fields='members'
+        fields='members'
 
-          multiple-members=''
+        multiple-members=''
-          widget-members='join-leave-circle-button'
+        widget-members='join-leave-circle-button'
-        )
+      )
 
-        sib-form.block.team-form(
+      sib-form.block.team-form(
-          bind-resources 
+        bind-resources 
-          nested-field='members'
+        nested-field='members'
-          fields='user'
+        fields='user'
-          label-user=''
+        label-user=''
-          range-user=`${endpoints.users}`
+        range-user=`${endpoints.users}`
-          widget-user='sib-form-dropdown'
+        widget-user='sib-form-dropdown'
 
-          set-user-id-select="user"
+        set-user-id-select="user"
 
-          submit-button='Join Circle'
+        submit-button='Join Circle'
-        )
+      )
       
 
   #circle-edit(hidden)
-    include page-circle-edit.pug
+    include page-circle-edit.pug

src/styles/base/form.scss

@@ -169,6 +169,7 @@
         align-self: flex-end;
         margin-bottom: 0.6rem;
         margin-left: 4.2rem;
+        margin-top: 0;
       }
     }
 

src/styles/base/main.scss

@@ -151,7 +151,7 @@ sib-delete {
 }
 
 .content-box__header {
-  padding: 2.3rem 3rem;
+  padding: 1.9rem 3rem;
 
   div {
     color: $color-233-18-29;

src/styles/components/sidebar.scss

@@ -45,7 +45,7 @@
           border-bottom: 1px solid $color-229-25-79;
           display: flex;
           margin: 0;
-          padding: 2.55rem 2.55rem;
+          padding: 2.15rem 2.55rem;
           position: relative;
           width: 12em;
 

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

@@ -1,4 +1,5 @@
 #circle-edit {
+
   .table-header {
     background: $color-228-25-79;
     color: white;
@@ -7,71 +8,71 @@
     font-weight: 600;
     justify-content: space-around;
     text-align: center;
-  
+
     >*{
       border-right: 1px solid $color-228-25-79;
       flex: 1;
       padding: 1rem;
       width: 50%;
     }
-  
+
     >*:last-of-type {
       border-left: 1px solid white;
-  
+
       @media (max-width: 1220px) {
         display: none;
       }
     }
   }
-  
+
   .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;
       border-right: 1px solid $color-228-25-79;
       padding: 0 2.2rem;
     }
-  
+
     sib-ac-checker {
       align-items: center;
       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;
@@ -85,7 +86,7 @@
         overflow: hidden;
         position: relative;
         width: 7vh;
-  
+
         img {
           background-color: white;
           height: 100%;
@@ -95,45 +96,45 @@
           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;
@@ -141,5 +142,5 @@
         }
       }
     }
-  }  
+  }
 }

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

@@ -8,11 +8,22 @@
 
   .content-box__info {
     @extend %padding-block;
+    display: flex;
+    flex-direction: column;
 
     .backlink {
       text-align: right;
       display: block;
     }
+
+    .circle-edit-button {
+      align-self: flex-end;
+      position: absolute;
+
+      >sib-link {
+        background: $color-244-73-62;
+      }
+    }
   }
 
   .block {