Merge branch 'staging' into 'migrate-0.8'

# Conflicts:
#   src/dependencies.pug
#   src/scripts/index.js

src/styles/_index.scss

@@ -16,6 +16,7 @@ div#viewport {
     @import 'components/index';
     @import 'layout/members/index';
     @import 'layout/job-offers/index';
+    @import 'components/comment.scss';
     @import 'layout/project-profile/index';
     @import 'layout/circle-profile/index';
     @import 'layout/user/index';

src/styles/base/header.scss

@@ -112,7 +112,7 @@
     user-select: none;
 
     summary {
-      padding: 16px;
+      padding: 18px;
       cursor: pointer;
       &:focus {
         background-color: $color-233-18-29;
@@ -129,14 +129,29 @@
         > * {
           vertical-align: middle;
         }
-      
+
-        img {
+        hd-user-avatar {
-          border-radius: 100%;
+          align-items: center;
+          background-color: $color-213-20-91;
+          border-radius: 50%;
+          display: flex;
           height: 4.8rem;
+          justify-content: center;
           margin-right: 2rem;
+          overflow: hidden;
+          width: 4.8rem;
+        }
+
+        img {
+          height: 100%;
           object-fit: cover;
           object-position: center;
-          width: 4.8rem;
+          width: 100%;
+        }
+
+        object {
+          height: 45%;
+          width: 45%;
         }
   
         sib-display-value[name='first_name'] {
@@ -218,5 +233,5 @@
       }
     }
   }
-  
+}
-}
+

src/styles/base/main.scss

@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
   display: none !important;
 }
 
+sib-ac-checker[hidden] {
+  display: block !important;
+}
+
 * {
   outline: none;
 }

src/styles/components/comment.scss

@@ -0,0 +1,122 @@
+#job-offers {
+
+  details {
+
+    summary {
+      color: $color-244-73-62;
+      cursor: pointer;
+      display: flex;
+      padding: 1.3rem 2.1rem;
+
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      span {
+        @include icon('speech');
+        font-weight: 600;
+
+        &::before {
+          margin: 0 1rem 0 0;
+        }
+      }
+
+      .icon-arrow-up {
+        margin-left: auto;
+      }
+    }
+
+    &[open] {
+
+      .icon-arrow-up {
+        transform: rotate(180deg);
+      }
+    }
+
+    sib-conversation.conversation {
+
+      .sib-conversation {
+        font-family: Open Sans;
+
+        [name='conversation-wrapper'] {
+          display: flex;
+
+          [name='conversation-avatar'] {
+            margin-right: 6px;
+
+            .avatar {
+              height: 35px;
+              width: 35px;
+            }
+          }
+
+          [name='conversation-content'] {
+
+            [name='author_user.name'] {
+              color: $color-0-0-29;
+              font-size: 1.5rem;
+            }
+
+            .conversation__messages {
+              display: none;
+            }
+          }
+        }
+
+        >sib-display.conversation>div>sib-display:first-child {
+          margin-bottom: 4.5rem;
+        }
+
+        sib-ac-checker {
+          border-top: 1px solid $color-210-17-91;
+
+          sib-form-textarea {
+
+            >label div {
+              color: $color-210-5-56;
+              font-size: 1.4rem;
+              margin-bottom: 1rem;
+              visibility: hidden;
+
+              &::before {
+                content: 'Add a comment';
+                visibility: visible;
+              }
+            }
+
+            textarea {
+              border: none;
+              font-size: 1.5rem;
+              resize: none;
+            }
+          }
+
+          input[type='submit'] {
+            border: 1px solid $color-244-73-62;
+            border-radius: 100em;
+            color: $color-244-73-62;
+            font-size: 1.3rem;
+            padding: 0.8rem 1.5rem;
+            text-transform: lowercase;
+
+            &:hover {
+              background-color: $color-244-73-62;
+              border: 1px solid $color-244-73-62;
+              color: white;
+            }
+          }
+        }
+
+        .conversation>div>sib-display,
+        .conversation-form {
+          border: none;
+          margin: 1rem 2.1rem;
+        }
+      }
+    }
+  }
+}

src/styles/components/filters.scss

@@ -53,7 +53,7 @@
 }
 
 .job-board, #members-list {
-  sib-form {
+  sib-form[naked] {
     @extend %filters;
   }
 }

src/styles/layout/job-offers/job-offers.scss

