Merge branch 'jbpasquier/css' into jbpasquier/doc

This commit is contained in:
Jean-Baptiste Pasquier 2019-05-14 18:24:45 +02:00
commit 0acd1748f7
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
82 changed files with 2217 additions and 4848 deletions

View File

@ -0,0 +1,41 @@
/label ~BUG
### How is it now?
(What actually happens)
### How should it be?
(What you should see instead)
### Steps to reproduce
(How one can reproduce the issue - this is very important)
1. Step 1
1. Step 2
1. Step 3
### Relevant logs and/or screenshots
(Paste any relevant logs - please use code blocks to format console output,
logs, and code as it's very hard to read otherwise.)
### Possible fixes
(If you can, link to the line of code that might be responsible for the problem)
If you can, give an estimation of the time needed to fix (in hours)
/estimate Xh
### How to fix a Bug
1. Ask any question you have in the issue comments before starting
1. Create a new branch named issue-${ISSUE_NUMBER}
1. Write a test that is failing to validate that this bug exists
1. If you can not recreate this bug, feel free to submit just a test with clear name and documentation linking to this issue
1. If a test fails indeed, continue to the next step
1. Now, when you have a regression test ready - create a fix for that bug
1. Write any additional tests if needed
1. Document in docstrings in general documentation what was wrong
1. Submit a merge request

View File

@ -0,0 +1,27 @@
## What needs to be done?
/estimate Xh
/label ~feature
## Technical details
Are there any technical details worth mentioning?
## Links
1. Link to user story in wiki
1. other related Gitlab issues
## How to complete
1. How to complete a Feature
1. Ask any question you have in the issue comments before starting
1. Create a new branch named issue-${ISSUE_NUMBER}
1. Implement a simple test to illustrate the desired functionality
1. Write some code to complete this task
1. Write some additional tests to cover edge cases and some possible errors
1. Write documentation about what have you done and why you have done it this way
1. Submit a merge request

View File

@ -0,0 +1,61 @@
## Checklist
<!---
Please, make sure you have changed the topic and also
described briefly what have you done. Thanks!
-->
I have done ...
- [ ] This commits targets only one specific issue
- [ ] The commit message follows our guidelines
- [ ] Tests for the changes have been added
- [ ] Docs have been added or updated
- [ ] I have assigned my architect to review this merge request
- [ ] I have checked how to create a [merge request]()
## Issues
<!---
Which issue this PR closes? It can close only one issue.
Which issues this PR references?
Please, specify all issues.
Format is: Closes #X or Refs #Y
Docs: https://docs.gitlab.com/ee/user/project/issues/closing_issues.html#via-merge-request
-->
## Time spent
<!---
This information is only required for statistics and analysis.
But we need to know exactly how much time you have spent,
please try to be as accurate as possible.
Format is: /spend 1h
Docs: https://docs.gitlab.com/ee/workflow/time_tracking.html
-->
/spend Xh
## Assignee
<!---
You need to assign your architect to review your merge request.
Format: /assign @username
Docs: https://docs.gitlab.com/ee/user/project/quick_actions.html
-->
/assign
## Feedback
<!---
Did you encounter any other problems you want to share with us?
Optional. Feel free to remove this section if you don't have any feedback.
-->
<!--- Thank you for you contribution! -->

View File

@ -6,11 +6,6 @@ SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
default: build
clean:
git clean -fXd -e !src/config.json
install: node_modules copy_lib copy_samples
build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
watch:
@ -21,23 +16,6 @@ watch:
sleep 0.5; \
done
serve:
node server
# npm
node_modules:
npm install
# vendor lib
copy_lib:
@node copy_lib.js
# samples
copy_samples: src/config.json
src/config.json:
@cp -n src/config.sample.json src/config.json
# pug
$(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
@echo pug: $< ➜ $@
@ -60,7 +38,7 @@ $(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.p
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)
$(DIST_DIR)/styles/index.css: src/styles/_index.scss $(wildcard src/*.scss src/*/*.scss src/*/*/*.scss src/*/*/*/*.scss)
@echo sass: $< ➜ $@
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
@ -76,11 +54,6 @@ buildstaging: build
buildprod: build
$(MAKE) $(DIST_DIR)/index.prod.html
deploy: pull install build
pull:
git pull
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
@ -91,4 +64,4 @@ syncprod: buildprod
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
.PHONY: default build watch sync syncprod buildstaging buildprod

View File

@ -1,20 +0,0 @@
const { basename, join, resolve } = require('path');
const { readFileSync, lstatSync } = require('fs');
const { exec } = require('child_process');
const distDir = 'www/lib';
const filelist = 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 = lstatSync(path).isDirectory()
? distDir
: join(distDir, filename);
const cmd = `rsync -ru ${path} ${dest}`;
console.log(cmd);
exec(cmd);
});
});

View File

@ -1,5 +1 @@
node_modules/normalize.css/normalize.css
node_modules/@webcomponents/webcomponentsjs
node_modules/@webcomponents/html-imports/src/html-imports.js
node_modules/oidc-client/dist/oidc-client.min.js
node_modules/oidc-client/dist/oidc-client.js

3192
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,21 +1,20 @@
{
"name": "hd-app",
"name": "sib-app",
"version": "1.0.0",
"license": "ISC",
"license": "MIT",
"scripts": {
"serve": "node server.js",
"postinstall": "node postinstall.js"
},
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/cli": "^7.1.0",
"node-sass": "^4.9.3",
"@babel/core": "^7.4.4",
"@babel/cli": "^7.4.4",
"node-sass": "^4.12.0",
"pug-cli": "^1.0.0-alpha6",
"browser-sync": "^2.24.7",
"express": "^4.16.3"
"express": "^4.16.4"
},
"dependencies": {
"@webcomponents/html-imports": "^1.2.0",
"@webcomponents/webcomponentsjs": "^1.2.7",
"include-media": "^1.4.9",
"normalize.css": "^8.0.0",
"oidc-client": "^1.5.3-beta.1",
"simple-line-icons": "^2.4.1"
"normalize.css": "^8.0.1"
}
}

8
postinstall.js Normal file
View File

@ -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);
}

View File

@ -1,5 +1,4 @@
const port = 9000;
const browserSyncPort = 3000;
const port = 3000;
const distPath = 'www';
// express server
@ -8,19 +7,5 @@ const express = require('express');
const app = express();
app
.use(express.static(distPath))
// .use('/src', express.static(join(__dirname, 'src')))
.get(/^[^.]*$/, (req, rep) =>
rep.sendFile(join(__dirname, distPath, '/index.html')),
)
.get(/^[^.]*$/, (req, rep) => rep.sendFile(join(__dirname, distPath, '/index.html')))
.listen(port);
// browser sync
const bs = require('browser-sync').create();
bs.init({
files: [distPath + '/**/*'],
proxy: `http://localhost:${port}`,
open: false,
notify: false,
port: browserSyncPort
// tunnel: true,
});

View File

@ -1,32 +1,24 @@
// Scripts
//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.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')
//- Stylesheets
link(rel='stylesheet', href='/styles/index.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;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')
// Web components
//- local
//script(type="module" src="/lib/sib-core/sib-display.js")
//script(type="module" src="/lib/sib-router/sib-router.js")
//script(type="module" src="/lib/sib-core/sib-form.js")
//- script(type="module" src="/lib/sib-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-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
//- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
script(type="module" src="https://unpkg.com/@startinblox/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-notifications@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
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.15")

View File

@ -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)}]`);
}

View File

@ -1,4 +1,3 @@
#button-toggle
#logo
img(src="/images/logo.png" width=111 height=32)

View File

@ -1,4 +1,5 @@
include get_config.pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
@ -8,30 +9,33 @@ html(lang="en")
link(rel="icon" type="image/png" href="/images/favicon.png")
include dependencies.pug
body
div.layer
header#header.row(role='banner')
header#header(role='banner')
include header.pug
.content.row
main
include menu-left.pug
div#viewport
main#mainContainer
//- #dashboard(hidden)
include page-dashboard.pug
#members(hidden)
include page-members.pug
#member-chat(hidden)
include page-member-chat.pug
#job-offers(hidden)
#members(hidden).no-sidebar
include page-members-directory.pug
#job-offers(hidden).no-sidebar
include page-job-offers.pug
#job-offer-create(hidden)
#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
//- #client-creation(hidden)
include page-client-creation.pug
//-#groups(hidden)
include page-groups.pug
#circle(hidden)
include page-group.pug
//- #search(hidden)
include page-search.pug
#circle(hidden).with-sidebar
include page-circle.pug
#member-chat(hidden).with-sidebar
include page-member-chat.pug
#user-profile(hidden)
#user-settings(hidden)
#user-admin(hidden)

View File

@ -1,22 +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-fields,
data-src=`${sdn}/members/`,
counter-template='${counter}'
)
div.menu-label Members
div.menu-icon.icon-people
div.divider
sib-route.menu(name='job-offers')
div.menu-notification
sib-display(
data-fields,
data-src=`${sdn}/job-offers/`,
counter-template='${counter}'
)
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label Job offers
div.menu-icon.icon-briefcase
sib-route(hidden, name='job-offer-create')
@ -27,7 +15,7 @@ nav#navbar
div.menu-icon.icon-arrow-up
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, rdf-type='hd:project', use-id='')
div.sub-menu
sib-display(
data-src=`${sdn}/projects/`,
@ -43,7 +31,7 @@ nav#navbar
div.menu-icon.icon-arrow-up
div.menu-label Cercles
div.menu-icon.icon-globe
sib-route(hidden, name='circle', id-prefix=`${sdn}/circles/`)
sib-route(hidden, name='circle', id-prefix=`${sdn}/circles/`, rdf-type='hd:circle')
div.sub-menu
sib-display(
data-src=`${sdn}/circles/`,
@ -58,7 +46,7 @@ nav#navbar
div.menu-icon.icon-arrow-up
div.menu-label Chat
div.menu-icon.icon-envelope-letter
sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`)
sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`, rdf-type='foaf:user', use-id='')
div.sub-menu
sib-display(
data-src=`${sdn}/members/`,

View File

View File

@ -1,4 +1,4 @@
.chat-view
.content-box.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',

View File

@ -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'
)

9
src/page-circle-edit.pug Normal file
View File

@ -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
)

View File

@ -1,4 +1,4 @@
.frame
.content-box.full-width
h2 Channel's name:
sib-display(
data-fields='name',

View File

@ -1,3 +1,12 @@
.views-container
#circle-chat
include page-circle-chat.pug
#circle-profile
include page-circle-profile.pug
#circle-edit
include page-circle-edit.pug
#circle-create
include page-circle-create.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='circle-chat')
ul
@ -8,20 +17,10 @@ nav.jsRightMenu(role='navigation')
a Chat
sib-route(name='circle-profile')
li
a Info
sib-ac-checker(permission='change' bind-resources)
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
#circle-profile
include page-group-profile.pug
#circle-edit
include page-group-edit.pug
#circle-create
include page-group-create.pug

View File

@ -1,26 +0,0 @@
.frame-form
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'
)

View File

@ -1,10 +0,0 @@
#circle-edit
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
)

View File

@ -1,7 +0,0 @@
#circles
sib-display#circles-list(
data-src=`${sdn}/circles/`,
data-fields='name, description',
search-fields='name, description',
next='group'
)

View File

@ -1,4 +1,6 @@
.frame-form
.content-box.with-form
h1 Post a new job offer
p.center This form allows you to share an offer to all members of the network.
sib-widget(name='title-text')
template
@ -8,10 +10,6 @@
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...'
sib-link(next='job-offers' class='back') Back
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/`,

