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

style

Browse Source
This commit is contained in:
Clément 2018-10-08 10:49:31 +02:00
parent 4f60cdb875
commit d6cd1a54ed
12 changed files with 93 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dependencies.pug
View File

@ -3,7 +3,7 @@
script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
//- script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
script(src="/scripts/index.js")
// Stylesheets
@ -20,7 +20,7 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
//- local
link(rel='import', href='/lib/sib-core/sib-display.html')
link(rel='import', href='/lib/sib-router/sib-router.html')
link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")

4
src/menu.pug
View File

@ -4,12 +4,12 @@ div
div(hidden)
div#menu-items
sib-route(name='members')
div.icon-people Membres
div.icon-people Members
sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
sib-route(name='job-offers')
div.icon-briefcase Job offers
div
div.icon-folder-alt Projets
div.icon-folder-alt Projects
sib-display(
data-src=`${sdn}/projects/`,
data-fields='name',

2
src/page-group-edit.pug
View File

@ -1,5 +1,5 @@
#group-edit
sib-form(
sib-form.block(
range-owner=`${sdn}/members/`,
widget-members='sib-form-multiple-dropdown',
range-members=`${sdn}/members/`,

2
src/page-member-edit.pug
View File

@ -18,7 +18,7 @@
label.d-none(for='avatar-input')
img#avatar-preview(src='', style='width: 100%;')
input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
sib-form.edit-form(
sib-form.edit-form.block(
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
widget-user='hdapp-usereditinfo',
range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',

2
src/page-project-edit.pug
View File

@ -1,5 +1,5 @@
#project-edit
sib-form(
sib-form.block(
range-client=`${sdn}/clients/`,
widget-team='sib-form-multiple-dropdown',
range-team=`${sdn}/members/`,

8
src/styles/content.scss
View File

@ -118,3 +118,11 @@ sib-display#member-info,
grid-gap: 1em;
}
}
// projects
#project-profile {
[name="title"]{
}
}

4
src/styles/form.scss
View File

@ -1,6 +1,8 @@
//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
sib-form.block>form>*{
display: block;
}
sib-form{
form{
margin: -.5em;

1
src/styles/icons.scss
View File

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

33
src/styles/main.scss
View File

@ -99,7 +99,7 @@ h3 {
flex: 1 1 0px;
}
.limiter{
.limiter {
display: block;
max-width: 650px;
}
@ -110,21 +110,37 @@ h3 {
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
font-family: monospace;
color: $color-black;
display: block;
background-color: #ccc;
background-color: $color-grey-light2;
sib-route {
display: block;
cursor: pointer;
> div {
position: relative;
padding: 1em 2em;
border-bottom: 1px solid #888;
padding: 1.5em 3em;
border-bottom: 1px solid $color-grey;
}
&:hover {
background-color: $color-grey;
}
&[active] {
font-weight: bold;
background-color: $color-black;
color: $color-yellow;
> div:before {
content: '<';
position: absolute;
opacity: 1;
transform: translateX(-150%);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
> div {
@include icon(arrow-left);
&:before {
position: absolute;
transform: translateX(-50%);
opacity: 0;
}
}
}
@ -170,6 +186,11 @@ h3 {
}
}
sib-route,
sib-trigger {
cursor: pointer;
}
sib-trigger.back {
display: block;
@include icon('arrow-left');

6
src/styles/variables.scss
View File

@ -2,6 +2,7 @@
$color-white: #fff;
$color-black: #36383b;
$color-grey: #898f95;
$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
@ -11,6 +12,11 @@ $color-yellow-light: #ffd759;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
%cadre {
@extend %shadow;
background-color: $color-white;
}
$breakpoints: (
phone: 480px,
tablet: 768px,

2
www/lib/sib-chat

@ -1 +1 @@
Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b
Subproject commit ef607e3aecf6f7091b2fee1fd327e181b376b24d

40
www/test.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>[test] HD App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<!-- Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js" integrity="sha256-fz7VMnmo2h7TlM7CBea8/vpbWpdQnbp20TnwmRwi/KU=" crossorigin="anonymous"></script>
<!-- Web components-->
<link rel="import" href="https://cdn.happy-dev.fr/sib-core/sib-display.html"/>
<style>
body.debug *:not(script):not(button){
display: block;
padding: 3px;
margin: 3px;
border: 1px solid #f006;
}
</style>
</head>
<body>
<button onclick="document.body.classList.toggle('debug')">debug</button>
<div id="job-offers">
<h1>Job offers</h1>
<sib-display id="offers-list"
data-src="https://test-paris.happy-dev.fr/job-offers/"
data-fields="title, description, skills"
widget-skills="sib-display-lookuplist"
></sib-display>
</div>
<div id="members">
<h1>Members</h1>
<sib-display id="profiles-list"
data-src="https://test-paris.happy-dev.fr/members/"
data-fields="pseudo, bio"
></sib-display>
</div>
</body>
</html>