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

feature: project-profile page

Browse Source 
- css added or reviewed
- templates added or reviewed (customer, business provider, team)
- modal added and stylised
- routes reviewed
- navbar reviewed (adapted according to the content of the main section
- admin status added
- new staging added.
This commit is contained in:
Gaëlle Morin
2019-12-18 18:50:47 +00:00
committed by Jean-Baptiste Pasquier
parent 255083d2c1
commit 40e103fc00
25 changed files with 485 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/styles/base/form.scss
View File

@ -381,74 +381,5 @@
}
}
}
[widget='hd-project-members'] {
display: flex;
flex-wrap: wrap;
width: 100%;
&>label {
display: none;
}
&>div {
align-items: center;
border: 1px solid $color-43-100-50;
border-radius: 3px;
display: flex;
margin: 0 1.5rem 1.5rem 0;
padding: 2.2rem;
.member-info>div {
display: grid;
grid-template-areas: "avatar name"
"avatar role";
grid-column-gap: 15px;
margin-right: 15px;
}
&>button {
cursor: pointer;
background-color: transparent;
border: 1px solid $color-43-100-50;
border-radius: 50%;
color: $color-43-100-50;
height: 22px;
width: 22px;
}
}
&>button {
display: none;
}
sib-display-img {
grid-area: avatar;
align-items: center;
background-color: #e3e8ed;
border-radius: 50%;
display: flex;
height: 45px;
justify-content: center;
overflow: hidden;
width: 45px;
img {
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
}
sib-display-value:first-of-type {
font-weight: 600;
grid-area: name;
}
sib-display-value:last-of-type {
grid-area: role;
}
}
}
}

121
src/styles/base/main.scss
View File

