style members & jobs

This commit is contained in:
Clément 2018-09-29 02:22:00 +02:00
parent b74f4f9871
commit 72a47b9cb6
10 changed files with 271 additions and 32 deletions

2
.gitignore vendored
View File

@ -2,7 +2,7 @@
/www/index.html
/www/styles/
/www/scripts/
/www/lib
/www/lib/
!/www/lib/sib-core
!/www/lib/sib-router
!/www/lib/sib-chat

View File

@ -27,7 +27,8 @@ script.
});
div
h1 Job offers
h1 New offers
span // Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
data-fields='author, title, description, skills',

View File

@ -1 +1,72 @@
div member
script.
document.addEventListener("WebComponentsReady", function(event) {
class HDAppUserInfo extends SIBDisplayLookupList {
get parentElement() {return "div"}
getTemplate(value, index) {
var firstname, lastname, email;
if(typeof value == "object")
if(Object.keys(value).length > 1) {
firstname = value.first_name;
lastname = value.last_name;
email = value.email;
}
else {
store.get(value).then(resource => {
this.value.push(resource);
this.render();
});
if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
else this.value = [];
return '';
}
return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>`;
// + `<div id="${email}">${email}</div>`;
}
}
customElements.define('hdapp-userinfo', HDAppUserInfo);
class HDAppCell extends SIBDisplayLookupList {
get parentElement() {return "div"}
getTemplate(value, index) {
var city, country;
if(typeof value == "object")
if(Object.keys(value).length > 1) {
city = value.city;
country = value.country;
}
else {
store.get(value).then(resource => {
this.value.push(resource);
this.render();
});
if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
else this.value = [];
return '';
}
return `<span id="${city}-${country}">${city} ${country}</span>`;
}
}
customElements.define("hdapp-usercell", HDAppCell);
});
div
h1 Members
sib-display#profiles-list(
data-src=`${sdn}/members/`,
data-fields='header, cell, skills',
set-header='avatar, user, pseudonym, bio'
set-pseudonym='before-pseudo, pseudo'
value-before-pseudo='@',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
widget-cell='hdapp-usercell',
widget-skills='sib-display-lookuplist',
set-searchset='user.first_name, user.last_name',
search-fields='searchset',
next='member'
)

146
src/styles/content.scss Normal file
View File

@ -0,0 +1,146 @@
// job offers
#offers-list {
> div {
> sib-display {
display: block;
margin: 1em 0;
@extend %shadow;
background-color: $color-white;
padding: 0.5em 1em;
&:nth-child(odd) {
background-color: $color-white;
}
}
}
}
// members
%member {
display: grid;
margin-top: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
label {
display: none;
}
> sib-display {
display: block;
position: relative;
background-color: $color-white;
@extend %shadow;
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;
sib-form {
display: block;
input[type='reset'] {
display: none;
}
}
div[name='header'] {
border-top: 2em solid $color-grey-light;
border-bottom: 1px solid $color-grey-light;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
> div {
@extend %member;
}
sib-display-img {
display: block;
position: relative;
width: 80%;
height: 0;
padding-bottom: 80%;
margin: 10%;
img {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
}
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;
}
}
}
sib-display-lookuplist[name='skills'] {
ul,
li {
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;
}
}

View File

@ -250,7 +250,6 @@ $icons: (
social-steam: '\e620',
);
@each $name, $code in $icons {
.icon-#{$name} {
&:before {

View File

@ -1,10 +1,9 @@
@charset "UTF-8";
@import
'icons',
'variables',
'functions',
'mixins',
'main';
@import 'menu'
@import 'icons';
@import 'variables';
@import 'functions';
@import 'mixins';
@import 'main';
@import 'content';
@import 'menu';

View File

@ -8,6 +8,7 @@ html {
font-family: Open Sans, sans-serif;
font-size: 13px;
background-color: $color-grey-light;
color: $color-grey;
}
#header {
@ -36,6 +37,25 @@ body {
flex: 1 1 0px;
}
h1,h2,h3,h4,h5,h6{
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
}
h1{
font-size: 1.23em;
span{
font-weight: normal;
}
}
h2{
font-size: 1.16em;
}
h3{
font-size: 1.12em;
}

View File

@ -47,9 +47,9 @@
#menu-items {
> * {
display: block;
border-top: 1px solid $color-grey;
border-top: 1px solid #ddd;
&:last-child {
border-bottom: 1px solid $color-grey;
border-bottom: 1px solid #ddd;
}
sib-route {
display: block;
@ -74,9 +74,8 @@
padding: 0.7em;
transform: perspective(1000px) translateZ(1px) scale(1);
will-change: transform;
transition:
all .3s ease,
transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
transition: all 0.3s ease,
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
width: max-content;
padding: 2em;
@ -127,7 +126,7 @@
}
}
> div {
margin: 0.5em;
margin: 2.6em;
flex: 1 1 0px;
}
}

View File

@ -1,13 +1,13 @@
$color-white: #fff;
$color-black: #36383B;
$color-grey: #898F95;
$color-grey-light: #F0F3F6;
$color-black: #36383b;
$color-grey: #898f95;
$color-grey-light: #f0f3f6;
$color-yellow: #FFB700;
$color-yellow-light: #FFD759;
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
%button {
border-radius: 100em
border-radius: 100em;
}
%button-yellow {
@ -15,3 +15,7 @@ $color-yellow-light: #FFD759;
background-color: $color-yellow;
color: $color-white;
}
%shadow{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
}