feature: sib-conversation added

- job-board updated with sib-conversation
- counter for the number of comments added
- new styles added

src/dependencies.pug

@@ -19,7 +19,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.25")
 script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
 script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")

src/scripts/index.js

@@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
       document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
     }
   }
-
 });

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/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,125 +59,130 @@ 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;
 
+            >* {
+              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 {
+              background-color: $color-0-0-100;
+              border-radius: 50%;
+              height: 4.25rem;
+              overflow: hidden;
+              position: relative;
+              width: 4.25rem;
+
+              img {
+                height: 100%;
+                left: 0;
+                object-fit: cover;
+                position: absolute;
+                top: 0;
+                width: 100%;
+              }
+            }
+          }
+
+          [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;
-
-  &>sib-link {
-    @include icon('pencil');
-    font-size: 2rem;
-  }
-}
-