Merge branch '139-comments-on-job-offers' into 'staging'

Resolve "Comments on job offers"

See merge request startinblox/applications/sib-app!48

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,14 +59,18 @@ 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'] {
             align-items: center;
             display: flex;
             margin: -0.25em;
 
-          >*:not(sib-action) {
+            >* {
               margin: 0.25em;
             }
 
@@ -168,16 +172,17 @@ sib-job-board {
             }
           }
         }
-    }
-  }
-}
-sib-action[name='edit'] {
-  margin-left: auto;
-  color: $color-215-6-63;
 
-  &>sib-link {
+        .sib-conversation,
-    @include icon('pencil');
+        .conversation > div {
-    font-size: 2rem;
+          display: flex;
-  }
+          flex-direction: column-reverse;
         }
 
+        [name="dateCreated"] {
+          display: none;
+        }
+      }
+    }
+  }
+}