css: refactoring & fixing - day 2

This commit is contained in:
Jean-Baptiste Pasquier 2019-05-14 17:32:42 +02:00
parent 68a187a06b
commit 2c649c447e
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
47 changed files with 824 additions and 1115 deletions

View File

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

View File

@ -4,7 +4,7 @@
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"serve": "node server.js", "serve": "node server.js",
"postinstall": "node copy_lib.js" "postinstall": "node postinstall.js"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.4", "@babel/core": "^7.4.4",

8
postinstall.js Normal file
View File

@ -0,0 +1,8 @@
const fs = require('fs');
const { exec } = require('child_process');
if (!fs.existsSync('src/config.json')) {
const cmd = `rsync -ru src/config.sample.json src/config.json`;
console.log(cmd);
exec(cmd);
}

View File

@ -2,7 +2,6 @@ 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')
@ -10,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- local //- local
//- script(type="module" src="/lib/sib-core/src/index.js") //- script(type="module" src="/lib/sib-core/src/index.js")
//- script(type="module" src="/lib/sib-router/src/index.js") //- script(type="module" src="/lib/sib-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-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js") //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.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 //- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7") 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/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-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.11") script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14")

View File

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

View File

@ -9,29 +9,29 @@ 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
header#header.row(role='banner') header#header(role='banner')
include header.pug include header.pug
.content.row main
include menu-left.pug include menu-left.pug
main#mainContainer div#viewport
#members(hidden).padded-width #members(hidden).no-sidebar
include page-members.pug include page-members-directory.pug
#job-offers(hidden).padded-width #job-offers(hidden).no-sidebar
include page-job-offers.pug 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 sib-link(class="backlink", next="job-offers") Back
include page-job-offer-create.pug include page-job-offer-create.pug
#project(hidden) #project(hidden).with-sidebar
include page-project.pug include page-project.pug
#circle(hidden) #circle(hidden).with-sidebar
include page-group.pug include page-circle.pug
#member-chat(hidden) #member-chat(hidden).no-sidebar
include page-member-chat.pug include page-member-chat.pug
#user-profile(hidden) #user-profile(hidden)

View File

@ -1,20 +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='-'
)
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', rdf-type='hd:joboffer') 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-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')

View File

View File

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

View File

@ -0,0 +1,26 @@
.content-box.with-form.full-width
h1 New group
p Here you can create a new group according to your interests, what you want to share, etc.
sib-form(
data-src=`${sdn}/circles/`,
range-owner=`${sdn}/users/`,
range-team=`${sdn}/members/`
data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
label-name="Channel's name",
label-description='Description',
label-owner='Owner of this channel',
label-foaf:jabberID='Chatroom id',
label-team='Member(s) of this channel',
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
value-owner-text='The one who will admin this channel',
value-team-text='Add any members as you want.',
widget-description='sib-form-textarea',
widget-jabberRoom='sib-form-checkbox',
widget-team='sib-form-multiple-dropdown'
)

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

@ -0,0 +1,9 @@
#circle-edit.content-box.with-form.full-width
h1 Edit group
sib-form.block(
range-owner=`${sdn}/members/`,
data-fields="name, description, owner, team, jabberID, jabberRoom"
range-team=`${sdn}/members/`,
widget-team='sib-form-multiple-dropdown',
bind-resources
)

View File

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

View File

@ -8,8 +8,7 @@ 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
@ -18,10 +17,10 @@ nav.jsRightMenu(role='navigation')
a Add new a Add new
.views-container .views-container
#circle-chat #circle-chat
include page-group-chat.pug include page-circle-chat.pug
#circle-profile #circle-profile
include page-group-profile.pug include page-circle-profile.pug
#circle-edit #circle-edit
include page-group-edit.pug include page-circle-edit.pug
#circle-create #circle-create
include page-group-create.pug include page-circle-create.pug

View File

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

View File

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

View File

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

View File

