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/header.scss b/src/styles/base/header.scss
index 360531f..2a0792b 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -112,7 +112,7 @@
user-select: none;
summary {
- padding: 16px;
+ padding: 18px;
cursor: pointer;
&:focus {
background-color: $color-233-18-29;
@@ -129,14 +129,29 @@
> * {
vertical-align: middle;
}
-
- img {
- border-radius: 100%;
+
+ hd-user-avatar {
+ align-items: center;
+ background-color: $color-213-20-91;
+ border-radius: 50%;
+ display: flex;
height: 4.8rem;
+ justify-content: center;
margin-right: 2rem;
+ overflow: hidden;
+ width: 4.8rem;
+ }
+
+ img {
+ height: 100%;
object-fit: cover;
object-position: center;
- width: 4.8rem;
+ width: 100%;
+ }
+
+ object {
+ height: 45%;
+ width: 45%;
}
sib-display-value[name='first_name'] {
@@ -218,5 +233,5 @@
}
}
}
-
-}
\ No newline at end of file
+}
+
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..1b45f5e 100644
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@@ -59,118 +59,140 @@ 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;
+ >*:not(sib-action) {
+ 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 {
+ align-items: center;
+ background-color: $color-213-20-91;
+ border-radius: 50%;
+ display: flex;
+ height: 4.25rem;
+ justify-content: center;
+ margin-right: 2rem;
+ overflow: hidden;
+ width: 4.25rem;
+
+ img {
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ width: 100%;
+ }
+
+ object {
+ height: 45%;
+ width: 45%;
+ }
+ }
+ }
+
+ [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;
diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss
index fdd4749..1fd4a93 100644
--- a/src/styles/layout/members/member-profile.scss
+++ b/src/styles/layout/members/member-profile.scss
@@ -22,8 +22,29 @@
sib-set-default[name='member-img'] {
grid-area: avatar;
- overflow: hidden;
- position: relative;
+
+ member-picture {
+ align-items: center;
+ background-color: $color-213-20-91;
+ border-radius: 50%;
+ display: flex;
+ height: 28vh;
+ justify-content: center;
+ overflow: hidden;
+ width: 28vh;
+
+ img {
+ height: 255px;
+ object-fit: cover;
+ object-position: center;
+ width: 255px;
+ }
+
+ object {
+ height: 45%;
+ width: 45%;
+ }
+ }
img {
border-radius: 50%;
diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss
index 68e5543..aa50e2c 100644
--- a/src/styles/layout/members/members.scss
+++ b/src/styles/layout/members/members.scss
@@ -159,22 +159,27 @@ member-info-groups {
}
member-picture {
- background-color: $color-0-0-100;
+ align-items: center;
+ background-color: $color-213-20-91;
border-radius: 50%;
+ display: flex;
height: 28vh;
+ justify-content: center;
margin: 1.7rem auto;
overflow: hidden;
- position: relative;
width: 28vh;
img {
height: 100%;
- left: 0;
object-fit: cover;
- position: absolute;
- top: 0;
+ object-position: center;
width: 100%;
}
+
+ object {
+ height: 45%;
+ width: 45%;
+ }
}
[name='name'] {
diff --git a/src/templates/hd-user-avatar.pug b/src/templates/hd-user-avatar.pug
index 86a0d4c..1624767 100644
--- a/src/templates/hd-user-avatar.pug
+++ b/src/templates/hd-user-avatar.pug
@@ -1,3 +1,2 @@
sib-widget(name='hd-user-avatar')
- template
- img(name="${name}",src="\${value || '/images/alien.jpg'}",style="max-width:100%; max-height: 100%;")
\ No newline at end of file
+ template ${value ? `
` : ``}
diff --git a/www/images/alien.jpg b/www/images/alien.jpg
deleted file mode 100644
index c6277a1..0000000
Binary files a/www/images/alien.jpg and /dev/null differ
diff --git a/www/images/alien.svg b/www/images/alien.svg
new file mode 100644
index 0000000..0037c26
--- /dev/null
+++ b/www/images/alien.svg
@@ -0,0 +1,20 @@
+