From ce773033485cbd3f41d1a0e963d735803541f735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
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 | 189 ++++++++++---------
7 files changed, 226 insertions(+), 95 deletions(-)
create mode 100644 src/styles/components/comment.scss
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 1b4295fa..fcc75e3d 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 4a436083..cc8c6e46 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 3abbbe1e..e18fd59e 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 1674a7c0..8fa3b610 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 00000000..796f9de8
--- /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 8c3d1c0a..dc1b60b9 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 8ac06811..f43e627f 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;
- }
-}
-
--
GitLab