View File

@ -1,11 +1,11 @@
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
h2 New offers
div.job-offers__content
h1 New offers
span Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
@ -16,7 +16,7 @@ div.grid-layer
widget-author.groups='groups-name',
multiple-author.groups,
widget-skills='skills-name',
multiple-skills,
action-send='member-chat',
@ -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").containerH.containerCenter.action-link
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?

View File

@ -1,5 +1,4 @@
div
.chat-view
.content-box.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',

View File

@ -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();
});

View File

@ -1,4 +1,4 @@
.chat-view
.content-box.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',

View File

@ -1,7 +1,7 @@
.frame-form
.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
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/`,
@ -16,12 +16,12 @@
label-description='Project description',
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
widget-fieldset-fee='template-legend-fee',
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='template-legend-customer',
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',

View File

@ -1,24 +1,27 @@
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
.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(
range-businessProvider=`${sdn}/businessproviders/`,
range-team=`${sdn}/users/`,
range-members=`${sdn}/project-members/`,
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',
@ -28,10 +31,12 @@ sib-widget(name='template-legend-team')
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-fee',
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',
@ -41,20 +46,14 @@ sib-widget(name='template-legend-team')
label-customer.role='Role within the company',
label-customer.email='Email',
label-customer.phone='Phone',
widget-fieldset-customer='template-legend-customer',
widget-fieldset-customer='hd-template-project-title',
label-fieldset-customer='Customer information',
set-block-project__team='fieldset-team, team, members',
label-team='Member',
label-members='Role',
widget-fieldset-team='template-legend-team',
multiple-team,
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
)
//-
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).

View File

@ -1,4 +1,4 @@
.frame
.content-box.full-width
include templates/template-business-provider.pug
include templates/template-customer.pug
@ -23,13 +23,13 @@
widget-businessProvider='template-business-provider'
set-block-customer='label-customer, customer',
value-label-customer='CUSTOMER INFORMATIONS:'
value-label-customer='CUSTOMER INFORMATIONS:',
widget-customer='customer-template',
set-block-team='label-team, members',
value-label-team='TEAM:'
value-label-team='TEAM:',
widget-members='team-template',
multiple-members,
multiple-members='',
bind-resources
)

View File

@ -1,21 +1,4 @@
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
ul
li.jsOffsiteToggle
a Fold menu
sib-route(name='project-chat')
li
a Chat
sib-route(name='project-profile')
li
a Information
sib-route(name='project-edit')
li
a Edit
sib-route(name='project-create')
li
a Add new
#views-container
.views-container
#project-chat
include page-project-chat.pug
#project-profile
@ -24,3 +7,20 @@ nav.jsRightMenu(role='navigation')
include page-project-edit.pug
#project-create
include page-project-create.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
ul
li.jsOffsiteToggle
a Fold menu
sib-route(name='project-chat', use-id)
li
a Chat
sib-route(name='project-profile', use-id)
li
a Information
sib-route(name='project-edit', use-id)
li
a Edit
sib-route(name='project-create', use-id)
li
a Add new

View File

@ -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'
)

View File

@ -1,13 +1,13 @@
nav(role="user's functionalities menu")
sib-router
ul
sib-route(name='')
sib-route(name='user-profile')
li
a(href='#') My profile
sib-route(name='')
sib-route(name='user-settings')
li
a(href='#') Settings
sib-route(name='')
sib-route(name='user-admin')
li
a Admin
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

View File

@ -1,63 +0,0 @@
document.addEventListener("DOMContentLoaded", function (event) {
// Constants declaration
const navBar = document.querySelector("#navbar");
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector("#button-toggle");
// Shortcuts
window.addEventListener("keydown", function (e) {
// CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault();
e.stopPropagation();
openSearchBar();
}
// Escape key
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
closeSearchBar();
}
});
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
function openSearchBar(e) {
navBar.classList.add("search-mode");
searchBar.querySelector("#search-input").focus();
searchView.classList.add("search-mode");
}
function closeSearchBar(e) {
navBar.classList.remove("search-mode");
searchView.classList.remove("search-mode");
}
function emptySearchBar(e) {
searchInput.value = '';
openSearchBar();
searchInput.focus;
}
// Synchronizes the search input with the <ldp-form>s
searchInput.addEventListener("keyup", (e) => {
searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
el.value = searchInput.value;
});
});
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
});

View File

@ -1,35 +1,9 @@
document.addEventListener('DOMContentLoaded', function (event) {
const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('#button-toggle');
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
function resize() {
setTimeout(() =>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if (!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
}));
}
window.addEventListener('resize', resize);
window.addEventListener('navigate', resize);
window.addEventListener('popstate', resize);
document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize);
resize();
// Toggle sub-menus
//- Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
menu.addEventListener('click', e => {
@ -37,12 +11,14 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
});
// Open/close menu on the right
//- Open/close menu on the right
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
rightMenu.classList.toggle('offsite-is-closed');
})
rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
})
});
});

21
src/styles/_index.scss Normal file
View File

@ -0,0 +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';
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';
}

View File

@ -0,0 +1,4 @@
@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;
}

View File

@ -0,0 +1,25 @@
// Color Variables
$color-43-100-50: hsl(43, 100%, 50%);
$color-45-95-54: hsl(45, 95%, 54%);
$color-46-100-67: hsl(46, 100%, 67%);
$color-46-100-50: hsl(46, 100%, 50%);
$color-0-0-100: hsl(0, 0%, 100%);
$color-210-17-91: hsl(210, 17%, 91%);
$color-222-52-90: hsl(222, 52%, 90%);
$color-210-25-95: hsl(210, 25%, 95%);
$color-222-57-95: hsl(222, 57%, 95%);
$color-213-20-91: hsl(213, 20%, 91%);
$color-221-51-90: hsl(221, 51%, 90%);
$color-0-0-85: hsl(0, 0%, 85%);
$color-229-25-79: hsl(229, 25%, 79%);
$color-215-9-73: hsl(215, 9%, 73%);
$color-244-10-70: hsl(244, 10%, 70%);
$color-215-6-63: hsl(215, 6%, 63%);
$color-210-5-56: hsl(210, 5%, 56%);
$color-210-4-50: hsl(210, 4%, 50%);
$color-213-4-50: hsl(213, 4%, 50%);
$color-213-13-86: hsla(213, 13%, 86%, 0.2);
$color-0-0-29: hsl(0, 0%, 29%);
$color-233-18-29: hsl(233, 18%, 29%);
$color-216-4-22: hsl(216, 4%, 22%);
$color-244-73-62: hsl(244, 73%, 62%);

View File

@ -0,0 +1,34 @@
%grid-layer {
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]7em[middle]auto[end];
}
%flex-grid-layer {
display: flex;
flex-direction: column;
align-items: stretch;
}
%grid-layer-main {
@extend %flex-grid-layer;
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
%grid-layer-links {
@extend %flex-grid-layer;
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}
%containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}

294
src/styles/base/form.scss Normal file
View File

@ -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.center {
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;
}
}

View File

@ -1,8 +1,9 @@
#header {
max-height: 51px;
height: 51px;
align-items: center;
background-color: $color-white;
color: $color-dark-lava;
background-color: $color-0-0-100;
color: $color-216-4-22;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
flex-shrink: 0;
@ -15,15 +16,6 @@
}
}
#button-toggle {
color: $color-dark-lava;
cursor: pointer;
display: none;
font-size: 3.2rem;
padding: 2.3rem;
@include icon('menu');
}
#logo {
flex: 1 1 0;
}
@ -34,14 +26,14 @@
#search-input {
border-radius: 10em;
padding: 0.64rem 1.28rem;
border: 1px solid $color-bombay;
border: 1px solid $color-215-9-73;
height: 3.8rem;
width: 28rem;
-webkit-appearance: textfield;
& ~ #close-search-icon,
& ~ #search-icon {
color: $color-bombay;
color: $color-215-9-73;
display: block;
font-size: 1.7rem;
margin: auto;
@ -49,7 +41,7 @@
right: 3.7rem;
top: 50%;
transform: translateY(-50%);
-webkit-text-stroke: 1px $color-bombay;
-webkit-text-stroke: 1px $color-215-9-73;
}
& ~ #close-search-icon {
@ -115,8 +107,8 @@ details {
details#user-controls {
summary:focus {
background-color: $color-purple-dark;
color: $color-white;
background-color: $color-233-18-29;
color: $color-0-0-100;
outline: none;
}
@ -160,7 +152,7 @@ details#user-controls {
z-index: 1;
> nav {
background-color: $color-white;
background-color: $color-0-0-100;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
@ -178,14 +170,14 @@ details#user-controls {
padding: 1.6rem 1.3rem;
a {
color: $color-text-base;
color: $color-213-4-50;
text-decoration: none;
}
}
}
button {
color: $color-text-base;
color: $color-213-4-50;
padding: 1.6rem 1.3rem;
text-align: left;
width: 100%;
@ -194,8 +186,8 @@ details#user-controls {
}
&[open] {
background-color: $color-purple-dark;
color: $color-white;
background-color: $color-233-18-29;
color: $color-0-0-100;
#user-controls__profile {

147
src/styles/base/main.scss Normal file
View File

@ -0,0 +1,147 @@
$breakpoints: (phone: 480px,
tablet: 768px,
desktop: 1024px) !default;
[hidden],
.hidden {
display: none !important;
}
* {
outline: none;
}
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body {
background-color: $color-210-25-95;
color: $color-213-4-50;
font-size: 1.6rem;
overflow: hidden;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
main {
display: flex;
flex-direction: row;
height: 100%;
max-width: 100%;
overflow: hidden;
}
}
img {
max-height: 100%;
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-216-4-22;
font-weight: 600;
padding: 0;
span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 2.1rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
button {
background: none;
border: none;
padding: 0;
}
sib-route,
sib-link,
button,
input,
a {
cursor: pointer;
&:hover,
&:link,
&:active {
cursor: pointer;
}
}
%padding-main {
padding: 5rem;
}
.content-box {
@include window-style-modal();
@extend %padding-main;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
&.full-width {
background: $color-0-0-100;
flex: 1;
font-size: 1.5rem;
margin: 0 auto;
min-height: calc(100vh - 84px);
}
}
.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;
}
}
// Compatibility layer for non-updated components
@import 'compat';
// Other base components
@import 'form';
@import 'header';
@import 'menu-left';

View File

@ -1,14 +1,10 @@
#navbar {
background-color: $color-purple-dark;
color: $color-white;
#main__menu {
background-color: $color-233-18-29;
color: $color-0-0-100;
display: block;
flex: 0 0 16em;
flex-direction: column;
overflow: auto;
flex: 0 0 16em;
transition: flex-basis 0.5s ease-in-out;
// max-width: 16rem;
// position: relative;
// min-height: 100%;
&.open {
transform: translateX(0);
@ -35,18 +31,17 @@
padding: 1.6rem;
&[active] {
background-color: $color-mustard;
color: $color-purple-dark;
background-color: $color-46-100-67;
color: $color-233-18-29;
.menu-icon:before {
background-color: $color-purple-dark;
color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8);
background-color: $color-233-18-29;
color: $color-0-0-100;
}
.menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark;
color: $color-mustard;
background-color: $color-233-18-29;
color: $color-46-100-67;
}
}
@ -64,9 +59,6 @@
height: 1.9em;
line-height: 1.9em;
width: 1.9em;
// transform: perspective(1000px) translateZ(1px) scale(1);
// will-change: transform;
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
}
@ -82,26 +74,9 @@
width: 8em;
}
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification {
align-self: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
width: 2em;
> sib-display {
> div:first-of-type {
@extend %notification;
}
}
}
.menu-chevron {
align-items: center;
color: $color-spun-pearl;
color: $color-244-10-70;
display: flex;
flex-grow: 0;
flex-shrink: 0;
@ -118,7 +93,7 @@
padding-left: 2.88rem;
div {
color: $color-spun-pearl;
color: $color-244-10-70;
cursor: pointer;
padding-bottom: 1.12rem;
@ -138,24 +113,8 @@
.divider {
height: 1px;
background-color: $color-gainsboro-a02;
background-color: $color-213-13-86;
}
}
}
@include media('width<phone') {
#button-toggle {
display: block;
}
#navbar {
//transform: translateX(-120%);
transition: flex-basis 0.5s ease-in-out;
flex-basis: 0;
//position: absolute;
//top: auto;
//display: none;
//z-index: 1;
}
}

View File

@ -0,0 +1,6 @@
@import 'chat';
@import 'filters';
@import 'howto';
@import 'sidebar';
@import 'skills';
@import 'user-role';

View File

@ -0,0 +1,19 @@
// chat
.chat-view {
padding: 0;
height: calc(100vh - 84px);
position: relative;
> sib-chat {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: calc(100vh - 84px);
z-index: 0;
}
}

View File

@ -14,7 +14,7 @@
-webkit-appearance: none;
border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
color: $color-taupe-gray;
color: $color-210-5-56;
font-size: 1.36rem;
line-height: 1.80;
margin-top: 1.36rem;
@ -27,7 +27,7 @@
}
select {
background: $color-white;
background: $color-0-0-100;
background-image: url("/images/chevron-down.png");
background-position: right 12px top 60%;
background-repeat: no-repeat;

View File

@ -0,0 +1,17 @@
.howto {
padding: 0.85rem;
margin-bottom: 1.7rem;
margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}

View File

@ -0,0 +1,3 @@
@import 'custom-icons';
@import 'icons';
@import 'material-design-icons';

View File

@ -0,0 +1,107 @@
.no-sidebar {
flex: 1;
@extend %padding-main;
}
.with-sidebar {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: stretch;
overflow-x: hidden;
.views-container {
flex: 1 0 0;
overflow-y: auto;
-webkit-backface-visibility: hidden;
&.sidebar-is-closed {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
}
>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);
}
}
}
}

View File

@ -0,0 +1,16 @@
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;
}
.skill {
background-color: $color-43-100-50;
border: 1px solid $color-43-100-50;
border-radius: 2em;
color: $color-0-0-100;
display: block;
font-size: 1.4rem;
font-weight: bold;
margin: 0.4rem 1rem 0.4rem 0;
padding: 0.5rem 2rem;
}

View File

@ -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;
}

View File

@ -1,191 +0,0 @@
// job offers
// .new-job-offer {
// @extend %button;
// text-transform: uppercase;
// margin-left: 1em;
// margin-bottom: 1em
// //float: right;
// }
// skills
/*#member-profile sib-display-lookuplist {
display: flex;
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li[name*='skills'] {
padding: 0.3em 1.2em;
border: 1px solid;
border-radius: 2em;
margin: 0.25em;
background-color: $color-selective-yellow;
color: $color-white;
font-weight: bold;
}
}
*/
// 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;
@extend %frame;
height: calc(100vh - 104px);
> sib-chat {
@include pos();
}
}
// member-profile && members
/*.members-list-condensed {
img {
width: 50px;
height: 100px;
border-radius: 100%;
object-fit: cover;
object-position: top;
}
label {
display: none;
}
> div > sib-display > div {
display: grid;
grid-template-columns: 0.5fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
div[name="teammate-img"] {
background: blue;
grid-row: 1 / -1;
}
}
ul{
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
}
>[name$="user"]{
color: $color-dark-lava;
}
>[name$="avatar"]{
grid-column-start: first;
grid-column-end: middle;
grid-row-start: first;
grid-row-end: end;
}
}
// ul {
// padding-left: 1em;
// }
}*/
hdapp-available {
display: block;
text-align: right;
strong {
@extend %button;
}
}
/*#member-profile {
ul {
@include list-reset();
}
}*/
#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-majorelle-blue;
color: $color-majorelle-blue;
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'] {
@extend %button;
}
input[type='reset'] {
display: none;
}
}
/*
label {
@extend h2;
&:after {
content: ':';
}
}
*/

View File

@ -1,223 +0,0 @@
.frame-form {
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
padding: 6.8rem 8.5rem 10.2rem;
@extend %frame;
.form-view {
border-bottom: 1px solid $color-platinum;
padding-bottom: 2.55rem;
}
}
@include styleTemplateFieldset('fee');
@include styleTemplateFieldset('customer');
@include styleTemplateFieldset('team');
#circle-create,
#circle-edit,
#job-offer-create,
#project-create,
#project-edit {
flex: 1;
font-size: 1.5rem;
h1 {
color: $color-purple-dark;
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;
}
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 {
@extend %label;
}
input,
select,
textarea {
background: $color-glitter;
border: none;
color: $color-purple-dark;
line-height: 1.5;
width: 100%;
}
input,
select,
textarea {
padding: 1.7rem;
}
select {
margin-bottom: 1.7rem;
}
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-multiple-dropdown {
label {
color: $color-dark-lava;
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-selective-yellow;
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-taupe-gray;
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-taupe-gray;
color: $color-majorelle-blue;
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-white;
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-white;
border: 1px solid;
border-radius: 100%;
color: $color-majorelle-blue;
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;
}
input[type='submit'] {
margin-top: 6rem;
@extend %submit-form;
}
}
#project-create,
#project-edit {
input,
textarea {
margin-bottom: 3.4rem;
}
}

View File

@ -1,28 +0,0 @@
@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';
@import 'variables';
@import 'mixins';
@import 'main';
@import 'form';
@import 'content';
@import 'filters';
@import 'right-panel';
@import 'group-profile';
@import 'job-offers';
@import 'member-profile';
@import 'members';
@import 'project-profile';
@import 'member-chat';
// @import 'members';
@import 'header';
@import 'menu-left';
@import 'menu-right';

View File

@ -1,124 +0,0 @@
#offers-list {
@extend .grid-layer;
> sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
> div {
grid-column-start: start;
grid-column-end: end;
grid-row-start: middle;
grid-row-end: end;
&:first-of-type {
margin-top: 5rem;
}
> sib-display {
@extend %frame;
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-anti-flash-white;
}*/
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
> * {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-quartz;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
> * {
@extend %group;
}
}
sib-display-img {
background-color: $color-white;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 1.3rem;
float: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
}
}
}

View File

@ -0,0 +1 @@
@import 'circle-profile';

View File

@ -1,5 +1,4 @@
#circle-profile {
min-height: 100%;
.block-group > div {
display: flex;
@ -31,7 +30,7 @@
}
> div[name='teammate-img'] {
background-color: $color-bombay;
background-color: $color-215-9-73;
border-radius: 50%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
@ -61,7 +60,7 @@
}
> sib-display-value[name='teammate-profile'] {
color: $color-dark-lava;
color: $color-216-4-22;
display: block;
font-size: 1.2rem;
grid-column: 1 / span 2;
@ -69,7 +68,7 @@
}
> sib-display-value[name='teammate-contact'] {
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 1.2rem;
justify-self: stretch;
grid-column: 3 / span 2;

View File

@ -0,0 +1 @@
@import 'job-offers.scss';

View File

@ -0,0 +1,174 @@
.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 {
@extend .howto;
background-color: $color-43-100-50;
color: $color-0-0-100;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.5rem 0.5rem 0.5rem 0;
}
}
#offers-list {
@extend %grid-layer;
>sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
>div {
grid-column-start: start;
grid-column-end: end;
grid-row-start: middle;
grid-row-end: end;
&:first-of-type {
margin-top: 5rem;
}
>sib-display {
@include window-style-modal();
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
>* {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-0-0-29;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
label {
display: none;
}
>* {
@extend %user-role;
}
}
sib-display-img {
background-color: $color-0-0-100;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='skills'] {
label {
display: none;
}
}
[name='send'] {
color: $color-244-73-62;
font-size: 1.3rem;
float: right;
>sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
>* {
margin: 0.25em;
}
strong {
background-color: $color-244-73-62;
border: none;
border-radius: 100em;
color: $color-0-0-100;
display: inline-block;
font-weight: normal;
padding: 0.85rem 1.7rem;
}
}
}
}
}
}

View File

@ -0,0 +1,2 @@
@import 'members';
@import 'member-profile';

View File

@ -3,25 +3,14 @@
flex-direction: column;
flex-grow: 1;
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@extend %backlink;
&::before {
font-size: 2rem;
margin-right: 1rem;
}
}
#member-info {
background-color: $color-white;
background-color: $color-0-0-100;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem;
min-height: 100vh;
div[name='member-profile__bio'] {
border-bottom: 1px solid $color-link-water;
border-bottom: 1px solid $color-221-51-90;
display: grid;
grid-template-areas: "avatar name status"
"avatar pseudo status"
@ -49,7 +38,7 @@
grid-area: name;
> sib-display-value[name^='user.'] {
color: $color-dark-lava;
color: $color-216-4-22;
font-weight: bold;
@extend h1;
}
@ -80,7 +69,7 @@
member-status[name$='available']{
align-self: flex-end;
color: $color-majorelle-blue;
color: $color-244-73-62;
grid-area: status;
justify-self: flex-end;
@ -97,7 +86,7 @@
@include ci('awareness');
&::before {
border-bottom: 2px solid $color-selective-yellow;
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
@ -107,7 +96,7 @@
@include ci('armor');
&::before {
border-bottom: 2px solid $color-selective-yellow;
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
@ -122,9 +111,9 @@
[next=member-chat] {
@include icon('speech');
border: 1px solid $color-majorelle-blue;
border: 1px solid $color-244-73-62;
border-radius: 2em;
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 18px;
font-weight: bold;
justify-self: end;
@ -146,6 +135,7 @@
label {
font-weight: bold;
display: block;
padding-bottom: 0.5rem;
}
}

View File

@ -1,8 +1,45 @@
%member-info {
sib-multiple[name^='user.'],
> member-info > div,
> sib-display-value {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-43-100-50;
padding: 0 0.6em 0 0;
}
}
[name$='city'] * {
@include mdi('atom');
}
[name$='email'] * {
@include mdi('email-outline');
}
[name$='phone'] * {
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"]:not(:empty) {
@include mdi('link-variant');
}
}
member-info-groups {
@extend %user-role;
}
#members-list {
@extend .grid-layer;
@extend %grid-layer;
#members-list__content {
@extend .grid-layer;
@extend %grid-layer;
nav {
align-items: center;
@ -11,15 +48,15 @@
justify-content: center;
button {
color: $color-anti-flash-white;
color: $color-210-25-95;
&:before {
color: $color-dark-lava;
color: $color-216-4-22;
@include icon('arrow-left-circle');
}
&:disabled::before {
color: $color-manatee;
color: $color-215-6-63;
}
}
@ -53,14 +90,14 @@
justify-content: space-between;
&:first-of-type {
color: $color-quartz;
color: $color-0-0-29;
font-weight: bold;
justify-content: center;
margin: 3.75rem 0;
position: relative;
&::before {
border-top: 1px solid $color-timberwolf;
border-top: 1px solid $color-0-0-85;
bottom: 0;
content: '';
left: 0;
@ -73,7 +110,7 @@
}
span {
background-color: $color-anti-flash-white;
background-color: $color-210-25-95;
padding: 0 60px;
}
}
@ -81,7 +118,7 @@
> sib-display {
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
color: $color-rolling-stone;
color: $color-210-4-50;
cursor: pointer;
display: flex;
flex-flow: column wrap;
@ -110,7 +147,7 @@
}
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
border-bottom: 1px solid $color-210-25-95;
display: flex;
flex-direction: column;
padding: 0.85rem 0 3.4rem;
@ -122,7 +159,7 @@
}
member-picture {
background-color: $color-white;
background-color: $color-0-0-100;
border-radius: 50%;
height: 28vh;
margin: 1.7rem auto;
@ -142,7 +179,6 @@
[name='user.name'] {
font-weight: bold;
margin: 0;
@extend h1;
}
@ -157,9 +193,9 @@
[next=member-chat] {
align-self: center;
border: 1px solid $color-majorelle-blue;
border: 1px solid $color-244-73-62;
border-radius: 3.4rem;
color: $color-majorelle-blue;
color: $color-244-73-62;
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 2.55rem 0.7rem;

View File

@ -0,0 +1 @@
@import 'project-profile'

View File

@ -0,0 +1,240 @@
#project-profile {
[name^='block-']:not([name='block-title']) {
margin-top: 5.1rem;
[name^='label-'] {
display: block;
font-weight: bold;
margin-bottom: 1.4rem;
text-transform: uppercase;
@extend h2;
}
sib-display-value:not(:first-of-type),
ul,
[name*='job'] {
font-size: 1.5rem;
}
}
[name='block-title'] {
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-'] {
padding: 0;
}
>sib-display-value[name='name'] {
padding-left: 0.85rem;
}
> :nth-child(5) {
color: $color-233-18-29;
font-weight: normal;
text-transform: none;
}
[name='entitled'] {
margin-left: auto;
}
> :nth-last-child(-n+2) {
color: $color-213-4-50;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
}
}
[name='infos'] {
display: flex;
justify-content: space-between;
[name='description'] {
display: flex;
flex-direction: column;
width: 90%;
}
[name='block-logo'] {
box-sizing: border-box;
display: block;
height: 8.5vh;
position: relative;
text-align: end;
width: 15vw;
}
}
[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;
}
ul {
font-size: 1.5rem;
list-style: none;
margin: -2.04rem 0 3.74rem -2.04rem;
li {
span {
font-weight: bold;
}
}
}
&:first-child {
li {
span {
margin-right: 0.3em;
}
&:first-child {
margin-bottom: 0.5em;
}
&:last-child {
margin-top: 2.4em;
}
}
}
&:not(:first-child) {
padding-left: 5.1rem;
li {
margin-bottom: 1.7rem;
&:last-child {
margin-top: 2.2rem;
}
&::before {
color: $color-43-100-50;
font-size: 2.2rem;
padding: 0 1rem 0 0;
}
}
}
}
}
[name='block-team'] {
>sib-multiple {
label {
display: none;
}
>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%;
}
}
}
>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;
}
}
}
}
}

View File

@ -1,331 +0,0 @@
[hidden],
.hidden,
.is-hidden {
display: none !important;
}
: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;
height: 100vh;
margin: 0;
overflow: hidden;
overflow-wrap: break-word;
}
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-dark-lava;
font-weight: 600;
padding: 0;
/*margin: 0.67em 0;*/
span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 2.1rem;
}
h2 { font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
.debug {
outline: 2px dotted red;
}
button {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
-webkit-appearance: none;
}
li {
list-style: none;
margin-right: 0.4rem;
padding-left: 0;
}
#job-offers,
#members {
@extend %content-padding;
}
.frame {
@extend %frame;
padding: 5rem;
}
.layer {
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
}
/*
#content {
display: flex;
overflow: hidden;
}
*/
#mainContainer {
flex-grow: 1;
flex-shrink: 1;
overflow-y: auto;
}
.limiter {
display: block;
max-width: 650px;
}
/* sub menu (right menu) */
#mainContainer {
display: flex;
> div#project,
> div#circle {
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
align-items: stretch;
overflow-x: hidden;
> div {
transition: all 0.5s;
}
}
}
sib-route,
sib-link {
cursor: pointer;
}
sib-link.back {
color: $color-purple-dark;
display: block;
font-size: 2rem;
font-weight: bold;
text-align: right;
}
.containerH {
display: flex;
flex-wrap: wrap;
}
.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;
}
#views-container {
flex: 1 0 0;
overflow-y: auto;
}
.grid-layer{
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]7em[middle]auto[end];
}
.grid-layer-main {
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
.grid-layer-links {
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}
/* TEMPLATE SKILLS*/
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;
}
.skill {
background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
font-size: 1.4rem;
font-weight: bold;
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;
}
}

View File

@ -1,3 +0,0 @@
#member-chat {
width: 100%;
}

View File

@ -1,90 +0,0 @@
#mainContainer {
> div {
nav {
transition: all 0.5s;
> sib-router {
background-color: $color-222-52-90;
color: $color-purple-dark;
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-lavender-gray;
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-purple-dark;
color: $color-mustard;
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);
}
}
}
}
}

View File

@ -1,160 +0,0 @@
@charset "UTF-8";
@mixin debug {
$hsla: hsla(random(360), 100%, 50%, 0.3);
background-color: $hsla;
}
@mixin log($v) {
font-family: '__log__:#{$v}';
}
@mixin offset($corner: 1, $x: 0, $y: 0) {
// corner:
// 1-----2
// | |
// | |
// 3-----4
position: absolute;
@if ($corner == 1) {
top: $y;
left: $x;
}
@if ($corner == 2) {
top: $y;
right: $x;
}
@if ($corner == 3) {
bottom: $y;
left: $x;
}
@if ($corner == 4) {
bottom: $y;
right: $x;
}
}
@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
// --1--
// | |
// 4 2
// | |
// --3--
@if ($right == null) {
$right: $top;
}
@if ($bottom == null) {
$bottom: $top;
}
@if ($left == null) {
$left: $right;
}
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
@mixin pos($pos: 5, $position: absolute) {
//
// 1 2 3
//
//
// 4 5 6
//
//
// 7 8 9
//
$mod: ($pos - 1) % 3;
position: $position;
@if ($pos <= 6) {
top: 0;
}
@if ($mod <= 1) {
left: 0;
}
@if ($mod >= 1) {
right: 0;
}
@if ($pos >= 4) {
bottom: 0;
}
}
// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
// &:after {
// content: '';
// position: absolute;
// top: if(($border == bottom), auto, 0);
// left: if(($border == right), auto, 0);
// right: if(($border == left), auto, 0);
// bottom: if(($border == top), auto, 0);
// background-image: linear-gradient(to #{$border}, $color, transparent);
// #{$border}: -$size;
// opacity: $opacity;
// @if ($border == top or $border == bottom) {
// height: $size;
// } @else {
// width: $size;
// }
// }
// }
@mixin align($horizontal: center, $vertical: middle) {
text-align: $horizontal;
white-space: nowrap;
&:after,
> * {
display: inline-block;
vertical-align: $vertical;
}
&:after {
content: '';
height: 100%;
width: 0;
visibility: hidden;
}
> * {
//text-align:left;
white-space: normal;
}
}
@mixin list-reset($deep: 0) {
padding: 0;
margin: 0;
display: block;
list-style: none;
@if ($deep == 0) {
> li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
} @else {
ul,
ol,
li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
}
}
@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;
}
}

View File

@ -1,235 +0,0 @@
#project-profile {
[name^='block-']:not([name='block-title']) {
margin-top: 5.1rem;
[name^='label-'] {
display: block;
font-weight: bold;
margin-bottom: 1.4rem;
text-transform: uppercase;
@extend h2;
}
sib-display-value:not(:first-of-type),
ul,
[name*='job'] {
font-size: 1.5rem;
}
}
[name='block-title'] {
border-bottom: 1px solid $color-link-water;
display: flex;
padding-bottom: 3.4rem;
> * {
color: $color-dark-lava;
font-size: 2rem;
font-weight: bold;
padding-right: 0.85rem;
text-transform: uppercase;
}
> [name^='const-'] {
padding: 0;
}
> sib-display-value[name='name'] {
padding-left: 0.85rem;
}
> :nth-child(5) {
color: $color-purple-dark;
font-weight: normal;
text-transform: none;
}
[name='entitled'] {
margin-left: auto;
}
> :nth-last-child(-n+2) {
color: $color-text-base;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
}
}
[name='infos'] {
display: flex;
justify-content: space-between;
[name='description'] {
display: flex;
flex-direction: column;
width: 90%;
}
[name='block-logo'] {
box-sizing: border-box;
display: block;
height: 8.5vh;
position: relative;
text-align: end;
width: 15vw;
}
}
[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-link-water;
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;
}
ul {
font-size: 1.5rem;
list-style: none;
margin: -2.04rem 0 3.74rem -2.04rem;
li {
span {
font-weight: bold;
}
}
}
&:first-child {
li {
span {
margin-right: 0.3em;
}
&:first-child {
margin-bottom: 0.5em;
}
&:last-child {
margin-top: 2.4em;
}
}
}
&:not(:first-child) {
padding-left: 5.1rem;
li {
margin-bottom: 1.7rem;
&:last-child {
margin-top: 2.2rem;
}
&::before {
color: $color-selective-yellow;
font-size: 2.2rem;
padding: 0 1rem 0 0;
}
}
}
}
}
[name='block-team'] {
> 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-white;
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%;
}
}
}
> 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;
div[name='name'] {
@extend %group;
}
}
}
}
> span:nth-child(3) {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}
}
}

View File

@ -1,50 +0,0 @@
.right-link {
padding: 0.85rem;
margin-bottom: 1.7rem;
margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}
.how-link {
@extend .right-link;
background-color: $color-white;
color: $color-dark-lava;
flex-wrap: nowrap;
.icon-idea {
background-color: $color-mustard;
border-radius: 100%;
justify-content: center;
margin-right: 1.2rem;
//flex-direction: column;
width: 1.8em;
height: 1.8em;
//margin-right: 1em;
}
}
.action-link {
@extend .right-link;
background-color: $color-selective-yellow;
color: $color-white;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.5rem 0.5rem 0.5rem 0;
&:before {
//font-size: 1.3em;
}
}
}

View File

@ -1,150 +0,0 @@
//Color Variables
$color-quartz: hsl(0, 0%, 29%);
$color-timberwolf: hsl(0, 0%, 85%);
$color-white: hsl(0, 0%,100%);
$color-selective-yellow: hsl(43, 100%, 50%);
$color-mikado-yellow: hsl(45, 95%, 54%);
$color-mustard: hsl(46, 100%, 67%);
$color-46-100-50: hsl(46, 100%, 50%);
$color-rolling-stone: hsl(210, 4%, 50%);
$color-taupe-gray: hsl(210, 5%, 56%);
$color-platinum: hsl(210, 17%, 91%);
$color-anti-flash-white: hsl(210, 25%, 95%);
$color-text-base: hsl(213, 4%, 50%);
$color-gainsboro: hsl(213, 13%, 86%);
$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
$color-213-20-91: hsl(213, 20%, 91%);
$color-bombay: hsl(215, 9%, 73%);
$color-manatee: hsl(215, 6%, 63%);
$color-dark-lava: hsl(216, 4%, 22%);
$color-link-water: hsl(221, 51%, 90%);
$color-222-52-90: hsl(222, 52%, 90%);
$color-glitter: hsl(222, 57%, 95%);
$color-lavender-gray: hsl(229, 25%, 79%);
$color-purple-dark: hsl(233, 18%, 29%);
$color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);
%backlink {
@include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline;
&::before {
text-decoration: none;
}
}
%button {
display: inline-block;
padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
}
%content-padding {
flex: 1;
padding: 4.4rem;
}
%frame {
@extend %shadow;
background-color: $color-white;
}
%group {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
}
%member-info {
sib-multiple[name^='user.'],
> member-info > div,
> sib-display-value {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-selective-yellow;
padding: 0 0.6em 0 0;
}
}
[name$='city'] * {
@include mdi('atom');
}
[name$='email'] * {
@include mdi('email-outline');
}
[name$='phone'] * {
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"] {
@include mdi('link-variant');
}
}
%label {
color: $color-spun-pearl;
font-weight: 600;
margin: 2em 0 0.5em;
text-transform: uppercase;
> div {
padding-bottom: 1rem;
}
}
%notification {
align-items: center;
background-color: $color-mustard;
border-radius: 100%;
color: $color-dark-lava;
display: flex !important;
font-size: 1.3rem;
height: 1.7em;
justify-content: center;
width: 1.7em;
}
%shadow {
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
}
%status-open {
background-color: $color-majorelle-blue;
border: none;
border-radius: 100em;
color: $color-white;
display: inline-block;
font-weight: normal;
padding: 0.85rem 1.7rem;
}
%submit-form {
background-color: $color-purple-dark;
color: $color-white;
float: right;
font-weight: bold;
text-transform: uppercase;
}
$breakpoints: (
phone: 480px,
tablet: 768px,
desktop: 1024px
) !default;

View File

@ -1,6 +1,5 @@
sib-widget(name='team-template')
template
p ${value}
sib-display(
data-src="${value.user['@id']}"
data-fields='account.picture',

@ -1 +0,0 @@
Subproject commit 2456ba747dfdacf96cfaf70469b0eff059287e67

@ -1 +0,0 @@
Subproject commit 9ff71f4d047a101f633872db0820736b8baf792c

@ -1 +0,0 @@
Subproject commit 9ce7e6cec7447b7d3c04dee03bf068744373ac3f

@ -1 +0,0 @@
Subproject commit c358adefa38f93cd3acdf1f75c8c79e4b8379dc4