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

ui(all pages): MR!13 - Upgrade to core v0.6

Browse Source 
Fixed responsive issue on counter in /members page
Had to modify some CSS files, create templates, modify data-fields in sib-display, clean up and refactor
Removed custom-widgets
This commit is contained in:
Gaëlle Morin
2019-03-25 16:35:36 +01:00
parent 9681943289
commit 05d71de379
27 changed files with 422 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/styles/content.scss
View File

@ -7,23 +7,6 @@
// //float: right;
// }
[name='user-thumb'] {
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
width: 4.25rem;
height: 4.25rem;
overflow: hidden;
border-radius: 100%;
}
}
// skills
/*#member-profile sib-display-lookuplist {

3
src/styles/filters.scss
View File

@ -4,7 +4,6 @@
grid-gap: 0px 15px;
grid-template-columns: 50% 50%;
grid-template-rows: 3.5em 3.5em;
padding-bottom: 4.8rem;
label {
display: block;
@ -51,7 +50,7 @@
}
#offers-list, #profiles-list {
& > sib-form > form {
& > sib-form {
@extend %filters;
}
}

6
src/styles/form.scss
View File

@ -17,6 +17,7 @@
#job-offer-create,
#project-create,
#project-edit {
flex: 1;
font-size: 1.7rem;
h1 {
@ -31,7 +32,7 @@
text-align: center;
}
p[name$='-text'] {
[name$='-text'] {
font-size: 1.5rem;
margin-bottom: 2em;
}
@ -63,6 +64,7 @@
border: none;
color: $color-purple-dark;
line-height: 1.5;
width: 95%;
}
input,
@ -100,7 +102,7 @@
margin-top: 1.7rem;
div.choices__item {
@extend %skill;
/*@extend %skill;*/
button.choices__button {
border-left: 1px solid $color-selective-yellow;

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

@ -21,88 +21,102 @@
> sib-display {
@extend %frame;
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-anti-flash-white;
}*/
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
> * {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-quartz;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
li {
@extend %group;
}
}
sib-display-img {
background-color: $color-white;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
margin-bottom: 0.7rem;
margin-top: 2rem;
}
sib-display-div[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
label {
display: none;
[name='description'] {
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 1.3rem;
float: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
}
}
}
[name='creation'] {
margin-top: 2rem;
}
[name='description'] {
line-height: 1.6;
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 1.3rem;
text-align: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
[name='user-thumb'] {
align-items: center;
color: $color-quartz;
display: flex;
font-weight: 600;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
border-radius: 100%;
height: 2.5em;
overflow: hidden;
width: 2.5em;
}
div[name*='roles'] {
border: 1px solid yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.5rem;
font-weight: 400;
margin-left: 1.7rem;
padding: calc(16px - 0.8em) 0.7em;
}
}

74
src/styles/main.scss
View File

@ -78,6 +78,12 @@ button {
-webkit-appearance: none;
}
li {
list-style: none;
margin-right: 0.4rem;
padding-left: 0;
}
#job-offers,
#members {
@extend %content-padding;
@ -205,65 +211,21 @@ sib-link.back {
}
/*sib-display-lookuplist[name$="skills"] {
display: flex;
}*/
/* TEMPLATE SKILLS*/
sib-display-lookuplist {
sib-multiple[name*='skills'] {
display: flex;
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
li[name*='skills'] {
@extend %skill;
}
flex-wrap: wrap;
}
div[name*='groups'],
li[name*='groups'] {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.3rem;
font-weight: 400;
margin-left: 1.7rem;
padding: calc(16px - 1em) 0.7em;
&:first-of-type {
margin-left: 0;
}
.skill {
background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
font-size: 1.4rem;
font-weight: bold;
margin: 0.4rem 0.4rem 0.4rem 0;
padding: 0.5rem 2rem;
}
[name='user-thumb'] {
align-items: center;
color: $color-quartz;
display: flex;
font-weight: 600;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
border-radius: 100%;
height: 2.5em;
overflow: hidden;
width: 2.5em;
}
div[name*='roles'] {
border: 1px solid yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 15px;
font-weight: 400;
margin-left: 1em;
padding: calc(16px - 0.8em) 0.7em;
}
}

35
src/styles/member-profile.scss
View File

@ -60,16 +60,13 @@
font-weight: bold;
@extend h1;
}
sib-display-lookuplist[name='user.groups'] {
label {
display: none;
}
> ul {
margin-block-end: 0;
margin-block-start: 0;
> sib-multiple[name$='groups'] {
display: flex;
padding-left: 1.4rem;
li {
@extend %group;
}
}
}
@ -92,13 +89,13 @@
@extend %member-info;
}
#member-status {
status-template[name$='available']{
align-self: flex-end;
color: $color-majorelle-blue;
grid-area: status;
justify-self: flex-end;
> span {
span {
align-items: center;
align-self: center;
display: flex;
@ -107,7 +104,7 @@
line-height: 2;
}
> span.status-one {
span.status-one {
@include ci('awareness');
&::before {
@ -117,7 +114,7 @@
}
}
> span.status-two {
span.status-two {
@include ci('armor');
&::before {
@ -128,17 +125,21 @@
}
}
[next=member-chat] {
sib-action[name='send'] {
align-self: flex-end;
grid-area: button;
justify-self: flex-end;
}
[next=member-chat] {
@include icon('speech');
border: 1px solid $color-majorelle-blue;
border-radius: 2em;
color: $color-majorelle-blue;
font-size: 18px;
font-weight: bold;
grid-area: button;
justify-self: end;
padding: 0.6em 1.5em 0.4em;
@include icon('speech');
&::before {
font-size: 25px;

38
src/styles/members.scss
View File

@ -55,23 +55,26 @@
color: $color-quartz;
font-weight: bold;
justify-content: center;
margin-bottom: 3.75rem;
white-space: nowrap;
&::before, &::after {
border-top: 1px solid $color-timberwolf;
content: '';
position: relative;
top: 0.85rem;
width: 35.2vw;
}
margin: 3.75rem 0;
position: relative;
z-index: 1;
&::before {
right: 5.1rem;
border-top: 1px solid $color-timberwolf;
bottom: 0;
content: '';
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
width: 100%;
z-index: -1;
}
&::after {
left: 5.1rem;
span {
background-color: $color-anti-flash-white;
padding: 0 60px;
}
}
@ -106,7 +109,7 @@
}
sib-display-img {
background-color: white;
background-color: $color-white;
border-radius: 50%;
height: 28vh;
margin: 1.7rem auto;
@ -114,7 +117,6 @@
position: relative;
width: 28vh;
img {
height: 100%;
left: 0;
@ -125,7 +127,7 @@
}
}
ul[name='user'] {
[name='user.name'] {
font-weight: bold;
margin: 0;
@extend h1;
@ -161,6 +163,10 @@
padding: 0 1.7rem;
@extend %member-info;
sib-multiple[name$='groups'] {
display: flex;
}
}
}
}

12
src/styles/menu-right.scss
View File

@ -5,7 +5,7 @@
nav {
> sib-router {
background-color: $color-link-water;
background-color: $color-222-52-90;
color: $color-purple-dark;
flex: 0 0 auto;
font-weight: 600;
@ -20,9 +20,7 @@
align-items: center;
border-bottom: 1px solid $color-lavender-gray;
display: flex;
margin-bottom: 0;
margin-left: 0;
margin-top: 0;
margin: 0;
padding: 2.55rem 2.55rem;
position: relative;
width: 12em;
@ -31,7 +29,7 @@
float: left;
font-size: 4rem;
margin-left: 0;
margin-right: 1.5rem;
margin-right: 2.55rem;
}
}
@ -75,7 +73,7 @@
}
&.offsite-is-closed {
transform: translate(12rem);
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
@ -83,7 +81,7 @@
& ~ #views-container {
flex-basis: 95%;
transform: translate(12rem);
transform: translate(15.5rem);
}
}
}

110
src/styles/project-profile.scss
View File

@ -38,7 +38,7 @@
padding-left: 0.85rem;
}
> :not(:nth-last-child(n+4)) {
> :nth-child(5) {
color: $color-purple-dark;
font-weight: normal;
text-transform: none;
@ -47,6 +47,13 @@
[name='entitled'] {
margin-left: auto;
}
> :nth-last-child(-n+2) {
color: $color-text-base;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
}
}
[name='infos'] {
@ -176,62 +183,67 @@
[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;
}
> sib-multiple {
[name='teammate-img'] {
grid-row: 1 / -1;
img {
border: 0;
border-radius: 100%;
display: block;
font-size: 100%;
margin: 0;
padding: 0;
width: 75%;
> team-template[name='members'] {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
> sib-display:first-child {
align-self: center;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
div {
background-color: $color-white;
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%;
}
}
}
}
[name='teammate-profile'] {
align-self: end;
hdapp-userinfo {
display: inline-block;
height: 0;
> ul {
> div:nth-child(2) {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
span {
align-self: center;
font-weight: 600;
padding-inline-start: 0;
}
span ~ sib-display {
div {
display: flex;
div[name='name'] {
@extend %group;
margin-left: 1rem;
}
}
}
}
sib-display-lookuplist {
display: inline-block;
> ul {
margin-block-end: 0;
margin-block-start: 0;
}
> span:nth-child(3) {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}
[name='teammate-job'] {
align-self: start;
}
}
}

42
src/styles/variables.scss
View File

@ -18,6 +18,7 @@ $color-bombay: hsl(215, 9%, 73%);
$color-manatee: hsl(215, 6%, 63%);
$color-dark-lava: hsl(216, 4%, 22%);
$color-link-water: hsl(221, 51%, 90%);
$color-222-52-90: hsl(222, 52%, 90%);
$color-glitter: hsl(222, 57%, 95%);
$color-lavender-gray: hsl(229, 25%, 79%);
$color-purple-dark: hsl(233, 18%, 29%);
@ -38,6 +39,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
}
%content-padding {
flex: 1;
padding: 4.4rem;
}
@ -46,14 +48,21 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
background-color: $color-white;
}
%member-info {
label {
display: none;
}
%group {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.4rem;
font-weight: 400;
padding: calc(1.6rem - 0.8em) 0.7em;
}
> sib-display-div > div,
> sib-display-lookuplist > ul {
%member-info {
sib-multiple[name^='user.'],
> sib-display-div > div {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
@ -62,19 +71,12 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
padding: 0 0.6em 0 0;
}
}
> sib-display-lookuplist[name$='groups'] > ul > li {
border: none;
font-size: inherit;
margin-left: 0;
padding: 0;
}
[name$='city'] * {
@include mdi('atom');
}
ul[name*='groups'] {
sib-multiple[name='user.groups'] {
@include mdi('account-outline');
}
@ -116,16 +118,6 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
}
%skill {
background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
font-weight: bold;
margin: 0.4rem;
padding: 0.5rem 2rem;
}
%status-open {
background-color: $color-majorelle-blue;
border: none;