autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui: project-profile page is now ready

Browse Source 
New CSS rules added, HTML has been modified.

Closes #54
This commit is contained in:
Gaelle Morin
2019-01-09 15:14:01 +01:00
committed by Gaëlle Morin
parent 52cc577048
commit 24ed10f296
17 changed files with 431 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/styles/content.scss
View File

@ -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 {

3
src/styles/index.scss
View File

@ -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';

6
src/styles/job-offers.scss
View File

@ -53,6 +53,12 @@
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 15px;
margin-right: 12px;
}
}
}

26
src/styles/main.scss
View File

@ -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;
}

3
src/styles/material-design-icons.scss
View File

@ -22,7 +22,8 @@ $mdi-version: "3.3.92" !default;
$mdi-icons: (
account-outline: '\F013',
atom: '\F767'
atom: '\F767',
cellphone-iphone: '\F120'
);
%mdi,

0
src/styles/member.scss Normal file
View File

32
src/styles/members.scss
View File

@ -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');
}

9
src/styles/menu.scss
View File

@ -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;
}
}
}
}

264
src/styles/project-profile.scss Normal file
View File

@ -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;
}
}
}

1
src/styles/right-panel.scss
View File

@ -36,6 +36,7 @@
color: $color-white;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
.icon-plus {
font-size: 20px;

7
src/styles/variables.scss
View File

@ -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;