update: frameworkisation of user-thumb

src/styles/base/table.scss

@@ -112,36 +112,6 @@
       justify-content: center;
     }
 
-    .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */,
-    [name='user-thumb'] {
-      @extend %user-thumb__grid;
-      padding: 0 2.2rem;
-
-      >.user-thumb__picture {
-        @extend %user-thumb__picture;
-      }
-
-      >[name='sup'] {
-        @extend %user-thumb__grid-sup;
-
-        .user-thumb__name {
-          @extend %user-thumb__name;
-        }
-      }
-
-      >[name='sub'] {
-        @extend %user-thumb__grid-inf;
-
-        >.user-thumb__username:not(:empty) {
-          @extend %user-thumb__username;
-        }
-
-        >.user-thumb__city:not(:empty) {
-          @extend %user-thumb__city;
-        }
-      }
-    }
-
     sib-ac-checker {
       align-items: center;
       display: flex;

src/styles/base/user-thumb.scss

@@ -21,7 +21,8 @@
   margin-top: 0.50rem;
 }
 
-%user-thumb__picture {
+
+.user-thumb__picture {
   align-items: center;
   align-self: center;
   background-color: var(--color-avatar-background);
@@ -51,17 +52,17 @@
   }
 }
 
-%user-thumb__name {
+.user-thumb__name {
   color: var(--color-user-thumb-name);
   font-weight: 600;
   margin-right: 1rem;
 }
 
-%user-thumb__admin {
+.user-thumb__admin:not(:empty) {
   @extend %tag-admin;
 }
 
-%user-thumb__username {
+.user-thumb__username {
   align-items: center;
   display: flex;
 
@@ -70,7 +71,7 @@
   }
 }
 
-%user-thumb__city {
+.user-thumb__city:not(:empty) {
   @include mdi('atom');
   align-items: center;
   display: flex;
@@ -82,7 +83,7 @@
   }
 }
 
-%user-thumb__lead {
+.user-thumb__lead:not(:empty) {
   @include icon('eyeglass');
   align-items: center;
   display: flex;
@@ -95,3 +96,23 @@
     margin-right: 0.50rem;
   }
 }
+
+/* Apply the grid to all user-thumbs */
+.user-thumb>div,
+[name='user-thumb'] {
+  @extend %user-thumb__grid;
+
+  >[name='sup'] {
+    @extend %user-thumb__grid-sup;
+  }
+
+  >[name='sub'] {
+    @extend %user-thumb__grid-inf;
+  }
+}
+
+/* Add extra spaces to user-thumbs that are inside a table */
+.user-thumb.is-spaced>div,
+[name='user-thumb'] {
+  padding: 0 2.2rem;
+}

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

@@ -4,36 +4,4 @@
     display: flex;
     justify-content: flex-end;
   }
-
-  .block {
-
-     /* peut-être à mettre dans main.scss */
-    .user-thumb>div {
-      @extend %user-thumb__grid;
-
-      >.user-thumb__picture {
-        @extend %user-thumb__picture;
-      }
-
-      >[name='sup'] {
-        @extend %user-thumb__grid-sup;
-
-        .user-thumb__name {
-          @extend %user-thumb__name;
-        }
-
-        .tag-admin:not(:empty) {
-          @extend %tag-admin;
-        }
-      }
-
-      >[name='sub'] {
-        @extend %user-thumb__grid-inf;
-
-        >.user-thumb__city:not(:empty) {
-          @extend %user-thumb__city;
-        }
-      }
-    }
-  }
 }

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

@@ -49,39 +49,6 @@
     width: 15vw;
   }
 
-  .user-thumb>div {
-    /* Maybe move it in main.scss. /!\ some fields are different */
-    @extend %user-thumb__grid;
-
-    >.user-thumb__picture {
-      @extend %user-thumb__picture;
-    }
-
-    >[name='sup'] {
-      @extend %user-thumb__grid-sup;
-
-      .user-thumb__name {
-        @extend %user-thumb__name;
-      }
-
-      .tag-admin:not(:empty) {
-        @extend %tag-admin;
-      }
-    }
-
-    >[name='sub'] {
-      @extend %user-thumb__grid-inf;
-
-      >.user-thumb__city:not(:empty) {
-        @extend %user-thumb__city;
-      }
-
-      >.user-thumb__lead:not(:empty) {
-        @extend %user-thumb__lead;
-      }
-    }
-  }
-
   ul {
     list-style: none;
     padding-left: 0;

src/templates/hubl-circle-team.pug

@@ -9,7 +9,7 @@ sib-widget(name='hubl-circle-team-template')
 
       class-account.picture='user-thumb__picture'
       class-name='user-thumb__name'
-      class-isadmin='tag-admin'
+      class-isadmin='user-thumb__admin'
       class-profile.city='user-thumb__city'
 
       widget-account.picture='hubl-user-avatar'

src/templates/hubl-project-team.pug

@@ -10,7 +10,7 @@ sib-widget(name='hubl-project-team')
       class-user.account.picture='user-thumb__picture'
 
       class-user.name='user-thumb__name'
-      class-isadmin='tag-admin'
+      class-isadmin='user-thumb__admin'
       class-user.profile.city='user-thumb__city'
       class-name='user-thumb__lead'
 

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

@@ -14,7 +14,7 @@
 
     sib-widget(name='hubl-circle-owner')
       template
-        sib-display.user-thumb(
+        sib-display.user-thumb.is-spaced(
           data-src='${await value}'
           fields='account.picture, sup(name), sub(username)'
 

src/views/admin/page-admin-projects.pug

@@ -38,7 +38,7 @@
 
         sib-widget(name='hubl-project-captain')
           template
-            sib-display.user-thumb(
+            sib-display.user-thumb.is-spaced(
               data-src='${await value}'
               fields='account.picture, sup(name), sub(username)'