...
 
Commits (2)
# SIB Job Board
# Solid Job Board
SIB Job Board serves the job board component
Solid Job Board serves the job board component
## How to use
Once the package is installed, you can use the `sib-directory` component:
Once the package is installed, you can use the `solid-job-board` component:
```html
<html>
......@@ -15,10 +15,10 @@ Once the package is installed, you can use the `sib-directory` component:
<body>
<!-- use the component -->
<sib-job-board
<solid-job-board
data-src="https://your.url/job-offers/"
range-skills="https://your.url/skills/"
></sib-job-board>
></solid-job-board>
</body>
</html>
```
......@@ -39,8 +39,6 @@ Installation:
npm install
```
**For a local dev setup, please edit your `src/path.js` to the proper file path.**
Build with:
```bash
......@@ -51,4 +49,4 @@ Watch files & rebuild on change with this command:
```bash
npm run watch
```
\ No newline at end of file
```
......@@ -8,6 +8,8 @@ sass.render({
}, function(error, result) {
if(!error){
fs.mkdirSync('dist', { recursive: true });
fs.writeFile('dist/index.css', String(result.css).replace(/\/lib\/sib-job-board/g, path), (e) =>{});
fs.writeFile('dist/index.css', String(result.css).replace(/\/lib\/solid-job-board/g, path), (e) =>{});
} else {
console.error(error);
}
});
\ No newline at end of file
......@@ -57,7 +57,7 @@
"build": "run-p copy:* build:*",
"build:css": "node build-scss.js",
"build:js": "babel 'src/*.js' --out-dir 'dist/'",
"copy:image": "copyfiles -f src/assets/* dist/assets",
"copy:image": "copyfiles -u 2 src/assets/* dist/assets && copyfiles -u 2 src/assets/**/* dist/assets",
"watch": "run-p copy:* watch:*",
"watch:css": "npm run build:css && npm run build:css -- -w",
"watch:js": "babel --watch 'src/*.js' --out-dir 'dist/'"
......
import SIBJobBoard from './sib-job-board.js';
import SIBJobCreate from './sib-job-create.js';
import SIBJobEdit from './sib-job-edit.js';
import SolidJobBoard from './solid-job-board.js';
import SolidJobCreate from './solid-job-create.js';
import SolidJobEdit from './solid-job-edit.js';
import ComponentPath from './path.js';
import { Helpers } from "https://unpkg.com/@startinblox/core@0.9";
import { Helpers } from "https://unpkg.com/@startinblox/core@0.10";
Helpers.importCSS(ComponentPath+'/dist/index.css');
export {
SIBJobBoard,
SIBJobCreate,
SIBJobEdit
SolidJobBoard,
SolidJobCreate,
SolidJobEdit
};
const path = "/lib/sib-job-board";
const path = "/lib/solid-job-board";
module.exports = path;
/* globals MutationObserver */
import {
SIBTemplateElement
} from "https://unpkg.com/@startinblox/core@0.9";
import { SolidTemplateElement } from "https://unpkg.com/@startinblox/core@0.10";
import ComponentPath from './path.js';
export default class SIBJobBoard extends SIBTemplateElement {
export default class SolidJobBoard extends SolidTemplateElement {
constructor() {
super();
}
......@@ -20,7 +18,7 @@ export default class SIBJobBoard extends SIBTemplateElement {
async render() {
await super.render();
this.router = await this.waitForElement(this, 'sib-router');
this.router = await this.waitForElement(this, 'solid-router');
}
waitForElement(element, selector) {
......@@ -47,55 +45,55 @@ export default class SIBJobBoard extends SIBTemplateElement {
rangeSkills
}) {
return `
<sib-router default-route="job-offers-board">
<sib-route name="job-offers-board"></sib-route>
<sib-route name="job-offers-create"></sib-route>
<sib-route name="job-offers-edit" use-id></sib-route>
</sib-router>
<solid-router default-route="job-offers-board">
<solid-route name="job-offers-board"></solid-route>
<solid-route name="job-offers-create"></solid-route>
<solid-route name="job-offers-edit" use-id></solid-route>
</solid-router>
<sib-widget name="author-avatar">
<solid-widget name="author-avatar">
<template>
\${value ? '<img src="'+value+'" style="max-width:100%; max-height: 100%;" />' : '<object type="image/svg+xml" data="${ComponentPath}/dist/assets/alien.svg")></object>'}
</template>
</sib-widget>
</solid-widget>
<sib-widget name="job-skills">
<solid-widget name="job-skills">
<template>
<li class="skill">\${await value.name}</li>
</template>
</sib-widget>
</solid-widget>
<sib-widget name="author-contact">
<solid-widget name="author-contact">
<template>
<sib-link next="messages" data-src="\${id}">
</sib-link>
<solid-link next="messages" data-src="\${id}">
</solid-link>
</template>
</sib-widget>
</solid-widget>
<sib-widget name="edit-button">
<solid-widget name="edit-button">
<template>
<sib-ac-checker permission="acl:Write" data-src="\${src}">
<sib-link data-src="\${src}" \${label} next="\${value}">
<solid-ac-checker permission="acl:Write" data-src="\${src}">
<solid-link data-src="\${src}" \${label} next="\${value}">
<img type="image/svg+xml" src="${ComponentPath}/dist/assets/pencil.svg">
</sib-link>
</sib-ac-checker>
</solid-link>
</solid-ac-checker>
</template>
</sib-widget>
</solid-widget>
<div id="job-offers-board">
<div class="topline">
<sib-ac-checker permission="acl:Append" data-src="${postDataSrc}">
<sib-link next="job-offers-create" class="plus-button">
<solid-ac-checker permission="acl:Append" data-src="${postDataSrc}">
<solid-link next="job-offers-create" class="plus-button">
<div class="icon-plus"></div>
<div>POSTER UNE OFFRE</div>
</sib-link>
</sib-ac-checker>
</solid-link>
</solid-ac-checker>
<div class="title">
<h1>OFFRES DE MISSION</h1>
<span>Tu trouveras ici des offres de missions</span>
</div>
</div>
<sib-display
<solid-display
class="job-board__list"
data-src="${dataSrc}"
paginate-by='10'
......@@ -104,7 +102,7 @@ export default class SIBJobBoard extends SIBTemplateElement {
search-label-skills="Recherche par compétences"
search-range-skills="${rangeSkills}"
search-widget-skills="sib-form-placeholder-dropdown"
search-widget-skills="solid-form-placeholder-dropdown"
fields="offer-detail(user-thumb(author.account.picture, author.first_name, author.last_name, author, edit), creationDate, content(title, description), skills)"
......@@ -117,7 +115,7 @@ export default class SIBJobBoard extends SIBTemplateElement {
widget-author="author-contact"
class-author="author-contact-display"
widget-creationDate="sib-display-date-time"
widget-creationDate="solid-display-date-time"
label-edit="Editer"
widget-edit="edit-button"
......@@ -126,28 +124,28 @@ export default class SIBJobBoard extends SIBTemplateElement {
widget-skills="job-skills"
multiple-skills>
</sib-display>
</solid-display>
</div>
<div id="job-offers-create" hidden>
<sib-ac-checker permission="acl:Append" data-src="${postDataSrc}">
<sib-job-create
<solid-ac-checker permission="acl:Append" data-src="${postDataSrc}">
<solid-job-create
data-src="${postDataSrc}"
range-skills="${rangeSkills}">
</sib-job-create>
</sib-ac-checker>
</solid-job-create>
</solid-ac-checker>
</div>
<div id="job-offers-edit" hidden>
<sib-ac-checker permission="acl:Write" bind-resources>
<sib-job-edit
<solid-ac-checker permission="acl:Write" bind-resources>
<solid-job-edit
bind-resources
range-skills="${rangeSkills}">
</sib-job-edit>
</sib-ac-checker>
</solid-job-edit>
</solid-ac-checker>
</div>
`;
}
}
customElements.define("sib-job-board", SIBJobBoard);
\ No newline at end of file
customElements.define("solid-job-board", SolidJobBoard);
\ No newline at end of file
import {
SIBTemplateElement
} from "https://unpkg.com/@startinblox/core@0.9";
import { SolidTemplateElement } from "https://unpkg.com/@startinblox/core@0.10";
export default class SIBJobCreate extends SIBTemplateElement {
export default class SolidJobCreate extends SolidTemplateElement {
constructor() {
super();
}
......@@ -21,42 +19,42 @@ export default class SIBJobCreate extends SIBTemplateElement {
<div class="job-create">
<div class="topline">
<h1>POSTER UNE NOUVELLE OFFRE DE MISSION</h1>
<sib-link class="backlink" next="job-offers">Retour</sib-link>
<solid-link class="backlink" next="job-offers">Retour</solid-link>
</div>
<div class="job-form">
<span>Contenu de l'offre</span>
<sib-form
<solid-form
class="job-board__create"
data-src="${dataSrc}"
range-skills="${rangeSkills}"
fields="closingDate, title, description, skills"
label-closingDate="L'OFFRE VISIBLE JUSQU'AU*"
widget-closingDate="sib-form-date"
label-closingDate="L'OFFRE SERA VISIBLE JUSQU'AU*"
widget-closingDate="solid-form-date"
class-closingDate="form-label is-dark display-closingDate"
label-title="TITRE*"
class-title="field form-label is-light is-expanded display-title"
label-description="DESCRIPTIF*"
widget-description="sib-form-textarea"
widget-description="solid-form-textarea"
class-description="field form-label is-light is-expanded display-description"
label-skills="COMPÉTENCES REQUISES*"
multiple-skills="sib-multiple-select"
widget-skills="sib-form-auto-completion"
multiple-skills="solid-multiple-select"
widget-skills="solid-form-auto-completion"
class-skills="form-label is-dark select-skills display-skills"
submit-button='PUBLIER MON OFFRE'
next="job-offers">
</sib-form>
</solid-form>
</div>
</div>
`;
}
}
customElements.define("sib-job-create", SIBJobCreate);
\ No newline at end of file
customElements.define("solid-job-create", SolidJobCreate);
\ No newline at end of file
import {
SIBTemplateElement
} from "https://unpkg.com/@startinblox/core@0.9";
import { SolidTemplateElement } from "https://unpkg.com/@startinblox/core@0.10";
export default class SIBJobEdit extends SIBTemplateElement {
export default class SolidJobEdit extends SolidTemplateElement {
constructor() {
super();
}
......@@ -19,42 +17,42 @@ export default class SIBJobEdit extends SIBTemplateElement {
<div class="job-edit">
<div class="topline">
<h1>MODIFIER L'OFFRE DE MISSION</h1>
<sib-link class="backlink" next="job-offers">Retour</sib-link>
<solid-link class="backlink" next="job-offers">Retour</solid-link>
</div>
<div class="job-form">
<span>Contenu de l'offre</span>
<sib-form
<solid-form
class="job-board__edit"
bind-resources
range-skills="${rangeSkills}"
fields="closingDate, title, description, skills"
label-closingDate="L'OFFRE VISIBLE JUSQU'AU*"
widget-closingDate="sib-form-date"
label-closingDate="L'OFFRE SERA VISIBLE JUSQU'AU*"
widget-closingDate="solid-form-date"
class-closingDate="form-label is-dark display-closingDate"
label-title="TITRE*"
class-title="field form-label is-light is-expanded display-title"
label-description="DESCRIPTIF*"
widget-description="sib-form-textarea"
widget-description="solid-form-textarea"
class-description="field form-label is-light is-expanded display-description"
label-skills="COMPÉTENCES REQUISES*"
multiple-skills="sib-multiple-select"
widget-skills="sib-form-auto-completion"
multiple-skills="solid-multiple-select"
widget-skills="solid-form-auto-completion"
class-skills="form-label is-dark select-skills display-skills"
submit-button="ENREGISTRER MON OFFRE"
next="job-offers">
</sib-form>
</solid-form>
</div>
</div>
`;
}
}
customElements.define("sib-job-edit", SIBJobEdit);
\ No newline at end of file
customElements.define("solid-job-edit", SolidJobEdit);
\ No newline at end of file
......@@ -20,9 +20,9 @@
--color-job-board-form-label: var(--color-job-board-grey-1);
}
sib-job-board {
solid-job-board {
/*Cancel sib router default hight*/
sib-router{
solid-router{
position: absolute;
}
}
......@@ -60,7 +60,7 @@ sib-job-board {
width: 80%;
}
#job-offers-create .job-create div.topline sib-link, #job-offers-edit .job-edit div.topline sib-link{
#job-offers-create .job-create div.topline solid-link, #job-offers-edit .job-edit div.topline solid-link{
width: 20%;
text-align: right;
}
......@@ -85,27 +85,27 @@ Style for form
font-weight: bold;
}
#job-offers-create .job-create div.job-form sib-form form,#job-offers-edit .job-edit div.job-form sib-form form{
#job-offers-create .job-create div.job-form solid-form form,#job-offers-edit .job-edit div.job-form solid-form form{
margin-top: 2rem;
display: flex;
flex-direction: column;
}
#job-offers-create .job-create div.job-form sib-form form > *, #job-offers-edit .job-edit div.job-form sib-form form > *{
#job-offers-create .job-create div.job-form solid-form form > *, #job-offers-edit .job-edit div.job-form solid-form form > *{
margin: 1rem 0;
}
/*Global field styling*/
#job-offers-create .job-create div.job-form sib-form form label, #job-offers-edit .job-edit div.job-form sib-form form label{
#job-offers-create .job-create div.job-form solid-form form label, #job-offers-edit .job-edit div.job-form solid-form form label{
display: flex;
flex-direction: column;
font-weight: 600;
color: var(--color-job-board-form-label);
}
#job-offers-create .job-create div.job-form sib-form form input, #job-offers-create .job-create div.job-form sib-form form textarea,#job-offers-create .job-create div.job-form sib-form form div.ss-multi-selected, #job-offers-edit .job-edit div.job-form sib-form form input, #job-offers-edit .job-edit div.job-form sib-form form textarea,#job-offers-edit .job-edit div.job-form sib-form form div.ss-multi-selected{
#job-offers-create .job-create div.job-form solid-form form input, #job-offers-create .job-create div.job-form solid-form form textarea,#job-offers-create .job-create div.job-form solid-form form div.ss-multi-selected, #job-offers-edit .job-edit div.job-form solid-form form input, #job-offers-edit .job-edit div.job-form solid-form form textarea,#job-offers-edit .job-edit div.job-form solid-form form div.ss-multi-selected{
margin-top: 2rem;
background-color: var(--color-job-board-form-input-background);
border: 1px solid var(--color-job-board-form-input-background);
......@@ -114,18 +114,18 @@ Style for form
margin: 1.5rem 0;
}
#job-offers-create .job-create div.job-form sib-form form sib-multiple-select[name="skills"],#job-offers-edit .job-edit div.job-form sib-form form sib-multiple-select[name="skills"]{
#job-offers-create .job-create div.job-form solid-form form solid-multiple-select[name="skills"],#job-offers-edit .job-edit div.job-form solid-form form solid-multiple-select[name="skills"]{
border-bottom: 2px solid var(--color-job-board-form-bottom-line-light);
padding-bottom: 4rem;
}
#job-offers-create .job-create div.job-form sib-form form textarea,#job-offers-edit .job-edit div.job-form sib-form form textarea{
#job-offers-create .job-create div.job-form solid-form form textarea,#job-offers-edit .job-edit div.job-form solid-form form textarea{
height: 110px;
}
/*tag positionning*/
#job-offers-create .job-create div.job-form sib-form form div.ss-multi-selected,#job-offers-edit .job-edit div.job-form sib-form form div.ss-multi-selected{
#job-offers-create .job-create div.job-form solid-form form div.ss-multi-selected,#job-offers-edit .job-edit div.job-form solid-form form div.ss-multi-selected{
border: none;
border-radius: 0px;
display: flex;
......@@ -142,13 +142,13 @@ Style for form
}
/*hide placeholder*/
#job-offers-create .job-create div.job-form sib-form form div.ss-multi-selected div span.ss-disabled,#job-offers-edit .job-edit div.job-form sib-form form div.ss-multi-selected div span.ss-disabled{
#job-offers-create .job-create div.job-form solid-form form div.ss-multi-selected div span.ss-disabled,#job-offers-edit .job-edit div.job-form solid-form form div.ss-multi-selected div span.ss-disabled{
display: none;
}
/*tag colors*/
#job-offers-create .job-create div.job-form sib-form form div.ss-multi-selected div div.ss-value,#job-offers-edit .job-edit div.job-form sib-form form div.ss-multi-selected div div.ss-value{
#job-offers-create .job-create div.job-form solid-form form div.ss-multi-selected div div.ss-value,#job-offers-edit .job-edit div.job-form solid-form form div.ss-multi-selected div div.ss-value{
background-color: var(--color-job-board-form-filter-tags);
border-radius: 2em;
color: var(--color-directory-text-skill);
......@@ -162,7 +162,7 @@ Style for form
/*Submit button*/
#job-offers-create .job-create div.job-form sib-form form input[type="submit"],#job-offers-edit .job-edit div.job-form sib-form form input[type="submit"]{
#job-offers-create .job-create div.job-form solid-form form input[type="submit"],#job-offers-edit .job-edit div.job-form solid-form form input[type="submit"]{
color: var(--color-job-board-form-submit-text);
background-color: var(--color-job-board-form-submit-background);
border-radius: 55px;
......
......@@ -41,14 +41,14 @@
align-self: center;
}
#job-offers-board div.topline sib-ac-checker{
#job-offers-board div.topline solid-ac-checker{
order: 3;
text-align: center;
justify-content: center;
align-self: center;
}
#job-offers-board div.topline sib-ac-checker sib-link{
#job-offers-board div.topline solid-ac-checker solid-link{
display: flex;
text-align: center;
background-color: var(--color-job-board-buttons-tags);
......@@ -69,7 +69,7 @@
================================*/
/*styling of tag filters - Also applicable to forms*/
#job-offers-board > sib-display[widget-skills="job-skills"] > sib-form div.ss-main{
#job-offers-board > solid-display[widget-skills="job-skills"] > solid-form div.ss-main{
width: 40%;
font-weight: normal;
margin-top: 0.8rem;
......@@ -99,10 +99,10 @@
}
}
#job-offers-board > sib-display[widget-skills="job-skills"] > sib-form div.ss-main span.ss-disabled{
#job-offers-board > solid-display[widget-skills="job-skills"] > solid-form div.ss-main span.ss-disabled{
display: none;
}
#job-offers-board > sib-display[widget-skills="job-skills"] > sib-form div.ss-value{
#job-offers-board > solid-display[widget-skills="job-skills"] > solid-form div.ss-value{
background-color: var(--color-job-board-filter-tags);
border-radius: 2em;
color: var(--color-directory-text-skill);
......@@ -115,13 +115,13 @@
}
/*select div that groups the whole line*/
#job-offers-board > sib-display[widget-skills="job-skills"]{
#job-offers-board > solid-display[widget-skills="job-skills"]{
display: flex;
flex-direction: column;
width: 100%;
}
#job-offers-board > sib-display[widget-skills="job-skills"] > sib-form{
#job-offers-board > solid-display[widget-skills="job-skills"] > solid-form{
margin-bottom: 7rem;
label{
......@@ -131,25 +131,25 @@
}
#job-offers-board > sib-display[class="job-board__list"] > div > sib-display > div{
#job-offers-board > solid-display[class="job-board__list"] > div > solid-display > div{
background-color: var(--color-job-board-offer-line);
box-shadow: 0 0 8px 0 var(--color-job-board-offer-line-shadow);
margin: 2rem 0rem;
padding: 2.2rem;
}
#job-offers-board sib-set-default[name="offer-detail"]{
#job-offers-board solid-set-default[name="offer-detail"]{
width: 100%;
display: flex;
flex-direction: column;
}
#job-offers-board sib-set-default[name="offer-detail"] > *{
#job-offers-board solid-set-default[name="offer-detail"] > *{
margin: 0.8rem 0;
}
/*Style user image, name & write to*/
#job-offers-board sib-set-default[name="user-thumb"]{
#job-offers-board solid-set-default[name="user-thumb"]{
display: flex;
margin-bottom: 1.5rem;
grid-column-gap: 0.6rem;
......@@ -175,7 +175,7 @@
}
}
#job-offers-board sib-display-value[name="author.first_name"],sib-display-value[name="author.last_name"],author-contact[name="author"]{
#job-offers-board solid-display-value[name="author.first_name"],solid-display-value[name="author.last_name"],author-contact[name="author"]{
align-self: center;
margin-left: 0;
color: var(--color-job-board-grey-7);
......@@ -185,7 +185,7 @@
align-self: auto;
}
#job-offers-board author-contact[name="author"] sib-link img{
#job-offers-board author-contact[name="author"] solid-link img{
width: 22px;
height: 17px;
}
......@@ -200,7 +200,7 @@
margin-left: auto;
}
#job-offers-board edit-button[name="edit"] sib-ac-checker sib-link{
#job-offers-board edit-button[name="edit"] solid-ac-checker solid-link{
background-color: var(--color-job-board-edit-board-button);
padding: 0.2rem;
border-radius: 55px;
......@@ -211,7 +211,7 @@
}
#job-offers-board edit-button[name="edit"] sib-ac-checker sib-link img{
#job-offers-board edit-button[name="edit"] solid-ac-checker solid-link img{
align-self: center;
max-height: 2rem;
max-width: 2rem;
......@@ -221,18 +221,18 @@
/*Style date & text*/
#job-offers-board sib-set-default[name="content"]{
#job-offers-board solid-set-default[name="content"]{
display: flex;
flex-direction: column;
}
#job-offers-board sib-set-default[name="content"] sib-display-value[name="title"]{
#job-offers-board solid-set-default[name="content"] solid-display-value[name="title"]{
font-weight: bold;
margin: 0.4rem 0;
color: var(--color-job-board-detail-title);
}
#job-offers-board sib-set-default[name="content"] sib-display-value[name="description"]{
#job-offers-board solid-set-default[name="content"] solid-display-value[name="description"]{
margin: 0.4rem 0;
line-height: 22px;
font-size: 14px;
......@@ -241,7 +241,7 @@
/*Style tags*/
#job-offers-board sib-set-default[name="offer-detail"] sib-multiple[widget="job-skills"] > div{
#job-offers-board solid-set-default[name="offer-detail"] solid-multiple[widget="job-skills"] > div{
display: flex;
job-skills{
......@@ -262,8 +262,8 @@
}
sib-job-board {
sib-form-placeholder-dropdown {
solid-job-board {
solid-form-placeholder-dropdown {
>select {
/* remove the native arrow */
......@@ -289,19 +289,19 @@ sib-job-board {
}
}
}
sib-link[next="messages"]::before {
solid-link[next="messages"]::before {
background-color: var(--color-job-board-primary);
content: '';
display: inline-block;
height: 19px;
margin-right: 15px;
mask: url('/lib/sib-job-board/dist/assets/speech.svg') 1% 1% / 1px 1px no-repeat;
mask: url('/lib/solid-job-board/dist/assets/speech.svg') 1% 1% / 1px 1px no-repeat;
mask-size: cover;
-webkit-mask: url('/lib/sib-job-board/dist/assets/speech.svg') 1% 1% / 1px 1px no-repeat;
-webkit-mask: url('/lib/solid-job-board/dist/assets/speech.svg') 1% 1% / 1px 1px no-repeat;
-webkit-mask-size: cover;
width: 22px;
}
sib-form-date input[type="date"] {
solid-form-date input[type="date"] {
background-image: none;
font-size: inherit;
max-width: 100%;
......