diff --git a/.gitignore b/.gitignore
index 360919c..f7696fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,8 +7,4 @@
/www/scripts/
/www/lib/
/www/oidc-client-config.json
-!/www/lib/sib-core
-!/www/lib/sib-router
-!/www/lib/sib-chat
-!/www/lib/sib-oidc
*.iml
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 4f4a825..5ef536c 100644
--- a/Makefile
+++ b/Makefile
@@ -7,13 +7,9 @@ SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
default: build
clean:
- git clean -fXd -e !src/config.pug
+ git clean -fXd -e !src/config.json
-install: node_modules copy_lib copy_samples submodules
-
-submodules:
- git submodule init
- git submodule update --recursive --remote
+install: node_modules copy_lib copy_samples
build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
@@ -52,10 +48,17 @@ $(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*
# pug (prod)
$(DIST_DIR)/index.prod.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
@echo pug: $< ā $@
-
+
@export ENV="prod"; \
node_modules/.bin/pug --pretty $< --out $(dir $@) -E prod.html -O src/config.json || touch $@
+# pug (staging)
+$(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
+ @echo pug: $< ā $@
+
+ @export ENV="staging"; \
+ node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
+
# sass
$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
@echo sass: $< ā $@
@@ -67,6 +70,9 @@ $(DIST_DIR)/%.js: src/%.js .babelrc
@mkdir -p $(dir $@)
@node_modules/.bin/babel $< --out-file $@ --source-maps || touch $@
+buildstaging: build
+ $(MAKE) $(DIST_DIR)/index.staging.html
+
buildprod: build
$(MAKE) $(DIST_DIR)/index.prod.html
@@ -75,9 +81,14 @@ deploy: pull install build
pull:
git pull
-sync: buildprod
- rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html
- rsync --no-R --no-implied-dirs www/index.prod.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
+sync: buildstaging
+ rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
+ rsync --no-R --no-implied-dirs www/index.staging.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
rsync -v www/.htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-.PHONY: default install submodules copy_lib copy_samples build watch serve clean sync buildprod pull deploy
\ No newline at end of file
+syncprod: buildprod
+ rsync -rv www/* alpha@ssh-alpha.happy-dev.fr:~/www/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
+ rsync --no-R --no-implied-dirs www/index.prod.html alpha@ssh-alpha.happy-dev.fr:~/www/index.html
+ rsync -v www/.htaccess alpha@ssh-alpha.happy-dev.fr:~/www/
+
+.PHONY: default install copy_lib copy_samples build watch serve clean sync syncprod buildstaging buildprod pull deploy
\ No newline at end of file
diff --git a/src/config.sample.json b/src/config.sample.json
index 085b314..743f6eb 100644
--- a/src/config.sample.json
+++ b/src/config.sample.json
@@ -6,8 +6,15 @@
"client_id": "833925"
},
+ "staging": {
+ "sdn": "http://test-paris.happy-dev.fr",
+ "cdn": "https://cdn.happy-dev.fr",
+ "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+ "client_id": "833925"
+ },
+
"prod": {
- "sdn": "https://test-paris.happy-dev.fr",
+ "sdn": "https://api.alpha.happy-dev.fr",
"cdn": "https://cdn.happy-dev.fr",
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"client_id": "833925"
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 5ec0e2b..872c6f1 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -3,10 +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.5")
script(src="/scripts/index.js")
@@ -27,9 +24,10 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
-//- don't forget to change version in hd-widgets.js
script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
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")
diff --git a/src/header.pug b/src/header.pug
index c89e0d6..6aced93 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -12,11 +12,15 @@ sib-notifications(
bind-user
)
+sib-widget(name="user-picture")
+ template
+ img(name="${name}",src="\${value || '/images/user.jpg'}",style="max-width:100%; max-height: 100%;")
+
details#user-controls
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
data-fields='first_name, account.picture',
- widget-account.picture='sib-display-img',
+ widget-account.picture='user-picture',
bind-user
)
#user-controls__panel
diff --git a/src/index.pug b/src/index.pug
index 3f08fcc..c6b83ee 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -1,5 +1,4 @@
include get_config.pug
-
html(lang="en")
head
meta(charset="UTF-8")
@@ -10,10 +9,11 @@ html(lang="en")
include dependencies.pug
body
div.layer
- header#header(role='banner')
+ header#header.row(role='banner')
include header.pug
- #content
+ .content.row
include menu-left.pug
+
main#mainContainer
//- #dashboard(hidden)
include page-dashboard.pug
@@ -21,8 +21,6 @@ html(lang="en")
include page-members.pug
#member-chat(hidden)
include page-member-chat.pug
- #member(hidden)
- include page-member-profile.pug
#job-offers(hidden)
include page-job-offers.pug
#job-offer-create(hidden)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index fbb76fd..1970241 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -9,7 +9,6 @@ nav#navbar
)
div.menu-label Members
div.menu-icon.icon-people
- sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
div.divider
sib-route.menu(name='job-offers')
div.menu-notification
diff --git a/src/page-group-create.pug b/src/page-group-create.pug
index 829e111..922bd3a 100644
--- a/src/page-group-create.pug
+++ b/src/page-group-create.pug
@@ -4,27 +4,23 @@
.form-view
sib-form(
data-src=`${sdn}/circles/`,
- range-owner=`${sdn}/members/`,
+ range-owner=`${sdn}/users/`,
range-team=`${sdn}/members/`
data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
- label-description='Description',
- label-foaf:jabberID='Chatroom id',
label-name="Channel's name",
+ label-description='Description',
label-owner='Owner of this channel',
+ label-foaf:jabberID='Chatroom id',
label-team='Member(s) of this channel',
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
- widget-description-text='hdapp-form-text',
-
- value-team-text='Add any members as you want.',
- widget-team-text='hdapp-form-text',
-
value-owner-text='The one who will admin this channel',
- widget-owner-text='hdapp-form-text',
+ value-team-text='Add any members as you want.',
+
widget-description='sib-form-textarea',
widget-jabberRoom='sib-form-checkbox',
- widget-team='sib-form-multiple-dropdown',
+ widget-team='sib-form-multiple-dropdown'
)
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index 49b7df9..04050e7 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -2,14 +2,17 @@ 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',
+ data-fields='user-thumb, creationDate, title, description, skills, send, conversation',
+ 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',
@@ -20,19 +23,20 @@ div.grid-layer
action-send='member-chat',
label-send='Send a private message',
+
+ widget-conversation='joboffers-conversation'
search-range-skills=`${sdn}/skills/`,
- search-fields='content, skills, open',
+ search-fields='content, open, skills',
set-content='title, description',
search-label-content='Search by keyword',
search-label-skills='Search by skills',
- search-label-open='Filter opened or closed offers',
search-widget-content='sib-form-placeholder-text',
search-widget-skills='sib-form-placeholder-dropdown',
- search-widget-open='sib-form-placeholder-text'
+ search-widget-open='joboffers-filter'
)
div.grid-layer-links.containerV
template#groups-list-template
diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug
deleted file mode 100644
index 3bd20f3..0000000
--- a/src/page-member-profile.pug
+++ /dev/null
@@ -1,32 +0,0 @@
-sib-link(next="members" class="backlink") Back to directory
-
-include templates/template-groups.pug
-include templates/template-skills.pug
-include templates/template-status.pug
-
-div#member-profile
- sib-display(
- data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
-
- set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
- set-member-profile__skills='user.skills',
- set-member-profile__xp='',
-
- set-member-img='user.account.picture',
- set-member-profile='user.name, user.groups',
- set-infos='city, user.groups, user.email, phone, foaf:homepage',
-
- label-send='SEND A MESSAGE',
- action-send='member-chat',
-
- widget-user.account.picture='sib-display-img',
- widget-user.groups='groups-name',
- widget-user.skills='skills-name',
- widget-user.profile.available='status-template',
-
- multiple-user.groups,
- multiple-user.skills,
-
- bind-resources
- )
-
diff --git a/src/page-members.pug b/src/page-members.pug
index b5f5d40..aa6b537 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -1,51 +1,6 @@
-div.grid-layer
-
- include templates/template-groups.pug
- include templates/template-skills.pug
-
- div.grid-layer-main.containerV
- h1 Members
- sib-display#profiles-list(
- data-src=`${sdn}/members/`,
- search-range-groups=`${sdn}/groups/`,
- search-range-skills=`${sdn}/skills/`,
-
- search-fields='name, groups, skills',
- set-name='pseudo, user.first_name, user.last_name',
- search-label-name='Search by lastname, firstname...',
- search-label-groups='Filter by role',
- search-label-skills='Search by skills',
- search-widget-name='sib-form-placeholder-text',
- search-widget-groups='sib-form-placeholder-dropdown',
- search-widget-skills='sib-form-placeholder-text',
-
- counter-template='${counter} members',
-
- data-fields='header, infos',
- set-header='user.account.picture, user.name, pseudonym, bio, send',
- set-infos='city, user.groups, user.email, phone, user.skills',
- set-pseudonym='before-pseudo,user.username',
- value-before-pseudo='@',
- label-send='SEND A MESSAGE',
- action-send='member-chat',
- widget-user.account.picture='sib-display-img',
- widget-user.groups='groups-name',
- widget-user.skills='skills-name',
- multiple-user.groups,
- multiple-user.skills,
-
- paginate-by='3',
-
- next='member'
- )
-
- div.grid-layer-links.containerV
- div.containerH.containerCenter.how-link
- div.containerV.fix.icon-idea
- div.containerV.grow
- sib-trigger() How To...
- div.containerH.containerCenter.how-link
- div.containerV.fix.icon-idea
- div.containerV.grow
- sib-trigger() How to complete my profile ?
+sib-directory(
+ data-src=`${sdn}/members/`,
+ range-groups=`${sdn}/groups/`,
+ range-skills=`${sdn}/skills/`
+)
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index ed036f3..7e8fc7e 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -2,37 +2,32 @@
h1 New project
p.form-goal Here you can create your project, add members and assign them a job.
.form-view
- sib-form(
+ sib-form.block(
data-src=`${sdn}/projects/`,
- range-customer=`${sdn}/customers/`,
range-members=`${sdn}/members/`,
range-team=`${sdn}/users/`,
- data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
- set-block-team=`team, members`,
- set-block-fee=`businessProvider, businessProviderFee`,
-
- label-customer.name='Business name',
- label-name='Project name',
- label-description='Project description',
- label-customer.logo='Customer logo',
- label-customer.companyRegister='Company register',
- label-customer.address='Customer address',
- label-customer.firstName='Contact firstname',
- label-customer.lastName='Contact lastname',
- label-customer.role='Contact role',
- label-customer.email='Contact email',
- label-customer.phone='Contact phone',
- label-businessProvider='Business provider',
- label-businessProviderFee='Fee (%)',
- label-foaf:jabberID='Chatroom id',
- label-team='Teammates',
- label-members='Member role'
+ data-fields='block-project__info, block-project__fee, block-project__customer',
- widget-jabberRoom='sib-form-checkbox',
- widget-description='sib-form-textarea',
- widget-team='sib-form-multiple-dropdown',
- widget-members='sib-form-multiple-dropdown',
- bind-resources
+ set-block-project__info='customer.name, name, customer.logo, description',
+ label-customer.name='Customer\'s name',
+ label-name='Project\'s name',
+ label-customer.logo='Customer\'s logo',
+ label-description='Project description',
+
+ set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+ widget-fieldset-fee='template-legend-fee',
+ label-businessProvider='Business provider',
+ label-businessProviderFee='Amount of the contribution',
+
+ 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.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'
)
\ No newline at end of file
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 1cc7ce0..b835fcd 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,10 +1,52 @@
+sib-widget(name='template-legend-fee')
+ template
+ span Fee
+
+sib-widget(name='template-legend-customer')
+ template
+ span Customer information
+
+sib-widget(name='template-legend-team')
+ template
+ span The team
+
.frame-form
h1 Edit your project
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-team=`${sdn}/users/`,
+ data-fields='block-project__info, block-project__fee, block-project__customer',
+
+ set-block-project__info='customer.name, name, customer.logo, description',
+ label-customer.name='Customer\'s name',
+ label-name='Project\'s name',
+ label-customer.logo='Customer\'s logo',
+ label-description='Project description',
+
+ set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+ widget-fieldset-fee='template-legend-fee',
+ label-businessProvider='Business provider',
+ label-businessProviderFee='Amount of the contribution',
+
+ 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.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',
+
bind-resources
)
+ //-
+ set-block-project__team='fieldset-team, team',
+ widget-fieldset-team='template-legend-team',
+ widget-team='sib-form-multiple-dropdown',
+ (sib-form-multiple-dropdown ne fonctionne pas).
\ No newline at end of file
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index 7815d34..16c5869 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,11 +1,11 @@
.frame
+ include templates/template-business-provider.pug
include templates/template-customer.pug
include templates/template-team.pug
sib-display(
data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
- extra-context='{"project-profile":"${sdn}/projects/"}'
set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
value-const-title1='NĀ°',
@@ -18,14 +18,9 @@
value-label-description='DESCRIPTION:',
widget-customer.logo='sib-display-img',
- set-block-fee='label-fee, details-cell, details-business',
- set-details-cell='cell-name, cell-fee, percentage',
- set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+ set-block-fee='label-fee, businessProvider',
value-label-fee='FEE:',
- value-cell-name='Happy Dev Paris:',
- value-cell-fee='5',
- value-percentage='%',
- value-comma=', ',
+ widget-businessProvider='template-business-provider'
set-block-customer='label-customer, customer',
value-label-customer='CUSTOMER INFORMATIONS:'
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 622176c..847e3a0 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -1,8 +1,7 @@
%filters {
- border-bottom: 1px solid $color-gainsboro;
display: grid;
grid-gap: 0px 15px;
- grid-template-columns: 50% 50%;
+ grid-template-columns: 1fr 1fr;
grid-template-rows: 3.5em 3.5em;
label {
@@ -13,6 +12,7 @@
appearance: none;
border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+ color: $color-taupe-gray;
font-size: 1.36rem;
line-height: 1.80;
margin-top: 1.36rem;
@@ -29,13 +29,11 @@
select {
background: $color-white;
background-image: url("/images/chevron-down.png");
- background-position: 96% 60%;
+ background-position: right 12px top 60%;
background-repeat: no-repeat;
background-size: 14px 9px;
box-sizing: border-box;
- color: $color-taupe-gray;
display: inline-block;
- padding: 0.68rem;
width: 100%;
> option:not(:first-child) {
@@ -47,10 +45,15 @@
display: flex;
flex-direction: column;
}
+
+ sib-form-placeholder-dropdown[name="skills"] {
+ grid-column-end: 3;
+ grid-column-start: 1;
+ }
}
-#offers-list, #profiles-list {
- & > sib-form {
+#offers-list, #members-list {
+ sib-form {
@extend %filters;
}
}
diff --git a/src/styles/form.scss b/src/styles/form.scss
index a0a6537..f5a811b 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -18,7 +18,7 @@
#project-create,
#project-edit {
flex: 1;
- font-size: 1.7rem;
+ font-size: 1.5rem;
h1 {
color: $color-purple-dark;
@@ -39,11 +39,12 @@
div[name^='block-'] {
display: flex;
-
- > * {
- margin-right: 4rem;
- }
+ flex-direction: column;
}
+
+ @include styleTemplateFieldset('fee');
+ @include styleTemplateFieldset('customer');
+ @include styleTemplateFieldset('team');
sib-form-auto-completion,
sib-form-checkbox,
@@ -64,7 +65,7 @@
border: none;
color: $color-purple-dark;
line-height: 1.5;
- width: 95%;
+ width: 100%;
}
input,
@@ -86,6 +87,7 @@
label {
color: $color-dark-lava;
font-weight: 600;
+ text-transform: initial;
}
}
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 037c33c..8ad8696 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -9,10 +9,6 @@
padding: 1.6rem 0.64rem;
position: relative;
z-index: 1;
- //position: relative;
- //@include border-shadow(bottom);
- //flex-grow: 0;
- //flex-basis : 150px;
> * {
padding: 0 2.5rem;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1f8608e..14a79e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
@import 'icons/custom-icons';
@import 'icons/icons';
@import 'icons/material-design-icons';
@@ -19,6 +20,7 @@
@import 'member-profile';
@import 'members';
@import 'project-profile';
+@import 'member-chat';
// @import 'members';
@import 'header';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index cc96944..89aaa14 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,27 +1,32 @@
-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden,
+.is-hidden {
display: none !important;
}
-* {
- box-sizing: border-box;
-}
-
:root {
font-size: 62.5%;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body {
+ /*Will help to make .content fit your height screen size. Part.1*/
background-color: $color-anti-flash-white;
color: $color-text-base;
+ display: flex;
+ flex-direction: column;
font-size: 1.6rem;
- margin: 0 auto;
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
overflow-wrap: break-word;
}
}
+img {
+ max-width: 100%;
+}
+
h1,
h2,
h3,
@@ -104,10 +109,12 @@ li {
overflow-x: hidden;
}
+/*
#content {
display: flex;
overflow: hidden;
}
+*/
#mainContainer {
flex-grow: 1;
@@ -131,17 +138,12 @@ li {
overflow-x: hidden;
> div {
- //display: flex;
- //margin: 2.6em;
- //padding:2.6em;
- //flex: 1 1 0;
- flex-grow: 1;
+ transition: all 0.5s;
}
}
}
sib-route,
-sib-trigger,
sib-link {
cursor: pointer;
}
@@ -193,7 +195,7 @@ sib-link.back {
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
- grid-template-rows: [start]13em[middle]auto[end];
+ grid-template-rows: [start]7em[middle]auto[end];
}
.grid-layer-main {
grid-column-start: start;
@@ -223,7 +225,107 @@ sib-multiple[name*='skills'] {
color: $color-white;
font-size: 1.4rem;
font-weight: bold;
- margin: 0.4rem 0.4rem 0.4rem 0;
+ margin: 0.4rem 1rem 0.4rem 0;
padding: 0.5rem 2rem;
}
+member-info-groups {
+ @extend %group;
+}
+
+
+/* NEW RESPONSIVE */
+
+.right-sidebar {
+ overflow: hidden;
+ transition: width 0.3s;
+}
+
+.right-sidebar.js-right-sidebar-expanded {
+ width: 130px;
+}
+
+.right-sidebar.js-right-sidebar-collapsed {
+ width: 62px;
+}
+
+/*Define the basic row-column properties that construct the foundation*/
+.row {
+ display: flex;
+ max-width: 100%;
+}
+
+.content {
+ /*Will help to make .content fit your height screen size. Part 2*/
+ flex-direction: row;
+ height: 100%;
+ overflow: hidden;
+}
+
+.col {
+ min-width: 0;
+}
+
+.block-grid {
+ display: flex;
+ flex-wrap: nowrap;
+ height: 100%;
+}
+
+/* Dividing into columns */
+@mixin respond-to($breakpoint) {
+
+ @if map-has-key($breakpoints, $breakpoint) {
+
+ @media (min-width: map-get($breakpoints, $breakpoint)) {
+ @content;
+ }
+ }
+
+ @else {
+ @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+ + "Available breakpoints are: #{map-keys($breakpoints)}.";
+ }
+}
+
+.small-2 {
+
+ @include respond-to('phone'){
+ display: block;
+ flex: 0 1 calc(100% / 12 * 2);
+ }
+}
+
+.small-shrink {
+
+ @include respond-to('phone') {
+ display: block;
+ flex: 0 1 auto;
+ }
+}
+
+.medium-auto {
+
+ @include respond-to('tablet') {
+ display: block;
+ flex: 1;
+ overflow: auto;
+ }
+}
+
+.small-12 {
+
+ @include respond-to('phone') {
+ display: block;
+ flex: 0 1 calc(100% / 12 * 12);
+ }
+}
+
+.small-auto {
+
+ @include respond-to ('phone') {
+ display: block;
+ flex: 1;
+ overflow: auto;
+ }
+}
diff --git a/src/styles/member-chat.scss b/src/styles/member-chat.scss
new file mode 100644
index 0000000..bd679dc
--- /dev/null
+++ b/src/styles/member-chat.scss
@@ -0,0 +1,3 @@
+#member-chat {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss
index 40b3856..07ec783 100644
--- a/src/styles/member-profile.scss
+++ b/src/styles/member-profile.scss
@@ -1,4 +1,4 @@
-#member {
+#member-profile {
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -14,7 +14,7 @@
}
}
- #member-profile {
+ #member-info {
background-color: $color-white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem;
@@ -23,29 +23,22 @@
div[name='member-profile__bio'] {
border-bottom: 1px solid $color-link-water;
display: grid;
- grid-template-areas: "avatar name name name status"
- "avatar pseudo pseudo pseudo status"
- "avatar bio bio bio status"
- "avatar list list list button"
- "avatar list list list button";
+ grid-template-areas: "avatar name status"
+ "avatar pseudo status"
+ "avatar bio status"
+ "avatar list button";
+ grid-template-columns: 1fr 2fr 1fr;
padding: 4.5rem;
div[name='member-img'] {
- background-color: $color-bombay;
- border-radius: 50%;
grid-area: avatar;
- height: 34vh;
overflow: hidden;
position: relative;
- width: 34vh;
img {
- height: 100%;
- left: 0;
+ border-radius: 50%;
object-fit: cover;
- position: absolute;
- top: 0;
- width: 100%;
+ max-width: 90% !important;
}
}
@@ -64,10 +57,6 @@
> sib-multiple[name$='groups'] {
display: flex;
padding-left: 1.4rem;
-
- groups-name {
- @extend %group;
- }
}
}
@@ -89,7 +78,7 @@
@extend %member-info;
}
- status-template[name$='available']{
+ member-status[name$='available']{
align-self: flex-end;
color: $color-majorelle-blue;
grid-area: status;
@@ -149,12 +138,15 @@
}
div[name='member-profile__skills'] {
+ padding: 4.5rem;
+
+ & ~ div[name='member-profile__skills'] {
+ padding-top: 0;
+ }
- sib-display-lookuplist {
-
- label {
- display: none;
- }
+ label {
+ font-weight: bold;
+ padding-bottom: 0.5rem;
}
}
}
diff --git a/src/styles/members.scss b/src/styles/members.scss
index db8f13d..d9122e3 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -1,6 +1,7 @@
-#members {
+#members-list {
+ @extend .grid-layer;
- #profiles-list {
+ #members-list__content {
@extend .grid-layer;
nav {
@@ -86,9 +87,8 @@
display: flex;
flex-flow: column wrap;
margin-bottom: 2.5rem;
- padding-bottom: 10rem;
+ padding-bottom: 2rem;
@media(min-width: 56rem) {
- height: 62rem;
width: 32%;
}
@@ -96,19 +96,33 @@
display: none;
}
+ sib-multiple[name$='groups'] {
+ align-items: flex-start;
+ display: flex;
+ justify-content: flex-end;
+ min-height: 3.4rem;
+ padding-left: 2.6rem;
+ padding-right: 2.6rem;
+ padding-top: 1.3rem;
+
+ > * {
+ margin: 0.3rem;
+ }
+ }
+
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
display: flex;
flex-direction: column;
padding: 0.85rem 0 3.4rem;
- > *:not(sib-display-img) {
+ >*:not(member-picture) {
display: flex;
flex-basis: content;
justify-content: center;
}
- sib-display-img {
+ member-picture {
background-color: $color-white;
border-radius: 50%;
height: 28vh;
@@ -163,14 +177,6 @@
padding: 0 1.7rem;
@extend %member-info;
-
- sib-multiple[name$='groups'] {
- display: flex;
-
- > * {
- margin-right: 0.4rem;
- }
- }
}
}
}
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index 08ad665..4d40034 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/menu-right.scss
@@ -3,6 +3,7 @@
> div {
nav {
+ transition: all 0.5s;
> sib-router {
background-color: $color-222-52-90;
@@ -80,7 +81,7 @@
}
& ~ #views-container {
- flex-basis: 95%;
+ margin-left: -15.5rem;
transform: translate(15.5rem);
}
}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 9b4afae..d8d0b6e 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -147,3 +147,14 @@
}
}
}
+
+@mixin styleTemplateFieldset($name) {
+ template-legend-#{$name} {
+ border-bottom: 1px solid $color-link-water;
+ color: $color-purple-dark;
+ font-size: 1.8rem;
+ font-weight: 600;
+ padding-bottom: 1rem;
+ }
+}
+
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
index 53d7169..1988b5a 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/project-profile.scss
@@ -58,6 +58,7 @@
[name='infos'] {
display: flex;
+ justify-content: space-between;
[name='description'] {
width: 90%;
@@ -68,25 +69,27 @@
display: block;
height: 8.5vh;
position: relative;
- text-align: center;
+ text-align: end;
width: 15vw;
}
}
+ [name='businessProvider'] {
+
+ ul {
+ list-style: none;
+ padding-left: 0;
- [name^='details-'] {
- display: flex;
- font-size: 1.5rem;
- margin-bottom: 0.85rem;
-
- [name='cell-name'],
- [name='business-contribution'] {
- font-weight: bold;
- margin-right: 0.5rem;
- }
-
- [name='comma'] {
- margin-right: 0.2em;
+ li {
+
+ &:first-child {
+ margin-bottom: 0.5em;
+ }
+
+ span {
+ font-weight: bold;
+ }
+ }
}
}
}
@@ -153,30 +156,10 @@
&::before {
color: $color-selective-yellow;
- font-size: 2rem;
+ font-size: 2.2rem;
padding: 0 1rem 0 0;
}
}
-
- [name$='name'] {
- @include mdi('account-outline');
-
- &::before {
- padding-left: 0.2em;
- }
- }
-
- [name$='email'] {
- @include icon('envelope');
- }
-
- [name$='phone'] {
- @include mdi('cellphone-iphone');
-
- &::before{
- padding-left: 0.2em;
- }
- }
}
}
}
@@ -227,13 +210,13 @@
}
span ~ sib-display {
-
- div {
+
+ > div {
display: flex;
+ margin-left: 1rem;
div[name='name'] {
@extend %group;
- margin-left: 1rem;
}
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ad6a14d..c31a9f9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -28,8 +28,13 @@ $color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);
%backlink {
- color: #3d4057;
@include icon('arrow-left-circle');
+ color: #3d4057;
+ text-decoration: underline;
+
+ &::before {
+ text-decoration: none;
+ }
}
%button {
@@ -63,6 +68,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
%member-info {
sib-multiple[name^='user.'],
+ > member-info > div,
> sib-display-div > div {
display: flex;
flex-wrap: wrap;
@@ -79,10 +85,6 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
@include mdi('atom');
}
- sib-multiple[name='user.groups'] {
- @include mdi('account-outline');
- }
-
[name$='email'] * {
@include mdi('email-outline');
}
@@ -100,6 +102,11 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
color: $color-spun-pearl;
font-weight: 600;
margin: 2em 0 0.5em;
+ text-transform: uppercase;
+
+ > div {
+ padding-bottom: 1rem;
+ }
}
%notification {
@@ -139,5 +146,5 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
$breakpoints: (
phone: 480px,
tablet: 768px,
- desktop: 1024px,
-);
+ desktop: 1024px
+) !default;
diff --git a/src/templates/template-business-provider.pug b/src/templates/template-business-provider.pug
new file mode 100644
index 0000000..5e49550
--- /dev/null
+++ b/src/templates/template-business-provider.pug
@@ -0,0 +1,6 @@
+sib-widget(name='template-business-provider')
+ template
+ ul
+ li #[span Happy Dev Paris:] 5%
+ li #[span Business provider:] ${value.name}, ${value.fee ? value.fee:0}%
+
\ No newline at end of file
diff --git a/src/templates/template-customer.pug b/src/templates/template-customer.pug
index c2d3d59..f3446b4 100644
--- a/src/templates/template-customer.pug
+++ b/src/templates/template-customer.pug
@@ -13,7 +13,7 @@ sib-widget(name='customer-template')
div
h5 Contact:
ul
- li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
- li(name='email')
+ li(class='mdi-account-outline') #[span ${value.firstName} ${value.lastName}], ${value.role}
+ li(class='mdi-email-outline')
a(href='mailto:${value.email}') ${value.email}
- li(name='phone') ${value.phone}
+ li(class='mdi-cellphone-iphone') ${value.phone}
diff --git a/src/templates/template-joboffers-conversation.pug b/src/templates/template-joboffers-conversation.pug
new file mode 100644
index 0000000..a427d5d
--- /dev/null
+++ b/src/templates/template-joboffers-conversation.pug
@@ -0,0 +1,3 @@
+sib-widget
+ template
+ sib-conversation(data-src="${value}", id-suffix="threads")
diff --git a/src/templates/template-joboffers-filter.pug b/src/templates/template-joboffers-filter.pug
new file mode 100644
index 0000000..b9d5e0d
--- /dev/null
+++ b/src/templates/template-joboffers-filter.pug
@@ -0,0 +1,8 @@
+sib-widget(name='joboffers-filter')
+ template
+ select
+ option(name='Offers',disabled) Offers
+ option(selected,name='Current offers') Current offers
+ option(name='Expired offers') Expired offers
+ option(name='All offers') All offers
+ option(name='My offers') Only my offers
\ No newline at end of file
diff --git a/src/templates/template-skills.pug b/src/templates/template-skills.pug
index cb2cdcb..cad1b90 100644
--- a/src/templates/template-skills.pug
+++ b/src/templates/template-skills.pug
@@ -2,3 +2,4 @@ sib-widget(name='skills-name')
template
li(class='skill') ${value.name}
+
diff --git a/src/templates/template-status.pug b/src/templates/template-status.pug
index 94e6e2f..c6f5fa8 100644
--- a/src/templates/template-status.pug
+++ b/src/templates/template-status.pug
@@ -1,3 +1,4 @@
sib-widget(name='status-template')
template
div#member-status ${value == true ? 'Available' : 'Busy'}
+
diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug
index fa5b3e0..6afdf97 100644
--- a/src/templates/template-team.pug
+++ b/src/templates/template-team.pug
@@ -1,11 +1,12 @@
+
sib-widget(name='team-template')
template
sib-display(
- data-src="${value.user.account['@id']}",
- data-fields='picture',
- widget-picture='sib-display-img'
+ data-src="${value.user['@id']}"
+ data-fields='account.picture',
+ widget-account.picture='sib-display-img'
)
- div
+ div(name='user.thumb')
span ${value.user.name}
sib-display(
data-src="${value.user.groups['@id']}",
@@ -14,3 +15,17 @@ sib-widget(name='team-template')
)
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}
+