@ -1,4 +1,6 @@
.frame-form.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') sib-widget(name='title-text')
template template
@ -8,9 +10,6 @@
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...'
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( sib-form.block(
data-src=`${sdn}/job-offers/`, data-src=`${sdn}/job-offers/`,
range-skills= `${sdn}/skills/`, range-skills= `${sdn}/skills/`,

View File

@ -1,10 +1,10 @@
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
h1 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(
@ -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").plus-button 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?

View File

@ -1,5 +1,4 @@
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',

View File

@ -1,96 +0,0 @@
.form-view
sib-form.block(
data-fields='user.first_name, user.last_name, user.account.picture, bio, groups, phone, skills, website',
widget-user='hdapp-usereditinfo',
range-groups=`${sdn}/groups/`, widget-skills='sib-form-multiple-dropdown',
range-skills=`${sdn}/skills/`,
bind-resources
)
#crop-modal
.crop-wrapper
img#crop-preview(src='')
.control-bar
button#cancel-img-cropping.btn.btn-link Annuler
i#rotate-img.fa.fa-undo(aria-hidden='true')
button#crop-img.btn.btn-link Valider
//-script.
class LDPFormImgUpload extends SIBWidget {
get template() {
return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
<input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
}
render() {
store.get(this.value).then( (value) => {
this._value = value;
this.innerHTML = this.template;
});
}
}
customElements.define("ldp-form-img-upload", LDPFormImgUpload);
widget-avatar="ldp-form-img-upload"
//-script.
// Constant declaration
const avatarPreview = document.querySelector("#avatar-preview");
const avatarInput = document.querySelector("#avatar-input");
const cropModal = document.querySelector("#crop-modal");
const cropPreview = cropModal.querySelector("#crop-preview");
const $cropPreview = $(cropPreview);
// Triggers cropping on image upload
avatarInput.addEventListener("change", function(e) {
var img = avatarInput.files[0];
var reader = new FileReader();
reader.onloadend = function () {
cropPreview.src = reader.result;
cropModal.classList.add("cropping-mode");
}
if (img) {
reader.readAsDataURL(img);//reads the data as a URL
}
});
cropPreview.addEventListener("load", () => {
$cropPreview.cropper({
aspectRatio: 1/1,
viewMode: 3,
zoomable: false,
});
});
// Rotate image
cropModal.querySelector("#rotate-img").addEventListener("click", () => {
$cropPreview.cropper("rotate", -90);
});
// Cancel cropping
cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => {
closeCropping();
});
// Shortcut
document.querySelector("body").addEventListener("keydown", function(e) {
// Escape key
if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) {
closeCropping();
}
});
function closeCropping() {
cropModal.classList.remove("cropping-mode");
avatarInput.value = null;
}
// Validating cropping
cropModal.querySelector("#crop-img").addEventListener("click", () => {
avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL()
closeCropping();
});

View File

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

View File

@ -1,7 +1,7 @@
.frame-form.full-wide .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/`,
@ -16,12 +16,12 @@
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',

View File

@ -1,11 +1,15 @@
sib-widget(name='template-legend-team')
.content-box.with-form.full-width
h1 Edit your project
p Here you can edit your projet's details
sib-widget(name='hd-template-project-title')
template template
span ${label} span ${label}
sib-widget(name='template-members') sib-widget(name='template-members')
template template
sib-form.team.is-horizontal( sib-form.team.is-horizontal(
naked, naked,
data-src='${id}', data-src='${id}',
@ -17,10 +21,6 @@ sib-widget(name='template-members')
label-user.name='Member(s)', label-user.name='Member(s)',
) )
.frame-form.full-wide
h1 Edit your project
p.form-goal Here you can edit your projet's details
.form-view
sib-form.block( sib-form.block(
data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team', data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
@ -34,7 +34,7 @@ sib-widget(name='template-members')
range-businessProvider=`${sdn}/businessproviders/`, range-businessProvider=`${sdn}/businessproviders/`,
label-businessProvider='Business provider', label-businessProvider='Business provider',
label-businessProvider.fee='Amount of the contribution (%)', label-businessProvider.fee='Amount of the contribution (%)',
widget-fieldset-fee='template-legend-team', widget-fieldset-fee='hd-template-project-title',
widget-businessProvider.fee='sib-form-number', widget-businessProvider.fee='sib-form-number',
label-fieldset-fee='Fee', label-fieldset-fee='Fee',
@ -46,12 +46,12 @@ sib-widget(name='template-members')
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',
widget-fieldset-customer='template-legend-team', widget-fieldset-customer='hd-template-project-title',
label-fieldset-customer='Customer information', label-fieldset-customer='Customer information',
set-block-project__team='fieldset-team, members', set-block-project__team='fieldset-team, members',
label-fieldset-team='The team', label-fieldset-team='The team',
widget-fieldset-team='template-legend-team', widget-fieldset-team='hd-template-project-title',
widget-members='template-members', widget-members='template-members',
multiple-members, multiple-members,

View File

@ -1,4 +1,4 @@
.frame-form.full-wide .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

View File

@ -1,10 +0,0 @@
//#projects
div
h1 Projects
sib-display(
data-src=`${sdn}/projects/`,
data-fields='phone, customer, name',
widget-customer='hdapp-client',
search-fields='phone, name',
next='project'
)

View File

@ -1,17 +1,21 @@
@charset "UTF-8"; @charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media'; @import '../../node_modules/include-media/dist/include-media';
@import '../../node_modules/normalize.css/normalize';
@import 'abstracts/variables'; @import 'abstracts/variables';
@import 'abstracts/mixins'; @import 'abstracts/mixins';
@import 'components/icons/index'; @import 'components/icons/index';
@import 'base/main'; @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/members/index';
@import 'layout/job-offers/index'; @import 'layout/job-offers/index';
@import 'layout/project-profile/index'; @import 'layout/project-profile/index';
@import 'layout/circle-profile/index'; @import 'layout/circle-profile/index';
@import 'layout/member-chat/index';
} }

View File

@ -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)) { @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow; box-shadow: 0 0 8px 0 $shadow;
background-color: $background; 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;
}

View File

@ -1,4 +1,4 @@
.grid-layer { %grid-layer {
display: grid; display: grid;
font-size: 16px; font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end]; grid-template-columns: [start]auto[middle]25%[end];
@ -11,7 +11,7 @@
align-items: stretch; align-items: stretch;
} }
.grid-layer-main { %grid-layer-main {
@extend %flex-grid-layer; @extend %flex-grid-layer;
grid-column-start: start; grid-column-start: start;
grid-column-end: end; grid-column-end: end;
@ -19,7 +19,7 @@
grid-row-end: end; grid-row-end: end;
} }
.grid-layer-links { %grid-layer-links {
@extend %flex-grid-layer; @extend %flex-grid-layer;
grid-column-start: middle; grid-column-start: middle;
grid-column-end: end; grid-column-end: end;
@ -27,47 +27,8 @@
grid-row-end: middle; grid-row-end: middle;
} }
.containerH { %containerV {
display: flex;
flex-wrap: wrap;
}
.containerV {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; 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;
}

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

@ -0,0 +1,294 @@
.content-box {
&.with-form {
hd-template-project-title {
border-bottom: 1px solid $color-221-51-90;
color: $color-233-18-29;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
}
sib-form {
border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem;
}
h1 {
color: $color-233-18-29;
font-weight: bold;
font-size: 2rem;
text-align: center;
}
p: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;
}
}

View File

@ -1,5 +1,6 @@
#header { #header {
max-height: 51px;
height: 51px;
align-items: center; align-items: center;
background-color: $color-0-0-100; background-color: $color-0-0-100;
color: $color-216-4-22; color: $color-216-4-22;

View File

@ -23,6 +23,14 @@ $breakpoints: (phone: 480px,
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
main {
display: flex;
flex-direction: row;
height: 100%;
max-width: 100%;
overflow: hidden;
}
} }
img { img {
@ -76,39 +84,60 @@ button {
padding: 0; padding: 0;
} }
sib-route,
sib-link,
button,
input,
a {
cursor: pointer;
&:hover,
&:link,
&:active {
cursor: pointer;
}
}
%padding-main { %padding-main {
padding: 5rem; padding: 5rem;
} }
.padded-width { .content-box {
flex: 1;
@extend %padding-main;
}
.frame {
@include window-style-modal(); @include window-style-modal();
@extend %padding-main; @extend %padding-main;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
margin: 2rem 1rem 5rem 2rem; 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 */ .backlink {
@mixin respond-to($breakpoint) { 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) { &::before {
text-decoration: none;
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} }
@else { &::before {
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`." font-size: 2rem;
+"Available breakpoints are: #{map-keys($breakpoints)}."; margin-right: 1rem;
} }
} }
// Compatibility layer for non-updated components // Compatibility layer for non-updated components
@import 'compat'; @import 'compat';
// Other base components
@import 'form';
@import 'header';
@import 'menu-left';

