diff --git a/copy_lib.js b/copy_lib.js
deleted file mode 100644
index 07b6dad23698a47c5dfd8547bff592b27b17605d..0000000000000000000000000000000000000000
--- a/copy_lib.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const { basename, join, resolve } = require('path');
-const fs = require('fs');
-const { exec } = require('child_process');
-
-const distDir = 'www/lib';
-
-const filelist = fs.readFileSync('lib_list.txt', 'utf-8').split(/\r?\n/);
-
-exec(`mkdir -p ${distDir}`, () => {
- filelist.forEach(path => {
- path = resolve(path);
- const filename = basename(path);
- const dest = fs.lstatSync(path).isDirectory()
- ? distDir
- : join(distDir, filename);
- const cmd = `rsync -ru ${path} ${dest}`;
- console.log(cmd);
- exec(cmd);
- });
-});
-
-if (!fs.existsSync('src/config.json')) {
- const cmd = `rsync -ru src/config.sample.json src/config.json`;
- console.log(cmd);
- exec(cmd);
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 69734fc95a039e2b73d158ad42936f938777e120..637731c00fc479faa1b6d4a16e321c052be1319d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"license": "MIT",
"scripts": {
"serve": "node server.js",
- "postinstall": "node copy_lib.js"
+ "postinstall": "node postinstall.js"
},
"devDependencies": {
"@babel/core": "^7.4.4",
diff --git a/postinstall.js b/postinstall.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff2fe590b0f6bdd25ce18cb41c3fa8977b1759c7
--- /dev/null
+++ b/postinstall.js
@@ -0,0 +1,8 @@
+const fs = require('fs');
+const { exec } = require('child_process');
+
+if (!fs.existsSync('src/config.json')) {
+ const cmd = `rsync -ru src/config.sample.json src/config.json`;
+ console.log(cmd);
+ exec(cmd);
+}
\ No newline at end of file
diff --git a/src/dependencies.pug b/src/dependencies.pug
index fe25872093368bc07e87270f020a5b36f1b3328c..10349e781efe827c5d8743a3cf434429bb5cbd27 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -2,7 +2,6 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
script(src="/scripts/index.js")
//- Stylesheets
-link(rel='stylesheet', href='/lib/normalize.css')
link(rel='stylesheet', href='/styles/index.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
@@ -10,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- local
//- script(type="module" src="/lib/sib-core/src/index.js")
//- script(type="module" src="/lib/sib-router/src/index.js")
-//- script(type="module" src="/lib/sib-chat/sib-chat.js")
+script(type="module" src="/lib/sib-chat/sib-chat.js")
//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
@@ -18,8 +17,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
+//- 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.12")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.11")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14")
diff --git a/src/get_config.pug b/src/get_config.pug
index befcb19ac4dbca463fe625ac3efc5defc6fb6830..5a04ca785b9572bbd2e96358ee936022e2193197 100644
--- a/src/get_config.pug
+++ b/src/get_config.pug
@@ -1,6 +1,5 @@
-- var __env = locals[process.env.ENV]
-
-
+ var __env = locals[process.env.ENV]
for(k in __env){
eval(`var ${k} = __env[${JSON.stringify(k)}]`);
}
\ No newline at end of file
diff --git a/src/index.pug b/src/index.pug
index 666c4c98bb04baf23dbddb87d1f06fe75b901adb..6d997c351899302e88d53cc8ffbe3357521a3e22 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -9,29 +9,29 @@ html(lang="en")
link(rel="icon" type="image/png" href="/images/favicon.png")
include dependencies.pug
body
- header#header.row(role='banner')
+ header#header(role='banner')
include header.pug
- .content.row
+ main
include menu-left.pug
- main#mainContainer
+ div#viewport
- #members(hidden).padded-width
- include page-members.pug
+ #members(hidden).no-sidebar
+ include page-members-directory.pug
- #job-offers(hidden).padded-width
+ #job-offers(hidden).no-sidebar
include page-job-offers.pug
- #job-offer-create(hidden).padded-width
+ #job-offer-create(hidden).no-sidebar
sib-link(class="backlink", next="job-offers") Back
include page-job-offer-create.pug
- #project(hidden)
+ #project(hidden).with-sidebar
include page-project.pug
-
- #circle(hidden)
- include page-group.pug
- #member-chat(hidden)
+ #circle(hidden).with-sidebar
+ include page-circle.pug
+
+ #member-chat(hidden).no-sidebar
include page-member-chat.pug
#user-profile(hidden)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index bc86895aaaacdde7bb0ac3590eeeec48bcab06b9..beb5cfcde0c2f369b36d57782b0faa12a65c6316 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -1,20 +1,10 @@
-nav#navbar
+nav#main__menu
sib-router#navbar-router(default-route='members')
sib-route.menu(name='members')
- div.menu-notification
- sib-display(
- data-src=`${sdn}/members/`,
- data-fields='-'
- )
div.menu-label Members
div.menu-icon.icon-people
div.divider
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
- div.menu-notification
- sib-display(
- data-src=`${sdn}/job-offers/`,
- data-fields='-'
- )
div.menu-label Job offers
div.menu-icon.icon-briefcase
sib-route(hidden, name='job-offer-create')
diff --git a/src/page-chat.pug b/src/page-chat.pug
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/page-group-chat.pug b/src/page-circle-chat.pug
similarity index 83%
rename from src/page-group-chat.pug
rename to src/page-circle-chat.pug
index 72bb999ff84ddd842c3ff9bb4cef6d7b52709864..606e5a7327d19b5e2a4778545643aecc9a3dcbb9 100644
--- a/src/page-group-chat.pug
+++ b/src/page-circle-chat.pug
@@ -1,4 +1,4 @@
-.chat-view
+.content-box.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug
new file mode 100644
index 0000000000000000000000000000000000000000..e7eeb59b0a7eec67865824f5ee9d8a722fb942c6
--- /dev/null
+++ b/src/page-circle-create.pug
@@ -0,0 +1,26 @@
+.content-box.with-form.full-width
+ h1 New group
+ p Here you can create a new group according to your interests, what you want to share, etc.
+
+ sib-form(
+ data-src=`${sdn}/circles/`,
+ range-owner=`${sdn}/users/`,
+ range-team=`${sdn}/members/`
+
+ data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
+
+ 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".',
+ value-owner-text='The one who will admin this channel',
+ 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'
+ )
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
new file mode 100644
index 0000000000000000000000000000000000000000..008bc6d3ae2d5dc6e76eb72938593953ebfb12fd
--- /dev/null
+++ b/src/page-circle-edit.pug
@@ -0,0 +1,9 @@
+#circle-edit.content-box.with-form.full-width
+ h1 Edit group
+ sib-form.block(
+ range-owner=`${sdn}/members/`,
+ data-fields="name, description, owner, team, jabberID, jabberRoom"
+ range-team=`${sdn}/members/`,
+ widget-team='sib-form-multiple-dropdown',
+ bind-resources
+ )
diff --git a/src/page-group-profile.pug b/src/page-circle-profile.pug
similarity index 96%
rename from src/page-group-profile.pug
rename to src/page-circle-profile.pug
index 55114d3d5801706f9ab06e3074e5d083e9ba4dc3..7784abfeab123add0c3832e80daf27ea6a30f4bb 100644
--- a/src/page-group-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,4 +1,4 @@
-.frame
+.content-box.full-width
h2 Channel's name:
sib-display(
data-fields='name',
diff --git a/src/page-group.pug b/src/page-circle.pug
similarity index 58%
rename from src/page-group.pug
rename to src/page-circle.pug
index 39635d0e60d03953930190e1698c18e0400b9789..a65038d6590d216abddfce881b2b36dff7f10871 100644
--- a/src/page-group.pug
+++ b/src/page-circle.pug
@@ -8,20 +8,19 @@ nav.jsRightMenu(role='navigation')
a Chat
sib-route(name='circle-profile')
li
- a Info
- sib-ac-checker(permission='change' bind-resources)
- sib-route(name='circle-edit')
- li
- a Edit
+ a Information
+ sib-route(name='circle-edit')
+ li
+ a Edit
sib-route(name='circle-create')
li
a Add new
.views-container
#circle-chat
- include page-group-chat.pug
+ include page-circle-chat.pug
#circle-profile
- include page-group-profile.pug
+ include page-circle-profile.pug
#circle-edit
- include page-group-edit.pug
+ include page-circle-edit.pug
#circle-create
- include page-group-create.pug
+ include page-circle-create.pug
diff --git a/src/page-group-create.pug b/src/page-group-create.pug
deleted file mode 100644
index 343db17fcbd268d35a74d24865538396723ff151..0000000000000000000000000000000000000000
--- a/src/page-group-create.pug
+++ /dev/null
@@ -1,26 +0,0 @@
-.frame-form.full-wide
- h1 New group
- p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
- .form-view
- sib-form(
- data-src=`${sdn}/circles/`,
- range-owner=`${sdn}/users/`,
- range-team=`${sdn}/members/`
-
- data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
-
- 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".',
- value-owner-text='The one who will admin this channel',
- 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'
- )
diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug
deleted file mode 100644
index b4c0676fc316738b2c8a5fa47cd8c94d652a544c..0000000000000000000000000000000000000000
--- a/src/page-group-edit.pug
+++ /dev/null
@@ -1,10 +0,0 @@
-#circle-edit.frame-form
- h1 Edit group
- .form-view
- sib-form.block(
- range-owner=`${sdn}/members/`,
- data-fields="name, description, owner, team, jabberID, jabberRoom"
- range-team=`${sdn}/members/`,
- widget-team='sib-form-multiple-dropdown',
- bind-resources
- )
diff --git a/src/page-groups.pug b/src/page-groups.pug
deleted file mode 100644
index 68885fb059d09fec0564dcd0a206c597c6b58fd5..0000000000000000000000000000000000000000
--- a/src/page-groups.pug
+++ /dev/null
@@ -1,7 +0,0 @@
-#circles
- sib-display#circles-list(
- data-src=`${sdn}/circles/`,
- data-fields='name, description',
- search-fields='name, description',
- next='group'
- )
diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug
index 93be66fe234499ed8c45609e749e74959156cabd..9e8619a40828360161def3cd32a0acd536dfa39b 100644
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@@ -1,4 +1,6 @@
-.frame-form.frame
+.content-box.with-form
+ h1 Post a new job offer
+ p This form allows you to share an offer to all members of the network.
sib-widget(name='title-text')
template
@@ -8,23 +10,20 @@
template
p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
- h1 Post a new job offer
- p.form-goal This form allows you to share an offer to all members of the network.
- .form-view
- sib-form.block(
- data-src=`${sdn}/job-offers/`,
- range-skills= `${sdn}/skills/`,
- range-author= `${sdn}/users/`,
+ sib-form.block(
+ data-src=`${sdn}/job-offers/`,
+ range-skills= `${sdn}/skills/`,
+ range-author= `${sdn}/users/`,
- data-fields='title, title-text, description, description-text, skills',
+ data-fields='title, title-text, description, description-text, skills',
- label-title='Title*',
- label-description='Description*',
- label-skills='The required skills for this mission:*',
-
- widget-title-text='title-text',
- widget-description-text='description-text',
- widget-skills='sib-form-auto-completion',
-
- next="job-offers"
- )
+ label-title='Title*',
+ label-description='Description*',
+ label-skills='The required skills for this mission:*',
+
+ widget-title-text='title-text',
+ widget-description-text='description-text',
+ widget-skills='sib-form-auto-completion',
+
+ next="job-offers"
+ )
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index be4a39f2a624075cc7b34756f055380b89c76ba7..f648a42a47e306cb86464c32ddfc491568c21ab8 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -1,10 +1,10 @@
-div.grid-layer
+div.job-offers__main
include templates/template-groups.pug
include templates/template-skills.pug
include templates/template-joboffers-filter.pug
- div.grid-layer-main.containerV
+ div.job-offers__content
h1 New offers
span Here you can find and post offers
sib-display#offers-list(
@@ -35,15 +35,9 @@ div.grid-layer
search-widget-open='joboffers-filter'
)
- div.grid-layer-links.containerV
+ div.job-offers__newoffer
template#groups-list-template
p ${value}
sib-link(next="job-offer-create").plus-button
div.icon-plus
div Post a new offer
- //-sib-link().containerH.containerCenter.how-link
- div.icon-idea
- div.grow How To find a new offer?
- //-sib-link().containerH.containerCenter.how-link
- div.icon-idea
- div.grow How to set notification?
diff --git a/src/page-member-chat.pug b/src/page-member-chat.pug
index a082cf02c7ae653f150f59b4be92084f7b1c9858..fdc62b265c8c2633ca05edb40e20e8b4566d940b 100644
--- a/src/page-member-chat.pug
+++ b/src/page-member-chat.pug
@@ -1,10 +1,9 @@
-div
- .chat-view
- sib-chat(
- data-authentication='login',
- data-auto-login='true',
- data-bosh-service-url=xmpp,
- data-debug='false',
- data-locales-url='en',
- bind-resources
- )
+.content-box.full-width.chat-view
+ sib-chat(
+ data-authentication='login',
+ data-auto-login='true',
+ data-bosh-service-url=xmpp,
+ data-debug='false',
+ data-locales-url='en',
+ bind-resources
+ )
diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug
deleted file mode 100644
index 31aaa9e39e4b8225b6fd692f404dccd155d64067..0000000000000000000000000000000000000000
--- a/src/page-member-edit.pug
+++ /dev/null
@@ -1,96 +0,0 @@
-.form-view
- sib-form.block(
- data-fields='user.first_name, user.last_name, user.account.picture, bio, groups, phone, skills, website',
- widget-user='hdapp-usereditinfo',
- range-groups=`${sdn}/groups/`, widget-skills='sib-form-multiple-dropdown',
- range-skills=`${sdn}/skills/`,
- bind-resources
- )
-
- #crop-modal
- .crop-wrapper
- img#crop-preview(src='')
- .control-bar
- button#cancel-img-cropping.btn.btn-link Annuler
- i#rotate-img.fa.fa-undo(aria-hidden='true')
- button#crop-img.btn.btn-link Valider
-
-
-//-script.
- class LDPFormImgUpload extends SIBWidget {
- get template() {
- return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
- <input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
- }
-
- render() {
- store.get(this.value).then( (value) => {
- this._value = value;
- this.innerHTML = this.template;
- });
- }
- }
- customElements.define("ldp-form-img-upload", LDPFormImgUpload);
- widget-avatar="ldp-form-img-upload"
-
-
-//-script.
- // Constant declaration
- const avatarPreview = document.querySelector("#avatar-preview");
- const avatarInput = document.querySelector("#avatar-input");
- const cropModal = document.querySelector("#crop-modal");
- const cropPreview = cropModal.querySelector("#crop-preview");
- const $cropPreview = $(cropPreview);
-
- // Triggers cropping on image upload
- avatarInput.addEventListener("change", function(e) {
- var img = avatarInput.files[0];
- var reader = new FileReader();
-
- reader.onloadend = function () {
- cropPreview.src = reader.result;
- cropModal.classList.add("cropping-mode");
- }
-
- if (img) {
- reader.readAsDataURL(img);//reads the data as a URL
- }
- });
- cropPreview.addEventListener("load", () => {
- $cropPreview.cropper({
- aspectRatio: 1/1,
- viewMode: 3,
- zoomable: false,
- });
- });
-
-
- // Rotate image
- cropModal.querySelector("#rotate-img").addEventListener("click", () => {
- $cropPreview.cropper("rotate", -90);
- });
-
-
- // Cancel cropping
- cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => {
- closeCropping();
- });
-
- // Shortcut
- document.querySelector("body").addEventListener("keydown", function(e) {
- // Escape key
- if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) {
- closeCropping();
- }
- });
- function closeCropping() {
- cropModal.classList.remove("cropping-mode");
- avatarInput.value = null;
- }
-
-
- // Validating cropping
- cropModal.querySelector("#crop-img").addEventListener("click", () => {
- avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL()
- closeCropping();
- });
diff --git a/src/page-members.pug b/src/page-members-directory.pug
similarity index 100%
rename from src/page-members.pug
rename to src/page-members-directory.pug
diff --git a/src/page-project-chat.pug b/src/page-project-chat.pug
index 59730e711d2840f00195fe6ff9cc359657e6a781..fdc62b265c8c2633ca05edb40e20e8b4566d940b 100644
--- a/src/page-project-chat.pug
+++ b/src/page-project-chat.pug
@@ -1,4 +1,4 @@
-.chat-view
+.content-box.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index 4e26997aa808bd603c702541ba02b39e73e281f8..e954c5ad867e65317f8d3e7237af75f4c5e967e9 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -1,33 +1,33 @@
-.frame-form.full-wide
+.content-box.with-form.full-width
h1 New project
- p.form-goal Here you can create your project, add members and assign them a job.
- .form-view
- sib-form.block(
- data-src=`${sdn}/projects/`,
- range-members=`${sdn}/members/`,
- range-team=`${sdn}/users/`,
+ p Here you can create your project, add members and assign them a job.
+
+ 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',
+ 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'
- )
+ 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='hd-template-project-title',
+ 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='hd-template-project-title',
+ 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 7849547c6a47957930469d4c5b7dd462a28ebe85..3038890e225c4d2f292b93a5ec79baaf4b99af47 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,59 +1,59 @@
-sib-widget(name='template-legend-team')
- template
- span ${label}
-
-sib-widget(name='template-members')
- template
-
- sib-form.team.is-horizontal(
- naked,
- data-src='${id}',
- data-fields='user.name, name',
- range-user.name=`${sdn}/users/`,
- class-name='field',
- class-user.name='field',
- label-name='Role',
- label-user.name='Member(s)',
- )
-
-.frame-form.full-wide
+
+.content-box.with-form.full-width
h1 Edit your project
- p.form-goal Here you can edit your projet's details
- .form-view
- sib-form.block(
- 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',
- label-name='Project\'s name',
- label-customer.logo='Customer\'s logo',
- label-description='Project description',
-
- set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee',
- range-businessProvider=`${sdn}/businessproviders/`,
- label-businessProvider='Business provider',
- label-businessProvider.fee='Amount of the contribution (%)',
- widget-fieldset-fee='template-legend-team',
- widget-businessProvider.fee='sib-form-number',
- label-fieldset-fee='Fee',
-
- set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
- 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-team',
- label-fieldset-customer='Customer information',
-
- set-block-project__team='fieldset-team, members',
- label-fieldset-team='The team',
- widget-fieldset-team='template-legend-team',
- widget-members='template-members',
- multiple-members,
-
- bind-resources
- )
+ p Here you can edit your projet's details
+
+ sib-widget(name='hd-template-project-title')
+ template
+ span ${label}
+
+ sib-widget(name='template-members')
+ template
+ sib-form.team.is-horizontal(
+ naked,
+ data-src='${id}',
+ data-fields='user.name, name',
+ range-user.name=`${sdn}/users/`,
+ class-name='field',
+ class-user.name='field',
+ label-name='Role',
+ label-user.name='Member(s)',
+ )
+
+ sib-form.block(
+ 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',
+ label-name='Project\'s name',
+ label-customer.logo='Customer\'s logo',
+ label-description='Project description',
+
+ set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee',
+ range-businessProvider=`${sdn}/businessproviders/`,
+ label-businessProvider='Business provider',
+ label-businessProvider.fee='Amount of the contribution (%)',
+ widget-fieldset-fee='hd-template-project-title',
+ widget-businessProvider.fee='sib-form-number',
+ label-fieldset-fee='Fee',
+
+ set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
+ 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='hd-template-project-title',
+ label-fieldset-customer='Customer information',
+
+ set-block-project__team='fieldset-team, members',
+ label-fieldset-team='The team',
+ widget-fieldset-team='hd-template-project-title',
+ widget-members='template-members',
+ multiple-members,
+
+ bind-resources
+ )
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index 7330f28b23426ec7e37ae4474b7147c90ae4087b..fb8cf934e1c28ed62fcd63ace06e0ae1a4597993 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,4 +1,4 @@
-.frame-form.full-wide
+.content-box.full-width
include templates/template-business-provider.pug
include templates/template-customer.pug
diff --git a/src/page-projects.pug b/src/page-projects.pug
deleted file mode 100644
index 4490ae255c62e8ca11ae7f2615efe4c03a9527ce..0000000000000000000000000000000000000000
--- a/src/page-projects.pug
+++ /dev/null
@@ -1,10 +0,0 @@
-//#projects
-div
- h1 Projects
- sib-display(
- data-src=`${sdn}/projects/`,
- data-fields='phone, customer, name',
- widget-customer='hdapp-client',
- search-fields='phone, name',
- next='project'
- )
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index e8c7a3298ee47b6e53603d6a11f89e619740cb28..7da580214bb4a5b74cfe210701ebc25d38863856 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,17 +1,21 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
+@import '../../node_modules/normalize.css/normalize';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/icons/index';
@import 'base/main';
-@import 'components/index';
-main#mainContainer {
+div#viewport {
+ display: flex;
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow-y: auto;
+ @import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/project-profile/index';
@import 'layout/circle-profile/index';
- @import 'layout/member-chat/index';
}
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 31cde5052699363ce7b99131a08bfee083765bc9..741219e31331057b1547a2dc770bf07e939f4aae 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -1,24 +1,4 @@
-@mixin style-template-fieldset($name: 'default') {
- template-legend-#{$name} {
- border-bottom: 1px solid $color-221-51-90;
- color: $color-233-18-29;
- font-size: 1.8rem;
- font-weight: 600;
- padding-bottom: 1rem;
- }
-}
-
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow;
background-color: $background;
-}
-
-%user-role {
- border: 1px solid $color-45-95-54;
- border-radius: 3px;
- color: $color-210-4-50;
- font-size: 1.4rem;
- font-weight: 400;
- margin-right: 0.4rem;
- padding: calc(1.6rem - 0.8em) 0.7em;
}
\ No newline at end of file
diff --git a/src/styles/base/_compat.scss b/src/styles/base/_compat.scss
index 8a31961f997c9077a083379bffde707498c6c0c6..4a5b3451252b7c4a7ad93ada305255d04182bd28 100644
--- a/src/styles/base/_compat.scss
+++ b/src/styles/base/_compat.scss
@@ -1,4 +1,4 @@
-.grid-layer {
+%grid-layer {
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
@@ -11,7 +11,7 @@
align-items: stretch;
}
-.grid-layer-main {
+%grid-layer-main {
@extend %flex-grid-layer;
grid-column-start: start;
grid-column-end: end;
@@ -19,7 +19,7 @@
grid-row-end: end;
}
-.grid-layer-links {
+%grid-layer-links {
@extend %flex-grid-layer;
grid-column-start: middle;
grid-column-end: end;
@@ -27,47 +27,8 @@
grid-row-end: middle;
}
-.containerH {
- display: flex;
- flex-wrap: wrap;
-}
-
-.containerV {
+%containerV {
display: flex;
flex-direction: column;
align-items: stretch;
-}
-
-.grow {
- flex-grow: 1;
- flex-shrink: 1;
-}
-
-.fix {
- flex-grow: 0;
- flex-shrink: 0;
-}
-
-.containerCenter {
- justify-content: center;
- align-items: center;
-}
-
-.reverse {
- flex-direction: row-reverse;
-}
-
-.row {
- display: flex;
- max-width: 100%;
-}
-
-.content {
- flex-direction: row;
- height: 100%;
- overflow: hidden;
-}
-
-.col {
- min-width: 0;
}
\ No newline at end of file
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c0e80063aea906cb722c7c9c681d3be3f9bc255e
--- /dev/null
+++ b/src/styles/base/form.scss
@@ -0,0 +1,294 @@
+.content-box {
+
+ &.with-form {
+
+ hd-template-project-title {
+ border-bottom: 1px solid $color-221-51-90;
+ color: $color-233-18-29;
+ font-size: 1.8rem;
+ font-weight: 600;
+ padding-bottom: 1rem;
+ }
+
+ sib-form {
+ border-bottom: 1px solid $color-210-17-91;
+ padding-bottom: 2.55rem;
+ }
+
+ h1 {
+ color: $color-233-18-29;
+ font-weight: bold;
+ font-size: 2rem;
+ text-align: center;
+ }
+
+ p:first-child {
+ margin-bottom: 6.8rem;
+ text-align: center;
+ }
+
+ [name$='-text'] {
+ font-size: 1.5rem;
+ margin-bottom: 2em;
+ }
+
+ div[name^='block-'] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ input {
+ -webkit-appearance: none;
+ align-items: center;
+ background: $color-222-57-95;
+ border: none;
+ color: $color-233-18-29;
+ display: inline-flex;
+ justify-content: flex-start;
+ line-height: 1.5;
+ vertical-align: top;
+ }
+
+ 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;
+
+ >label {
+ color: $color-244-10-70;
+ font-weight: 600;
+ margin: 2em 0 0.5em;
+ text-transform: uppercase;
+
+ >div {
+ padding-bottom: 1rem;
+ }
+ }
+
+ select,
+ textarea {
+ background: $color-222-57-95;
+ border: none;
+ color: $color-233-18-29;
+ line-height: 1.5;
+ width: 100%;
+
+ }
+
+ select,
+ textarea {
+ padding: 1.7rem;
+ }
+
+ select {
+ margin-bottom: 1.7rem;
+ }
+ }
+
+ sib-form-auto-completion,
+ sib-form-checkbox,
+ sib-form-multiple-dropdown {
+
+ label {
+ color: $color-216-4-22;
+ font-weight: 600;
+ text-transform: initial;
+ }
+ }
+
+ sib-form-auto-completion {
+
+ div.choices__inner {
+ background-color: inherit;
+ border: none;
+ display: flex;
+ flex-direction: column-reverse;
+ padding-left: 0;
+
+ div.choices__list {
+ margin-top: 1.7rem;
+
+ div.choices__item {
+
+ button.choices__button {
+ border-left: 1px solid $color-43-100-50;
+ opacity: 1;
+ padding-left: 0;
+ }
+ }
+ }
+
+ input[type='text'].choices__input {
+ max-width: 27.2rem;
+ min-width: 27.2rem;
+ }
+ }
+ }
+
+ sib-form-checkbox {
+ flex-direction: row;
+
+ [type='checkbox'] {
+ position: relative;
+ margin-top: 2em;
+
+ &:before {
+ border: 2px solid $color-210-5-56;
+ content: '';
+ height: 1rem;
+ left: 0;
+ margin-left: 1rem;
+ padding-bottom: 0.2rem;
+ position: absolute;
+ width: 1.2rem;
+ z-index: 1;
+ }
+
+ &:checked {
+ &:before {
+ border: 2px solid $color-210-5-56;
+ color: $color-244-73-62;
+ height: 1rem;
+ left: 0;
+ margin-left: 1rem;
+ padding-bottom: 0.2rem;
+ position: absolute;
+ width: 1.2rem;
+ z-index: 1;
+ @include mdi('check');
+ }
+ }
+
+ &:after {
+ background: $color-0-0-100;
+ content: '';
+ height: 1rem;
+ position: absolute;
+ width: 1rem;
+ }
+ }
+ }
+
+ sib-form-dropdown {
+
+ select {
+ 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 {
+ appearance: none;
+ background-color: $color-0-0-100;
+ border: 1px solid;
+ border-radius: 100%;
+ color: $color-244-73-62;
+ font-size: 2.55rem;
+ height: 1em;
+ line-height: 0;
+ margin: 0.34rem;
+ padding: 0 0.04em 0.08em;
+ vertical-align: middle;
+ width: 1em;
+ }
+ }
+
+ sib-form-textarea {
+ align-items: stretch;
+ }
+
+ sib-multiple-form {
+
+ >label {
+ display: none;
+ }
+ }
+
+ input[type='submit'] {
+ margin-top: 6rem;
+ background-color: $color-233-18-29;
+ color: $color-0-0-100;
+ float: right;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+ }
+
+ .is-horizontal {
+ display: flex;
+ }
+
+ sib-multiple-form[name='members'] {
+
+ >div {
+ align-items: center;
+ display: flex;
+ }
+
+ >div:not(:nth-child(-n + 2)) {
+
+ label {
+
+ >div {
+ display: none;
+ }
+ }
+ }
+
+ button {
+ appearance: none;
+ background-color: $color-0-0-100;
+ border: 1px solid;
+ border-radius: 100%;
+ color: $color-244-73-62;
+ font-size: 2.55rem;
+ height: 1em;
+ line-height: 0;
+ margin: 0.34rem;
+ padding: 0 0.04em 0.08em;
+ vertical-align: middle;
+ width: 1em;
+
+ &::after {
+ content: Add;
+ }
+ }
+ }
+}
+sib-form {
+
+ form > * {
+ margin-top: 0.85rem;
+ }
+
+ // button like
+ input[type='color'],
+ input[type='file'],
+ input[type='reset'],
+ input[type='submit'] {
+ display: inline-block;
+ padding: 0.85rem 2.55rem;
+ border: none;
+ border-radius: 100em;
+ font-weight: normal;
+ }
+
+ input[type='reset'] {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/components/header.scss b/src/styles/base/header.scss
similarity index 98%
rename from src/styles/components/header.scss
rename to src/styles/base/header.scss
index 95b723815f2f6d7d79a598a343e7efb5df5a257e..c9bafca851c55e23e2b775dcd8ef6b70430a5e9f 100644
--- a/src/styles/components/header.scss
+++ b/src/styles/base/header.scss
@@ -1,5 +1,6 @@
-
#header {
+ max-height: 51px;
+ height: 51px;
align-items: center;
background-color: $color-0-0-100;
color: $color-216-4-22;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c4d2251e657b15b92ad5cecb7ef3f609851c3d07..b27746a264d85da493aa796d5b616788237a6b51 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -23,6 +23,14 @@ $breakpoints: (phone: 480px,
height: 100vh;
overflow: hidden;
}
+
+ main {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ max-width: 100%;
+ overflow: hidden;
+ }
}
img {
@@ -76,39 +84,60 @@ button {
padding: 0;
}
-%padding-main {
- padding: 5rem;
+sib-route,
+sib-link,
+button,
+input,
+a {
+ cursor: pointer;
+ &:hover,
+ &:link,
+ &:active {
+ cursor: pointer;
+ }
}
-.padded-width {
- flex: 1;
- @extend %padding-main;
+%padding-main {
+ padding: 5rem;
}
-.frame {
+.content-box {
@include window-style-modal();
@extend %padding-main;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
-}
-/* Dividing into columns */
-@mixin respond-to($breakpoint) {
+ &.full-width {
+ background: $color-0-0-100;
+ flex: 1;
+ font-size: 1.5rem;
+ margin: 0 auto;
+ min-height: calc(100vh - 84px);
+ }
+}
- @if map-has-key($breakpoints, $breakpoint) {
+.backlink {
+ font-size: 1.5rem;
+ margin: 2rem 0 0 2rem;
+ @include icon('arrow-left-circle');
+ color: #3d4057;
+ text-decoration: underline;
- @media (min-width: map-get($breakpoints, $breakpoint)) {
- @content;
- }
+ &::before {
+ text-decoration: none;
}
- @else {
- @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
- +"Available breakpoints are: #{map-keys($breakpoints)}.";
+ &::before {
+ font-size: 2rem;
+ margin-right: 1rem;
}
}
// Compatibility layer for non-updated components
@import 'compat';
+// Other base components
+@import 'form';
+@import 'header';
+@import 'menu-left';
\ No newline at end of file
diff --git a/src/styles/components/menu-left.scss b/src/styles/base/menu-left.scss
similarity index 99%
rename from src/styles/components/menu-left.scss
rename to src/styles/base/menu-left.scss
index 5e44ee69ddaac9f39cb219da06aff6deaf3dd2a2..4f10076e9d57cd4ae3ff6e0700217a07ad3cfb40 100644
--- a/src/styles/components/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,4 +1,4 @@
-#navbar {
+#main__menu {
background-color: $color-233-18-29;
color: $color-0-0-100;
display: block;
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index b9c8a25e310cb153fa2a3c880865638d309ec4b5..ee78562b8a04541a6eff878a327abcab492dd4bd 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,8 +1,6 @@
-@import 'form';
-@import 'content';
+@import 'chat';
@import 'filters';
@import 'howto';
-@import 'header';
-@import 'menu-left';
-@import 'menu-right';
-@import 'skills';
\ No newline at end of file
+@import 'sidebar';
+@import 'skills';
+@import 'user-role';
\ No newline at end of file
diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bfc68a371f28c539ea5fdd4a29cee2b76c95615f
--- /dev/null
+++ b/src/styles/components/chat.scss
@@ -0,0 +1,15 @@
+
+// chat
+
+.chat-view {
+ padding: 1.7rem;
+ height: calc(100vh - 84px);
+
+ > sib-chat {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+}
+
diff --git a/src/styles/components/content.scss b/src/styles/components/content.scss
deleted file mode 100644
index 762cec91744fb379f1968b3527667f66ad0dc7dd..0000000000000000000000000000000000000000
--- a/src/styles/components/content.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-.backlink {
- font-size: 1.5rem;
- margin: 2rem 0 0 2rem;
- @include icon('arrow-left-circle');
- color: #3d4057;
- text-decoration: underline;
-
- &::before {
- text-decoration: none;
- }
-
- &::before {
- font-size: 2rem;
- margin-right: 1rem;
- }
-}
-
-sib-route,
-sib-link {
- cursor: pointer;
-}
-
-// group
-
-#group-profile {
- sib-display-div[name='name'] div {
- @extend h1;
- }
-
- sib-display-div[name='label-description'] div {
- @extend h2;
- }
-}
-// chat
-
-.chat-view {
- padding: 1.7rem;
- position: relative;
- z-index: 0;
- @include window-style-modal();
- height: calc(100vh - 104px);
-
- > sib-chat {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- }
-}
-
-#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.7rem;
- }
- }
-
- sib-link[next='member-chat'] {
- border-style: solid;
- display: flex;
- border-radius: 25px;
- border-style: solid;
- border-color: $color-244-73-62;
- color: $color-244-73-62;
- padding: 1.7rem;
- text-decoration:none;
- }
-
- div[name='pseudonym'] {
- margin-top: -1.7rem;
- margin-bottom: 1.7rem;
- }
-
- #member-info {
- &:after {
- content: '';
- display: block;
- clear: both;
- }
- }
-}
-
-sib-form {
-
- form > * {
- margin-top: 0.85rem;
- }
-
- // button like
- input[type='color'],
- input[type='file'],
- input[type='reset'],
- input[type='submit'] {
- display: inline-block;
- padding: 0.85rem 2.55rem;
- border: none;
- border-radius: 100em;
- font-weight: normal;
- }
-
- input[type='reset'] {
- display: none;
- }
-}
diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss
deleted file mode 100644
index add6ffd6539f823aa066aa2a5a691d7b5e87a9ef..0000000000000000000000000000000000000000
--- a/src/styles/components/form.scss
+++ /dev/null
@@ -1,297 +0,0 @@
-@include style-template-fieldset('fee');
-@include style-template-fieldset('customer');
-@include style-template-fieldset('team');
-
-.frame-form {
- &.full-wide {
- display: flex;
- flex: 1;
- font-size: 1.5rem;
- flex-direction: column;
- margin: 0 auto;
- min-height: 100vh;
- padding: 6.8rem 8.5rem 10.2rem;
- background: $color-0-0-100;
- }
-
- .form-view {
- border-bottom: 1px solid $color-210-17-91;
- padding-bottom: 2.55rem;
- }
-
- h1 {
- color: $color-233-18-29;
- font-weight: bold;
- font-size: 2rem;
- text-align: center;
- }
-
- p.form-goal {
- margin-bottom: 6.8rem;
- text-align: center;
- }
-
- [name$='-text'] {
- font-size: 1.5rem;
- margin-bottom: 2em;
- }
-
- div[name^='block-'] {
- display: flex;
- flex-direction: column;
- }
-
- input {
- -webkit-appearance: none;
- align-items: center;
- background: $color-222-57-95;
- border: none;
- color: $color-233-18-29;
- display: inline-flex;
- justify-content: flex-start;
- line-height: 1.5;
- vertical-align: top;
- }
-
- 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;
-
- > label {
- color: $color-244-10-70;
- font-weight: 600;
- margin: 2em 0 0.5em;
- text-transform: uppercase;
-
- > div {
- padding-bottom: 1rem;
- }
- }
-
- select,
- textarea {
- background: $color-222-57-95;
- border: none;
- color: $color-233-18-29;
- line-height: 1.5;
- width: 100%;
-
- }
-
- select,
- textarea {
- padding: 1.7rem;
- }
-
- select {
- margin-bottom: 1.7rem;
- }
- }
-
- sib-form-auto-completion,
- sib-form-checkbox,
- sib-form-multiple-dropdown {
-
- label {
- color: $color-216-4-22;
- font-weight: 600;
- text-transform: initial;
- }
- }
-
- sib-form-auto-completion {
-
- div.choices__inner {
- background-color: inherit;
- border: none;
- display: flex;
- flex-direction: column-reverse;
- padding-left: 0;
-
- div.choices__list {
- margin-top: 1.7rem;
-
- div.choices__item {
- /*@extend %skill;*/
-
- button.choices__button {
- border-left: 1px solid $color-43-100-50;
- opacity: 1;
- padding-left: 0;
- }
- }
- }
-
- input[type='text'].choices__input {
- max-width: 27.2rem;
- min-width: 27.2rem;
- }
- }
- }
-
- sib-form-checkbox {
- flex-direction: row;
-
- [type='checkbox'] {
- cursor: pointer;
- position: relative;
- margin-top: 2em;
-
- &:before {
- border: 2px solid $color-210-5-56;
- content: '';
- height: 1rem;
- left: 0;
- margin-left: 1rem;
- padding-bottom: 0.2rem;
- position: absolute;
- width: 1.2rem;
- z-index: 1;
- }
-
- &:checked {
- &:before {
- border: 2px solid $color-210-5-56;
- color: $color-244-73-62;
- height: 1rem;
- left: 0;
- margin-left: 1rem;
- padding-bottom: 0.2rem;
- position: absolute;
- width: 1.2rem;
- z-index: 1;
- @include mdi('check');
- }
- }
-
- &:after {
- background: $color-0-0-100;
- content: '';
- height: 1rem;
- position: absolute;
- width: 1rem;
- }
- }
- }
-
- sib-form-dropdown {
-
- select {
- 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 {
- appearance: none;
- background-color: $color-0-0-100;
- border: 1px solid;
- border-radius: 100%;
- color: $color-244-73-62;
- cursor: pointer;
- font-size: 2.55rem;
- height: 1em;
- line-height: 0;
- margin: 0.34rem;
- padding: 0 0.04em 0.08em;
- vertical-align: middle;
- width: 1em;
- }
- }
-
- sib-form-textarea {
- align-items: stretch;
- }
-
- sib-multiple-form {
-
- > label {
- display: none;
- }
- }
-
- input[type='submit'] {
- margin-top: 6rem;
- background-color: $color-233-18-29;
- color: $color-0-0-100;
- float: right;
- font-weight: bold;
- text-transform: uppercase;
- }
-}
-
-#project-create,
-#project-edit {
-
- input,
- textarea {
- margin-bottom: 3.4rem;
- }
-}
-
-.is-horizontal {
- display: flex;
-}
-
-.field {
- margin-right: 0.75rem;
- max-width: 50%;
-}
-
-.is-expanded {
- flex-grow: 1;
-}
-
-sib-multiple-form[name='members'] {
-
- > div {
- align-items: center;
- display: flex;
- }
-
- > div:not(:nth-child(-n + 2)) {
-
- label {
-
- > div {
- display: none;
- }
- }
- }
-
- button {
- appearance: none;
- background-color: $color-0-0-100;
- border: 1px solid;
- border-radius: 100%;
- color: $color-244-73-62;
- cursor: pointer;
- font-size: 2.55rem;
- height: 1em;
- line-height: 0;
- margin: 0.34rem;
- padding: 0 0.04em 0.08em;
- vertical-align: middle;
- width: 1em;
-
- &::after {
- content: Add;
- }
- }
-}
diff --git a/src/styles/components/menu-right.scss b/src/styles/components/menu-right.scss
deleted file mode 100644
index ae75eed06d512a45ae23c15e23e654b38e108e84..0000000000000000000000000000000000000000
--- a/src/styles/components/menu-right.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-#mainContainer {
- display: flex;
- flex-grow: 1;
- flex-shrink: 1;
- overflow-y: auto;
-
-
- >div#project,
- >div#circle {
- flex-grow: 1;
- display: flex;
- flex-direction: row-reverse;
- align-items: stretch;
- overflow-x: hidden;
-
- .views-container {
- flex: 1 0 0;
- overflow-y: auto;
- }
-
- >div {
- transition: all 0.5s;
- }
- }
-
- >div {
-
- nav {
- transition: all 0.5s;
-
- >sib-router {
- background-color: $color-222-52-90;
- color: $color-233-18-29;
- flex: 0 0 auto;
- font-weight: 600;
-
- >ul {
- cursor: pointer;
- list-style: none;
- margin: 0;
- padding-left: 0;
-
- li {
- align-items: center;
- border-bottom: 1px solid $color-229-25-79;
- display: flex;
- margin: 0;
- padding: 2.55rem 2.55rem;
- position: relative;
- width: 12em;
-
- &::before {
- float: left;
- font-size: 4rem;
- margin-left: 0;
- margin-right: 2.55rem;
- }
- }
-
- >li {
- @include icon('arrow-right-circle');
- }
-
- >sib-route {
-
- &[active] {
- background-color: $color-233-18-29;
- color: $color-46-100-67;
- display: inline-block;
- }
-
- &[name^='circle'],
- &[name^='project'] {
-
- >li::before {
- font-size: 4rem;
- }
- }
-
- &[name$='chat']>li {
- @include ci('chat');
- }
-
- &[name$='create']>li {
- @include ci('offer');
- }
-
- &[name$='edit']>li {
- @include ci('list');
- }
-
- &[name$='profile']>li {
- @include ci('information');
- }
- }
- }
- }
-
- &.offsite-is-closed {
- transform: translate(15.5rem);
-
- & .jsOffsiteToggle::before {
- transform: rotate(180deg);
- }
-
- &~.views-container {
- margin-left: -15.5rem;
- transform: translate(15.5rem);
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..872aaaef0e488607169bde613def8f18235ea878
--- /dev/null
+++ b/src/styles/components/sidebar.scss
@@ -0,0 +1,106 @@
+.no-sidebar {
+ flex: 1;
+ @extend %padding-main;
+}
+
+.with-sidebar {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: stretch;
+ overflow-x: hidden;
+
+ .views-container {
+ flex: 1 0 0;
+ overflow-y: auto;
+ }
+
+ >div {
+ transition: all 0.5s;
+ }
+
+ nav {
+ transition: all 0.5s;
+
+ >sib-router {
+ background-color: $color-222-52-90;
+ color: $color-233-18-29;
+ flex: 0 0 auto;
+ font-weight: 600;
+
+ >ul {
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ padding-left: 0;
+
+ li {
+ align-items: center;
+ border-bottom: 1px solid $color-229-25-79;
+ display: flex;
+ margin: 0;
+ padding: 2.55rem 2.55rem;
+ position: relative;
+ width: 12em;
+
+ &::before {
+ float: left;
+ font-size: 4rem;
+ margin-left: 0;
+ margin-right: 2.55rem;
+ }
+ }
+
+ >li {
+ @include icon('arrow-right-circle');
+ }
+
+ >sib-route {
+
+ &[active] {
+ background-color: $color-233-18-29;
+ color: $color-46-100-67;
+ display: inline-block;
+ }
+
+ &[name^='circle'],
+ &[name^='project'] {
+
+ >li::before {
+ font-size: 4rem;
+ }
+ }
+
+ &[name$='chat']>li {
+ @include ci('chat');
+ }
+
+ &[name$='create']>li {
+ @include ci('offer');
+ }
+
+ &[name$='edit']>li {
+ @include ci('list');
+ }
+
+ &[name$='profile']>li {
+ @include ci('information');
+ }
+ }
+ }
+ }
+
+ &.offsite-is-closed {
+ transform: translate(15.5rem);
+
+ & .jsOffsiteToggle::before {
+ transform: rotate(180deg);
+ }
+
+ &~.views-container {
+ margin-left: -15.5rem;
+ transform: translate(15.5rem);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/components/skills.scss b/src/styles/components/skills.scss
index 48bbbae427dba10805bba6637659513af29bcfa0..a5265489f1578b263b163ce0f8b74ee02141ef35 100644
--- a/src/styles/components/skills.scss
+++ b/src/styles/components/skills.scss
@@ -1,5 +1,3 @@
-/* TEMPLATE SKILLS*/
-
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;
diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fed7680d90ab9e1a3fc2ec2608c76f60357c803e
--- /dev/null
+++ b/src/styles/components/user-role.scss
@@ -0,0 +1,9 @@
+%user-role {
+ border: 1px solid $color-45-95-54;
+ border-radius: 3px;
+ color: $color-210-4-50;
+ font-size: 1.4rem;
+ font-weight: 400;
+ margin-right: 0.4rem;
+ padding: calc(1.6rem - 0.8em) 0.7em;
+ }
\ No newline at end of file
diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss
index 882ce8633ccd4b172cfd064caeca923594385e04..94d0bbf04d9652b7584070e2796f02655c9f94c8 100644
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -1,5 +1,4 @@
#circle-profile {
- min-height: 100%;
.block-group > div {
display: flex;
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss
index 42858a7b6ee26e5b8bd66dc15b7611cc20ada181..186b44658e85d81bbd2f8614b9e94089b044b24d 100644
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@@ -1,3 +1,17 @@
+.job-offers__main {
+ @extend %grid-layer;
+}
+
+.job-offers__content {
+ @extend %grid-layer-main;
+ @extend %containerV;
+}
+
+.job-offers__newoffer {
+ @extend %grid-layer-links;
+ @extend %containerV;
+}
+
#job-offers {
.plus-button {
@@ -21,7 +35,7 @@
}
#offers-list {
- @extend .grid-layer;
+ @extend %grid-layer;
>sib-form {
grid-column-start: start;
@@ -46,9 +60,6 @@
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
- /*&:nth-child(odd) {
- background-color: $color-210-25-95;
- }*/
[name='user-thumb'] {
align-items: center;
diff --git a/src/styles/layout/member-chat/_index.scss b/src/styles/layout/member-chat/_index.scss
deleted file mode 100644
index 5f2bf8f05d6679f75900043308bb617d7e2d63f1..0000000000000000000000000000000000000000
--- a/src/styles/layout/member-chat/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'member-chat.scss';
\ No newline at end of file
diff --git a/src/styles/layout/member-chat/member-chat.scss b/src/styles/layout/member-chat/member-chat.scss
deleted file mode 100644
index bd679dc7a59f64247feaebfae4d9996d0051587b..0000000000000000000000000000000000000000
--- a/src/styles/layout/member-chat/member-chat.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-#member-chat {
- width: 100%;
-}
\ No newline at end of file
diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss
index 40a52b1275147112ec21eb55831883c3a67aa61e..e430fbb95385ce392152f924221ba39606d92f5a 100644
--- a/src/styles/layout/members/members.scss
+++ b/src/styles/layout/members/members.scss
@@ -35,26 +35,11 @@ member-info-groups {
@extend %user-role;
}
-.how-link {
- @extend .howto;
- background-color: $color-0-0-100;
- color: $color-216-4-22;
- flex-wrap: nowrap;
- .icon-idea {
- background-color: $color-46-100-67;
- border-radius: 100%;
- justify-content: center;
- margin-right: 1.2rem;
- width: 1.8em;
- height: 1.8em;
- }
-}
-
#members-list {
- @extend .grid-layer;
+ @extend %grid-layer;
#members-list__content {
- @extend .grid-layer;
+ @extend %grid-layer;
nav {
align-items: center;
@@ -194,7 +179,6 @@ member-info-groups {
[name='user.name'] {
font-weight: bold;
- margin: 0;
@extend h1;
}
diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss
index d81d61c112642e7d628cefa9d78fe6284fc12d48..67adc47c95d6dc12358ecea64f041bef8d3b8f2b 100644
--- a/src/styles/layout/project-profile/project-profile.scss
+++ b/src/styles/layout/project-profile/project-profile.scss
@@ -1,8 +1,8 @@
#project-profile {
-
+
[name^='block-']:not([name='block-title']) {
margin-top: 5.1rem;
-
+
[name^='label-'] {
display: block;
font-weight: bold;
@@ -10,7 +10,7 @@
text-transform: uppercase;
@extend h2;
}
-
+
sib-display-value:not(:first-of-type),
ul,
[name*='job'] {
@@ -22,23 +22,23 @@
border-bottom: 1px solid $color-221-51-90;
display: flex;
padding-bottom: 3.4rem;
-
- > * {
+
+ >* {
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
padding-right: 0.85rem;
text-transform: uppercase;
}
-
- > [name^='const-'] {
+
+ >[name^='const-'] {
padding: 0;
}
- > sib-display-value[name='name'] {
+ >sib-display-value[name='name'] {
padding-left: 0.85rem;
}
-
+
> :nth-child(5) {
color: $color-233-18-29;
font-weight: normal;
@@ -66,7 +66,7 @@
flex-direction: column;
width: 90%;
}
-
+
[name='block-logo'] {
box-sizing: border-box;
display: block;
@@ -78,162 +78,163 @@
}
[name='businessProvider'] {
-
+
ul {
list-style: none;
padding-left: 0;
li {
-
+
&:first-child {
margin-bottom: 0.5em;
}
-
+
span {
font-weight: bold;
}
}
}
}
-}
-
-#clientBox {
- display: flex;
- margin-left: auto;
- margin-right: auto;
- margin-top: 1.7rem;
- max-width: 100%;
-
- > * {
- border: 1px solid $color-221-51-90;
- flex: 1 1 auto;
- justify-content: space-between;
- margin: 0 -0.1rem -0.1rem 0;
- min-width: 25vw;
- padding: 0;
- h5 {
- margin-left: 2rem;
- margin-top: 2rem;
- }
+ #clientBox {
+ display: flex;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1.7rem;
+ max-width: 100%;
+
+ >* {
+ border: 1px solid $color-221-51-90;
+ flex: 1 1 auto;
+ justify-content: space-between;
+ margin: 0 -0.1rem -0.1rem 0;
+ min-width: 25vw;
+ padding: 0;
- ul {
- font-size: 1.5rem;
- list-style: none;
- margin: -2.04rem 0 3.74rem -2.04rem;
+ h5 {
+ margin-left: 2rem;
+ margin-top: 2rem;
+ }
- li {
+ ul {
+ font-size: 1.5rem;
+ list-style: none;
+ margin: -2.04rem 0 3.74rem -2.04rem;
- span {
- font-weight: bold;
+ li {
+
+ span {
+ font-weight: bold;
+ }
}
}
- }
- &:first-child {
- li {
-
- span {
- margin-right: 0.3em;
- }
+ &:first-child {
+ li {
- &:first-child {
- margin-bottom: 0.5em;
- }
+ span {
+ margin-right: 0.3em;
+ }
- &:last-child {
- margin-top: 2.4em;
+ &:first-child {
+ margin-bottom: 0.5em;
+ }
+
+ &:last-child {
+ margin-top: 2.4em;
+ }
}
}
- }
- &:not(:first-child) {
- padding-left: 5.1rem;
+ &:not(:first-child) {
+ padding-left: 5.1rem;
- li {
- margin-bottom: 1.7rem;
+ li {
+ margin-bottom: 1.7rem;
- &:last-child {
- margin-top: 2.2rem;
- }
+ &:last-child {
+ margin-top: 2.2rem;
+ }
- &::before {
- color: $color-43-100-50;
- font-size: 2.2rem;
- padding: 0 1rem 0 0;
+ &::before {
+ color: $color-43-100-50;
+ font-size: 2.2rem;
+ padding: 0 1rem 0 0;
+ }
}
}
}
}
-}
-[name='block-team'] {
-
- > sib-multiple {
+ [name='block-team'] {
- label {
- display: none;
- }
+ >sib-multiple {
- > team-template[name='members'] {
- display: grid;
- grid-column-gap: 1.6rem;
- grid-template-columns: 7vh auto;
- grid-template-rows: repeat(2, 5.2vh);
-
- > sib-display:first-child {
- align-self: center;
- grid-column: 1 / span 1;
- grid-row: 1 / span 2;
-
- div {
- background-color: $color-0-0-100;
- border-radius: 50%;
- height: 7vh;
- overflow: hidden;
- position: relative;
- width: 7vh;
-
- img {
- height: 100%;
- left: 0;
- object-fit: cover;
- position: absolute;
- top: 0;
- width: 100%;
- }
- }
+ label {
+ display: none;
}
- > div:nth-child(2) {
- align-self: end;
- display: flex;
- grid-column: 2 / span 1;
- grid-row: 1 / span 1;
+ >team-template[name='members'] {
+ display: grid;
+ grid-column-gap: 1.6rem;
+ grid-template-columns: 7vh auto;
+ grid-template-rows: repeat(2, 5.2vh);
- span {
+ >sib-display:first-child {
align-self: center;
- font-weight: 600;
+ grid-column: 1 / span 1;
+ grid-row: 1 / span 2;
+
+ div {
+ background-color: $color-0-0-100;
+ border-radius: 50%;
+ height: 7vh;
+ overflow: hidden;
+ position: relative;
+ width: 7vh;
+
+ img {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
}
- span ~ sib-display {
-
- > div {
- display: flex;
- margin-left: 1rem;
-
- sib-multiple [name='name'] {
- @extend %user-role;
+ >div:nth-child(2) {
+ align-self: end;
+ display: flex;
+ grid-column: 2 / span 1;
+ grid-row: 1 / span 1;
+
+ span {
+ align-self: center;
+ font-weight: 600;
+ }
+
+ span~sib-display {
+
+ >div {
+ display: flex;
+ margin-left: 1rem;
+
+ sib-multiple [name='name'] {
+ @extend %user-role;
+ }
}
}
}
- }
- > span:nth-child(3) {
- align-self: start;
- grid-column: 2 / span 1;
- grid-row: 2 / span 1;
+ >span:nth-child(3) {
+ align-self: start;
+ grid-column: 2 / span 1;
+ grid-row: 2 / span 1;
+ }
}
}
}
-}
+
+}
\ No newline at end of file