@@ -59,118 +59,140 @@ sib-job-board {
         display: block;
         font-size: 1.5rem;
         margin: 1.7rem 0;
-        padding: 3.4rem;
+        
+        [name="offer-detail"] {
+          border-bottom: 1px solid $color-210-17-91;
+          margin: 0 2.1rem;
+          padding: 2.1rem 0;
 
-        [name='user-thumb'] {
+          [name='user-thumb'] {
-          align-items: center;
+            align-items: center;
-          display: flex;
-          margin: -0.25em;
-
-          >*:not(sib-action) {
-            margin: 0.25em;
-          }
-
-          [name='author.first_name'] {
-            color: $color-0-0-29;
-            font-weight: 600;
-          }
-
-          sib-multiple[name$='groups'] {
             display: flex;
+            margin: -0.25em;
 
+            >*:not(sib-action) {
+              margin: 0.25em;
+            }
+
+            [name='author.first_name'] {
+              color: $color-0-0-29;
+              font-weight: 600;
+            }
+
+            sib-multiple[name$='groups'] {
+              display: flex;
+
+              label {
+                display: none;
+              }
+
+              >* {
+                @extend %user-role;
+              }
+            }
+
+            author-avatar {
+              align-items: center;
+              background-color: $color-213-20-91;
+              border-radius: 50%;
+              display: flex;
+              height: 4.25rem;
+              justify-content: center;
+              margin-right: 2rem;
+              overflow: hidden;
+              width: 4.25rem;
+              
+              img {
+                height: 100%;
+                object-fit: cover;
+                object-position: center;
+                width: 100%;
+              }
+
+              object {
+                height: 45%;
+                width: 45%;
+              }
+            }
+          }
+
+          [name='creationDate'] {
+            display: block;
+            margin-bottom: 0.7rem;
+            margin-top: 2rem;
+          }
+
+          [name='title'] {
+            @extend h3;
+            display: block;
+            font-weight: bold;
+            line-height: 19px;
+          }
+
+          [name='description'] {
+            display: block;
+            line-height: 1.6;
+            margin-bottom: 1.6rem;
+          }
+
+          [name='skills'] {
             label {
               display: none;
             }
+          }
+
+          author-contact {
+            color: $color-244-73-62;
+            font-size: 1.3rem;
+            float: right;
+
+            >sib-link {
+              cursor: pointer;
+              @include icon('speech');
+
+              &::before {
+                font-size: 1.5rem;
+                margin-right: 1.2rem;
+              }
+            }
+          }
+
+          [name='status'] {
+            float: right;
+            display: flex;
+            align-items: center;
+            margin: -0.25em;
 
             >* {
-              @extend %user-role;
+              margin: 0.25em;
             }
-          }
 
-          author-avatar {
+            strong {
-            background-color: $color-0-0-100;
+              background-color: $color-244-73-62;
-            border-radius: 50%;
+              border: none;
-            height: 4.25rem;
+              border-radius: 100em;
-            overflow: hidden;
+              color: $color-0-0-100;
-            position: relative;
+              display: inline-block;
-            width: 4.25rem;
+              font-weight: normal;
-
+              padding: 0.85rem 1.7rem;
-            img {
-              height: 100%;
-              left: 0;
-              object-fit: cover;
-              position: absolute;
-              top: 0;
-              width: 100%;
             }
           }
         }
 
-        [name='creationDate'] {
+        .sib-conversation,
-          display: block;
+        .conversation > div {
-          margin-bottom: 0.7rem;
-          margin-top: 2rem;
-        }
-
-        [name='title'] {
-          @extend h3;
-          display: block;
-          font-weight: bold;
-          line-height: 19px;
-        }
-
-        [name='description'] {
-          display: block;
-          line-height: 1.6;
-          margin-bottom: 1.6rem;
-        }
-
-        [name='skills'] {
-          label {
-            display: none;
-          }
-        }
-
-        author-contact {
-          color: $color-244-73-62;
-          font-size: 1.3rem;
-          float: right;
-
-          >sib-link {
-            cursor: pointer;
-            @include icon('speech');
-
-            &::before {
-              font-size: 1.5rem;
-              margin-right: 1.2rem;
-            }
-          }
-        }
-
-        [name='status'] {
-          float: right;
           display: flex;
-          align-items: center;
+          flex-direction: column-reverse;
-          margin: -0.25em;
+        }
 
-          >* {
+        [name="dateCreated"] {
-            margin: 0.25em;
+          display: none;
-          }
-
-          strong {
-            background-color: $color-244-73-62;
-            border: none;
-            border-radius: 100em;
-            color: $color-0-0-100;
-            display: inline-block;
-            font-weight: normal;
-            padding: 0.85rem 1.7rem;
-          }
         }
       }
     }
   }
 }
+
 sib-action[name='edit'] {
   margin-left: auto;
   color: $color-215-6-63;

src/styles/layout/members/member-profile.scss

@@ -22,8 +22,29 @@
 
         sib-set-default[name='member-img'] {
           grid-area: avatar;
-          overflow: hidden;
+          
-          position: relative;
+          member-picture {
+            align-items: center;
+            background-color: $color-213-20-91;
+            border-radius: 50%;
+            display: flex;
+            height: 28vh;
+            justify-content: center;
+            overflow: hidden;
+            width: 28vh;
+
+            img {
+              height: 255px;
+              object-fit: cover;
+              object-position: center;
+              width: 255px;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
 
           img {
             border-radius: 50%;

src/styles/layout/members/members.scss

@@ -159,22 +159,27 @@ member-info-groups {
           }
 
           member-picture {
-            background-color: $color-0-0-100;
+            align-items: center;
+            background-color: $color-213-20-91;
             border-radius: 50%;
+            display: flex;
             height: 28vh;
+            justify-content: center;
             margin: 1.7rem auto;
             overflow: hidden;
-            position: relative;
             width: 28vh;
 
             img {
               height: 100%;
-              left: 0;
               object-fit: cover;
-              position: absolute;
+              object-position: center;
-              top: 0;
               width: 100%;
             }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
           }
 
           [name='name'] {

src/templates/hd-user-avatar.pug

@@ -1,3 +1,2 @@
 sib-widget(name='hd-user-avatar')
-  template
+  template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg")></object>`}
-    img(name="${name}",src="\${value || '/images/alien.jpg'}",style="max-width:100%; max-height: 100%;")

www/images/alien.svg

@@ -0,0 +1,20 @@
+<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g transform="translate(-38.096 -81.081)">
+  <g transform="matrix(.26458 0 0 .26458 38.081 81.081)">
+   <path d="m179.41 71.671c23.202-13.388 49.715-20.471 76.664-20.471 26.982 0 53.513 7.1 76.732 20.514 1.348 0.785 2.816 1.152 4.267 1.152 2.953 0 5.82-1.536 7.398-4.267 2.364-4.079 0.964-9.301-3.115-11.657-25.813-14.925-55.296-22.81-85.282-22.81-29.943 0-59.4 7.868-85.197 22.758-4.087 2.355-5.487 7.578-3.132 11.657 2.364 4.08 7.586 5.471 11.665 3.124z"/>
+   <path d="m256.07 187.73c-9.412 0-17.067 7.654-17.067 17.067 0 9.412 7.654 17.067 17.067 17.067 9.412 0 17.067-7.654 17.067-17.067-1e-3 -9.412-7.655-17.067-17.067-17.067z"/>
+   <path d="m329.97 162.13c-2.355-4.087-7.586-5.495-11.665-3.123l-7.936 4.582c-3.755-4.932-8.158-9.335-13.09-13.09l4.582-7.945c2.364-4.079 0.964-9.301-3.123-11.656-4.079-2.355-9.301-0.956-11.656 3.123l-4.531 7.851c-5.641-2.372-11.674-3.959-17.946-4.753v-9.122c0-4.71-3.814-8.533-8.533-8.533s-8.533 3.823-8.533 8.533v9.122c-6.272 0.794-12.305 2.381-17.946 4.753l-4.531-7.851c-2.364-4.087-7.586-5.487-11.657-3.132-4.087 2.364-5.487 7.578-3.123 11.665l4.582 7.945c-4.932 3.755-9.336 8.149-13.09 13.09l-7.945-4.591c-4.079-2.364-9.301-0.956-11.657 3.132-2.364 4.079-0.956 9.293 3.123 11.656l7.859 4.531c-3.439 8.149-5.35 17.092-5.35 26.479 0 37.641 30.626 68.267 68.267 68.267s68.267-30.626 68.267-68.267c0-9.378-1.911-18.321-5.342-26.47l7.859-4.54c4.071-2.363 5.479-7.577 3.115-11.656zm-73.898 93.867c-28.237 0-51.2-22.963-51.2-51.2s22.963-51.2 51.2-51.2 51.2 22.963 51.2 51.2-22.964 51.2-51.2 51.2z"/>
+   <path d="m510.9 451.96c-2.295-8.585-7.723-15.795-15.317-20.378l-47.027-37.606c-0.222-0.145-21.82-14.967-21.82-35.575v-153.6c0-46.541-18.97-90.863-52.335-122.98l32.862-33.169c3.328 1.587 7.006 2.551 10.94 2.551 14.114 0 25.6-11.486 25.6-25.6s-11.486-25.6-25.6-25.6-25.6 11.486-25.6 25.6c0 3.951 0.973 7.654 2.586 11l-39.159 39.518c-1.664 1.681-2.56 3.977-2.466 6.34 0.094 2.355 1.161 4.574 2.944 6.118 33.783 29.235 53.163 71.595 53.163 116.22v153.6c0 29.824 28.203 48.964 28.8 49.331l46.925 37.555c0.341 0.273 0.691 0.512 1.067 0.734 3.951 2.278 6.775 5.956 7.962 10.359 1.178 4.403 0.572 9.003-1.715 12.945-4.702 8.166-15.155 10.957-23.142 6.349l-106.66-64.827c-3.234-1.963-7.356-1.579-10.155 0.947s-3.61 6.588-1.988 9.993l22.545 47.548c2.372 4.087 3.14 9.003 2.133 13.491-0.998 4.429-3.618 8.064-7.373 10.232-8.875 5.12-19.396 9e-3 -24.499-6.98l-46.165-72.525c-1.929-3.012-5.504-4.506-9.003-3.763-3.49 0.759-6.144 3.601-6.647 7.134l-8.533 59.733c-0.06 0.401-0.085 0.811-0.085 1.212 0 9.412-7.654 17.067-17.067 17.067-9.412 0-17.067-7.654-17.067-17.067 0-0.401-0.026-0.811-0.085-1.212l-8.533-59.733c-0.503-3.533-3.157-6.383-6.647-7.134-3.516-0.751-7.091 0.751-9.003 3.772l-45.815 72.124c-6.135 8.516-17.545 11.742-25.378 7.194-4.292-2.475-6.067-6.238-6.793-8.96-1.271-4.719-0.478-10.027 2.483-15.223l21.76-46.225c1.613-3.405 0.794-7.45-1.997-9.976-2.79-2.517-6.912-2.91-10.121-0.964l-106.13 64.04c-8.149 4.685-18.611 1.911-23.313-6.238-2.287-3.951-2.893-8.55-1.715-12.954 1.186-4.403 4.011-8.081 7.962-10.359 0.367-0.213 0.717-0.461 1.05-0.725l46.541-37.146c1.195-0.802 29.201-19.942 29.201-49.749v-153.6c0-44.809 19.507-87.287 53.513-116.52 1.801-1.545 2.876-3.78 2.961-6.161 0.094-2.381-0.828-4.685-2.509-6.357l-39.45-39.219c1.596-3.328 2.552-7.014 2.552-10.94 0-14.114-11.486-25.6-25.6-25.6s-25.6 11.486-25.6 25.6 11.486 25.6 25.6 25.6c3.951 0 7.646-0.973 10.991-2.577l33.109 32.905c-33.562 32.137-52.634 76.561-52.634 123.27v153.6c0 20.625-21.453 35.447-22.212 35.994l-46.626 37.188c-7.595 4.582-13.03 11.793-15.326 20.378-2.372 8.806-1.152 18.014 3.405 25.907 9.412 16.299 30.336 21.897 46.78 12.407l82.15-49.579-9.446 20.096c-4.881 8.439-6.289 18.483-3.866 27.546 2.21 8.243 7.441 15.113 14.746 19.319 15.488 8.96 36.497 3.686 48.034-12.416l33.715-53.043 5.188 36.318c0.34 18.525 15.521 33.484 34.124 33.484s33.783-14.959 34.125-33.485l5.188-36.352 34.091 53.521c7.723 10.615 19.396 16.461 30.899 16.461 5.615 0 11.187-1.391 16.23-4.309 7.936-4.582 13.431-12.134 15.488-21.274 1.971-8.747 0.546-17.903-3.678-25.156l-10.035-21.188 82.483 50.142c16.29 9.395 37.222 3.806 46.635-12.493 4.556-7.902 5.777-17.101 3.404-25.908zm-92.697-434.89c4.71 0 8.533 3.831 8.533 8.533s-3.823 8.533-8.533 8.533c-2.278 0-4.318-0.922-5.845-2.372-0.06-0.068-0.077-0.154-0.145-0.222-0.06-0.06-0.137-0.068-0.188-0.119-1.442-1.536-2.355-3.558-2.355-5.82 0-4.702 3.822-8.533 8.533-8.533zm-317.93 14.114c-0.145 0.12-0.333 0.171-0.469 0.307-0.136 0.137-0.179 0.316-0.307 0.461-1.493 1.314-3.413 2.185-5.564 2.185-4.71 0-8.533-3.831-8.533-8.533s3.823-8.533 8.533-8.533 8.533 3.831 8.533 8.533c1e-3 2.149-0.878 4.078-2.193 5.58z"/>
+   <path d="m154.89 311.36c-2.423 4.036-1.109 9.276 2.918 11.691 1.826 1.101 45.303 26.82 98.261 26.82s96.435-25.719 98.261-26.82c4.028-2.415 5.342-7.654 2.918-11.691-2.406-4.036-7.629-5.367-11.699-2.944-0.41 0.239-41.387 24.388-89.481 24.388s-89.071-24.149-89.481-24.388c-4.068-2.424-9.282-1.093-11.697 2.944z"/>
+  </g>
+ </g>
+</svg>