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/header.scss b/src/styles/base/header.scss
index 360531f3de0b3941cd83f22c0def7117941e92a6..2a0792b63b24a4a83c36e6f7b7ff3a6ab50d3903 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 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..1b45f5e0adc7bacd81709845ea891a40161f517d 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;
- [name='user-thumb'] {
- align-items: center;
- display: flex;
- margin: -0.25em;
+ >*:not(sib-action) {
+ 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 {
+ 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%;
+ }
}
}
- 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;
+ }
+ }
- [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;
+ }
+ }
}
- }
- 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;
diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss
index fdd474958b5b972c4a6acefc421fd2479939406f..1fd4a93f237013b2bd2b5e34985c67e6ea931f41 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 68e5543260789394d691c0c48c50deafef8c770a..aa50e2cf64726462f372312ef0dcbb18762daf16 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 86a0d4c976c38e3484543bd149a5730de5160e3a..1624767852b8b0a4a59a68342848db2a6a233adf 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 ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg")></object>`}
diff --git a/www/images/alien.jpg b/www/images/alien.jpg
deleted file mode 100644
index c6277a19d92d65b7f0ace44255ed37d949991179..0000000000000000000000000000000000000000
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 0000000000000000000000000000000000000000..0037c26fba2787fc9e2c485e3ef6adf6c921cdac
--- /dev/null
+++ b/www/images/alien.svg
@@ -0,0 +1,20 @@
+<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+ <rdf:RDF>
+ <cc:Work rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+ <dc:title/>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g transform="translate(-38.096 -81.081)">
+ <g transform="matrix(.26458 0 0 .26458 38.081 81.081)">
+ <path d="m179.41 71.671c23.202-13.388 49.715-20.471 76.664-20.471 26.982 0 53.513 7.1 76.732 20.514 1.348 0.785 2.816 1.152 4.267 1.152 2.953 0 5.82-1.536 7.398-4.267 2.364-4.079 0.964-9.301-3.115-11.657-25.813-14.925-55.296-22.81-85.282-22.81-29.943 0-59.4 7.868-85.197 22.758-4.087 2.355-5.487 7.578-3.132 11.657 2.364 4.08 7.586 5.471 11.665 3.124z"/>
+ <path d="m256.07 187.73c-9.412 0-17.067 7.654-17.067 17.067 0 9.412 7.654 17.067 17.067 17.067 9.412 0 17.067-7.654 17.067-17.067-1e-3 -9.412-7.655-17.067-17.067-17.067z"/>
+ <path d="m329.97 162.13c-2.355-4.087-7.586-5.495-11.665-3.123l-7.936 4.582c-3.755-4.932-8.158-9.335-13.09-13.09l4.582-7.945c2.364-4.079 0.964-9.301-3.123-11.656-4.079-2.355-9.301-0.956-11.656 3.123l-4.531 7.851c-5.641-2.372-11.674-3.959-17.946-4.753v-9.122c0-4.71-3.814-8.533-8.533-8.533s-8.533 3.823-8.533 8.533v9.122c-6.272 0.794-12.305 2.381-17.946 4.753l-4.531-7.851c-2.364-4.087-7.586-5.487-11.657-3.132-4.087 2.364-5.487 7.578-3.123 11.665l4.582 7.945c-4.932 3.755-9.336 8.149-13.09 13.09l-7.945-4.591c-4.079-2.364-9.301-0.956-11.657 3.132-2.364 4.079-0.956 9.293 3.123 11.656l7.859 4.531c-3.439 8.149-5.35 17.092-5.35 26.479 0 37.641 30.626 68.267 68.267 68.267s68.267-30.626 68.267-68.267c0-9.378-1.911-18.321-5.342-26.47l7.859-4.54c4.071-2.363 5.479-7.577 3.115-11.656zm-73.898 93.867c-28.237 0-51.2-22.963-51.2-51.2s22.963-51.2 51.2-51.2 51.2 22.963 51.2 51.2-22.964 51.2-51.2 51.2z"/>
+ <path d="m510.9 451.96c-2.295-8.585-7.723-15.795-15.317-20.378l-47.027-37.606c-0.222-0.145-21.82-14.967-21.82-35.575v-153.6c0-46.541-18.97-90.863-52.335-122.98l32.862-33.169c3.328 1.587 7.006 2.551 10.94 2.551 14.114 0 25.6-11.486 25.6-25.6s-11.486-25.6-25.6-25.6-25.6 11.486-25.6 25.6c0 3.951 0.973 7.654 2.586 11l-39.159 39.518c-1.664 1.681-2.56 3.977-2.466 6.34 0.094 2.355 1.161 4.574 2.944 6.118 33.783 29.235 53.163 71.595 53.163 116.22v153.6c0 29.824 28.203 48.964 28.8 49.331l46.925 37.555c0.341 0.273 0.691 0.512 1.067 0.734 3.951 2.278 6.775 5.956 7.962 10.359 1.178 4.403 0.572 9.003-1.715 12.945-4.702 8.166-15.155 10.957-23.142 6.349l-106.66-64.827c-3.234-1.963-7.356-1.579-10.155 0.947s-3.61 6.588-1.988 9.993l22.545 47.548c2.372 4.087 3.14 9.003 2.133 13.491-0.998 4.429-3.618 8.064-7.373 10.232-8.875 5.12-19.396 9e-3 -24.499-6.98l-46.165-72.525c-1.929-3.012-5.504-4.506-9.003-3.763-3.49 0.759-6.144 3.601-6.647 7.134l-8.533 59.733c-0.06 0.401-0.085 0.811-0.085 1.212 0 9.412-7.654 17.067-17.067 17.067-9.412 0-17.067-7.654-17.067-17.067 0-0.401-0.026-0.811-0.085-1.212l-8.533-59.733c-0.503-3.533-3.157-6.383-6.647-7.134-3.516-0.751-7.091 0.751-9.003 3.772l-45.815 72.124c-6.135 8.516-17.545 11.742-25.378 7.194-4.292-2.475-6.067-6.238-6.793-8.96-1.271-4.719-0.478-10.027 2.483-15.223l21.76-46.225c1.613-3.405 0.794-7.45-1.997-9.976-2.79-2.517-6.912-2.91-10.121-0.964l-106.13 64.04c-8.149 4.685-18.611 1.911-23.313-6.238-2.287-3.951-2.893-8.55-1.715-12.954 1.186-4.403 4.011-8.081 7.962-10.359 0.367-0.213 0.717-0.461 1.05-0.725l46.541-37.146c1.195-0.802 29.201-19.942 29.201-49.749v-153.6c0-44.809 19.507-87.287 53.513-116.52 1.801-1.545 2.876-3.78 2.961-6.161 0.094-2.381-0.828-4.685-2.509-6.357l-39.45-39.219c1.596-3.328 2.552-7.014 2.552-10.94 0-14.114-11.486-25.6-25.6-25.6s-25.6 11.486-25.6 25.6 11.486 25.6 25.6 25.6c3.951 0 7.646-0.973 10.991-2.577l33.109 32.905c-33.562 32.137-52.634 76.561-52.634 123.27v153.6c0 20.625-21.453 35.447-22.212 35.994l-46.626 37.188c-7.595 4.582-13.03 11.793-15.326 20.378-2.372 8.806-1.152 18.014 3.405 25.907 9.412 16.299 30.336 21.897 46.78 12.407l82.15-49.579-9.446 20.096c-4.881 8.439-6.289 18.483-3.866 27.546 2.21 8.243 7.441 15.113 14.746 19.319 15.488 8.96 36.497 3.686 48.034-12.416l33.715-53.043 5.188 36.318c0.34 18.525 15.521 33.484 34.124 33.484s33.783-14.959 34.125-33.485l5.188-36.352 34.091 53.521c7.723 10.615 19.396 16.461 30.899 16.461 5.615 0 11.187-1.391 16.23-4.309 7.936-4.582 13.431-12.134 15.488-21.274 1.971-8.747 0.546-17.903-3.678-25.156l-10.035-21.188 82.483 50.142c16.29 9.395 37.222 3.806 46.635-12.493 4.556-7.902 5.777-17.101 3.404-25.908zm-92.697-434.89c4.71 0 8.533 3.831 8.533 8.533s-3.823 8.533-8.533 8.533c-2.278 0-4.318-0.922-5.845-2.372-0.06-0.068-0.077-0.154-0.145-0.222-0.06-0.06-0.137-0.068-0.188-0.119-1.442-1.536-2.355-3.558-2.355-5.82 0-4.702 3.822-8.533 8.533-8.533zm-317.93 14.114c-0.145 0.12-0.333 0.171-0.469 0.307-0.136 0.137-0.179 0.316-0.307 0.461-1.493 1.314-3.413 2.185-5.564 2.185-4.71 0-8.533-3.831-8.533-8.533s3.823-8.533 8.533-8.533 8.533 3.831 8.533 8.533c1e-3 2.149-0.878 4.078-2.193 5.58z"/>
+ <path d="m154.89 311.36c-2.423 4.036-1.109 9.276 2.918 11.691 1.826 1.101 45.303 26.82 98.261 26.82s96.435-25.719 98.261-26.82c4.028-2.415 5.342-7.654 2.918-11.691-2.406-4.036-7.629-5.367-11.699-2.944-0.41 0.239-41.387 24.388-89.481 24.388s-89.071-24.149-89.481-24.388c-4.068-2.424-9.282-1.093-11.697 2.944z"/>
+ </g>
+ </g>
+</svg>