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

ui: update to 0.7

Browse Source 
- dependancies updated
- new favicon
- html updated
- clean up
- css updated
This commit is contained in:
Gaëlle Morin
2019-04-22 16:13:24 +02:00
parent d8b74d7dc5
commit a1aa92074b
22 changed files with 88 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/dependencies.pug
View File

@ -3,7 +3,7 @@
//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.5")
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6")
script(src="/scripts/index.js")
@ -19,15 +19,14 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//script(type="module" src="/lib/sib-core/sib-display.js")
//script(type="module" src="/lib/sib-router/sib-router.js")
//script(type="module" src="/lib/sib-core/sib-form.js")
//script(type="module" src="/lib/sib-chat/sib-chat.js")
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation")
script(type="module" src="https://unpkg.com/@startinblox/component-directory")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")

2
src/index.pug
View File

@ -5,7 +5,7 @@ html(lang="en")
title HD App
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
link(rel="icon" type="image/png" href="/images/logo.png")
link(rel="icon" type="image/png" href="/images/favicon.png")
include dependencies.pug
body
div.layer

5
src/menu-left.pug
View File

@ -33,7 +33,7 @@ nav#navbar
data-src=`${sdn}/projects/`,
data-fields='project',
set-project='customer.name, dash, name',
value-dash='-',
value-dash=' - ',
next='project'
)
div.divider
@ -48,6 +48,7 @@ nav#navbar
sib-display(
data-src=`${sdn}/circles/`,
data-fields='name',
widget-name='sib-display-div',
next='circle'
)
div.divider
@ -62,6 +63,8 @@ nav#navbar
sib-display(
data-src=`${sdn}/members/`,
data-fields='user.username',
widget-user.username='sib-display-div',
next='member-chat'
)
div.divider

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

@ -18,7 +18,7 @@
set-teammate-img='account.picture',
set-teammate-pseudonym='before-pseudo, username',
set-teammate-name='first_name, last_name',
set-teammate-name='name',
template-teammate-contact='chat-link',

9
src/page-job-offers.pug
View File

@ -3,28 +3,24 @@ div.grid-layer
include templates/template-groups.pug
include templates/template-skills.pug
include templates/template-joboffers-filter.pug
include templates/template-joboffers-conversation.pug
div.grid-layer-main.containerV
h2 New offers
span Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
data-fields='user-thumb, creationDate, title, description, skills, send, conversation',
data-fields='user-thumb, creationDate, title, description, skills, send',
set-conversation="@id"
set-user-thumb='author.account.picture, author.first_name, author.groups',
widget-author.account.picture='sib-display-img',
widget-author.groups='groups-name',
multiple-author.groups,
widget-skills='skills-name',
multiple-skills,
action-send='member-chat',
label-send='Send a private message',
widget-conversation='joboffers-conversation'
search-range-skills=`${sdn}/skills/`,
search-fields='content, open, skills',
@ -38,6 +34,7 @@ div.grid-layer
search-widget-skills='sib-form-placeholder-dropdown',
search-widget-open='joboffers-filter'
)
div.grid-layer-links.containerV
template#groups-list-template
p ${value}

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

@ -15,11 +15,11 @@ sib-widget(name='template-legend-team')
p.form-goal Here you can edit your projet's details
.form-view
sib-form.block(
data-src=`${sdn}/projects/`,
range-members=`${sdn}/members/`,
range-businessProvider=`${sdn}/businessproviders/`,
range-team=`${sdn}/users/`,
range-members=`${sdn}/project-members/`,
data-fields='block-project__info, block-project__fee, block-project__customer',
data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
set-block-project__info='customer.name, name, customer.logo, description',
label-customer.name='Customer\'s name',
@ -27,20 +27,28 @@ sib-widget(name='template-legend-team')
label-customer.logo='Customer\'s logo',
label-description='Project description',
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
widget-fieldset-fee='template-legend-fee',
set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee',
label-businessProvider='Business provider',
label-businessProviderFee='Amount of the contribution',
label-businessProvider.fee='Amount of the contribution (%)',
widget-fieldset-fee='template-legend-fee',
widget-businessProvider.fee='sib-form-number',
set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
widget-fieldset-customer='template-legend-customer',
label-customer.companyRegister='Company register',
label-customer.companyRegister='Company registration number',
label-customer.address='Address',
label-customer.firstName='Name of the contact at the customer\'s premises',
label-customer.lastName='Firstname of the contact at the customer\'s premises',
label-customer.role='Role within the company',
label-customer.email='Email',
label-customer.phone='Phone',
widget-fieldset-customer='template-legend-customer',
set-block-project__team='fieldset-team, team, members',
label-team='Member',
label-members='Role',
widget-fieldset-team='template-legend-team',
multiple-team,
multiple-members,
bind-resources
)

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

