feature: sib-conversation added
- job-board updated with sib-conversation - counter for the number of comments added - new styles added
This commit is contained in:
Gaëlle Morin
@ -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")
|
||||
|
||||
@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
|
||||
document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
@ -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';
|
||||
|
||||
@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
sib-ac-checker[hidden] {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
122
src/styles/components/comment.scss
Normal file
122
src/styles/components/comment.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.job-board, #members-list {
|
||||
sib-form {
|
||||
sib-form[naked] {
|
||||
@extend %filters;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user