From 2c649c447e69924fe52cc37caed1902fadde2ed0 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 14 May 2019 17:32:42 +0200 Subject: [PATCH] css: refactoring & fixing - day 2 --- copy_lib.js | 26 -- package.json | 2 +- postinstall.js | 8 + src/dependencies.pug | 7 +- src/get_config.pug | 3 +- src/index.pug | 24 +- src/menu-left.pug | 12 +- src/page-chat.pug | 0 ...ge-group-chat.pug => page-circle-chat.pug} | 2 +- src/page-circle-create.pug | 26 ++ src/page-circle-edit.pug | 9 + ...up-profile.pug => page-circle-profile.pug} | 2 +- src/{page-group.pug => page-circle.pug} | 17 +- src/page-group-create.pug | 26 -- src/page-group-edit.pug | 10 - src/page-groups.pug | 7 - src/page-job-offer-create.pug | 37 ++- src/page-job-offers.pug | 12 +- src/page-member-chat.pug | 19 +- src/page-member-edit.pug | 96 ------ ...members.pug => page-members-directory.pug} | 0 src/page-project-chat.pug | 2 +- src/page-project-create.pug | 58 ++-- src/page-project-edit.pug | 106 +++---- src/page-project-profile.pug | 2 +- src/page-projects.pug | 10 - src/styles/_index.scss | 10 +- src/styles/abstracts/_mixins.scss | 20 -- src/styles/base/_compat.scss | 47 +-- src/styles/base/form.scss | 294 +++++++++++++++++ src/styles/{components => base}/header.scss | 3 +- src/styles/base/main.scss | 61 +++- .../{components => base}/menu-left.scss | 2 +- src/styles/components/_index.scss | 10 +- src/styles/components/chat.scss | 15 + src/styles/components/content.scss | 114 ------- src/styles/components/form.scss | 297 ------------------ src/styles/components/menu-right.scss | 113 ------- src/styles/components/sidebar.scss | 106 +++++++ src/styles/components/skills.scss | 2 - src/styles/components/user-role.scss | 9 + .../layout/circle-profile/circle-profile.scss | 1 - src/styles/layout/job-offers/job-offers.scss | 19 +- src/styles/layout/member-chat/_index.scss | 1 - .../layout/member-chat/member-chat.scss | 3 - src/styles/layout/members/members.scss | 20 +- .../project-profile/project-profile.scss | 269 ++++++++-------- 47 files changed, 824 insertions(+), 1115 deletions(-) delete mode 100644 copy_lib.js create mode 100644 postinstall.js delete mode 100644 src/page-chat.pug rename src/{page-group-chat.pug => page-circle-chat.pug} (82%) create mode 100644 src/page-circle-create.pug create mode 100644 src/page-circle-edit.pug rename src/{page-group-profile.pug => page-circle-profile.pug} (96%) rename src/{page-group.pug => page-circle.pug} (58%) delete mode 100644 src/page-group-create.pug delete mode 100644 src/page-group-edit.pug delete mode 100644 src/page-groups.pug delete mode 100644 src/page-member-edit.pug rename src/{page-members.pug => page-members-directory.pug} (100%) delete mode 100644 src/page-projects.pug create mode 100644 src/styles/base/form.scss rename src/styles/{components => base}/header.scss (98%) rename src/styles/{components => base}/menu-left.scss (99%) create mode 100644 src/styles/components/chat.scss delete mode 100644 src/styles/components/content.scss delete mode 100644 src/styles/components/form.scss delete mode 100644 src/styles/components/menu-right.scss create mode 100644 src/styles/components/sidebar.scss create mode 100644 src/styles/components/user-role.scss delete mode 100644 src/styles/layout/member-chat/_index.scss delete mode 100644 src/styles/layout/member-chat/member-chat.scss diff --git a/copy_lib.js b/copy_lib.js deleted file mode 100644 index 07b6dad..0000000 --- a/copy_lib.js +++ /dev/null @@ -1,26 +0,0 @@ -const { basename, join, resolve } = require('path'); -const fs = require('fs'); -const { exec } = require('child_process'); - -const distDir = 'www/lib'; - -const filelist = fs.readFileSync('lib_list.txt', 'utf-8').split(/\r?\n/); - -exec(`mkdir -p ${distDir}`, () => { - filelist.forEach(path => { - path = resolve(path); - const filename = basename(path); - const dest = fs.lstatSync(path).isDirectory() - ? distDir - : join(distDir, filename); - const cmd = `rsync -ru ${path} ${dest}`; - console.log(cmd); - exec(cmd); - }); -}); - -if (!fs.existsSync('src/config.json')) { - const cmd = `rsync -ru src/config.sample.json src/config.json`; - console.log(cmd); - exec(cmd); -} \ No newline at end of file diff --git a/package.json b/package.json index 69734fc..637731c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "license": "MIT", "scripts": { "serve": "node server.js", - "postinstall": "node copy_lib.js" + "postinstall": "node postinstall.js" }, "devDependencies": { "@babel/core": "^7.4.4", diff --git a/postinstall.js b/postinstall.js new file mode 100644 index 0000000..ff2fe59 --- /dev/null +++ b/postinstall.js @@ -0,0 +1,8 @@ +const fs = require('fs'); +const { exec } = require('child_process'); + +if (!fs.existsSync('src/config.json')) { + const cmd = `rsync -ru src/config.sample.json src/config.json`; + console.log(cmd); + exec(cmd); +} \ No newline at end of file diff --git a/src/dependencies.pug b/src/dependencies.pug index fe25872..10349e7 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -2,7 +2,6 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0") script(src="/scripts/index.js") //- Stylesheets -link(rel='stylesheet', href='/lib/normalize.css') link(rel='stylesheet', href='/styles/index.css') link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext') link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i') @@ -10,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- local //- script(type="module" src="/lib/sib-core/src/index.js") //- script(type="module" src="/lib/sib-router/src/index.js") -//- script(type="module" src="/lib/sib-chat/sib-chat.js") +script(type="module" src="/lib/sib-chat/sib-chat.js") //- script(type="module" src="/lib/sib-notifications/sib-notifications.js") //- script(type="module" src="/lib/sib-conversation/sib-conversation.js") //- script(type="module" src="/lib/sib-directory/sib-directory.js") @@ -18,8 +17,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- CDN script(type="module" src="https://unpkg.com/@startinblox/core@0.7") script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2") -script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7") +//- script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7") script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12") script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1") -script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.11") +script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14") diff --git a/src/get_config.pug b/src/get_config.pug index befcb19..5a04ca7 100644 --- a/src/get_config.pug +++ b/src/get_config.pug @@ -1,6 +1,5 @@ -- var __env = locals[process.env.ENV] - - + var __env = locals[process.env.ENV] for(k in __env){ eval(`var ${k} = __env[${JSON.stringify(k)}]`); } \ No newline at end of file diff --git a/src/index.pug b/src/index.pug index 666c4c9..6d997c3 100644 --- a/src/index.pug +++ b/src/index.pug @@ -9,29 +9,29 @@ html(lang="en") link(rel="icon" type="image/png" href="/images/favicon.png") include dependencies.pug body - header#header.row(role='banner') + header#header(role='banner') include header.pug - .content.row + main include menu-left.pug - main#mainContainer + div#viewport - #members(hidden).padded-width - include page-members.pug + #members(hidden).no-sidebar + include page-members-directory.pug - #job-offers(hidden).padded-width + #job-offers(hidden).no-sidebar include page-job-offers.pug - #job-offer-create(hidden).padded-width + #job-offer-create(hidden).no-sidebar sib-link(class="backlink", next="job-offers") Back include page-job-offer-create.pug - #project(hidden) + #project(hidden).with-sidebar include page-project.pug - - #circle(hidden) - include page-group.pug - #member-chat(hidden) + #circle(hidden).with-sidebar + include page-circle.pug + + #member-chat(hidden).no-sidebar include page-member-chat.pug #user-profile(hidden) diff --git a/src/menu-left.pug b/src/menu-left.pug index bc86895..beb5cfc 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -1,20 +1,10 @@ -nav#navbar +nav#main__menu sib-router#navbar-router(default-route='members') sib-route.menu(name='members') - div.menu-notification - sib-display( - data-src=`${sdn}/members/`, - data-fields='-' - ) div.menu-label Members div.menu-icon.icon-people div.divider sib-route.menu(name='job-offers', rdf-type='hd:joboffer') - div.menu-notification - sib-display( - data-src=`${sdn}/job-offers/`, - data-fields='-' - ) div.menu-label Job offers div.menu-icon.icon-briefcase sib-route(hidden, name='job-offer-create') diff --git a/src/page-chat.pug b/src/page-chat.pug deleted file mode 100644 index e69de29..0000000 diff --git a/src/page-group-chat.pug b/src/page-circle-chat.pug similarity index 82% rename from src/page-group-chat.pug rename to src/page-circle-chat.pug index 72bb999..606e5a7 100644 --- a/src/page-group-chat.pug +++ b/src/page-circle-chat.pug @@ -1,4 +1,4 @@ -.chat-view +.content-box.full-width.chat-view sib-chat( data-authentication='login', data-auto-login='true', diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug new file mode 100644 index 0000000..e7eeb59 --- /dev/null +++ b/src/page-circle-create.pug @@ -0,0 +1,26 @@ +.content-box.with-form.full-width + h1 New group + p Here you can create a new group according to your interests, what you want to share, etc. + + sib-form( + data-src=`${sdn}/circles/`, + range-owner=`${sdn}/users/`, + range-team=`${sdn}/members/` + + data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID', + + label-name="Channel's name", + label-description='Description', + label-owner='Owner of this channel', + label-foaf:jabberID='Chatroom id', + label-team='Member(s) of this channel', + + value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".', + value-owner-text='The one who will admin this channel', + value-team-text='Add any members as you want.', + + + widget-description='sib-form-textarea', + widget-jabberRoom='sib-form-checkbox', + widget-team='sib-form-multiple-dropdown' + ) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug new file mode 100644 index 0000000..008bc6d --- /dev/null +++ b/src/page-circle-edit.pug @@ -0,0 +1,9 @@ +#circle-edit.content-box.with-form.full-width + h1 Edit group + sib-form.block( + range-owner=`${sdn}/members/`, + data-fields="name, description, owner, team, jabberID, jabberRoom" + range-team=`${sdn}/members/`, + widget-team='sib-form-multiple-dropdown', + bind-resources + ) diff --git a/src/page-group-profile.pug b/src/page-circle-profile.pug similarity index 96% rename from src/page-group-profile.pug rename to src/page-circle-profile.pug index 55114d3..7784abf 100644 --- a/src/page-group-profile.pug +++ b/src/page-circle-profile.pug @@ -1,4 +1,4 @@ -.frame +.content-box.full-width h2 Channel's name: sib-display( data-fields='name', diff --git a/src/page-group.pug b/src/page-circle.pug similarity index 58% rename from src/page-group.pug rename to src/page-circle.pug index 39635d0..a65038d 100644 --- a/src/page-group.pug +++ b/src/page-circle.pug @@ -8,20 +8,19 @@ nav.jsRightMenu(role='navigation') a Chat sib-route(name='circle-profile') li - a Info - sib-ac-checker(permission='change' bind-resources) - sib-route(name='circle-edit') - li - a Edit + a Information + sib-route(name='circle-edit') + li + a Edit sib-route(name='circle-create') li a Add new .views-container #circle-chat - include page-group-chat.pug + include page-circle-chat.pug #circle-profile - include page-group-profile.pug + include page-circle-profile.pug #circle-edit - include page-group-edit.pug + include page-circle-edit.pug #circle-create - include page-group-create.pug + include page-circle-create.pug diff --git a/src/page-group-create.pug b/src/page-group-create.pug deleted file mode 100644 index 343db17..0000000 --- a/src/page-group-create.pug +++ /dev/null @@ -1,26 +0,0 @@ -.frame-form.full-wide - h1 New group - p.form-goal Here you can create a new group according to your interests, what you want to share, etc. - .form-view - sib-form( - data-src=`${sdn}/circles/`, - range-owner=`${sdn}/users/`, - range-team=`${sdn}/members/` - - data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID', - - label-name="Channel's name", - label-description='Description', - label-owner='Owner of this channel', - label-foaf:jabberID='Chatroom id', - label-team='Member(s) of this channel', - - value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".', - value-owner-text='The one who will admin this channel', - value-team-text='Add any members as you want.', - - - widget-description='sib-form-textarea', - widget-jabberRoom='sib-form-checkbox', - widget-team='sib-form-multiple-dropdown' - ) diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug deleted file mode 100644 index b4c0676..0000000 --- a/src/page-group-edit.pug +++ /dev/null @@ -1,10 +0,0 @@ -#circle-edit.frame-form - h1 Edit group - .form-view - sib-form.block( - range-owner=`${sdn}/members/`, - data-fields="name, description, owner, team, jabberID, jabberRoom" - range-team=`${sdn}/members/`, - widget-team='sib-form-multiple-dropdown', - bind-resources - ) diff --git a/src/page-groups.pug b/src/page-groups.pug deleted file mode 100644 index 68885fb..0000000 --- a/src/page-groups.pug +++ /dev/null @@ -1,7 +0,0 @@ -#circles - sib-display#circles-list( - data-src=`${sdn}/circles/`, - data-fields='name, description', - search-fields='name, description', - next='group' - ) diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug index 93be66f..9e8619a 100644 --- a/src/page-job-offer-create.pug +++ b/src/page-job-offer-create.pug @@ -1,4 +1,6 @@ -.frame-form.frame +.content-box.with-form + h1 Post a new job offer + p This form allows you to share an offer to all members of the network. sib-widget(name='title-text') template @@ -8,23 +10,20 @@ template p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...' - h1 Post a new job offer - p.form-goal This form allows you to share an offer to all members of the network. - .form-view - sib-form.block( - data-src=`${sdn}/job-offers/`, - range-skills= `${sdn}/skills/`, - range-author= `${sdn}/users/`, + sib-form.block( + data-src=`${sdn}/job-offers/`, + range-skills= `${sdn}/skills/`, + range-author= `${sdn}/users/`, - data-fields='title, title-text, description, description-text, skills', + data-fields='title, title-text, description, description-text, skills', - label-title='Title*', - label-description='Description*', - label-skills='The required skills for this mission:*', - - widget-title-text='title-text', - widget-description-text='description-text', - widget-skills='sib-form-auto-completion', - - next="job-offers" - ) + label-title='Title*', + label-description='Description*', + label-skills='The required skills for this mission:*', + + widget-title-text='title-text', + widget-description-text='description-text', + widget-skills='sib-form-auto-completion', + + next="job-offers" + ) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index be4a39f..f648a42 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,10 +1,10 @@ -div.grid-layer +div.job-offers__main include templates/template-groups.pug include templates/template-skills.pug include templates/template-joboffers-filter.pug - div.grid-layer-main.containerV + div.job-offers__content h1 New offers span Here you can find and post offers sib-display#offers-list( @@ -35,15 +35,9 @@ div.grid-layer search-widget-open='joboffers-filter' ) - div.grid-layer-links.containerV + div.job-offers__newoffer template#groups-list-template p ${value} sib-link(next="job-offer-create").plus-button div.icon-plus div Post a new offer - //-sib-link().containerH.containerCenter.how-link - div.icon-idea - div.grow How To find a new offer? - //-sib-link().containerH.containerCenter.how-link - div.icon-idea - div.grow How to set notification? diff --git a/src/page-member-chat.pug b/src/page-member-chat.pug index a082cf0..fdc62b2 100644 --- a/src/page-member-chat.pug +++ b/src/page-member-chat.pug @@ -1,10 +1,9 @@ -div - .chat-view - sib-chat( - data-authentication='login', - data-auto-login='true', - data-bosh-service-url=xmpp, - data-debug='false', - data-locales-url='en', - bind-resources - ) +.content-box.full-width.chat-view + sib-chat( + data-authentication='login', + data-auto-login='true', + data-bosh-service-url=xmpp, + data-debug='false', + data-locales-url='en', + bind-resources + ) diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug deleted file mode 100644 index 31aaa9e..0000000 --- a/src/page-member-edit.pug +++ /dev/null @@ -1,96 +0,0 @@ -.form-view - sib-form.block( - data-fields='user.first_name, user.last_name, user.account.picture, bio, groups, phone, skills, website', - widget-user='hdapp-usereditinfo', - range-groups=`${sdn}/groups/`, widget-skills='sib-form-multiple-dropdown', - range-skills=`${sdn}/skills/`, - bind-resources - ) - - #crop-modal - .crop-wrapper - img#crop-preview(src='') - .control-bar - button#cancel-img-cropping.btn.btn-link Annuler - i#rotate-img.fa.fa-undo(aria-hidden='true') - button#crop-img.btn.btn-link Valider - - -//-script. - class LDPFormImgUpload extends SIBWidget { - get template() { - return ` - `; - } - - render() { - store.get(this.value).then( (value) => { - this._value = value; - this.innerHTML = this.template; - }); - } - } - customElements.define("ldp-form-img-upload", LDPFormImgUpload); - widget-avatar="ldp-form-img-upload" - - -//-script. - // Constant declaration - const avatarPreview = document.querySelector("#avatar-preview"); - const avatarInput = document.querySelector("#avatar-input"); - const cropModal = document.querySelector("#crop-modal"); - const cropPreview = cropModal.querySelector("#crop-preview"); - const $cropPreview = $(cropPreview); - - // Triggers cropping on image upload - avatarInput.addEventListener("change", function(e) { - var img = avatarInput.files[0]; - var reader = new FileReader(); - - reader.onloadend = function () { - cropPreview.src = reader.result; - cropModal.classList.add("cropping-mode"); - } - - if (img) { - reader.readAsDataURL(img);//reads the data as a URL - } - }); - cropPreview.addEventListener("load", () => { - $cropPreview.cropper({ - aspectRatio: 1/1, - viewMode: 3, - zoomable: false, - }); - }); - - - // Rotate image - cropModal.querySelector("#rotate-img").addEventListener("click", () => { - $cropPreview.cropper("rotate", -90); - }); - - - // Cancel cropping - cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => { - closeCropping(); - }); - - // Shortcut - document.querySelector("body").addEventListener("keydown", function(e) { - // Escape key - if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) { - closeCropping(); - } - }); - function closeCropping() { - cropModal.classList.remove("cropping-mode"); - avatarInput.value = null; - } - - - // Validating cropping - cropModal.querySelector("#crop-img").addEventListener("click", () => { - avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL() - closeCropping(); - }); diff --git a/src/page-members.pug b/src/page-members-directory.pug similarity index 100% rename from src/page-members.pug rename to src/page-members-directory.pug diff --git a/src/page-project-chat.pug b/src/page-project-chat.pug index 59730e7..fdc62b2 100644 --- a/src/page-project-chat.pug +++ b/src/page-project-chat.pug @@ -1,4 +1,4 @@ -.chat-view +.content-box.full-width.chat-view sib-chat( data-authentication='login', data-auto-login='true', diff --git a/src/page-project-create.pug b/src/page-project-create.pug index 4e26997..e954c5a 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -1,33 +1,33 @@ -.frame-form.full-wide +.content-box.with-form.full-width h1 New project - p.form-goal Here you can create your project, add members and assign them a job. - .form-view - sib-form.block( - data-src=`${sdn}/projects/`, - range-members=`${sdn}/members/`, - range-team=`${sdn}/users/`, + p Here you can create your project, add members and assign them a job. + + sib-form.block( + data-src=`${sdn}/projects/`, + range-members=`${sdn}/members/`, + range-team=`${sdn}/users/`, - data-fields='block-project__info, block-project__fee, block-project__customer', + data-fields='block-project__info, block-project__fee, block-project__customer', - set-block-project__info='customer.name, name, customer.logo, description', - label-customer.name='Customer\'s name', - label-name='Project\'s name', - label-customer.logo='Customer\'s logo', - label-description='Project description', - - set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee', - widget-fieldset-fee='template-legend-fee', - label-businessProvider='Business provider', - label-businessProviderFee='Amount of the contribution', - - set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone', - widget-fieldset-customer='template-legend-customer', - label-customer.companyRegister='Company register', - label-customer.address='Address', - label-customer.firstName='Name of the contact at the customer\'s premises', - label-customer.lastName='Firstname of the contact at the customer\'s premises', - label-customer.role='Role within the company', - label-customer.email='Email', - label-customer.phone='Phone' - ) + set-block-project__info='customer.name, name, customer.logo, description', + label-customer.name='Customer\'s name', + label-name='Project\'s name', + label-customer.logo='Customer\'s logo', + label-description='Project description', + + set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee', + widget-fieldset-fee='hd-template-project-title', + label-businessProvider='Business provider', + label-businessProviderFee='Amount of the contribution', + + set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone', + widget-fieldset-customer='hd-template-project-title', + label-customer.companyRegister='Company register', + label-customer.address='Address', + label-customer.firstName='Name of the contact at the customer\'s premises', + label-customer.lastName='Firstname of the contact at the customer\'s premises', + label-customer.role='Role within the company', + label-customer.email='Email', + label-customer.phone='Phone' + ) \ No newline at end of file diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 7849547..3038890 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,59 +1,59 @@ -sib-widget(name='template-legend-team') - template - span ${label} -sib-widget(name='template-members') - template - - sib-form.team.is-horizontal( - naked, - data-src='${id}', - data-fields='user.name, name', - range-user.name=`${sdn}/users/`, - class-name='field', - class-user.name='field', - label-name='Role', - label-user.name='Member(s)', - ) - -.frame-form.full-wide +.content-box.with-form.full-width h1 Edit your project - p.form-goal Here you can edit your projet's details - .form-view - sib-form.block( - data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team', + p Here you can edit your projet's details - set-block-project__info='customer.name, name, customer.logo, description', - label-customer.name='Customer\'s name', - label-name='Project\'s name', - label-customer.logo='Customer\'s logo', - label-description='Project description', - - set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee', - range-businessProvider=`${sdn}/businessproviders/`, - label-businessProvider='Business provider', - label-businessProvider.fee='Amount of the contribution (%)', - widget-fieldset-fee='template-legend-team', - widget-businessProvider.fee='sib-form-number', - label-fieldset-fee='Fee', - - set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone', - label-customer.companyRegister='Company registration number', - label-customer.address='Address', - label-customer.firstName='Name of the contact at the customer\'s premises', - label-customer.lastName='Firstname of the contact at the customer\'s premises', - label-customer.role='Role within the company', - label-customer.email='Email', - label-customer.phone='Phone', - widget-fieldset-customer='template-legend-team', - label-fieldset-customer='Customer information', + sib-widget(name='hd-template-project-title') + template + span ${label} - set-block-project__team='fieldset-team, members', - label-fieldset-team='The team', - widget-fieldset-team='template-legend-team', - widget-members='template-members', - multiple-members, + sib-widget(name='template-members') + template + sib-form.team.is-horizontal( + naked, + data-src='${id}', + data-fields='user.name, name', + range-user.name=`${sdn}/users/`, + class-name='field', + class-user.name='field', + label-name='Role', + label-user.name='Member(s)', + ) - 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 + ) diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 7330f28..fb8cf93 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -1,4 +1,4 @@ -.frame-form.full-wide +.content-box.full-width include templates/template-business-provider.pug include templates/template-customer.pug diff --git a/src/page-projects.pug b/src/page-projects.pug deleted file mode 100644 index 4490ae2..0000000 --- a/src/page-projects.pug +++ /dev/null @@ -1,10 +0,0 @@ -//#projects -div - h1 Projects - sib-display( - data-src=`${sdn}/projects/`, - data-fields='phone, customer, name', - widget-customer='hdapp-client', - search-fields='phone, name', - next='project' - ) diff --git a/src/styles/_index.scss b/src/styles/_index.scss index e8c7a32..7da5802 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -1,17 +1,21 @@ @charset "UTF-8"; @import '../../node_modules/include-media/dist/include-media'; +@import '../../node_modules/normalize.css/normalize'; @import 'abstracts/variables'; @import 'abstracts/mixins'; @import 'components/icons/index'; @import 'base/main'; -@import 'components/index'; -main#mainContainer { +div#viewport { + display: flex; + flex-grow: 1; + flex-shrink: 1; + overflow-y: auto; + @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; @import 'layout/project-profile/index'; @import 'layout/circle-profile/index'; - @import 'layout/member-chat/index'; } diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 31cde50..741219e 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -1,24 +1,4 @@ -@mixin style-template-fieldset($name: 'default') { - template-legend-#{$name} { - border-bottom: 1px solid $color-221-51-90; - color: $color-233-18-29; - font-size: 1.8rem; - font-weight: 600; - padding-bottom: 1rem; - } -} - @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) { box-shadow: 0 0 8px 0 $shadow; background-color: $background; -} - -%user-role { - border: 1px solid $color-45-95-54; - border-radius: 3px; - color: $color-210-4-50; - font-size: 1.4rem; - font-weight: 400; - margin-right: 0.4rem; - padding: calc(1.6rem - 0.8em) 0.7em; } \ No newline at end of file diff --git a/src/styles/base/_compat.scss b/src/styles/base/_compat.scss index 8a31961..4a5b345 100644 --- a/src/styles/base/_compat.scss +++ b/src/styles/base/_compat.scss @@ -1,4 +1,4 @@ -.grid-layer { +%grid-layer { display: grid; font-size: 16px; grid-template-columns: [start]auto[middle]25%[end]; @@ -11,7 +11,7 @@ align-items: stretch; } -.grid-layer-main { +%grid-layer-main { @extend %flex-grid-layer; grid-column-start: start; grid-column-end: end; @@ -19,7 +19,7 @@ grid-row-end: end; } -.grid-layer-links { +%grid-layer-links { @extend %flex-grid-layer; grid-column-start: middle; grid-column-end: end; @@ -27,47 +27,8 @@ grid-row-end: middle; } -.containerH { - display: flex; - flex-wrap: wrap; -} - -.containerV { +%containerV { display: flex; flex-direction: column; align-items: stretch; -} - -.grow { - flex-grow: 1; - flex-shrink: 1; -} - -.fix { - flex-grow: 0; - flex-shrink: 0; -} - -.containerCenter { - justify-content: center; - align-items: center; -} - -.reverse { - flex-direction: row-reverse; -} - -.row { - display: flex; - max-width: 100%; -} - -.content { - flex-direction: row; - height: 100%; - overflow: hidden; -} - -.col { - min-width: 0; } \ No newline at end of file diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss new file mode 100644 index 0000000..c0e8006 --- /dev/null +++ b/src/styles/base/form.scss @@ -0,0 +1,294 @@ +.content-box { + + &.with-form { + + hd-template-project-title { + border-bottom: 1px solid $color-221-51-90; + color: $color-233-18-29; + font-size: 1.8rem; + font-weight: 600; + padding-bottom: 1rem; + } + + sib-form { + border-bottom: 1px solid $color-210-17-91; + padding-bottom: 2.55rem; + } + + h1 { + color: $color-233-18-29; + font-weight: bold; + font-size: 2rem; + text-align: center; + } + + p:first-child { + margin-bottom: 6.8rem; + text-align: center; + } + + [name$='-text'] { + font-size: 1.5rem; + margin-bottom: 2em; + } + + div[name^='block-'] { + display: flex; + flex-direction: column; + } + + input { + -webkit-appearance: none; + align-items: center; + background: $color-222-57-95; + border: none; + color: $color-233-18-29; + display: inline-flex; + justify-content: flex-start; + line-height: 1.5; + vertical-align: top; + } + + sib-form-auto-completion, + sib-form-checkbox, + sib-form-dropdown, + sib-form-label-text, + sib-form-multiple-dropdown, + sib-form-number, + sib-form-textarea { + display: flex; + flex-direction: column; + + >label { + color: $color-244-10-70; + font-weight: 600; + margin: 2em 0 0.5em; + text-transform: uppercase; + + >div { + padding-bottom: 1rem; + } + } + + select, + textarea { + background: $color-222-57-95; + border: none; + color: $color-233-18-29; + line-height: 1.5; + width: 100%; + + } + + select, + textarea { + padding: 1.7rem; + } + + select { + margin-bottom: 1.7rem; + } + } + + sib-form-auto-completion, + sib-form-checkbox, + sib-form-multiple-dropdown { + + label { + color: $color-216-4-22; + font-weight: 600; + text-transform: initial; + } + } + + sib-form-auto-completion { + + div.choices__inner { + background-color: inherit; + border: none; + display: flex; + flex-direction: column-reverse; + padding-left: 0; + + div.choices__list { + margin-top: 1.7rem; + + div.choices__item { + + button.choices__button { + border-left: 1px solid $color-43-100-50; + opacity: 1; + padding-left: 0; + } + } + } + + input[type='text'].choices__input { + max-width: 27.2rem; + min-width: 27.2rem; + } + } + } + + sib-form-checkbox { + flex-direction: row; + + [type='checkbox'] { + position: relative; + margin-top: 2em; + + &:before { + border: 2px solid $color-210-5-56; + content: ''; + height: 1rem; + left: 0; + margin-left: 1rem; + padding-bottom: 0.2rem; + position: absolute; + width: 1.2rem; + z-index: 1; + } + + &:checked { + &:before { + border: 2px solid $color-210-5-56; + color: $color-244-73-62; + height: 1rem; + left: 0; + margin-left: 1rem; + padding-bottom: 0.2rem; + position: absolute; + width: 1.2rem; + z-index: 1; + @include mdi('check'); + } + } + + &:after { + background: $color-0-0-100; + content: ''; + height: 1rem; + position: absolute; + width: 1rem; + } + } + } + + sib-form-dropdown { + + select { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background-image: url("/images/chevron-down.png"); + background-position: right 12px top 60%; + background-repeat: no-repeat; + background-size: 14px 9px; + box-sizing: border-box; + } + } + + /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */ + + sib-form-multiple-dropdown { + + button { + appearance: none; + background-color: $color-0-0-100; + border: 1px solid; + border-radius: 100%; + color: $color-244-73-62; + font-size: 2.55rem; + height: 1em; + line-height: 0; + margin: 0.34rem; + padding: 0 0.04em 0.08em; + vertical-align: middle; + width: 1em; + } + } + + sib-form-textarea { + align-items: stretch; + } + + sib-multiple-form { + + >label { + display: none; + } + } + + input[type='submit'] { + margin-top: 6rem; + background-color: $color-233-18-29; + color: $color-0-0-100; + float: right; + font-weight: bold; + text-transform: uppercase; + } + } + + .is-horizontal { + display: flex; + } + + sib-multiple-form[name='members'] { + + >div { + align-items: center; + display: flex; + } + + >div:not(:nth-child(-n + 2)) { + + label { + + >div { + display: none; + } + } + } + + button { + appearance: none; + background-color: $color-0-0-100; + border: 1px solid; + border-radius: 100%; + color: $color-244-73-62; + font-size: 2.55rem; + height: 1em; + line-height: 0; + margin: 0.34rem; + padding: 0 0.04em 0.08em; + vertical-align: middle; + width: 1em; + + &::after { + content: Add; + } + } + } +} +sib-form { + + form > * { + margin-top: 0.85rem; + } + + // button like + input[type='color'], + input[type='file'], + input[type='reset'], + input[type='submit'] { + display: inline-block; + padding: 0.85rem 2.55rem; + border: none; + border-radius: 100em; + font-weight: normal; + } + + input[type='reset'] { + display: none; + } +} \ No newline at end of file diff --git a/src/styles/components/header.scss b/src/styles/base/header.scss similarity index 98% rename from src/styles/components/header.scss rename to src/styles/base/header.scss index 95b7238..c9bafca 100644 --- a/src/styles/components/header.scss +++ b/src/styles/base/header.scss @@ -1,5 +1,6 @@ - #header { + max-height: 51px; + height: 51px; align-items: center; background-color: $color-0-0-100; color: $color-216-4-22; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index c4d2251..b27746a 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -23,6 +23,14 @@ $breakpoints: (phone: 480px, height: 100vh; overflow: hidden; } + + main { + display: flex; + flex-direction: row; + height: 100%; + max-width: 100%; + overflow: hidden; + } } img { @@ -76,39 +84,60 @@ button { padding: 0; } +sib-route, +sib-link, +button, +input, +a { + cursor: pointer; + &:hover, + &:link, + &:active { + cursor: pointer; + } +} + %padding-main { padding: 5rem; } -.padded-width { - flex: 1; - @extend %padding-main; -} - -.frame { +.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); + } } -/* Dividing into columns */ -@mixin respond-to($breakpoint) { +.backlink { + font-size: 1.5rem; + margin: 2rem 0 0 2rem; + @include icon('arrow-left-circle'); + color: #3d4057; + text-decoration: underline; - @if map-has-key($breakpoints, $breakpoint) { - - @media (min-width: map-get($breakpoints, $breakpoint)) { - @content; - } + &::before { + text-decoration: none; } - @else { - @warn "Sorry, no value could be retrieved from `#{$breakpoint}`." - +"Available breakpoints are: #{map-keys($breakpoints)}."; + &::before { + font-size: 2rem; + margin-right: 1rem; } } // Compatibility layer for non-updated components @import 'compat'; +// Other base components +@import 'form'; +@import 'header'; +@import 'menu-left'; \ No newline at end of file diff --git a/src/styles/components/menu-left.scss b/src/styles/base/menu-left.scss similarity index 99% rename from src/styles/components/menu-left.scss rename to src/styles/base/menu-left.scss index 5e44ee6..4f10076 100644 --- a/src/styles/components/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,4 +1,4 @@ -#navbar { +#main__menu { background-color: $color-233-18-29; color: $color-0-0-100; display: block; diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index b9c8a25..ee78562 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,8 +1,6 @@ -@import 'form'; -@import 'content'; +@import 'chat'; @import 'filters'; @import 'howto'; -@import 'header'; -@import 'menu-left'; -@import 'menu-right'; -@import 'skills'; \ No newline at end of file +@import 'sidebar'; +@import 'skills'; +@import 'user-role'; \ No newline at end of file diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss new file mode 100644 index 0000000..bfc68a3 --- /dev/null +++ b/src/styles/components/chat.scss @@ -0,0 +1,15 @@ + +// chat + +.chat-view { + padding: 1.7rem; + height: calc(100vh - 84px); + + > sib-chat { + position: absolute; + top: 0; + left: 0; + right: 0; + } +} + diff --git a/src/styles/components/content.scss b/src/styles/components/content.scss deleted file mode 100644 index 762cec9..0000000 --- a/src/styles/components/content.scss +++ /dev/null @@ -1,114 +0,0 @@ -.backlink { - font-size: 1.5rem; - margin: 2rem 0 0 2rem; - @include icon('arrow-left-circle'); - color: #3d4057; - text-decoration: underline; - - &::before { - text-decoration: none; - } - - &::before { - font-size: 2rem; - margin-right: 1rem; - } -} - -sib-route, -sib-link { - cursor: pointer; -} - -// group - -#group-profile { - sib-display-div[name='name'] div { - @extend h1; - } - - sib-display-div[name='label-description'] div { - @extend h2; - } -} -// chat - -.chat-view { - padding: 1.7rem; - position: relative; - z-index: 0; - @include window-style-modal(); - height: calc(100vh - 104px); - - > sib-chat { - position: absolute; - top: 0; - left: 0; - right: 0; - } -} - -#member-profile { - @include media('width>tablet') { - div[name='header'] { - float: left; - width: 50%; - } - } - - div[name='name'] { - @extend h1; - - div { - display: inline-block; - margin-right: 0.7rem; - } - } - - sib-link[next='member-chat'] { - border-style: solid; - display: flex; - border-radius: 25px; - border-style: solid; - border-color: $color-244-73-62; - color: $color-244-73-62; - padding: 1.7rem; - text-decoration:none; - } - - div[name='pseudonym'] { - margin-top: -1.7rem; - margin-bottom: 1.7rem; - } - - #member-info { - &:after { - content: ''; - display: block; - clear: both; - } - } -} - -sib-form { - - form > * { - margin-top: 0.85rem; - } - - // button like - input[type='color'], - input[type='file'], - input[type='reset'], - input[type='submit'] { - display: inline-block; - padding: 0.85rem 2.55rem; - border: none; - border-radius: 100em; - font-weight: normal; - } - - input[type='reset'] { - display: none; - } -} diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss deleted file mode 100644 index add6ffd..0000000 --- a/src/styles/components/form.scss +++ /dev/null @@ -1,297 +0,0 @@ -@include style-template-fieldset('fee'); -@include style-template-fieldset('customer'); -@include style-template-fieldset('team'); - -.frame-form { - &.full-wide { - display: flex; - flex: 1; - font-size: 1.5rem; - flex-direction: column; - margin: 0 auto; - min-height: 100vh; - padding: 6.8rem 8.5rem 10.2rem; - background: $color-0-0-100; - } - - .form-view { - border-bottom: 1px solid $color-210-17-91; - padding-bottom: 2.55rem; - } - - h1 { - color: $color-233-18-29; - font-weight: bold; - font-size: 2rem; - text-align: center; - } - - p.form-goal { - margin-bottom: 6.8rem; - text-align: center; - } - - [name$='-text'] { - font-size: 1.5rem; - margin-bottom: 2em; - } - - div[name^='block-'] { - display: flex; - flex-direction: column; - } - - input { - -webkit-appearance: none; - align-items: center; - background: $color-222-57-95; - border: none; - color: $color-233-18-29; - display: inline-flex; - justify-content: flex-start; - line-height: 1.5; - vertical-align: top; - } - - sib-form-auto-completion, - sib-form-checkbox, - sib-form-dropdown, - sib-form-label-text, - sib-form-multiple-dropdown, - sib-form-number, - sib-form-textarea { - display: flex; - flex-direction: column; - - > label { - color: $color-244-10-70; - font-weight: 600; - margin: 2em 0 0.5em; - text-transform: uppercase; - - > div { - padding-bottom: 1rem; - } - } - - select, - textarea { - background: $color-222-57-95; - border: none; - color: $color-233-18-29; - line-height: 1.5; - width: 100%; - - } - - select, - textarea { - padding: 1.7rem; - } - - select { - margin-bottom: 1.7rem; - } - } - - sib-form-auto-completion, - sib-form-checkbox, - sib-form-multiple-dropdown { - - label { - color: $color-216-4-22; - font-weight: 600; - text-transform: initial; - } - } - - sib-form-auto-completion { - - div.choices__inner { - background-color: inherit; - border: none; - display: flex; - flex-direction: column-reverse; - padding-left: 0; - - div.choices__list { - margin-top: 1.7rem; - - div.choices__item { - /*@extend %skill;*/ - - button.choices__button { - border-left: 1px solid $color-43-100-50; - opacity: 1; - padding-left: 0; - } - } - } - - input[type='text'].choices__input { - max-width: 27.2rem; - min-width: 27.2rem; - } - } - } - - sib-form-checkbox { - flex-direction: row; - - [type='checkbox'] { - cursor: pointer; - position: relative; - margin-top: 2em; - - &:before { - border: 2px solid $color-210-5-56; - content: ''; - height: 1rem; - left: 0; - margin-left: 1rem; - padding-bottom: 0.2rem; - position: absolute; - width: 1.2rem; - z-index: 1; - } - - &:checked { - &:before { - border: 2px solid $color-210-5-56; - color: $color-244-73-62; - height: 1rem; - left: 0; - margin-left: 1rem; - padding-bottom: 0.2rem; - position: absolute; - width: 1.2rem; - z-index: 1; - @include mdi('check'); - } - } - - &:after { - background: $color-0-0-100; - content: ''; - height: 1rem; - position: absolute; - width: 1rem; - } - } - } - - sib-form-dropdown { - - select { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background-image: url("/images/chevron-down.png"); - background-position: right 12px top 60%; - background-repeat: no-repeat; - background-size: 14px 9px; - box-sizing: border-box; - } - } - - /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */ - - sib-form-multiple-dropdown { - - button { - appearance: none; - background-color: $color-0-0-100; - border: 1px solid; - border-radius: 100%; - color: $color-244-73-62; - cursor: pointer; - font-size: 2.55rem; - height: 1em; - line-height: 0; - margin: 0.34rem; - padding: 0 0.04em 0.08em; - vertical-align: middle; - width: 1em; - } - } - - sib-form-textarea { - align-items: stretch; - } - - sib-multiple-form { - - > label { - display: none; - } - } - - input[type='submit'] { - margin-top: 6rem; - background-color: $color-233-18-29; - color: $color-0-0-100; - float: right; - font-weight: bold; - text-transform: uppercase; - } -} - -#project-create, -#project-edit { - - input, - textarea { - margin-bottom: 3.4rem; - } -} - -.is-horizontal { - display: flex; -} - -.field { - margin-right: 0.75rem; - max-width: 50%; -} - -.is-expanded { - flex-grow: 1; -} - -sib-multiple-form[name='members'] { - - > div { - align-items: center; - display: flex; - } - - > div:not(:nth-child(-n + 2)) { - - label { - - > div { - display: none; - } - } - } - - button { - appearance: none; - background-color: $color-0-0-100; - border: 1px solid; - border-radius: 100%; - color: $color-244-73-62; - cursor: pointer; - font-size: 2.55rem; - height: 1em; - line-height: 0; - margin: 0.34rem; - padding: 0 0.04em 0.08em; - vertical-align: middle; - width: 1em; - - &::after { - content: Add; - } - } -} diff --git a/src/styles/components/menu-right.scss b/src/styles/components/menu-right.scss deleted file mode 100644 index ae75eed..0000000 --- a/src/styles/components/menu-right.scss +++ /dev/null @@ -1,113 +0,0 @@ -#mainContainer { - display: flex; - flex-grow: 1; - flex-shrink: 1; - overflow-y: auto; - - - >div#project, - >div#circle { - flex-grow: 1; - display: flex; - flex-direction: row-reverse; - align-items: stretch; - overflow-x: hidden; - - .views-container { - flex: 1 0 0; - overflow-y: auto; - } - - >div { - transition: all 0.5s; - } - } - - >div { - - nav { - transition: all 0.5s; - - >sib-router { - background-color: $color-222-52-90; - color: $color-233-18-29; - flex: 0 0 auto; - font-weight: 600; - - >ul { - cursor: pointer; - list-style: none; - margin: 0; - padding-left: 0; - - li { - align-items: center; - border-bottom: 1px solid $color-229-25-79; - display: flex; - margin: 0; - padding: 2.55rem 2.55rem; - position: relative; - width: 12em; - - &::before { - float: left; - font-size: 4rem; - margin-left: 0; - margin-right: 2.55rem; - } - } - - >li { - @include icon('arrow-right-circle'); - } - - >sib-route { - - &[active] { - background-color: $color-233-18-29; - color: $color-46-100-67; - display: inline-block; - } - - &[name^='circle'], - &[name^='project'] { - - >li::before { - font-size: 4rem; - } - } - - &[name$='chat']>li { - @include ci('chat'); - } - - &[name$='create']>li { - @include ci('offer'); - } - - &[name$='edit']>li { - @include ci('list'); - } - - &[name$='profile']>li { - @include ci('information'); - } - } - } - } - - &.offsite-is-closed { - transform: translate(15.5rem); - - & .jsOffsiteToggle::before { - transform: rotate(180deg); - } - - &~.views-container { - margin-left: -15.5rem; - transform: translate(15.5rem); - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss new file mode 100644 index 0000000..872aaae --- /dev/null +++ b/src/styles/components/sidebar.scss @@ -0,0 +1,106 @@ +.no-sidebar { + flex: 1; + @extend %padding-main; +} + +.with-sidebar { + flex-grow: 1; + display: flex; + flex-direction: row-reverse; + align-items: stretch; + overflow-x: hidden; + + .views-container { + flex: 1 0 0; + overflow-y: auto; + } + + >div { + transition: all 0.5s; + } + + nav { + transition: all 0.5s; + + >sib-router { + background-color: $color-222-52-90; + color: $color-233-18-29; + flex: 0 0 auto; + font-weight: 600; + + >ul { + cursor: pointer; + list-style: none; + margin: 0; + padding-left: 0; + + li { + align-items: center; + border-bottom: 1px solid $color-229-25-79; + display: flex; + margin: 0; + padding: 2.55rem 2.55rem; + position: relative; + width: 12em; + + &::before { + float: left; + font-size: 4rem; + margin-left: 0; + margin-right: 2.55rem; + } + } + + >li { + @include icon('arrow-right-circle'); + } + + >sib-route { + + &[active] { + background-color: $color-233-18-29; + color: $color-46-100-67; + display: inline-block; + } + + &[name^='circle'], + &[name^='project'] { + + >li::before { + font-size: 4rem; + } + } + + &[name$='chat']>li { + @include ci('chat'); + } + + &[name$='create']>li { + @include ci('offer'); + } + + &[name$='edit']>li { + @include ci('list'); + } + + &[name$='profile']>li { + @include ci('information'); + } + } + } + } + + &.offsite-is-closed { + transform: translate(15.5rem); + + & .jsOffsiteToggle::before { + transform: rotate(180deg); + } + + &~.views-container { + margin-left: -15.5rem; + transform: translate(15.5rem); + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/skills.scss b/src/styles/components/skills.scss index 48bbbae..a526548 100644 --- a/src/styles/components/skills.scss +++ b/src/styles/components/skills.scss @@ -1,5 +1,3 @@ -/* TEMPLATE SKILLS*/ - sib-multiple[name*='skills'] { display: flex; flex-wrap: wrap; diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss new file mode 100644 index 0000000..fed7680 --- /dev/null +++ b/src/styles/components/user-role.scss @@ -0,0 +1,9 @@ +%user-role { + border: 1px solid $color-45-95-54; + border-radius: 3px; + color: $color-210-4-50; + font-size: 1.4rem; + font-weight: 400; + margin-right: 0.4rem; + padding: calc(1.6rem - 0.8em) 0.7em; + } \ No newline at end of file diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index 882ce86..94d0bbf 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,5 +1,4 @@ #circle-profile { - min-height: 100%; .block-group > div { display: flex; diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 42858a7..186b446 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -1,3 +1,17 @@ +.job-offers__main { + @extend %grid-layer; +} + +.job-offers__content { + @extend %grid-layer-main; + @extend %containerV; +} + +.job-offers__newoffer { + @extend %grid-layer-links; + @extend %containerV; +} + #job-offers { .plus-button { @@ -21,7 +35,7 @@ } #offers-list { - @extend .grid-layer; + @extend %grid-layer; >sib-form { grid-column-start: start; @@ -46,9 +60,6 @@ font-size: 1.5rem; margin: 1.7rem 0; padding: 3.4rem; - /*&:nth-child(odd) { - background-color: $color-210-25-95; - }*/ [name='user-thumb'] { align-items: center; diff --git a/src/styles/layout/member-chat/_index.scss b/src/styles/layout/member-chat/_index.scss deleted file mode 100644 index 5f2bf8f..0000000 --- a/src/styles/layout/member-chat/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'member-chat.scss'; \ No newline at end of file diff --git a/src/styles/layout/member-chat/member-chat.scss b/src/styles/layout/member-chat/member-chat.scss deleted file mode 100644 index bd679dc..0000000 --- a/src/styles/layout/member-chat/member-chat.scss +++ /dev/null @@ -1,3 +0,0 @@ -#member-chat { - width: 100%; -} \ No newline at end of file diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index 40a52b1..e430fbb 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -35,26 +35,11 @@ member-info-groups { @extend %user-role; } -.how-link { - @extend .howto; - background-color: $color-0-0-100; - color: $color-216-4-22; - flex-wrap: nowrap; - .icon-idea { - background-color: $color-46-100-67; - border-radius: 100%; - justify-content: center; - margin-right: 1.2rem; - width: 1.8em; - height: 1.8em; - } -} - #members-list { - @extend .grid-layer; + @extend %grid-layer; #members-list__content { - @extend .grid-layer; + @extend %grid-layer; nav { align-items: center; @@ -194,7 +179,6 @@ member-info-groups { [name='user.name'] { font-weight: bold; - margin: 0; @extend h1; } diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index d81d61c..67adc47 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -1,8 +1,8 @@ #project-profile { - + [name^='block-']:not([name='block-title']) { margin-top: 5.1rem; - + [name^='label-'] { display: block; font-weight: bold; @@ -10,7 +10,7 @@ text-transform: uppercase; @extend h2; } - + sib-display-value:not(:first-of-type), ul, [name*='job'] { @@ -22,23 +22,23 @@ border-bottom: 1px solid $color-221-51-90; display: flex; padding-bottom: 3.4rem; - - > * { + + >* { color: $color-216-4-22; font-size: 2rem; font-weight: bold; padding-right: 0.85rem; text-transform: uppercase; } - - > [name^='const-'] { + + >[name^='const-'] { padding: 0; } - > sib-display-value[name='name'] { + >sib-display-value[name='name'] { padding-left: 0.85rem; } - + > :nth-child(5) { color: $color-233-18-29; font-weight: normal; @@ -66,7 +66,7 @@ flex-direction: column; width: 90%; } - + [name='block-logo'] { box-sizing: border-box; display: block; @@ -78,162 +78,163 @@ } [name='businessProvider'] { - + ul { list-style: none; padding-left: 0; li { - + &:first-child { margin-bottom: 0.5em; } - + span { font-weight: bold; } } } } -} -#clientBox { - display: flex; - margin-left: auto; - margin-right: auto; - margin-top: 1.7rem; - max-width: 100%; + #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; + >* { + 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; - } + h5 { + margin-left: 2rem; + margin-top: 2rem; } - } - &:first-child { - li { - - span { - margin-right: 0.3em; - } + ul { + font-size: 1.5rem; + list-style: none; + margin: -2.04rem 0 3.74rem -2.04rem; - &:first-child { - margin-bottom: 0.5em; - } + li { - &: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%; + span { + font-weight: bold; } } } - > div:nth-child(2) { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; + &:first-child { + li { - span { - align-self: center; - font-weight: 600; + span { + margin-right: 0.3em; + } + + &:first-child { + margin-bottom: 0.5em; + } + + &:last-child { + margin-top: 2.4em; + } } + } - span ~ sib-display { - - > div { - display: flex; - margin-left: 1rem; - - sib-multiple [name='name'] { - @extend %user-role; + &: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%; } } } - } - > span:nth-child(3) { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; + >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; + } } } } -} + +} \ No newline at end of file