@ -30,7 +30,7 @@
value-label-team='TEAM:'
widget-members='team-template',
multiple-members,
bind-resources
)

4
src/styles/filters.scss
View File

@ -10,6 +10,8 @@
input, select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
color: $color-taupe-gray;
@ -18,8 +20,6 @@
margin-top: 1.36rem;
padding: 0.9rem;
width: 95%;
-moz-appearance: none;
-webkit-appearance: none;
}
input[type="submit"] {

29
src/styles/form.scss
View File

@ -12,6 +12,10 @@
}
}
@include styleTemplateFieldset('fee');
@include styleTemplateFieldset('customer');
@include styleTemplateFieldset('team');
#circle-create,
#circle-edit,
#job-offer-create,
@ -42,14 +46,13 @@
flex-direction: column;
}
@include styleTemplateFieldset('fee');
@include styleTemplateFieldset('customer');
@include styleTemplateFieldset('team');
sib-form-auto-completion,
sib-form-checkbox,
sib-form-dropdown,
sib-form-label-text,
sib-form-multiple-dropdown,
sib-form-number,
sib-form-textarea {
display: flex;
flex-direction: column;
@ -69,19 +72,18 @@
}
input,
select,
textarea {
padding: 1.7rem;
}
select {
margin-bottom: 1.7rem;
padding: 0.85rem;
}
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-dropdown,
sib-form-multiple-dropdown {
label {
@ -166,19 +168,22 @@
}
}
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
sib-form-dropdown {
select {
background: $color-glitter;
border: none;
color: $color-purple-dark;
line-height: 1.5;
margin-left: 1rem;
padding: 0.85rem;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url("/images/chevron-down.png");
background-position: right 12px top 60%;
background-repeat: no-repeat;
background-size: 14px 9px;
box-sizing: border-box;
}
}
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
sib-form-multiple-dropdown {
button {

32
src/styles/group-profile.scss
View File

@ -48,32 +48,9 @@
}
}
> hdapp-userinfo {
> label {
display: none;
}
}
div[name='teammate-name'] {
grid-column: 3 / span 2;
grid-row: 1 / span 1;
sib-display-div[name='first_name'] {
display: inline;
> div {
display: inline;
}
}
sib-display-div[name='last_name'] {
display: inline;
> div {
display: inline;
}
}
}
> div[name='teammate-pseudonym'] {
@ -81,20 +58,17 @@
font-size: 1.2rem;
grid-column: 3 / span 2;
grid-row: 2 / span 1;
> * > * {
display: inline;
}
}
> sib-display-div[name='teammate-profile'] {
> sib-display-value[name='teammate-profile'] {
color: $color-dark-lava;
display: block;
font-size: 1.2rem;
grid-column: 1 / span 2;
grid-row: 3 / span 1;
}
> sib-link {
> sib-display-value[name='teammate-contact'] {
color: $color-majorelle-blue;
font-size: 1.2rem;
justify-self: stretch;

31
src/styles/header.scss
View File

@ -10,7 +10,7 @@
position: relative;
z-index: 1;
> * {
> *:not(sib-widget) {
padding: 0 2.5rem;
}
}
@ -138,20 +138,16 @@ details#user-controls {
width: 4.8rem;
}
sib-display-div[name='first_name'] {
sib-display-value[name='first_name'] {
@include icon('arrow-down');
align-items: center;
display: flex;
flex-direction: row-reverse;
font-size: 1.8rem;
font-weight: 600;
div[name='first_name'] {
align-items: flex-end;
display: flex;
font-size: 1.8rem;
font-weight: 600;
@include icon('arrow-down');
&::before {
margin-left: 1.5rem;
}
&::before {
margin-left: 1.5rem;
}
}
}
@ -205,14 +201,11 @@ details#user-controls {
div {
sib-display-div[name='first_name'] {
sib-display-value[name='first_name'] {
@include icon('close');
div[name='first_name'] {
@include icon('close');
&::before {
margin-left: 1.5rem;
}
&::before {
margin-left: 1.5rem;
}
}
}

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

@ -70,11 +70,12 @@
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
sib-display-div[name='title'] {
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
@ -82,6 +83,7 @@
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}

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

@ -48,7 +48,7 @@
display: flex;
grid-area: name;
> sib-display-div[name^='user.'] {
> sib-display-value[name^='user.'] {
color: $color-dark-lava;
font-weight: bold;
@extend h1;
@ -60,15 +60,15 @@
}
}
sib-display-div[name='user.username'] {
sib-display-value[name='user.username'] {
grid-area: pseudo;
div[name='user.username']::before {
&::before {
content: '@';
}
}
sib-display-div[name='bio'] {
sib-display-value[name='bio'] {
grid-area: bio;
}

3
src/styles/members.scss
View File

@ -58,7 +58,6 @@
justify-content: center;
margin: 3.75rem 0;
position: relative;
z-index: 1;
&::before {
border-top: 1px solid $color-timberwolf;
@ -147,7 +146,7 @@
@extend h1;
}
sib-display-div[name$='bio'] {
sib-display-value[name$='bio'] {
display: flex;
flex-basis: 3.5em;
line-height: 1.6;

4
src/styles/menu-left.scss
View File

@ -124,6 +124,10 @@
div[name='project'] {
display: flex;
sib-display-value {
display: block;
}
sib-display-div[name='dash'] {
margin: 0 0.4em;

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

@ -4,13 +4,14 @@
margin-top: 5.1rem;
[name^='label-'] {
display: block;
font-weight: bold;
margin-bottom: 1.4rem;
text-transform: uppercase;
@extend h2;
}
sib-display-div:not(:first-of-type),
sib-display-value:not(:first-of-type),
ul,
[name*='job'] {
font-size: 1.5rem;
@ -34,7 +35,7 @@
padding: 0;
}
> sib-display-div[name='name'] {
> sib-display-value[name='name'] {
padding-left: 0.85rem;
}
@ -61,6 +62,8 @@
justify-content: space-between;
[name='description'] {
display: flex;
flex-direction: column;
width: 90%;
}

4
src/styles/variables.scss
View File

@ -69,7 +69,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
sib-multiple[name^='user.'],
> member-info > div,
> sib-display-div > div {
> sib-display-value {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
@ -93,7 +93,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"] * {
[name="foaf:homepage"] {
@include mdi('link-variant');
}
}

1
src/templates/template-customer.pug
View File

@ -17,3 +17,4 @@ sib-widget(name='customer-template')
li(class='mdi-email-outline')
a(href='mailto:${value.email}') ${value.email}
li(class='mdi-cellphone-iphone') ${value.phone}

3
src/templates/template-joboffers-conversation.pug
View File

@ -1,3 +0,0 @@
sib-widget
template
sib-conversation(data-src="${value}", id-suffix="threads")

17
src/templates/template-team.pug
View File

@ -1,6 +1,6 @@
sib-widget(name='team-template')
template
p ${value}
sib-display(
data-src="${value.user['@id']}"
data-fields='account.picture',
@ -14,18 +14,3 @@ sib-widget(name='team-template')
multiple-name
)
span ${value.name}
//-
include templates/template-groups.pug
sib-widget(name='team-template')
template
sib-display(
data-src="${value.user['@id']}",
data-fields='account.picture, name, groups',
widget-account.picture='sib-display-img',
widget-groups='groups-name',
multiple-groups
)
span ${value.name}

BIN
www/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

54
www/test.html
View File

@ -1,54 +0,0 @@
<!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"/> -->
<link rel="import" href="lib/sib-core/sib-display.html"/>
<style>
body.debug *:not(script):not(button){
display: block;
padding: 3px;
margin: 3px;
border: 1px solid #f006;
}
sib-display,
sib-display-div{
display: block;
background-color: #0002;
margin: .5em 0;
min-height: 1em;
}
</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="http://127.0.0.1:8000/members/"
data-fields="roles, ab"
widget-skills="sib-display-lookuplist"
set-ab="user.first_name, user.last_name"
></sib-display>
</div>
<!-- <div>
<h1>sib-form</h1>
<sib-form class="block" range-client="https://test-paris.happy-dev.fr/clients/" widget-team="sib-form-multiple-dropdown" range-team="https://test-paris.happy-dev.fr/members/" data-src="https://test-paris.happy-dev.fr/projects/1/"></sib-form>
</div> -->
</body>
</html>