From 6309b20b65fc6e4e6dd3017089786bae3c9d5928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 19 Jul 2019 23:02:10 +0200 Subject: [PATCH] update: default avatar - .svg file is used - new styles added --- src/styles/base/header.scss | 29 ++++++++++++---- src/styles/layout/job-offers/job-offers.scss | 31 ++++++++++++++---- src/styles/layout/members/member-profile.scss | 25 ++++++++++++-- src/styles/layout/members/members.scss | 15 ++++++--- src/templates/hd-user-avatar.pug | 3 +- www/images/alien.jpg | Bin 8282 -> 0 bytes www/images/alien.svg | 20 +++++++++++ 7 files changed, 100 insertions(+), 23 deletions(-) delete mode 100644 www/images/alien.jpg create mode 100644 www/images/alien.svg 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/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index f43e627..1b45f5e 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -70,7 +70,7 @@ sib-job-board { display: flex; margin: -0.25em; - >* { + >*:not(sib-action) { margin: 0.25em; } @@ -92,21 +92,27 @@ sib-job-board { } author-avatar { - background-color: $color-0-0-100; + 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; - position: relative; width: 4.25rem; - + img { height: 100%; - left: 0; object-fit: cover; - position: absolute; - top: 0; + object-position: center; width: 100%; } + + object { + height: 45%; + width: 45%; + } } } @@ -186,3 +192,14 @@ sib-job-board { } } } + +sib-action[name='edit'] { + margin-left: auto; + color: $color-215-6-63; + + &>sib-link { + @include icon('pencil'); + font-size: 2rem; + } +} + diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss index 1911aa9..0fa709a 100644 --- a/src/styles/layout/members/member-profile.scss +++ b/src/styles/layout/members/member-profile.scss @@ -22,8 +22,29 @@ div[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 4af55b7..e60df83 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 c6277a19d92d65b7f0ace44255ed37d949991179..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8282 zcmcIobySqyx1Jfghg3osx{)4Q8cFE}Y3XhdhL)C;2Bkz=Lb?R$l2AZEKo~%}n>&2! z_kH)S`_EnL{?2;Wth49r=Q(?ybKd>#eQv+reg}XRWaVW6Kty8$vH<|MHvmE@S4&fO zOACmXjk`5OPF`8{b`Br~Kmvj89z;V%JSgZWD9Fetm}qFI=-8Op*jSiYSU9)@U>sb0 zTr4aw2^gP{h?tld8}HtI5~BMAM8rgQBtRqt1{nnd1qFi$2MdSj|J-i70Ql&4mLdW1 z0U&%J51e|H3j`R4C9fn`f2OuxuUQSq{m+6F!8vhHN2Yz~aFG9Q@9odA4ka=xqhy=v8B zh!Xv|?krsNK{XenJ09A|g;7sD^Hm4uofe=EEhM$XuikKYTy;J@QfVZl|D!!aPIRT9 z+=kUb+Rz5z{$FYq09-e?sMDCwNZJViFs2QaX$J#P{~96%fYO_1NbEZR09@DT&-2y7 zCV=1EfXH`i9|�Y>{ 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 P9Vdd=AaL*1?aY4x{FJ{5 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 @@ + + + + + image/svg+xml + + + + + + + + + + + + + + +