From 24ed10f296bb97633cacfe95fa5173b305289703 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Wed, 9 Jan 2019 15:14:01 +0100 Subject: [PATCH] ui: project-profile page is now ready New CSS rules added, HTML has been modified. Closes #54 --- src/header.pug | 2 +- src/menu.pug | 6 +- src/page-job-offers.pug | 12 +- src/page-members.pug | 27 +-- src/page-project-profile.pug | 74 +++++--- src/styles/content.scss | 96 ++-------- src/styles/index.scss | 3 + src/styles/job-offers.scss | 6 + src/styles/main.scss | 26 ++- src/styles/material-design-icons.scss | 3 +- src/styles/member.scss | 0 src/styles/members.scss | 32 ++-- src/styles/menu.scss | 9 + src/styles/project-profile.scss | 264 ++++++++++++++++++++++++++ src/styles/right-panel.scss | 1 + src/styles/variables.scss | 7 + www/fonts/material-design-icons.svg | 4 + 17 files changed, 431 insertions(+), 141 deletions(-) create mode 100644 src/styles/member.scss create mode 100644 src/styles/project-profile.scss diff --git a/src/header.pug b/src/header.pug index 7daab26..af1b856 100644 --- a/src/header.pug +++ b/src/header.pug @@ -16,7 +16,7 @@ details include page-notifications.pug sib-display#profile( - data-fields='first_name,account.picture', + data-fields='first_name, account.picture', widget-account.picture='sib-display-img', bind-user ) diff --git a/src/menu.pug b/src/menu.pug index ad601e1..fbb76fd 100644 --- a/src/menu.pug +++ b/src/menu.pug @@ -32,7 +32,9 @@ nav#navbar div.sub-menu sib-display( data-src=`${sdn}/projects/`, - data-fields='name', + data-fields='project', + set-project='customer.name, dash, name', + value-dash='-', next='project' ) div.divider @@ -60,7 +62,7 @@ nav#navbar div.sub-menu sib-display( data-src=`${sdn}/members/`, - data-fields='pseudo', + data-fields='user.username', next='member-chat' ) div.divider diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 9db156e..65022e3 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -5,12 +5,18 @@ div.grid-layer sib-display#offers-list( data-src=`${sdn}/job-offers/`, data-fields='status, user-thumb, creation, title, description, skills, send', + set-status='closingDate', widget-closingDate='hdapp-closing-date', - set-user-thumb='author.account.picture, author.first_name, author.groups.ldp:contains.name', + + set-user-thumb='author.account.picture, author.first_name, author.groups', widget-author.account.picture='sib-display-img', + widget-author.groups='sib-display-lookuplist', + set-creation='creationDate', + widget-skills='sib-display-lookuplist', + set-send='before-send-link, send-link', value-before-send-link='', value-send-link='Send a private message', @@ -26,9 +32,9 @@ div.grid-layer sib-link(next="job-offer-create").containerH.containerCenter.action-link div.icon-plus div Post a new offer - sib-link().containerH.containerCenter.how-link + //-sib-link().containerH.containerCenter.how-link div.icon-idea div.grow How To find a new offer? - sib-link().containerH.containerCenter.how-link + //-sib-link().containerH.containerCenter.how-link div.icon-idea div.grow How to set notification? diff --git a/src/page-members.pug b/src/page-members.pug index 77f7869..f3c8e42 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -5,31 +5,32 @@ div.grid-layer h1 Members sib-display#profiles-list( data-src=`${sdn}/members/`, - data-fields='header, infos, groups', + counter-template='${counter} members', + data-fields='header, infos', + set-header='user.account.picture, user, pseudonym, bio, send', - set-infos='cell, user.groups.name, user.email, phone, user.skills', - set-user='user.first_name, user.last_name', + widget-user.account.picture='sib-display-img', + widget-user='hdapp-userinfo', set-pseudonym='before-pseudo,user.username', value-before-pseudo='@', value-send='SEND A MESSAGE', template-send='chat-link', - counter-template='${counter} members', - widget-user.account.picture='sib-display-img', - widget-roles='sib-display-lookuplist', - widget-user='hdapp-userinfo', + + set-infos='city, user.groups, user.email, phone, user.skills', + widget-user.groups='sib-display-lookuplist', widget-user.skills='sib-display-lookuplist', - search-range-roles=`${sdn}/role/`, + search-range-groups=`${sdn}/groups/`, search-range-skills=`${sdn}/skills/`, - search-fields='name, roles, skills', - set-name='pseudo,user.first_name,user.last_name', + search-fields='name, groups, skills', + set-name='pseudo, user.first_name, user.last_name', search-label-name='Search by lastname, firstname...', - search-label-roles='Filter by role', - search-label-skills='Search by skills', search-widget-name='sib-form-placeholder-text', + search-label-groups='Filter by role', + search-label-skills='Search by skills', search-widget-skills='sib-form-placeholder-text', next='member') - div.grid-layer-links.containerV + //-div.grid-layer-links.containerV div.containerH.containerCenter.how-link div.containerV.fix.icon-idea div.containerV.grow diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index f538ab4..ac882b1 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -2,37 +2,63 @@ template#customer-template div#clientBox div - h2 Client : - div.containerH - label Raison Sociale : - span ${value.name} - div.containerV - label Adresse : - span ${value.address} + h5 Client: + ul + li #[span Business name:]${value.name} + li #[span Company register:]${value.companyRegister} + li + span Address: + br + p ${value.address} div - h2 Contact : + h5 Contact: + ul + li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role} + li(name='email') + a(href='mailto:${value.email}') ${value.email} + li(name='phone') ${value.phone} sib-display( - data-fields='title, customer.logo, label-description, description, customer', - set-title='const-title1,phone, customer.name,const-title2, name', - widget-customer.logo='sib-display-img', - template-customer='customer-template', - widget-team='sib-display-lookuplist', - value-label-description="Description:", - value-label-customer="Client:", - value-const-title1="N°:", + data-fields='block-title, infos, block-lead, block-fee, block-customer', + + set-block-title='const-title1, number, customer.name,const-title2, name, entitled, creationDate', + value-const-title1="N°", value-const-title2="-", + value-entitled="Creation date:" + + set-infos='block-description, block-logo', + set-block-description='label-description, description', + set-block-logo='customer.logo', + value-label-description='DESCRIPTION:', + widget-customer.logo='sib-display-img', + + set-block-fee='label-fee, details-cell, details-business', + value-label-fee='FEE:', + set-details-cell='cell-name, cell-fee, percentage', + value-cell-name='Happy Dev Paris:', + value-cell-fee='5', + value-percentage='%', + set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage', + value-business-contribution='Business contribution:', + value-comma=', ', + + set-block-customer='label-customer, customer', + value-label-customer='CUSTOMER INFORMATIONS:' + template-customer='customer-template', bind-resources, ) - h2 Team: - div.containerH - sib-display.members-list-condensed( - id-suffix='team', - data-fields='account.picture, profile.user, groups', - widget-account.picture='sib-display-img', - widget-profile.user='hdapp-userinfo', - widget-groups='sib-display-lookuplist', + div(name='block-team') + h2(name='label-team') Team: + sib-display( + id-suffix='members', + data-fields='teammate-img, teammate-profile, teammate-job', + set-teammate-img='user.account.picture', + set-teammate-profile='user, user.groups', + set-teammate-job='name', + widget-user.account.picture='sib-display-img', + widget-user='hdapp-userinfo', + widget-user.groups='sib-display-lookuplist', next='profile', bind-resources, ) diff --git a/src/styles/content.scss b/src/styles/content.scss index bc1fc32..87ca2fd 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -74,10 +74,10 @@ } // member-profile && members -.members-list-condensed { +/*.members-list-condensed { img { width: 50px; - height: 50px; + height: 100px; border-radius: 100%; object-fit: cover; object-position: top; @@ -88,11 +88,20 @@ } > div > sib-display > div { - margin: 1em 0; display: grid; - grid-template-columns: [first] 50px [middle] auto [end]; - grid-template-rows: [first] 25px [middle] 25px [end]; + grid-template-columns: 0.5fr 2fr; + grid-template-rows: repeat(3, auto); + grid-column-gap: 3rem; align-items: center; + + div[name="teammate-img"] { + background: blue; + grid-row: 1 / -1; + } + + } + + ul{ margin-top: 0px; margin-bottom: 0px; @@ -112,7 +121,7 @@ // ul { // padding-left: 1em; // } -} +}*/ sib-display#member-info { display: flex; @@ -265,81 +274,6 @@ hdapp-available { } } } -// projects - -#project-profile sib-display { - sib-display-div { - > [name^='label-'] { - @extend h2; - } - } - - [name='title'] { - @extend h1; - display: flex; - - > * { - padding-left: 0.5em; - padding-right: 0.5em; - } - - > [name^='const-'] { - padding-left: 0; - padding-right: 0; - } - - > [name='name'] { - font-weight: normal; - } - } -} - -#clientBox { - margin-top: 1em; - display: grid; - grid-template-columns: 50% 50%; - border-top-width: 1px; - border-top-style: solid; - border-left-width: 1px; - border-left-style: solid; - - > * { - label{ - font-weight: bold; - margin-right: 1em; - } - border-right-width: 1px; - border-right-style: solid; - border-bottom-width: 1px; - border-bottom-style: solid; - padding: 1em; - > div{ - margin-bottom: 1em; - } - } -} - -#project-edit form { - display: flex; - flex-direction: column; - align-items: stretch; - - > * { - display: flex; - margin-bottom: 1em; - - label { - flex-basis: 8em; - flex-shrink: 0; - } - - input, - textarea { - flex-grow: 1; - min-width: 0; - } - } -} /* label { diff --git a/src/styles/index.scss b/src/styles/index.scss index 16688e8..417ea29 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -8,10 +8,13 @@ @import 'main'; @import 'form'; @import 'content'; + @import 'filters'; @import 'right-panel'; + @import 'job-offers'; @import 'members'; +@import 'project-profile'; // @import 'members'; @import 'header'; diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss index b3bc5d3..ae07381 100644 --- a/src/styles/job-offers.scss +++ b/src/styles/job-offers.scss @@ -53,6 +53,12 @@ > sib-link { cursor: pointer; + @include icon('speech'); + + &::before { + font-size: 15px; + margin-right: 12px; + } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 4bfc28e..7e815b6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -15,7 +15,7 @@ html { font-family: Open Sans, sans-serif; font-size: 13px; background-color: $color-anti-flash-white; - color: $color-taupe-gray; + color: $color-text-base; } // body { // height: 100%; @@ -59,13 +59,22 @@ h4 { font-size: 0.68em; } +h5 { + font-size: 20px; +} + .debug { outline: 2px dotted red; } +#job-offers, +#members { + @extend %content-padding; +} + .frame { @extend %frame; - padding: 1em; + padding: 3em; } .menu-notification { @@ -176,7 +185,7 @@ h4 { > div { //display: flex; //margin: 2.6em; - padding:2.6em; + //padding:2.6em; //flex: 1 1 0; flex-grow: 1; } @@ -318,3 +327,14 @@ sib-display-lookuplist { font-weight: bold; } } + +div[name*='groups'], +li[name*='groups'] { + border: 1px solid $color-mikado-yellow; + border-radius: 3px; + color: $color-rolling-stone; + font-size: 13px; + font-weight: 400; + margin-left: 1em; + padding: calc(16px - 1em) 0.7em; +} diff --git a/src/styles/material-design-icons.scss b/src/styles/material-design-icons.scss index 226d20d..b53ae2b 100644 --- a/src/styles/material-design-icons.scss +++ b/src/styles/material-design-icons.scss @@ -22,7 +22,8 @@ $mdi-version: "3.3.92" !default; $mdi-icons: ( account-outline: '\F013', - atom: '\F767' + atom: '\F767', + cellphone-iphone: '\F120' ); %mdi, diff --git a/src/styles/member.scss b/src/styles/member.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/members.scss b/src/styles/members.scss index f4334a5..8d0db5f 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -28,7 +28,7 @@ content: ''; position: relative; top: 0.5em; - width: 31.4em; + width: 35.2vw; } &::before { @@ -41,10 +41,10 @@ } > sib-display { - color: $color-rolling-stone; - cursor: pointer; background-color: white; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); + color: $color-rolling-stone; + cursor: pointer; display: flex; flex-flow: column wrap; margin-bottom: 2.5rem; @@ -59,9 +59,9 @@ div[name='header'] { border-bottom: 1px solid $color-anti-flash-white; - padding: 0.5em 0 2em; display: flex; flex-direction: column; + padding: 0.5em 0 2em; > *:not(sib-display-img) { display: flex; @@ -81,13 +81,10 @@ } } - div[name='user'] { + ul[name='user'] { font-weight: bold; + margin: 0; @extend h1; - - sib-display-div[name$='last_name'] { - margin-left: 6px; - } } sib-display-div[name$='bio'] { @@ -118,7 +115,9 @@ div[name='infos'] { - > sib-display-div > div { + > sib-display-div > div, + > sib-display-lookuplist > ul { + margin-bottom: 0; margin-top: 1em; &::before { @@ -128,15 +127,22 @@ } } - ul { + > sib-display-lookuplist[name$='groups'] > ul > li { + border: none; + font-size: inherit; + margin-left: 0; + padding: 0; + } + + > sib-display-lookuplist[name$='skills'] > ul { margin-left: 1em; } - [name$='cell'] * { + [name$='city'] * { @include mdi('atom'); } - [name*='groups'] * { + ul[name*='groups'] { @include mdi('account-outline'); } diff --git a/src/styles/menu.scss b/src/styles/menu.scss index c161793..1b34ce3 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -59,11 +59,20 @@ sib-router { .sub-menu { padding-left: 1.8em; + div { color: $color-spun-pearl; padding-bottom: 0.7em; font-size: 15px; cursor: pointer; + + div[name='project'] { + display: flex; + + sib-display-div[name='dash'] { + margin: 0 0.4em; + } + } } } diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss new file mode 100644 index 0000000..5087ccf --- /dev/null +++ b/src/styles/project-profile.scss @@ -0,0 +1,264 @@ +#project-profile { + + [name^='block-']:not([name='block-title']) { + margin-top: 3em; + + [name^='label-'] { + font-weight: bold; + margin-bottom: 0.8em; + text-transform: uppercase; + @extend h2; + } + + sib-display-div:not(:first-of-type), + ul, + [name*='job'] { + font-size: 15px; + } + } + + [name='block-title'] { + border-bottom: 1px solid $color-link-water; + display: flex; + padding-bottom: 2em; + + > * { + color: $color-dark-lava; + font-size: 20px; + font-weight: bold; + padding-right: 0.5em; + text-transform: uppercase; + } + + > [name^='const-'] { + padding: 0; + } + + > sib-display-div[name='name'] { + padding-left: 0.5em; + } + + > :not(:nth-last-child(n+4)) { + color: $color-purple-dark; + font-weight: normal; + text-transform: none; + } + + > :not(:nth-last-child(n+3)) { + color: $color-text-base; + font-size: 16px; + } + + [name='entitled'] { + margin-left: auto; + } + } + + [name='infos'] { + display: flex; + + [name='description'] { + width: 90%; + } + + [name='block-logo'] { + box-sizing: border-box; + display: block; + height: 8.5vh; + position: relative; + text-align: center; + width: 15vw; + } + } + + + [name^='details-'] { + display: flex; + font-size: 15px; + margin-bottom: 0.5em; + + [name='cell-name'], + [name='business-contribution'] { + font-weight: bold; + margin-right: 5px; + } + + [name='comma'] { + margin-right: 0.2em; + } + } +} + +#clientBox { + display: flex; + margin-left: auto; + margin-right: auto; + margin-top: 1em; + max-width: 100%; + + > * { + border: 1px solid $color-link-water; + flex: 1 1 auto; + justify-content: space-between; + margin: 0 -1px -1px 0; + min-width: 25vw; + padding: 0; + + h5 { + margin-left: 1.1em; + margin-top: 1.2em; + } + + ul { + font-size: 15px; + list-style: none; + margin: -1.2em 0 2.2em -1.2em; + + li { + + span { + font-weight: bold; + } + } + } + + &:first-child { + li { + + span { + margin-right: 0.3em; + } + + &:first-child { + margin-bottom: 0.5em; + } + + &:last-child { + margin-top: 2.4em; + } + } + } + + &:not(:first-child) { + padding-left: 3em; + + li { + margin-bottom: 1em; + + &:last-child { + margin-top: 1.3em; + } + + &::before { + color: $color-selective-yellow; + font-size: 20px; + padding: 0 0.6em 0 0; + } + } + + [name$='name'] { + @include mdi('account-outline'); + + &::before { + padding-left: 0.2em; + } + } + + [name$='email'] { + @include icon('envelope'); + } + + [name$='phone'] { + @include mdi('cellphone-iphone'); + + &::before{ + padding-left: 0.2em; + } + } + } + } +} + +[name='block-team'] { + + > sib-display > div > sib-display > div { + align-items: center; + display: grid; + grid-template-columns: 5vw 2fr; + grid-template-rows: repeat(2, 5.2vh); + + label { + display: none; + } + + [name='teammate-profile'], + [name='teammate-img'], + [name='teammate-job'] { + margin: 0; + width: auto; + } + + [name='teammate-img'] { + grid-row: 1 / -1; + + img { + border: 0; + border-radius: 100%; + display: block; + font-size: 100%; + margin: 0; + padding: 0; + width: 75%; + } + } + + [name='teammate-profile'] { + align-self: end; + + hdapp-userinfo { + display: inline-block; + height: 0; + + > ul { + font-weight: 600; + padding-inline-start: 0; + } + } + + sib-display-lookuplist { + display: inline-block; + + > ul { + margin-block-end: 0; + margin-block-start: 0; + } + } + } + + [name='teammate-job'] { + align-self: start; + } + } +} + +#project-edit form { + display: flex; + flex-direction: column; + align-items: stretch; + + > * { + display: flex; + margin-bottom: 1em; + + label { + flex-basis: 8em; + flex-shrink: 0; + } + + input, + textarea { + flex-grow: 1; + min-width: 0; + } + } +} diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss index 7c76d42..1fe0d30 100644 --- a/src/styles/right-panel.scss +++ b/src/styles/right-panel.scss @@ -36,6 +36,7 @@ color: $color-white; font-weight: bold; text-transform: uppercase; + cursor: pointer; .icon-plus { font-size: 20px; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d0cc334..60f8e1b 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,15 +4,18 @@ $color-timberwolf: hsl(0, 0%, 85%); $color-white: hsl(0, 0%,100%); $color-selective-yellow: hsl(43, 100%, 50%); +$color-mikado-yellow: hsl(45, 95%, 54%); $color-mustard: hsl(46, 100%, 67%); $color-rolling-stone: hsl(210, 4%, 50%); $color-taupe-gray: hsl(210, 5%, 56%); $color-anti-flash-white: hsl(210, 25%, 95%); +$color-text-base: hsl(213, 4%, 50%); $color-gainsboro: hsl(213, 13%, 86%); $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2); $color-bombay: hsl(215, 9%, 73%); $color-dark-lava: hsl(216, 4%, 22%); +$color-link-water: hsl(221, 51%, 90%); $color-purple-dark: hsl(233, 18%, 29%); $color-spun-pearl: hsl(244, 10%, 70%); $color-majorelle-blue: hsl(244, 73%, 62%); @@ -22,6 +25,10 @@ $color-majorelle-blue: hsl(244, 73%, 62%); box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); } +%content-padding { + padding: 2.6em; +} + %frame { @extend %shadow; background-color: $color-white; diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg index 5b4f68c..2b1e8e6 100644 --- a/www/fonts/material-design-icons.svg +++ b/www/fonts/material-design-icons.svg @@ -15,6 +15,10 @@ + +