From ce773033485cbd3f41d1a0e963d735803541f735 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 17 Jun 2019 14:55:56 +0200 Subject: [PATCH] feature: sib-conversation added - job-board updated with sib-conversation - counter for the number of comments added - new styles added --- src/dependencies.pug | 2 +- src/scripts/index.js | 1 - src/styles/_index.scss | 1 + src/styles/base/main.scss | 4 + src/styles/components/comment.scss | 122 +++++++++++ src/styles/components/filters.scss | 2 +- src/styles/layout/job-offers/job-offers.scss | 207 ++++++++++--------- 7 files changed, 235 insertions(+), 104 deletions(-) create mode 100644 src/styles/components/comment.scss diff --git a/src/dependencies.pug b/src/dependencies.pug index 1b4295f..fcc75e3 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 4a43608..cc8c6e4 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 3abbbe1..e18fd59 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 1674a7c..8fa3b61 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 0000000..796f9de --- /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 8c3d1c0..dc1b60b 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 8ac0681..f43e627 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; - - >*:not(sib-action) { - margin: 0.25em; - } - - [name='author.first_name'] { - color: $color-0-0-29; - font-weight: 600; - } - - sib-multiple[name$='groups'] { + [name='user-thumb'] { + align-items: center; 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 { - 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%; + 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='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; + .sib-conversation, + .conversation > div { display: flex; - align-items: center; - margin: -0.25em; + flex-direction: column-reverse; + } - >* { - margin: 0.25em; - } - - 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; - } -} -