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

ui: style member, job, group

Browse Source
This commit is contained in:
Clément
2018-10-31 10:38:41 +01:00
parent 1c35e83a58
commit e3fa784a54
28 changed files with 739 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/styles/content.scss
View File

@ -1,11 +1,16 @@
// job offers
.new-job-offer {
@extend %button;
text-transform: uppercase;
float: right;
}
#offers-list {
> div {
> sib-display {
display: block;
margin: 1em 0;
@extend %frame;
padding: 0.5em 1em;
padding: 2em;
/*&:nth-child(odd) {
background-color: $color-grey-light;
}*/
@ -16,37 +21,73 @@
label {
display: none;
}
hdapp-author {
ul {
@include list-reset();
}
}
}
}
}
[name='user-thumb'] {
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
width: 2.5em;
height: 2.5em;
overflow: hidden;
border-radius: 100%;
}
}
[name='date'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %button;
}
}
// skills
sib-display-lookuplist[name='skills'] {
ul,
li {
#member-profile sib-display-lookuplist,
#profiles-list sib-display-lookuplist,
sib-display-lookuplist {
&[name$='skills'] {
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;
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 1em -0.25em;
}
li {
padding: 0.5em 1em;
border: 1px solid;
border-radius: 0.25em;
margin: 0.25em;
}
}
}
// group
#group-profile {
sib-display-div[name='name'] div {
@extend h1;
}
sib-display-div[name='label-description'] div {
@extend h2;
}
}
// chat
.chat-view {
@ -61,6 +102,7 @@ sib-display-lookuplist[name='skills'] {
}
}
// member-profile && members
.members-list-condensed {
display: block;
img {
@ -74,6 +116,7 @@ sib-display-lookuplist[name='skills'] {
display: none;
}
> div > sib-display > div {
margin: 1em 0;
display: flex;
}
ul {
@ -81,14 +124,15 @@ sib-display-lookuplist[name='skills'] {
}
}
// member-profile && member
#profiles-list > div > sib-display {
cursor: pointer;
}
sib-display#member-info,
#profiles-list > div > sib-display {
display: block;
position: relative;
@extend %frame;
padding: 1em;
cursor: pointer;
label {
display: none;
@ -113,7 +157,7 @@ sib-display#member-info,
}
div[name='header'] {
border-top: 2em solid $color-grey-light;
// border-top: 2em solid $color-grey-light;
border-bottom: 1px solid $color-grey-light;
padding-bottom: 1em;
margin: -0.5em;
@ -129,11 +173,43 @@ sib-display#member-info,
display: inline;
}
}
ul{
@include list-reset();
[name=infos]{
margin: 2em 0;
>*{
display: block;
margin: 0.5em 0;
}
}
ul[name$='roles'] * {
@include icon('user');
}
ul[name$='cell'] * {
@include icon('location-pin');
}
sib-display-mailto {
display: block;
@include icon('envelope');
}
sib-display-tel {
display: block;
@include icon('phone');
}
hdapp-hyperlink {
display: block;
@include icon('link');
}
sib-display-div[name$='foaf:homepage'] * {
@include icon('link');
}
}
hdapp-available {
display: block;
text-align: right;
strong {
@extend %button;
}
}
#profiles-list {
@ -145,9 +221,44 @@ sib-display#member-info,
grid-gap: 1em;
}
}
#member-profile,
#profiles-list {
ul {
@include list-reset();
}
}
#member-profile {
@include media('width>tablet') {
div[name='header'] {
float: left;
width: 50%;
}
}
div[name='name'] {
@extend h1;
div {
display: inline-block;
margin-right: 0.4em;
}
}
div[name='pseudonym'] {
margin-top: -1em;
margin-bottom: 1em;
}
#member-info {
&:after {
content: '';
display: block;
clear: both;
}
}
}
// projects
#project-profile {
div[name^='label-'] {
@extend h2;
}
[name='title'] {
@extend h1;
> sib-display-div {
@ -159,6 +270,13 @@ sib-display#member-info,
content: '#';
}
}
div[name='name'] {
font-weight: normal;
&:before {
padding: 0 0.5em;
content: '/';
}
}
}
}
/*
@ -168,4 +286,4 @@ label {
content: ':';
}
}
*/
*/

18
src/styles/form.scss
View File

@ -1,11 +1,18 @@
//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
%button {
display: inline-block;
padding: 0.5em 1em;
border: none;
border-radius: 100em;
background-color: $color-yellow;
color: $color-black;
font-weight: normal;
}
.form-view {
@extend %frame;
padding: 1em;
}
sib-form.inline form {
sib-display sib-form form {
margin: -0.5em;
> * {
margin: 0.5em;
@ -73,10 +80,7 @@ sib-form {
input[type='file'],
input[type='reset'],
input[type='submit'] {
padding: 0.5em 1em;
border: none;
background-color: $color-yellow;
border-radius: 100em;
@extend %button;
}
input[type='reset'] {

4
src/styles/icons.scss
View File

@ -90,7 +90,7 @@ $icons: (
fire: '\e01c',
eyeglass: '\e01d',
envelope-open: '\e01e',
envolope-letter: '\e01f',
envelope-letter: '\e01f',
energy: '\e020',
emotsmile: '\e021',
disc: '\e022',
@ -193,7 +193,7 @@ $icons: (
cloud-download: '\e083',
cloud-upload: '\e084',
doc: '\e085',
envolope: '\e086',
envelope: '\e086',
eye: '\e087',
flag: '\e088',
folder: '\e089',

18
src/styles/main.scss
View File

@ -4,7 +4,9 @@
display: none !important;
}
*,*::before,*::after{
*,
*::before,
*::after {
box-sizing: inherit;
}
@ -41,19 +43,27 @@ h6 {
}
h1 {
font-size: 1.23em;
font-size: 1.24em;
}
h2 {
font-size: 1.16em;
font-size: 1.04em;
}
h3 {
font-size: 1.12em;
font-size: .84em;
}
h4 {
font-size: 0.68em;
}
.debug {
outline: 2px dotted red;
}
.frame {
@extend %frame;
padding: 1em;
}
#header {
background-color: $color-white;
color: $color-black;

220
src/styles/members.scss
View File

@ -1,220 +0,0 @@
// 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;
@extend %frame;
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 {
padding: 1em;
@extend %frame;
}
#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;
}