Merge branch 'alpha' into 'master'
Alpha See merge request startinblox/applications/sib-app!29
This commit is contained in:
Gaëlle Morin
commit
697f93047e
31
Makefile
31
Makefile
@ -6,11 +6,6 @@ SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
|
|||||||
|
|
||||||
default: build
|
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)
|
build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
|
||||||
|
|
||||||
watch:
|
watch:
|
||||||
@ -21,23 +16,6 @@ watch:
|
|||||||
sleep 0.5; \
|
sleep 0.5; \
|
||||||
done
|
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
|
# pug
|
||||||
$(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
|
$(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
|
||||||
@echo 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 $@
|
node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
|
||||||
|
|
||||||
# sass
|
# 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: $< ➜ $@
|
@echo sass: $< ➜ $@
|
||||||
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
|
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
|
||||||
|
|
||||||
@ -76,11 +54,6 @@ buildstaging: build
|
|||||||
buildprod: build
|
buildprod: build
|
||||||
$(MAKE) $(DIST_DIR)/index.prod.html
|
$(MAKE) $(DIST_DIR)/index.prod.html
|
||||||
|
|
||||||
deploy: pull install build
|
|
||||||
|
|
||||||
pull:
|
|
||||||
git pull
|
|
||||||
|
|
||||||
sync: buildstaging
|
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 -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
|
||||||
rsync --no-R --no-implied-dirs www/index.staging.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
|
rsync --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 --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/
|
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
|
||||||
189
README.md
189
README.md
@ -1,74 +1,181 @@
|
|||||||
# HD app
|
# SiB App
|
||||||
|
|
||||||
HD app is the magic tool that allows the Happy Dev network to thrive in a decentralized way.
|
SiB App is the magic tool that allows the Happy Dev network to thrive in a decentralized way.
|
||||||
|
|
||||||
## Use cases
|
## Getting Started
|
||||||
|
|
||||||
Identified and scheduled use cases of the application includes (but are not limited to):
|
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
|
||||||
|
|
||||||
- Listing of projects
|
### Prerequisites
|
||||||
- Listing of members
|
|
||||||
- Search of members by skills
|
|
||||||
- Invoicing and billing
|
|
||||||
- Project-scoped chat
|
|
||||||
- Personal messaging
|
|
||||||
|
|
||||||
### Chat
|
To install SiB App, you'll need to have:
|
||||||
|
|
||||||
The repository of the SIB Chat component can be found here:
|
- Python3 & Pip
|
||||||
|
- NodeJS & NPM
|
||||||
|
- A Prosody Server
|
||||||
|
- (Optional) A SMTP Server
|
||||||
|
|
||||||
- https://git.happy-dev.fr/startinblox/sib-chat
|
### Installing
|
||||||
|
|
||||||
It is based on XMPP as messaging protocol, Prosody as the server and ConverseJS as the client.
|
#### At first, you'll need to deploy a `sib-manager` server, then configure it.
|
||||||
|
|
||||||
### Project
|
#### `sib-manager` installation or update
|
||||||
|
|
||||||
The repository of the project listing components is the core and can be found here:
|
```
|
||||||
|
$ pip3 install -U sib-manager
|
||||||
|
```
|
||||||
|
|
||||||
- https://git.happy-dev.fr/startinblox/sib-core
|
#### `sib-manager` deploy
|
||||||
|
|
||||||
### Invoicing
|
```
|
||||||
|
$ sib startproject newserver -m djangoldp_project -m oidc_provider@django-oidc-provider -m djangoldp_circle -m djangoldp_joboffer -m djangoldp_profile -m djangoldp_skill -m djangoldp_account -m djangoldp_notification -m djangoldp_conversation
|
||||||
|
$ sib initproject newserver
|
||||||
|
```
|
||||||
|
|
||||||
The invoicing component is still at an early stage. Its repository is here:
|
We're using
|
||||||
|
- `djangoldp_project`,
|
||||||
|
- `django-oidc-provider`,
|
||||||
|
- `djangoldp_circle`,
|
||||||
|
- `djangoldp_joboffer`,
|
||||||
|
- `djangoldp_profile`,
|
||||||
|
- `djangoldp_skill`,
|
||||||
|
- `djangoldp_account`,
|
||||||
|
- `djangoldp_notification`,
|
||||||
|
- `djangoldp_conversation`
|
||||||
|
|
||||||
- https://git.happy-dev.fr/startinblox/sib-invoicing
|
As dependencies, if you don't want them, just remove the `-m packagename`.
|
||||||
|
|
||||||
## Architecture
|
`sibserver` is the name of the folder that `sib-manager` will create, choose it wisely.
|
||||||
|
|
||||||
Some general schema of the existing StartinBlox applications architecture can be found here:
|
In addition to the `startproject` you can add :
|
||||||
|
|
||||||
https://docs.google.com/presentation/d/1iCRGaJpFvZjhjIUnpsn6lRTJJ31ES6n94BNkJygzUwM/edit?usp=sharing
|
- `--site-url "http://localhost:8000"`
|
||||||
|
- `--production` to use postgresql instead of sqlite
|
||||||
|
- `--db-host`, `--db-name`, `--db-user` and `--db-pass` are used to configure the database (mandatory with `--production`)
|
||||||
|
- `--smtp-host`, `--smtp-user` and `--smtp-pass` are used to configure the SMTP (optional)
|
||||||
|
|
||||||
## Installation
|
#### `sibserver` configuration
|
||||||
|
|
||||||
If you want to contribute or test the app, please follow those steps.
|
You'll have to change some settings on the `sibserver` files.
|
||||||
|
|
||||||
### Requirements
|
- Add your server name to `ALLOWED_HOSTS`
|
||||||
|
- In `settings.py`, add your hostname on `ALLOWED_HOSTS`, eg:
|
||||||
|
```
|
||||||
|
ALLOWED_HOSTS = ['api.myserver.com', 'localhost']
|
||||||
|
```
|
||||||
|
- Around line `96-97` of `settings.py` set your `PROSODY_HTTP_URL`, `JABBER_DEFAULT_HOST`, eg:
|
||||||
|
```
|
||||||
|
PROSODY_HTTP_URL = 'https://jabber.happy-dev.fr'
|
||||||
|
JABBER_DEFAULT_HOST = 'happy-dev.fr'
|
||||||
|
```
|
||||||
|
|
||||||
You need to have both NodeJS and NPM installed and working.
|
#### `sib-manager` launching
|
||||||
|
|
||||||
### Installation process
|
On the first `sibserver` folder
|
||||||
|
|
||||||
clone then:
|
```
|
||||||
|
$ ./manage.py runserver
|
||||||
|
```
|
||||||
|
|
||||||
* `make install`
|
#### Create a Client ID for Prosody & Client
|
||||||
|
|
||||||
Edit the created `./src/config.pug` file to :
|
- Go to `localhost:8000/admin/`
|
||||||
- update the `client_id` [you generated on the server](https://git.happy-dev.fr/startinblox/applications/sib-app-data-server/blob/master/README.md#openidconnect-configuration) / OIDC provider
|
- Login with previously created account.
|
||||||
- update the `sdn` / Server Domain Name to match yours
|
- If needed you can create another admin account with `./manage.py createsuperadmin`
|
||||||
|
- Add a `Clients` on `OpenID Connect Provider` section
|
||||||
|
- Name it as you wish
|
||||||
|
- `Client type`: `Public`
|
||||||
|
- `Response types`: `id_token token (Implicit Flow)`
|
||||||
|
- `Redirect URIs`:
|
||||||
|
```
|
||||||
|
http://localhost:3000
|
||||||
|
http://127.0.0.1:3000
|
||||||
|
http://0.0.0.0:3000
|
||||||
|
http://localhost:8000
|
||||||
|
https://myserver.com
|
||||||
|
```
|
||||||
|
- Keep the `6-digits` newly create `Client ID` somewhere
|
||||||
|
|
||||||
## Build
|
#### Then, you'll have to install the client.
|
||||||
|
|
||||||
A first build is mandatory for compiling the static assets.
|
#### Clone this repository
|
||||||
|
|
||||||
* `make build`
|
```
|
||||||
|
# With SSH
|
||||||
|
$ git clone git@git.happy-dev.fr:startinblox/applications/sib-app.git
|
||||||
|
|
||||||
or
|
# Or with HTTPS
|
||||||
|
$ git clone https://git.happy-dev.fr/startinblox/applications/sib-app.git
|
||||||
|
```
|
||||||
|
|
||||||
* `make watch`
|
#### Install dependencies
|
||||||
|
|
||||||
if you are working on something and want to benefit of the hot reload feature.
|
```
|
||||||
|
$ cd sib-app
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
|
||||||
## Run server
|
#### Configure `config.json`
|
||||||
|
|
||||||
* `make serve`
|
On the newly created `./src/config.json` change the `dev` configuration like this:
|
||||||
|
```
|
||||||
|
"dev": {
|
||||||
|
"sdn": "http://api.myserver.com", # Or localhost:8000
|
||||||
|
"cdn": "https://cdn.happy-dev.fr",
|
||||||
|
"xmpp": "https://prosody.myserver.com/http-bind/",
|
||||||
|
"client_id": "000000" # <- Here goes your previously created Client ID
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
#### That's all! Now let's run it!
|
||||||
|
|
||||||
|
```
|
||||||
|
# For dev
|
||||||
|
$ make watch
|
||||||
|
$ npm run serve
|
||||||
|
|
||||||
|
# Or for prod
|
||||||
|
$ make build
|
||||||
|
# Then publish the www folder
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Deployment will need a registered RSA Key on production servers.
|
||||||
|
|
||||||
|
### On Alpha
|
||||||
|
|
||||||
|
```
|
||||||
|
$ make syncprod
|
||||||
|
```
|
||||||
|
|
||||||
|
### On Staging
|
||||||
|
|
||||||
|
```
|
||||||
|
$ make sync
|
||||||
|
```
|
||||||
|
|
||||||
|
## Built With
|
||||||
|
|
||||||
|
* [Sib-Core](https://git.happy-dev.fr/startinblox/framework/sib-core/) - An awesome new framework!
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
|
||||||
|
Some general schema of the existing StartinBlox applications architecture can be found [here](https://docs.google.com/presentation/d/1iCRGaJpFvZjhjIUnpsn6lRTJJ31ES6n94BNkJygzUwM/edit?usp=sharing).
|
||||||
|
|
||||||
|
<!---
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
We may add a `CONTRIBUTING.md`
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
We may add a `LICENSE.md`
|
||||||
|
|
||||||
|
## Acknowledgments
|
||||||
|
|
||||||
|
* Maybe some thanks too
|
||||||
|
* Inspiration
|
||||||
|
* etc
|
||||||
|
--->
|
||||||
20
copy_lib.js
20
copy_lib.js
@ -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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,5 +1 @@
|
|||||||
node_modules/normalize.css/normalize.css
|
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
|
|
||||||
2231
package-lock.json
generated
2231
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
@ -1,21 +1,20 @@
|
|||||||
{
|
{
|
||||||
"name": "hd-app",
|
"name": "sib-app",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "ISC",
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "node server.js",
|
||||||
|
"postinstall": "node postinstall.js"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.1.0",
|
"@babel/core": "^7.4.4",
|
||||||
"@babel/cli": "^7.1.0",
|
"@babel/cli": "^7.4.4",
|
||||||
"node-sass": "^4.9.3",
|
"node-sass": "^4.12.0",
|
||||||
"pug-cli": "^1.0.0-alpha6",
|
"pug-cli": "^1.0.0-alpha6",
|
||||||
"browser-sync": "^2.24.7",
|
"express": "^4.16.4"
|
||||||
"express": "^4.16.3"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@webcomponents/html-imports": "^1.2.0",
|
|
||||||
"@webcomponents/webcomponentsjs": "^1.2.7",
|
|
||||||
"include-media": "^1.4.9",
|
"include-media": "^1.4.9",
|
||||||
"normalize.css": "^8.0.0",
|
"normalize.css": "^8.0.1"
|
||||||
"oidc-client": "^1.5.3-beta.1",
|
|
||||||
"simple-line-icons": "^2.4.1"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
8
postinstall.js
Normal file
8
postinstall.js
Normal 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);
|
||||||
|
}
|
||||||
19
server.js
19
server.js
@ -1,5 +1,4 @@
|
|||||||
const port = 9000;
|
const port = 3000;
|
||||||
const browserSyncPort = 3000;
|
|
||||||
const distPath = 'www';
|
const distPath = 'www';
|
||||||
|
|
||||||
// express server
|
// express server
|
||||||
@ -8,19 +7,5 @@ const express = require('express');
|
|||||||
const app = express();
|
const app = express();
|
||||||
app
|
app
|
||||||
.use(express.static(distPath))
|
.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);
|
.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,
|
|
||||||
});
|
|
||||||
|
|||||||
@ -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.0")
|
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
|
||||||
|
|
||||||
script(src="/scripts/index.js")
|
script(src="/scripts/index.js")
|
||||||
|
|
||||||
// Stylesheets
|
//- Stylesheets
|
||||||
link(rel='stylesheet', href='/lib/normalize.css')
|
|
||||||
link(rel='stylesheet', href='/styles/index.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,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')
|
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
|
//- local
|
||||||
//script(type="module" src="/lib/sib-core/sib-display.js")
|
//- script(type="module" src="/lib/sib-core/src/index.js")
|
||||||
//script(type="module" src="/lib/sib-router/sib-router.js")
|
//- script(type="module" src="/lib/sib-router/src/index.js")
|
||||||
//script(type="module" src="/lib/sib-core/sib-form.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
|
||||||
|
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
|
||||||
//- cdn
|
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
|
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
|
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.11")
|
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-conversation@0.2.1")
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.10")
|
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.15")
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
- var __env = locals[process.env.ENV]
|
|
||||||
|
|
||||||
-
|
-
|
||||||
|
var __env = locals[process.env.ENV]
|
||||||
for(k in __env){
|
for(k in __env){
|
||||||
eval(`var ${k} = __env[${JSON.stringify(k)}]`);
|
eval(`var ${k} = __env[${JSON.stringify(k)}]`);
|
||||||
}
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
#button-toggle
|
|
||||||
#logo
|
#logo
|
||||||
img(src="/images/logo.png" width=111 height=32)
|
img(src="/images/logo.png" width=111 height=32)
|
||||||
|
|
||||||
|
|||||||
@ -9,30 +9,33 @@ html(lang="en")
|
|||||||
link(rel="icon" type="image/png" href="/images/favicon.png")
|
link(rel="icon" type="image/png" href="/images/favicon.png")
|
||||||
include dependencies.pug
|
include dependencies.pug
|
||||||
body
|
body
|
||||||
div.layer
|
header#header(role='banner')
|
||||||
header#header.row(role='banner')
|
include header.pug
|
||||||
include header.pug
|
main
|
||||||
.content.row
|
include menu-left.pug
|
||||||
include menu-left.pug
|
div#viewport
|
||||||
|
|
||||||
main#mainContainer
|
#members(hidden).no-sidebar
|
||||||
//- #dashboard(hidden)
|
include page-members-directory.pug
|
||||||
include page-dashboard.pug
|
|
||||||
#members(hidden)
|
#job-offers(hidden).no-sidebar
|
||||||
include page-members.pug
|
include page-job-offers.pug
|
||||||
#member-chat(hidden)
|
|
||||||
include page-member-chat.pug
|
#job-offer-create(hidden).no-sidebar
|
||||||
#job-offers(hidden)
|
sib-link(class="backlink", next="job-offers") Back
|
||||||
include page-job-offers.pug
|
include page-job-offer-create.pug
|
||||||
#job-offer-create(hidden)
|
|
||||||
include page-job-offer-create.pug
|
#project(hidden).with-sidebar
|
||||||
#project(hidden)
|
include page-project.pug
|
||||||
include page-project.pug
|
|
||||||
//- #client-creation(hidden)
|
#circle(hidden).with-sidebar
|
||||||
include page-client-creation.pug
|
include page-circle.pug
|
||||||
//-#groups(hidden)
|
|
||||||
include page-groups.pug
|
#member-chat(hidden).with-sidebar
|
||||||
#circle(hidden)
|
include page-member-chat.pug
|
||||||
include page-group.pug
|
|
||||||
//- #search(hidden)
|
#user-profile(hidden)
|
||||||
include page-search.pug
|
|
||||||
|
#user-settings(hidden)
|
||||||
|
|
||||||
|
#user-admin(hidden)
|
||||||
|
|||||||
@ -1,22 +1,10 @@
|
|||||||
nav#navbar
|
nav#main__menu
|
||||||
sib-router#navbar-router(default-route='members')
|
sib-router#navbar-router(default-route='members')
|
||||||
sib-route.menu(name='members')
|
sib-route.menu(name='members')
|
||||||
div.menu-notification
|
|
||||||
sib-display(
|
|
||||||
data-src=`${sdn}/members/`,
|
|
||||||
data-fields='-',
|
|
||||||
counter-template='${counter}'
|
|
||||||
)
|
|
||||||
div.menu-label Members
|
div.menu-label Members
|
||||||
div.menu-icon.icon-people
|
div.menu-icon.icon-people
|
||||||
div.divider
|
div.divider
|
||||||
sib-route.menu(name='job-offers')
|
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
|
||||||
div.menu-notification
|
|
||||||
sib-display(
|
|
||||||
data-src=`${sdn}/job-offers/`,
|
|
||||||
data-fields='-',
|
|
||||||
counter-template='${counter}'
|
|
||||||
)
|
|
||||||
div.menu-label Job offers
|
div.menu-label Job offers
|
||||||
div.menu-icon.icon-briefcase
|
div.menu-icon.icon-briefcase
|
||||||
sib-route(hidden, name='job-offer-create')
|
sib-route(hidden, name='job-offer-create')
|
||||||
@ -27,7 +15,7 @@ nav#navbar
|
|||||||
div.menu-icon.icon-arrow-up
|
div.menu-icon.icon-arrow-up
|
||||||
div.menu-label Projects
|
div.menu-label Projects
|
||||||
div.menu-icon.icon-folder-alt
|
div.menu-icon.icon-folder-alt
|
||||||
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, use-id)
|
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, rdf-type='hd:project', use-id='')
|
||||||
div.sub-menu
|
div.sub-menu
|
||||||
sib-display(
|
sib-display(
|
||||||
data-src=`${sdn}/projects/`,
|
data-src=`${sdn}/projects/`,
|
||||||
@ -43,7 +31,7 @@ nav#navbar
|
|||||||
div.menu-icon.icon-arrow-up
|
div.menu-icon.icon-arrow-up
|
||||||
div.menu-label Cercles
|
div.menu-label Cercles
|
||||||
div.menu-icon.icon-globe
|
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
|
div.sub-menu
|
||||||
sib-display(
|
sib-display(
|
||||||
data-src=`${sdn}/circles/`,
|
data-src=`${sdn}/circles/`,
|
||||||
@ -58,7 +46,7 @@ nav#navbar
|
|||||||
div.menu-icon.icon-arrow-up
|
div.menu-icon.icon-arrow-up
|
||||||
div.menu-label Chat
|
div.menu-label Chat
|
||||||
div.menu-icon.icon-envelope-letter
|
div.menu-icon.icon-envelope-letter
|
||||||
sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`, use-id='')
|
sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`, rdf-type='foaf:user', use-id='')
|
||||||
div.sub-menu
|
div.sub-menu
|
||||||
sib-display(
|
sib-display(
|
||||||
data-src=`${sdn}/members/`,
|
data-src=`${sdn}/members/`,
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.chat-view
|
.content-box.full-width.chat-view
|
||||||
sib-chat(
|
sib-chat(
|
||||||
data-authentication='login',
|
data-authentication='login',
|
||||||
data-auto-login='true',
|
data-auto-login='true',
|
||||||
26
src/page-circle-create.pug
Normal file
26
src/page-circle-create.pug
Normal 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
9
src/page-circle-edit.pug
Normal 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
|
||||||
|
)
|
||||||
@ -1,4 +1,4 @@
|
|||||||
.frame
|
.content-box.full-width
|
||||||
h2 Channel's name:
|
h2 Channel's name:
|
||||||
sib-display(
|
sib-display(
|
||||||
data-fields='name',
|
data-fields='name',
|
||||||
@ -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')
|
nav.jsRightMenu(role='navigation')
|
||||||
sib-router(default-route='circle-chat')
|
sib-router(default-route='circle-chat')
|
||||||
ul
|
ul
|
||||||
@ -8,20 +17,10 @@ nav.jsRightMenu(role='navigation')
|
|||||||
a Chat
|
a Chat
|
||||||
sib-route(name='circle-profile')
|
sib-route(name='circle-profile')
|
||||||
li
|
li
|
||||||
a Info
|
a Information
|
||||||
sib-ac-checker(permission='change' bind-resources)
|
sib-route(name='circle-edit')
|
||||||
sib-route(name='circle-edit')
|
li
|
||||||
li
|
a Edit
|
||||||
a Edit
|
|
||||||
sib-route(name='circle-create')
|
sib-route(name='circle-create')
|
||||||
li
|
li
|
||||||
a Add new
|
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
|
|
||||||
@ -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'
|
|
||||||
)
|
|
||||||
@ -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
|
|
||||||
)
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
#circles
|
|
||||||
sib-display#circles-list(
|
|
||||||
data-src=`${sdn}/circles/`,
|
|
||||||
data-fields='name, description',
|
|
||||||
search-fields='name, description',
|
|
||||||
next='group'
|
|
||||||
)
|
|
||||||
@ -1,5 +1,7 @@
|
|||||||
.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')
|
sib-widget(name='title-text')
|
||||||
template
|
template
|
||||||
p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
|
p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
|
||||||
@ -8,24 +10,20 @@
|
|||||||
template
|
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...'
|
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
|
sib-form.block(
|
||||||
h1 Post a new job offer
|
data-src=`${sdn}/job-offers/`,
|
||||||
p.form-goal This form allows you to share an offer to all members of the network.
|
range-skills= `${sdn}/skills/`,
|
||||||
.form-view
|
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-title='Title*',
|
||||||
label-description='Description*',
|
label-description='Description*',
|
||||||
label-skills='The required skills for this mission:*',
|
label-skills='The required skills for this mission:*',
|
||||||
|
|
||||||
widget-title-text='title-text',
|
widget-title-text='title-text',
|
||||||
widget-description-text='description-text',
|
widget-description-text='description-text',
|
||||||
widget-skills='sib-form-auto-completion',
|
widget-skills='sib-form-auto-completion',
|
||||||
|
|
||||||
next="job-offers"
|
next="job-offers"
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
div.grid-layer
|
div.job-offers__main
|
||||||
|
|
||||||
include templates/template-groups.pug
|
include templates/template-groups.pug
|
||||||
include templates/template-skills.pug
|
include templates/template-skills.pug
|
||||||
include templates/template-joboffers-filter.pug
|
include templates/template-joboffers-filter.pug
|
||||||
|
|
||||||
div.grid-layer-main.containerV
|
div.job-offers__content
|
||||||
h2 New offers
|
h1 New offers
|
||||||
span Here you can find and post offers
|
span Here you can find and post offers
|
||||||
sib-display#offers-list(
|
sib-display#offers-list(
|
||||||
data-src=`${sdn}/job-offers/`,
|
data-src=`${sdn}/job-offers/`,
|
||||||
@ -35,15 +35,9 @@ div.grid-layer
|
|||||||
search-widget-open='joboffers-filter'
|
search-widget-open='joboffers-filter'
|
||||||
)
|
)
|
||||||
|
|
||||||
div.grid-layer-links.containerV
|
div.job-offers__newoffer
|
||||||
template#groups-list-template
|
template#groups-list-template
|
||||||
p ${value}
|
p ${value}
|
||||||
sib-link(next="job-offer-create").containerH.containerCenter.action-link
|
sib-link(next="job-offer-create").plus-button
|
||||||
div.icon-plus
|
div.icon-plus
|
||||||
div Post a new offer
|
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?
|
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
div
|
.content-box.full-width.chat-view
|
||||||
.chat-view
|
sib-chat(
|
||||||
sib-chat(
|
data-authentication='login',
|
||||||
data-authentication='login',
|
data-auto-login='true',
|
||||||
data-auto-login='true',
|
data-bosh-service-url=xmpp,
|
||||||
data-bosh-service-url=xmpp,
|
data-debug='false',
|
||||||
data-debug='false',
|
data-locales-url='en',
|
||||||
data-locales-url='en',
|
bind-resources
|
||||||
bind-resources
|
)
|
||||||
)
|
|
||||||
|
|||||||
@ -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();
|
|
||||||
});
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
.chat-view
|
.content-box.full-width.chat-view
|
||||||
sib-chat(
|
sib-chat(
|
||||||
data-authentication='login',
|
data-authentication='login',
|
||||||
data-auto-login='true',
|
data-auto-login='true',
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
.frame-form
|
.content-box.with-form.full-width
|
||||||
h1 New project
|
h1 New project
|
||||||
p.form-goal Here you can create your project, add members and assign them a job.
|
p Here you can create your project, add members and assign them a job.
|
||||||
.form-view
|
|
||||||
sib-form.block(
|
sib-form.block(
|
||||||
data-src=`${sdn}/projects/`,
|
data-src=`${sdn}/projects/`,
|
||||||
range-members=`${sdn}/members/`,
|
range-members=`${sdn}/members/`,
|
||||||
range-team=`${sdn}/users/`,
|
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',
|
set-block-project__info='customer.name, name, customer.logo, description',
|
||||||
label-customer.name='Customer\'s name',
|
label-customer.name='Customer\'s name',
|
||||||
label-name='Project\'s name',
|
label-name='Project\'s name',
|
||||||
label-customer.logo='Customer\'s logo',
|
label-customer.logo='Customer\'s logo',
|
||||||
label-description='Project description',
|
label-description='Project description',
|
||||||
|
|
||||||
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
|
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-businessProvider='Business provider',
|
||||||
label-businessProviderFee='Amount of the contribution',
|
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',
|
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.companyRegister='Company register',
|
||||||
label-customer.address='Address',
|
label-customer.address='Address',
|
||||||
label-customer.firstName='Name of the contact at the customer\'s premises',
|
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.lastName='Firstname of the contact at the customer\'s premises',
|
||||||
label-customer.role='Role within the company',
|
label-customer.role='Role within the company',
|
||||||
label-customer.email='Email',
|
label-customer.email='Email',
|
||||||
label-customer.phone='Phone'
|
label-customer.phone='Phone'
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -1,59 +1,59 @@
|
|||||||
|
|
||||||
sib-widget(name='template-legend-team')
|
|
||||||
template
|
|
||||||
span ${label}
|
|
||||||
|
|
||||||
sib-widget(name='template-members')
|
.content-box.with-form.full-width
|
||||||
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
|
|
||||||
h1 Edit your project
|
h1 Edit your project
|
||||||
p.form-goal Here you can edit your projet's details
|
p 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',
|
sib-widget(name='hd-template-project-title')
|
||||||
label-customer.name='Customer\'s name',
|
template
|
||||||
label-name='Project\'s name',
|
span ${label}
|
||||||
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',
|
sib-widget(name='template-members')
|
||||||
label-fieldset-team='The team',
|
template
|
||||||
widget-fieldset-team='template-legend-team',
|
sib-form.team.is-horizontal(
|
||||||
widget-members='template-members',
|
naked,
|
||||||
multiple-members,
|
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)',
|
||||||
|
)
|
||||||
|
|
||||||
bind-resources
|
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
|
||||||
|
)
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.frame
|
.content-box.full-width
|
||||||
|
|
||||||
include templates/template-business-provider.pug
|
include templates/template-business-provider.pug
|
||||||
include templates/template-customer.pug
|
include templates/template-customer.pug
|
||||||
|
|||||||
@ -1,3 +1,12 @@
|
|||||||
|
.views-container
|
||||||
|
#project-chat
|
||||||
|
include page-project-chat.pug
|
||||||
|
#project-profile
|
||||||
|
include page-project-profile.pug
|
||||||
|
#project-edit
|
||||||
|
include page-project-edit.pug
|
||||||
|
#project-create
|
||||||
|
include page-project-create.pug
|
||||||
nav.jsRightMenu(role='navigation')
|
nav.jsRightMenu(role='navigation')
|
||||||
sib-router(default-route='project-chat')
|
sib-router(default-route='project-chat')
|
||||||
ul
|
ul
|
||||||
@ -14,13 +23,4 @@ nav.jsRightMenu(role='navigation')
|
|||||||
a Edit
|
a Edit
|
||||||
sib-route(name='project-create', use-id)
|
sib-route(name='project-create', use-id)
|
||||||
li
|
li
|
||||||
a Add new
|
a Add new
|
||||||
#views-container
|
|
||||||
#project-chat
|
|
||||||
include page-project-chat.pug
|
|
||||||
#project-profile
|
|
||||||
include page-project-profile.pug
|
|
||||||
#project-edit
|
|
||||||
include page-project-edit.pug
|
|
||||||
#project-create
|
|
||||||
include page-project-create.pug
|
|
||||||
@ -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'
|
|
||||||
)
|
|
||||||
@ -1,13 +1,13 @@
|
|||||||
nav(role="user's functionalities menu")
|
nav(role="user's functionalities menu")
|
||||||
sib-router
|
sib-router
|
||||||
ul
|
ul
|
||||||
sib-route(name='')
|
sib-route(name='user-profile')
|
||||||
li
|
li
|
||||||
a(href='#') My profile
|
a(href='#') My profile
|
||||||
sib-route(name='')
|
sib-route(name='user-settings')
|
||||||
li
|
li
|
||||||
a(href='#') Settings
|
a(href='#') Settings
|
||||||
sib-route(name='')
|
sib-route(name='user-admin')
|
||||||
li
|
li
|
||||||
a Admin
|
a Admin
|
||||||
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
|
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
|
||||||
|
|||||||
@ -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');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,35 +1,9 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function (event) {
|
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 menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
|
||||||
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
|
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
|
||||||
|
const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
|
||||||
if (!navBar || !btnToggle) return;
|
|
||||||
|
|
||||||
btnToggle.addEventListener('click', e => {
|
//- Toggle sub-menus
|
||||||
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
|
|
||||||
menuWrappers.forEach(menuWrapper => {
|
menuWrappers.forEach(menuWrapper => {
|
||||||
const menu = menuWrapper.querySelector('.menu');
|
const menu = menuWrapper.querySelector('.menu');
|
||||||
menu.addEventListener('click', e => {
|
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 => {
|
rightMenus.forEach(rightMenu => {
|
||||||
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
|
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
|
||||||
|
|
||||||
btnRightMenu.addEventListener('click', e => {
|
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
21
src/styles/_index.scss
Normal 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';
|
||||||
|
}
|
||||||
4
src/styles/abstracts/_mixins.scss
Normal file
4
src/styles/abstracts/_mixins.scss
Normal 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;
|
||||||
|
}
|
||||||
25
src/styles/abstracts/_variables.scss
Normal file
25
src/styles/abstracts/_variables.scss
Normal 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%);
|
||||||
34
src/styles/base/_compat.scss
Normal file
34
src/styles/base/_compat.scss
Normal 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
294
src/styles/base/form.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +1,9 @@
|
|||||||
|
|
||||||
#header {
|
#header {
|
||||||
|
max-height: 51px;
|
||||||
|
height: 51px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
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 {
|
#logo {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
}
|
}
|
||||||
@ -34,14 +26,14 @@
|
|||||||
#search-input {
|
#search-input {
|
||||||
border-radius: 10em;
|
border-radius: 10em;
|
||||||
padding: 0.64rem 1.28rem;
|
padding: 0.64rem 1.28rem;
|
||||||
border: 1px solid $color-bombay;
|
border: 1px solid $color-215-9-73;
|
||||||
height: 3.8rem;
|
height: 3.8rem;
|
||||||
width: 28rem;
|
width: 28rem;
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
|
|
||||||
& ~ #close-search-icon,
|
& ~ #close-search-icon,
|
||||||
& ~ #search-icon {
|
& ~ #search-icon {
|
||||||
color: $color-bombay;
|
color: $color-215-9-73;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -49,7 +41,7 @@
|
|||||||
right: 3.7rem;
|
right: 3.7rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
-webkit-text-stroke: 1px $color-bombay;
|
-webkit-text-stroke: 1px $color-215-9-73;
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ #close-search-icon {
|
& ~ #close-search-icon {
|
||||||
@ -115,8 +107,8 @@ details {
|
|||||||
details#user-controls {
|
details#user-controls {
|
||||||
|
|
||||||
summary:focus {
|
summary:focus {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -160,7 +152,7 @@ details#user-controls {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
> nav {
|
> nav {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -178,14 +170,14 @@ details#user-controls {
|
|||||||
padding: 1.6rem 1.3rem;
|
padding: 1.6rem 1.3rem;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color-text-base;
|
color: $color-213-4-50;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: $color-text-base;
|
color: $color-213-4-50;
|
||||||
padding: 1.6rem 1.3rem;
|
padding: 1.6rem 1.3rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -194,8 +186,8 @@ details#user-controls {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[open] {
|
&[open] {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
|
|
||||||
#user-controls__profile {
|
#user-controls__profile {
|
||||||
|
|
||||||
147
src/styles/base/main.scss
Normal file
147
src/styles/base/main.scss
Normal 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';
|
||||||
@ -1,14 +1,10 @@
|
|||||||
#navbar {
|
#main__menu {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
display: block;
|
display: block;
|
||||||
flex: 0 0 16em;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
flex: 0 0 16em;
|
||||||
transition: flex-basis 0.5s ease-in-out;
|
transition: flex-basis 0.5s ease-in-out;
|
||||||
// max-width: 16rem;
|
|
||||||
// position: relative;
|
|
||||||
// min-height: 100%;
|
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -35,18 +31,17 @@
|
|||||||
padding: 1.6rem;
|
padding: 1.6rem;
|
||||||
|
|
||||||
&[active] {
|
&[active] {
|
||||||
background-color: $color-mustard;
|
background-color: $color-46-100-67;
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
|
|
||||||
.menu-icon:before {
|
.menu-icon:before {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
// transform: perspective(1000px) translateZ(1px) scale(0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-notification > sib-display > div:first-child {
|
.menu-notification > sib-display > div:first-child {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-mustard;
|
color: $color-46-100-67;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,9 +59,6 @@
|
|||||||
height: 1.9em;
|
height: 1.9em;
|
||||||
line-height: 1.9em;
|
line-height: 1.9em;
|
||||||
width: 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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,27 +73,10 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
width: 8em;
|
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 {
|
.menu-chevron {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: $color-spun-pearl;
|
color: $color-244-10-70;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -118,7 +93,7 @@
|
|||||||
padding-left: 2.88rem;
|
padding-left: 2.88rem;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
color: $color-spun-pearl;
|
color: $color-244-10-70;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-bottom: 1.12rem;
|
padding-bottom: 1.12rem;
|
||||||
|
|
||||||
@ -138,24 +113,8 @@
|
|||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
height: 1px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
6
src/styles/components/_index.scss
Normal file
6
src/styles/components/_index.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import 'chat';
|
||||||
|
@import 'filters';
|
||||||
|
@import 'howto';
|
||||||
|
@import 'sidebar';
|
||||||
|
@import 'skills';
|
||||||
|
@import 'user-role';
|
||||||
19
src/styles/components/chat.scss
Normal file
19
src/styles/components/chat.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -14,7 +14,7 @@
|
|||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
|
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;
|
font-size: 1.36rem;
|
||||||
line-height: 1.80;
|
line-height: 1.80;
|
||||||
margin-top: 1.36rem;
|
margin-top: 1.36rem;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
background: $color-white;
|
background: $color-0-0-100;
|
||||||
background-image: url("/images/chevron-down.png");
|
background-image: url("/images/chevron-down.png");
|
||||||
background-position: right 12px top 60%;
|
background-position: right 12px top 60%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
17
src/styles/components/howto.scss
Normal file
17
src/styles/components/howto.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3
src/styles/components/icons/_index.scss
Normal file
3
src/styles/components/icons/_index.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@import 'custom-icons';
|
||||||
|
@import 'icons';
|
||||||
|
@import 'material-design-icons';
|
||||||
107
src/styles/components/sidebar.scss
Normal file
107
src/styles/components/sidebar.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
16
src/styles/components/skills.scss
Normal file
16
src/styles/components/skills.scss
Normal 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;
|
||||||
|
}
|
||||||
9
src/styles/components/user-role.scss
Normal file
9
src/styles/components/user-role.scss
Normal 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;
|
||||||
|
}
|
||||||
@ -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: ':';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
@ -1,291 +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;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
align-items: center;
|
|
||||||
background: $color-glitter;
|
|
||||||
border: none;
|
|
||||||
color: $color-purple-dark;
|
|
||||||
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 {
|
|
||||||
@extend %label;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
background: $color-glitter;
|
|
||||||
border: none;
|
|
||||||
color: $color-purple-dark;
|
|
||||||
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-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-multiple-form {
|
|
||||||
|
|
||||||
> label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='submit'] {
|
|
||||||
margin-top: 6rem;
|
|
||||||
@extend %submit-form;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#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-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;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: Add;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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';
|
|
||||||
@ -1,134 +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;
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
@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='skills'] {
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
1
src/styles/layout/circle-profile/_index.scss
Normal file
1
src/styles/layout/circle-profile/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'circle-profile';
|
||||||
@ -1,5 +1,4 @@
|
|||||||
#circle-profile {
|
#circle-profile {
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
.block-group > div {
|
.block-group > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -31,7 +30,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> div[name='teammate-img'] {
|
> div[name='teammate-img'] {
|
||||||
background-color: $color-bombay;
|
background-color: $color-215-9-73;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
@ -61,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> sib-display-value[name='teammate-profile'] {
|
> sib-display-value[name='teammate-profile'] {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
@ -69,7 +68,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> sib-display-value[name='teammate-contact'] {
|
> sib-display-value[name='teammate-contact'] {
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
justify-self: stretch;
|
justify-self: stretch;
|
||||||
grid-column: 3 / span 2;
|
grid-column: 3 / span 2;
|
||||||
1
src/styles/layout/job-offers/_index.scss
Normal file
1
src/styles/layout/job-offers/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'job-offers.scss';
|
||||||
174
src/styles/layout/job-offers/job-offers.scss
Normal file
174
src/styles/layout/job-offers/job-offers.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
2
src/styles/layout/members/_index.scss
Normal file
2
src/styles/layout/members/_index.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import 'members';
|
||||||
|
@import 'member-profile';
|
||||||
@ -3,25 +3,14 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
.backlink {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 2rem 0 0 2rem;
|
|
||||||
@extend %backlink;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#member-info {
|
#member-info {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||||
margin: 2rem 1rem 5rem 2rem;
|
margin: 2rem 1rem 5rem 2rem;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
div[name='member-profile__bio'] {
|
div[name='member-profile__bio'] {
|
||||||
border-bottom: 1px solid $color-link-water;
|
border-bottom: 1px solid $color-221-51-90;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas: "avatar name status"
|
grid-template-areas: "avatar name status"
|
||||||
"avatar pseudo status"
|
"avatar pseudo status"
|
||||||
@ -49,7 +38,7 @@
|
|||||||
grid-area: name;
|
grid-area: name;
|
||||||
|
|
||||||
> sib-display-value[name^='user.'] {
|
> sib-display-value[name^='user.'] {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@extend h1;
|
@extend h1;
|
||||||
}
|
}
|
||||||
@ -80,7 +69,7 @@
|
|||||||
|
|
||||||
member-status[name$='available']{
|
member-status[name$='available']{
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
grid-area: status;
|
grid-area: status;
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
|
|
||||||
@ -97,7 +86,7 @@
|
|||||||
@include ci('awareness');
|
@include ci('awareness');
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom: 2px solid $color-selective-yellow;
|
border-bottom: 2px solid $color-43-100-50;
|
||||||
font-size: 7.3rem;
|
font-size: 7.3rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -107,7 +96,7 @@
|
|||||||
@include ci('armor');
|
@include ci('armor');
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom: 2px solid $color-selective-yellow;
|
border-bottom: 2px solid $color-43-100-50;
|
||||||
font-size: 7.3rem;
|
font-size: 7.3rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -122,9 +111,9 @@
|
|||||||
|
|
||||||
[next=member-chat] {
|
[next=member-chat] {
|
||||||
@include icon('speech');
|
@include icon('speech');
|
||||||
border: 1px solid $color-majorelle-blue;
|
border: 1px solid $color-244-73-62;
|
||||||
border-radius: 2em;
|
border-radius: 2em;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
@ -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 {
|
#members-list {
|
||||||
@extend .grid-layer;
|
@extend %grid-layer;
|
||||||
|
|
||||||
#members-list__content {
|
#members-list__content {
|
||||||
@extend .grid-layer;
|
@extend %grid-layer;
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -11,15 +48,15 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: $color-anti-flash-white;
|
color: $color-210-25-95;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
@include icon('arrow-left-circle');
|
@include icon('arrow-left-circle');
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled::before {
|
&:disabled::before {
|
||||||
color: $color-manatee;
|
color: $color-215-6-63;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -53,14 +90,14 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
color: $color-quartz;
|
color: $color-0-0-29;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 3.75rem 0;
|
margin: 3.75rem 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-top: 1px solid $color-timberwolf;
|
border-top: 1px solid $color-0-0-85;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
content: '';
|
content: '';
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -73,7 +110,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
background-color: $color-anti-flash-white;
|
background-color: $color-210-25-95;
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -81,7 +118,7 @@
|
|||||||
> sib-display {
|
> sib-display {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||||
color: $color-rolling-stone;
|
color: $color-210-4-50;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
@ -110,7 +147,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
div[name='header'] {
|
div[name='header'] {
|
||||||
border-bottom: 1px solid $color-anti-flash-white;
|
border-bottom: 1px solid $color-210-25-95;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0.85rem 0 3.4rem;
|
padding: 0.85rem 0 3.4rem;
|
||||||
@ -122,7 +159,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
member-picture {
|
member-picture {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 28vh;
|
height: 28vh;
|
||||||
margin: 1.7rem auto;
|
margin: 1.7rem auto;
|
||||||
@ -142,7 +179,6 @@
|
|||||||
|
|
||||||
[name='user.name'] {
|
[name='user.name'] {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
|
||||||
@extend h1;
|
@extend h1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -157,9 +193,9 @@
|
|||||||
|
|
||||||
[next=member-chat] {
|
[next=member-chat] {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
border: 1px solid $color-majorelle-blue;
|
border: 1px solid $color-244-73-62;
|
||||||
border-radius: 3.4rem;
|
border-radius: 3.4rem;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 1rem 2.55rem 0.7rem;
|
padding: 1rem 2.55rem 0.7rem;
|
||||||
1
src/styles/layout/project-profile/_index.scss
Normal file
1
src/styles/layout/project-profile/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'project-profile'
|
||||||
240
src/styles/layout/project-profile/project-profile.scss
Normal file
240
src/styles/layout/project-profile/project-profile.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,332 +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;
|
|
||||||
display: block;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#member-chat {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,239 +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 {
|
|
||||||
|
|
||||||
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-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;
|
|
||||||
|
|
||||||
sib-multiple [name='name'] {
|
|
||||||
@extend %group;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> span:nth-child(3) {
|
|
||||||
align-self: start;
|
|
||||||
grid-column: 2 / span 1;
|
|
||||||
grid-row: 2 / span 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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"]:not(:empty) {
|
|
||||||
@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;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Subproject commit 2456ba747dfdacf96cfaf70469b0eff059287e67
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Subproject commit 9ff71f4d047a101f633872db0820736b8baf792c
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Subproject commit 9ce7e6cec7447b7d3c04dee03bf068744373ac3f
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Subproject commit c358adefa38f93cd3acdf1f75c8c79e4b8379dc4
|
|
||||||
Loading…
Reference in New Issue
Block a user