diff --git a/src/dependencies.pug b/src/dependencies.pug
index 1b4295fa471ad97c612edd9b39ac8244f1a8e8cc..fcc75e3d2baae5876be5dd123404e63ae9055344 100644
--- a/src/dependencies.pug
+++ b/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")
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 4a4360834edb735700064c99f9ed99e8e7fa5f3a..cc8c6e46d4aae49b1b422f620c97604c140c1ccd 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
}
}
-
});
\ No newline at end of file
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 3abbbe1e1da33b1af4bcf4043cd234c55e8ceed8..e18fd59e933dd6285337dccb26631ea3fa8e1d19 100644
--- a/src/styles/_index.scss
+++ b/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';
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 1674a7c0bedfd182d6b649628b6cee05b1fdd2de..8fa3b610762d56c249a69e9e7d14a0b86cd9b590 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
display: none !important;
}
+sib-ac-checker[hidden] {
+ display: block !important;
+}
+
* {
outline: none;
}
diff --git a/src/styles/components/comment.scss b/src/styles/components/comment.scss
new file mode 100644
index 0000000000000000000000000000000000000000..796f9de8ed125e4c6f56ab5d5593e6489955fc99
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/components/filters.scss b/src/styles/components/filters.scss
index 8c3d1c0a17262f2e1378d929f15909be4d3a2ffb..dc1b60b94f81e9394855fd929b1274a86f4e05ff 100644
--- a/src/styles/components/filters.scss
+++ b/src/styles/components/filters.scss
@@ -53,7 +53,7 @@
}
.job-board, #members-list {
- sib-form {
+ sib-form[naked] {
@extend %filters;
}
}
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss
index 8ac068117872c3de2a42ccf5b90b9f3acd08cb0e..f43e627f978828ac252828a4ae12aa5e76fc472c 100644
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/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'] {
+ align-items: center;
+ display: flex;
+ margin: -0.25em;
- [name='user-thumb'] {
- align-items: center;
- display: flex;
- margin: -0.25em;
+ >* {
+ margin: 0.25em;
+ }
- >*:not(sib-action) {
- margin: 0.25em;
- }
+ [name='author.first_name'] {
+ color: $color-0-0-29;
+ font-weight: 600;
+ }
- [name='author.first_name'] {
- color: $color-0-0-29;
- font-weight: 600;
- }
+ sib-multiple[name$='groups'] {
+ display: flex;
- sib-multiple[name$='groups'] {
- display: flex;
+ label {
+ display: none;
+ }
- label {
- display: none;
+ >* {
+ @extend %user-role;
+ }
}
- >* {
- @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%;
+ }
}
}
- 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='creationDate'] {
- display: block;
- margin-bottom: 0.7rem;
- margin-top: 2rem;
- }
+ [name='title'] {
+ @extend h3;
+ display: block;
+ font-weight: bold;
+ line-height: 19px;
+ }
- [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='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');
- [name='skills'] {
- label {
- display: none;
+ &::before {
+ font-size: 1.5rem;
+ margin-right: 1.2rem;
+ }
+ }
}
- }
- author-contact {
- color: $color-244-73-62;
- font-size: 1.3rem;
- float: right;
+ [name='status'] {
+ float: right;
+ display: flex;
+ align-items: center;
+ margin: -0.25em;
- >sib-link {
- cursor: pointer;
- @include icon('speech');
+ >* {
+ margin: 0.25em;
+ }
- &::before {
- font-size: 1.5rem;
- margin-right: 1.2rem;
+ 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;
}
}
}
- [name='status'] {
- float: right;
+ .sib-conversation,
+ .conversation > div {
display: flex;
- align-items: center;
- margin: -0.25em;
-
- >* {
- margin: 0.25em;
- }
+ flex-direction: column-reverse;
+ }
- 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;
- }
+ [name="dateCreated"] {
+ display: none;
}
}
}
}
}
-sib-action[name='edit'] {
- margin-left: auto;
- color: $color-215-6-63;
-
- &>sib-link {
- @include icon('pencil');
- font-size: 2rem;
- }
-}
-