@ -19,37 +19,41 @@ $breakpoints: (phone: 480px,
body {
background-color: $color-210-25-95;
color: $color-213-4-50;
display: flex;
flex-direction: column;
font-size: 1.6rem;
height: 100vh;
overflow: hidden;
min-height: 100vh;
overflow-wrap: break-word;
}
main {
display: flex;
flex-direction: row;
height: 100%;
max-width: 100%;
overflow: hidden;
}
}
/* Quick fix. Will be removed later */
#admin-circles {
display: contents;
}
img {
max-height: 100%;
max-width: 100%;
}
h1,
.h1-like,
h2,
.h2-like,
h3,
h4,
h5,
h6 {
color: $color-216-4-22;
font-weight: 600;
padding: 0;
font-weight: bold;
/*span {
font-weight: 400;
@ -61,15 +65,26 @@ h6 {
}*/
}
h1 {
font-size: 2rem;
.h2-like {
display: block;
margin: 14.94px 0;
width: 100%;
}
h2 {
h1, .h1-like {
color: $color-233-18-29;
font-size: 2rem;
text-transform: uppercase;
}
h2, .h2-like {
color: $color-216-4-22;
font-size: 1.8rem;
text-transform: uppercase;
}
h3 {
color: $color-216-4-22;
font-size: 1.7rem;
}
@ -101,7 +116,7 @@ h5 {
flex: 1;
font-size: 1.6rem;
margin: 0 auto;
min-height: calc(100vh - 84px);
min-height: 100%;
}
&.with-padding {
@ -110,21 +125,54 @@ h5 {
}
.content-box__header {
padding: 1.9rem 3rem;
border-bottom: 1px solid $color-221-51-90;
padding: 3rem;
div {
color: $color-233-18-29;
display: flex;
font-size: 2rem;
&>* {
align-self: center;
.h1-aside {
font-size: 1.8rem;
&:not(:empty)::before {
color: $color-233-18-29;
content: '- ';
font-size: 2rem;
font-weight: bold;
margin-left: 0.60rem;
}
}
.description {
color: $color-215-6-63;
}
.name {
font-size: 2rem;
font-weight: bold;
margin: 1.1rem 0;
color: $color-233-18-29;
font-weight: normal;
}
}
}
.modal {
color: white;
margin: 75px;
padding: 40px;
max-height: 85vh;
text-align: center;
img {
max-width: 75%;
}
sib-link {
font-size: 2.7rem;
position: absolute;
right: 32px;
top: 32px;
button {
color: $color-233-18-29;
}
}
}
@ -134,30 +182,6 @@ h5 {
border: 0;
}
.content-box__header.with-description {
border-bottom: 1px solid $color-221-51-90;
div {
.name {
text-transform: uppercase;
}
.description {
color: $color-215-6-63;
font-size: 1.8rem;
&:not(:empty)::before {
color: $color-216-4-22;
content: '- ';
font-size: 2rem;
font-weight: bold;
margin-left: 0.60rem;
}
}
}
}
.backlink {
@include icon('arrow-left-circle');
color: $color-233-18-29;
@ -191,6 +215,10 @@ h5 {
padding-bottom: 1.4rem;
}
.position-end {
text-align: end;
}
.section {
border-bottom: 1px solid $color-221-51-90;
padding: 4.5rem;
@ -202,7 +230,6 @@ h5 {
@import 'form';
@import 'header';
@import 'menu-left';
@import 'user-avatar';
// Button global CSS
sib-delete,

3
src/styles/base/menu-left.scss
View File

@ -3,7 +3,8 @@
color: $color-0-0-100;
display: block;
max-width: 250px;
overflow: auto;
min-height: calc(100vh - 83px); /* 83px = nav height */
flex: 1;
/*transition: flex-basis 0.5s ease-in-out;*/
&.open {

29
src/styles/base/user-avatar.scss
View File

@ -1,29 +0,0 @@
.project-profile-user-avatar {
align-self: center;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
display: inline;
* {
height: 100%;
width: 100%;
}
div {
background-color: $color-0-0-100;
border-radius: 50%;
height: 7vh;
overflow: hidden;
position: relative;
width: 7vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}

4
src/styles/components/sidebar.scss
View File

@ -8,11 +8,10 @@
display: flex;
flex-direction: row;
align-items: stretch;
overflow-x: hidden;
overflow: hidden;
.views-container {
flex: 1 0 0;
overflow-y: auto;
-webkit-backface-visibility: hidden;
&.sidebar-is-closed {
@ -26,6 +25,7 @@
}
nav {
background: $color-210-25-95;
transition: all 0.5s;
>sib-router {

5
src/styles/index.scss
View File

@ -10,8 +10,9 @@
div#viewport {
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex: 1;
/*height: auto;
min-height: 100vh;*/
overflow-y: auto;
@import 'components/index';
@import 'layout/members/index';

6
src/styles/layout/circle/circle.scss
View File

@ -3,12 +3,6 @@
#admin-circle-list,
#admin-circle-create {
h2 {
font-size: 1.7rem;
font-weight: bold;
text-transform: uppercase;
}
.content-box__info {
@extend %padding-block;
display: flex;

3
src/styles/layout/project-profile/_index.scss
View File

@ -1 +1,2 @@
@import 'project-profile'
@import 'project';
@import 'project-profile';

297
src/styles/layout/project-profile/project-profile.scss
View File

@ -1,233 +1,150 @@
#project-profile {
[name^='block-']:not([name='block-title']) {
margin-top: 5.1rem;
[name^='label-'] {
display: block;
font-weight: bold;
margin: 1.4rem 0;
text-transform: uppercase;
@extend h2;
}
sib-display-value:not(:first-of-type),
ul,
[name*='job'] {
font-size: 1.5rem;
}
.button-question__position {
position: relative;
bottom: 5px;
}
[name='block-title'] {
border-bottom: 1px solid $color-221-51-90;
.button-question__color {
color: $color-216-4-22;
}
.customer-box {
display: flex;
padding-bottom: 3.4rem;
>* {
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
padding-right: 0.85rem;
text-transform: uppercase;
}
>[name^='const-'] {
padding: 0;
}
>sib-display-value[name='name'] {
padding-left: 0.85rem;
}
> :nth-child(5) {
color: $color-233-18-29;
font-weight: normal;
text-transform: none;
}
[name='entitled'] {
margin-left: auto;
}
> :nth-last-child(-n+2) {
color: $color-213-4-50;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
}
}
[name='infos'] {
display: flex;
justify-content: space-between;
[name='description'] {
display: flex;
flex-direction: column;
width: 90%;
}
[name='block-logo'] {
box-sizing: border-box;
display: block;
height: 8.5vh;
position: relative;
text-align: end;
width: 15vw;
}
}
[name='businessProvider'] {
ul {
list-style: none;
padding-left: 0;
li {
&:first-child {
margin-bottom: 0.5em;
}
span {
font-weight: bold;
}
}
}
}
#clientBox {
display: flex;
margin: 1.7rem auto;
max-width: 100%;
margin: 1.6rem 0;
>* {
border: 1px solid $color-221-51-90;
flex: 1 1 auto;
justify-content: space-between;
margin: 0 -0.1rem -0.1rem 0;
min-width: 25vw;
padding: 0;
h5 {
margin-left: 2rem;
margin-top: 2rem;
}
ul {
font-size: 1.5rem;
list-style: none;
margin: -2.04rem 0 3.74rem -2.04rem;
li {
span {
font-weight: bold;
}
}
}
flex: 0 1 50%;
padding: 1.7rem 2rem;
&:first-child {
li {
span {
margin-right: 0.3em;
}
li:last-child {
margin-top: 3rem;
&:first-child {
margin-bottom: 0.5em;
p {
margin-top: 0.8rem;
}
}
&:last-child {
margin-top: 2.4em;
}
span {
margin-right: 0.6rem;
}
}
&:not(:first-child) {
padding-left: 5.1rem;
&:last-child {
border-left: none;
li {
margin-bottom: 1.7rem;
&:last-child {
margin-top: 2.2rem;
}
&::before {
color: $color-43-100-50;
font-size: 2.2rem;
padding: 0 1rem 0 0;
}
margin-bottom: 1.5rem;
}
}
}
}
[name='block-team'], [name='block-captain'] {
label {
display: none;
}
.customer-logo {
box-sizing: border-box;
display: flex;
height: 8.5vh;
justify-content: flex-end;
margin-top: 20px;
text-align: end;
width: 15vw;
}
sib-display.project-profile-user-avatar {
hd-captain>sib-display>div,
circle-team-template>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
>[name='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
border-radius: 50%;
display: flex;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
height: 7vh;
justify-content: center;
overflow: hidden;
position: relative;
width: 7vh;
div {
background-color: $color-0-0-100;
border-radius: 50%;
height: 7vh;
overflow: hidden;
position: relative;
width: 7vh;
img {
background-color: white;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
object {
height: 45%;
width: 45%;
}
}
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name='name'] {
font-weight: 600;
}
sib-multiple {
display: flex;
margin-left: 1rem;
[name='groups'] {
@extend %user-role;
}
}
}
project-team-template[name='members'], captain-template[name='captain'] {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
>[name='sub'] {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
margin-top: 0.50rem;
> div:nth-child(2) {
align-self: end;
>[name$='profile.city']:not(:empty) {
@include mdi('atom');
align-items: center;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
span {
align-self: center;
font-weight: 600;
}
span ~ sib-display {
> div {
display: flex;
margin-left: 1rem;
sib-multiple [name='name'] {
@extend %user-role;
}
}
&::before {
color: $color-43-100-50;
margin-right: 0.50rem;
}
}
}
}
> span:nth-child(3) {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
ul {
list-style: none;
padding-left: 0;
li {
margin-bottom: 0.5em;
&::before {
color: $color-43-100-50;
font-size: 2.2rem;
margin: 0 1rem 0 0;
}
span {
font-weight: bold;
}
}
}

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

@ -0,0 +1,8 @@
#project-profile {
.content-box__info {
@extend %padding-block;
display: flex;
flex-direction: column;
}
}