View File

@ -1,4 +1,4 @@
#navbar { #main__menu {
background-color: $color-233-18-29; background-color: $color-233-18-29;
color: $color-0-0-100; color: $color-0-0-100;
display: block; display: block;

View File

@ -1,8 +1,6 @@
@import 'form'; @import 'chat';
@import 'content';
@import 'filters'; @import 'filters';
@import 'howto'; @import 'howto';
@import 'header'; @import 'sidebar';
@import 'menu-left';
@import 'menu-right';
@import 'skills'; @import 'skills';
@import 'user-role';

View File

@ -0,0 +1,15 @@
// chat
.chat-view {
padding: 1.7rem;
height: calc(100vh - 84px);
> sib-chat {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,3 @@
/* TEMPLATE SKILLS*/
sib-multiple[name*='skills'] { sib-multiple[name*='skills'] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -0,0 +1,9 @@
%user-role {
border: 1px solid $color-45-95-54;
border-radius: 3px;
color: $color-210-4-50;
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
}

View File

@ -1,5 +1,4 @@
#circle-profile { #circle-profile {
min-height: 100%;
.block-group > div { .block-group > div {
display: flex; display: flex;

View File

@ -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 { #job-offers {
.plus-button { .plus-button {
@ -21,7 +35,7 @@
} }
#offers-list { #offers-list {
@extend .grid-layer; @extend %grid-layer;
>sib-form { >sib-form {
grid-column-start: start; grid-column-start: start;
@ -46,9 +60,6 @@
font-size: 1.5rem; font-size: 1.5rem;
margin: 1.7rem 0; margin: 1.7rem 0;
padding: 3.4rem; padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-210-25-95;
}*/
[name='user-thumb'] { [name='user-thumb'] {
align-items: center; align-items: center;

View File

@ -1 +0,0 @@
@import 'member-chat.scss';

View File

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

View File

@ -35,26 +35,11 @@ member-info-groups {
@extend %user-role; @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 { #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;
@ -194,7 +179,6 @@ member-info-groups {
[name='user.name'] { [name='user.name'] {
font-weight: bold; font-weight: bold;
margin: 0;
@extend h1; @extend h1;
} }

View File

@ -23,7 +23,7 @@
display: flex; display: flex;
padding-bottom: 3.4rem; padding-bottom: 3.4rem;
> * { >* {
color: $color-216-4-22; color: $color-216-4-22;
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
@ -31,11 +31,11 @@
text-transform: uppercase; text-transform: uppercase;
} }
> [name^='const-'] { >[name^='const-'] {
padding: 0; padding: 0;
} }
> sib-display-value[name='name'] { >sib-display-value[name='name'] {
padding-left: 0.85rem; padding-left: 0.85rem;
} }
@ -95,16 +95,15 @@
} }
} }
} }
}
#clientBox { #clientBox {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 1.7rem; margin-top: 1.7rem;
max-width: 100%; max-width: 100%;
> * { >* {
border: 1px solid $color-221-51-90; border: 1px solid $color-221-51-90;
flex: 1 1 auto; flex: 1 1 auto;
justify-content: space-between; justify-content: space-between;
@ -165,23 +164,23 @@
} }
} }
} }
} }
[name='block-team'] { [name='block-team'] {
> sib-multiple { >sib-multiple {
label { label {
display: none; display: none;
} }
> team-template[name='members'] { >team-template[name='members'] {
display: grid; display: grid;
grid-column-gap: 1.6rem; grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto; grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh); grid-template-rows: repeat(2, 5.2vh);
> sib-display:first-child { >sib-display:first-child {
align-self: center; align-self: center;
grid-column: 1 / span 1; grid-column: 1 / span 1;
grid-row: 1 / span 2; grid-row: 1 / span 2;
@ -205,7 +204,7 @@
} }
} }
> div:nth-child(2) { >div:nth-child(2) {
align-self: end; align-self: end;
display: flex; display: flex;
grid-column: 2 / span 1; grid-column: 2 / span 1;
@ -216,9 +215,9 @@
font-weight: 600; font-weight: 600;
} }
span ~ sib-display { span~sib-display {
> div { >div {
display: flex; display: flex;
margin-left: 1rem; margin-left: 1rem;
@ -229,11 +228,13 @@
} }
} }
> span:nth-child(3) { >span:nth-child(3) {
align-self: start; align-self: start;
grid-column: 2 / span 1; grid-column: 2 / span 1;
grid-row: 2 / span 1; grid-row: 2 / span 1;
} }
} }
} }
}
} }