diff --git a/src/config.pug b/src/config.pug new file mode 100644 index 0000000..8a83ec0 --- /dev/null +++ b/src/config.pug @@ -0,0 +1,3 @@ +//- var sdn = process.env.SDN || 'http://127.0.0.1:8000' +- var sdn = process.env.SDN || 'https://test-paris.happy-dev.fr' +- var cdn = process.env.CDN || 'https://cdn.happy-dev.fr' \ No newline at end of file diff --git a/src/header.pug b/src/header.pug new file mode 100644 index 0000000..3f945f2 --- /dev/null +++ b/src/header.pug @@ -0,0 +1,17 @@ +#button-toggle +#logo + img(src="/images/logo.png" width=111 height=32) + +#search-bar + div + input#search-input(type='search') + i#search-icon.icon-magnifier(aria-hidden='true') + i#close-search-icon.icon-close(aria-hidden='true') + +#notification + +#profile + img(src="/images/user.png" width=43 height=43) + span + | Sophie + span.icon-arrow-down \ No newline at end of file diff --git a/src/page-group-chat.pug b/src/page-group-chat.pug new file mode 100644 index 0000000..6b6f711 --- /dev/null +++ b/src/page-group-chat.pug @@ -0,0 +1,2 @@ +#group-chat.chat-view(bind-resources) + sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) \ No newline at end of file diff --git a/src/page-group-create.pug b/src/page-group-create.pug new file mode 100644 index 0000000..6fb9137 --- /dev/null +++ b/src/page-group-create.pug @@ -0,0 +1,7 @@ +#group-create + sib-form( + data-src=`${sdn}/channels/`, + range-owner=`${sdn}/members/`, + widget-members='sib-form-multiple-dropdown', + range-members=`${sdn}/members/` + ) diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug new file mode 100644 index 0000000..452d565 --- /dev/null +++ b/src/page-group-edit.pug @@ -0,0 +1,7 @@ +#group-edit + sib-form( + range-owner=`${sdn}/members/`, + widget-members='sib-form-multiple-dropdown', + range-members=`${sdn}/members/`, + bind-resources + ) diff --git a/src/page-group-profile.pug b/src/page-group-profile.pug new file mode 100644 index 0000000..51b33da --- /dev/null +++ b/src/page-group-profile.pug @@ -0,0 +1,36 @@ +script. + document.addEventListener('WebComponentsReady', function(event) { + class HDAppMember extends SIBWidget { + get template() { + return ` +
+ +
+ `; + } + + render() { + store.get(this.value).then( (value) => { + this._value = value; + this.innerHTML = this.template; + }); + } + } + customElements.define("hdapp-member", HDAppMember); + }); + +#group-profile + sib-display( + data-fields='name, description, owner', + widget-owner='hdapp-member', + bind-resources + ) + h2.section.skills Participants + sib-display( + id-suffix='members', + data-fields='avatar, user', + widget-avatar='sib-display-img', + widget-user='hdapp-userinfo', + bind-resources + ) + diff --git a/src/page-group.pug b/src/page-group.pug new file mode 100644 index 0000000..5af3fa7 --- /dev/null +++ b/src/page-group.pug @@ -0,0 +1,18 @@ +sib-router#group-router(default-route='group-chat') + sib-route(name='group-chat') + div Chat + sib-route(name='group-profile') + div Info + sib-route(name='group-edit') + div Éditer + sib-route(name='group-create') + div Nouveau +#network-views-container + #group-chat + include page-group-chat.pug + #group-profile + include page-group-profile.pug + #group-edit + include page-group-edit.pug + #group-create + include page-group-create.pug diff --git a/src/page-groups.pug b/src/page-groups.pug new file mode 100644 index 0000000..575e18b --- /dev/null +++ b/src/page-groups.pug @@ -0,0 +1,7 @@ +#groups + sib-display#groups-list( + data-src=`${sdn}/channels/`, + data-fields='name, description', + search-fields='name, description', + next='group' + ) diff --git a/src/page-member.pug b/src/page-member.pug index d2724ae..926aed6 100644 --- a/src/page-member.pug +++ b/src/page-member.pug @@ -14,5 +14,4 @@ sib-router#member-router(default-route='member-chat') #member-profile include page-member-profile.pug #member-edit - include page-member-edit.pug -mucreokyordoriptyis7 \ No newline at end of file + include page-member-edit.pug \ No newline at end of file diff --git a/src/styles/content.scss b/src/styles/content.scss index 9d167ff..1d14b1a 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -1,7 +1,6 @@ // job offers #offers-list { > div { - display: none; > sib-display { display: block; margin: 1em 0; @@ -11,15 +10,44 @@ &:nth-child(odd) { background-color: $color-white; } - sib-display-div[name=title]{ + sib-display-div[name='title'] { display: block; - @extend h1; - background-color: red; + @extend h2; + } + label { + display: none; + } + hdapp-author { + ul { + @include list-reset(); + } } } } } +// skills +sib-display-lookuplist[name='skills'] { + ul, + li { + display: block; + margin: 0; + padding: 0; + list-style: none; + } + ul { + display: flex; + flex-wrap: wrap; + margin: 0 -0.25em; + } + li { + padding: 0.5em 1em; + border: 1px solid; + border-radius: 0.25em; + margin: 0.25em; + } +} + // chat .chat-view { @@ -32,7 +60,6 @@ } } - .members-list-condensed { display: block; img { @@ -53,10 +80,9 @@ } } - // member-profile && member sib-display#member-info, -#profiles-list>div>sib-display{ +#profiles-list > div > sib-display { display: block; position: relative; background-color: $color-white; @@ -92,4 +118,3 @@ sib-display#member-info, grid-gap: 1em; } } - diff --git a/src/styles/form.scss b/src/styles/form.scss new file mode 100644 index 0000000..99ea8cb --- /dev/null +++ b/src/styles/form.scss @@ -0,0 +1,35 @@ +//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime + + +sib-form{ + form{ + margin: -.5em; + >*{ + margin: .5em; + } + } + + // text like + input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]){ + padding: 0.5em; + border: none; + @extend %shadow; + } + + // button like + button, + input[type=button], + input[type=color], + input[type=file], + input[type=reset], + input[type=submit]{ + padding: 0.5em 1em; + border: none; + background-color: $color-yellow; + border-radius: 100em; + } + + input[type="reset"]{ + display: none; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index f4d6f8a..8a87e48 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -9,6 +9,6 @@ @import 'form'; @import 'content'; -@import 'members'; +// @import 'members'; @import 'menu'; diff --git a/src/styles/members.scss b/src/styles/members.scss new file mode 100644 index 0000000..81fc7a7 --- /dev/null +++ b/src/styles/members.scss @@ -0,0 +1,222 @@ + +// members +%img-circle { + $width: 55%; + display: block; + position: relative; + width: $width; + padding-bottom: $width; + height: 0; + margin: 2em auto; + img { + display: block; + position: absolute; + width: 100%; + height: 100%; + border-radius: 100%; + object-fit: cover; + object-position: center; + } +} + +%member { + sib-display-img { + @extend %img-circle; + } + display: block; + position: relative; + background-color: $color-white; + @extend %shadow; + padding: 0.5em; + cursor: pointer; + + &::before, + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: scale3d(0, 0, 1); + transition: transform 0.3s ease-out 0s; + background: #eac1; + content: ''; + pointer-events: none; + } + + &::before { + transform-origin: left top; + } + + &::after { + transform-origin: right bottom; + + background: #ace1; + } + + &:hover, + &:focus { + &::before, + &::after { + transform: scale3d(1, 1, 1); + } + } +} + +#profiles-list { + display: block; + div[name='header'] { + border-top: 2em solid $color-grey-light; + border-bottom: 1px solid $color-grey-light; + padding-bottom: 1em; + margin: -0.5em; + padding: 0.5em; + margin-bottom: 1em; + text-align: center; + } + + > div { + display: grid; + margin-top: 1em; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 1em; + label { + display: none; + } + + > sib-display { + @extend %member; + } + } + + hdapp-userinfo { + display: block; + color: $color-black; + font-size: 1.1em; + margin: 0.5em; + ul, + li { + display: block; + margin: 0; + padding: 0; + list-style: none; + } + } + + div[name='pseudonym'] { + font-size: 0.8em; + div { + display: inline; + } + } +} + + +// member +%detail-section { + font-weight: bold; + font-size: 18px; +} + +#member-chat { + #conversejs { + margin: none; + } +} +#member-info { + background-color: $color-white; + padding: 1em; + @extend %shadow; +} + +#profiles-list, +#member-info { + img { + display: block; + } + + img { + width: 100%; + } + + div[name='name'] { + @extend %detail-section; + padding-top: 10px; + } + + div[name='name'], + div[name='location'] { + display: flex; + } +} + +#member-detail { + #member-info { + sib-display-mailto, + sib-display-tel { + display: block; + } + + a[name='email'], + a[name='number'] { + &::before { + font-family: FontAwesome; + padding-right: 4px; + color: black; + } + } + a[name='email'] { + &::before { + content: '\f0e0'; + } + } + a[name='number'] { + &::before { + content: '\f10b'; + font-size: 22px; + padding-left: 3px; + padding-right: 7px; + } + } + } + + .section { + position: relative; + + h2 { + @extend %detail-section; + margin-top: 40px; + } + } + + #member-skills { + display: flex; + flex-wrap: wrap; + + sib-display { + display: block; + background-color: $color-black; + color: $color-white; + border-radius: 100px; + padding: 3px 10px; + margin-bottom: 5px; + margin-right: 5px; + } + } +} + +@include media('width>phone') { + #member-detail { + #member-info { + sib-display-img { + display: block; + float: right; + width: 300px; + } + } + } +} + +#member-info { + @extend %member; +} diff --git a/www/.htaccess b/www/.htaccess new file mode 100644 index 0000000..5c88e4c --- /dev/null +++ b/www/.htaccess @@ -0,0 +1,8 @@ + + RewriteEngine On + RewriteBase / + RewriteRule \. - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.html [L] + diff --git a/www/images/logo.png b/www/images/logo.png new file mode 100644 index 0000000..d47b120 Binary files /dev/null and b/www/images/logo.png differ diff --git a/www/images/user.png b/www/images/user.png new file mode 100644 index 0000000..e8a30be Binary files /dev/null and b/www/images/user.png differ diff --git a/www/oidc-client-config.json b/www/oidc-client-config.json new file mode 100644 index 0000000..5cbb8d8 --- /dev/null +++ b/www/oidc-client-config.json @@ -0,0 +1,11 @@ +{ + "authority": "https://test-paris.happy-dev.fr/openid/", + "client_id": "125356", + "redirect_uri": "https://staging-app.happy-dev.fr", + "response_type": "id_token token", + "scope": "openid profile email", + "automaticSilentRenew": true, + "silent_redirect_uri": "https://staging-app.happy-dev.fr", + "loadUserInfo": true +} +