style forms

This commit is contained in:
Clément 2018-10-19 20:36:16 +02:00
parent ac9fba3c31
commit 805fa2bbe4
20 changed files with 206 additions and 93 deletions

View File

@ -13,5 +13,5 @@
#profile #profile
img(src="/images/user.jpg") img(src="/images/user.jpg")
span span
| Paul | Profile
span.icon-arrow-down span.icon-arrow-down

View File

@ -1,2 +1,9 @@
#group-chat.chat-view(bind-resources) #group-chat.chat-view
sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) sib-chat(
data-authentication='login',
data-auto-login='true',
data-bosh-service-url=xmpp,
data-debug='false',
data-locales-url='en',
bind-resources
)

View File

@ -1,7 +1,9 @@
#group-create #group-create
sib-form( h1 New group
data-src=`${sdn}/channels/`, .form-view
range-owner=`${sdn}/members/`, sib-form.block(
widget-members='sib-form-multiple-dropdown', data-src=`${sdn}/channels/`,
range-members=`${sdn}/members/` range-owner=`${sdn}/members/`,
) widget-members='sib-form-multiple-dropdown',
range-members=`${sdn}/members/`
)

View File

@ -1,7 +1,9 @@
#group-edit #group-edit
sib-form.block( h1 Edit group
range-owner=`${sdn}/members/`, .form-view
widget-members='sib-form-multiple-dropdown', sib-form.block(
range-members=`${sdn}/members/`, range-owner=`${sdn}/members/`,
bind-resources range-members=`${sdn}/members/`,
) widget-members='sib-form-multiple-dropdown',
bind-resources
)

View File

@ -4,9 +4,9 @@ sib-router#group-router(default-route='group-chat')
sib-route(name='group-profile') sib-route(name='group-profile')
div Info div Info
sib-route(name='group-edit') sib-route(name='group-edit')
div Éditer div Edit
sib-route(name='group-create') sib-route(name='group-create')
div Nouveau div Add new
#network-views-container #network-views-container
#group-chat #group-chat
include page-group-chat.pug include page-group-chat.pug

View File

@ -1,2 +1,9 @@
#member-chat.chat-view(bind-resources) #member-chat.chat-view
sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) sib-chat(
data-authentication='login',
data-auto-login='true',
data-bosh-service-url=xmpp,
data-debug='false',
data-locales-url='en',
bind-resources
)

View File

@ -1,4 +1,30 @@
// script. .form-view
label.d-none(for='avatar-input')
img#avatar-preview(src='', style='width: 100%;')
input#avatar-input.d-none(
type='file',
accept='image/*',
name='avatar',
value='',
)
sib-form.edit-form.block(
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
widget-user='hdapp-usereditinfo',
range-cell=`${sdn}/cells/`, 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 { class LDPFormImgUpload extends SIBWidget {
get template() { get template() {
return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label> return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
@ -15,25 +41,6 @@
customElements.define("ldp-form-img-upload", LDPFormImgUpload); customElements.define("ldp-form-img-upload", LDPFormImgUpload);
widget-avatar="ldp-form-img-upload" widget-avatar="ldp-form-img-upload"
label.d-none(for='avatar-input')
img#avatar-preview(src='', style='width: 100%;')
input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
sib-form.edit-form.block(
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
widget-user='hdapp-usereditinfo',
range-cell=`${sdn}/cells/`, 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. //-script.
// Constant declaration // Constant declaration

View File

@ -3,9 +3,10 @@ sib-router#member-router(default-route='member-chat')
sib-route(name='member-chat') sib-route(name='member-chat')
div Chat div Chat
sib-route(name='member-profile') sib-route(name='member-profile')
div Voir div Profile
sib-route(name='member-edit') sib-ac-checker(permission='change' bind-resources)
div Éditer sib-route(name='member-edit')
div Edit
#member-views-container #member-views-container
sib-trigger(next="members" class="back") Back to directory sib-trigger(next="members" class="back") Back to directory
div div

View File

@ -1,2 +1,9 @@
#project-chat.chat-view #project-chat.chat-view
sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) sib-chat(
data-authentication='login',
data-auto-login='true',
data-bosh-service-url=xmpp,
data-debug='false',
data-locales-url='en',
bind-resources
)

View File

@ -1,7 +1,9 @@
#project-create #project-create
sib-form( h1 New project
data-src=`${sdn}/projects/`, .form-view
range-client=`${sdn}/clients/`, sib-form.block(
widget-team='sib-form-multiple-dropdown', data-src=`${sdn}/projects/`,
range-team=`${sdn}/members/` range-client=`${sdn}/clients/`,
) widget-team='sib-form-multiple-dropdown',
range-team=`${sdn}/members/`
)

View File

@ -1,7 +1,13 @@
#project-edit #project-edit
sib-form.block( h1 Edit project
range-client=`${sdn}/clients/`, //- sib-display(data-fields="name" bind-resources)]
widget-team='sib-form-multiple-dropdown', .form-view
range-team=`${sdn}/members/`, sib-form.block(
bind-resources range-client=`${sdn}/clients/`,
) range-team=`${sdn}/members/`,
data-fields=`name, number, client, description, team, jabberRoom, foaf:jabberID`,
widget-jabberRoom='sib-form-checkbox',
widget-description='sib-form-textarea',
widget-team='sib-form-multiple-dropdown',
bind-resources
)

View File

@ -2,11 +2,11 @@ sib-router#project-router(default-route='project-chat')
sib-route(name='project-chat') sib-route(name='project-chat')
div Chat div Chat
sib-route(name='project-profile') sib-route(name='project-profile')
div Voir div Project
sib-route(name='project-edit') sib-route(name='project-edit')
div Éditer div Edit
sib-route(name='project-create') sib-route(name='project-create')
div Nouveau div Add new
#project-views-container #project-views-container
include page-project-chat.pug include page-project-chat.pug
include page-project-profile.pug include page-project-profile.pug

View File

@ -15,11 +15,13 @@ document.addEventListener('DOMContentLoaded', function(event) {
function resize() { function resize() {
setTimeout(()=> setTimeout(()=>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => { Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if(!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px'); elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
})); }));
} }
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
window.addEventListener('navigate', resize); window.addEventListener('navigate', resize);
window.addEventListener('popstate', resize);
document.addEventListener('load', resize); document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize); document.addEventListener('WebComponentsReady', resize);
resize(); resize();

View File

@ -4,12 +4,11 @@
> sib-display { > sib-display {
display: block; display: block;
margin: 1em 0; margin: 1em 0;
@extend %shadow; @extend %frame;
background-color: $color-white;
padding: 0.5em 1em; padding: 0.5em 1em;
&:nth-child(odd) { /*&:nth-child(odd) {
background-color: $color-white; background-color: $color-grey-light;
} }*/
sib-display-div[name='title'] { sib-display-div[name='title'] {
display: block; display: block;
@extend h2; @extend h2;
@ -53,10 +52,10 @@ sib-display-lookuplist[name='skills'] {
.chat-view { .chat-view {
padding: 1em; padding: 1em;
position: relative; position: relative;
background-color: #fff; @extend %frame;
@extend %shadow; height: 400px;
height: calc(100vh - 143px - 5em); height: calc(100vh - 143px - 3em);
height: calc(100vh - var(--pos-top, 143px) - 5em); height: calc(100vh - var(--pos-top, 143px) - 3em);
> sib-chat { > sib-chat {
@include pos(); @include pos();
} }
@ -87,8 +86,7 @@ sib-display#member-info,
#profiles-list > div > sib-display { #profiles-list > div > sib-display {
display: block; display: block;
position: relative; position: relative;
background-color: $color-white; @extend %frame;
@extend %shadow;
padding: 1em; padding: 1em;
cursor: pointer; cursor: pointer;
@ -163,10 +161,11 @@ sib-display#member-info,
} }
} }
} }
/*
label { label {
@extend h2; @extend h2;
&:after { &:after {
content: ':'; content: ':';
} }
} }
*/

View File

@ -1,37 +1,102 @@
//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
sib-form.block>form>*{ .form-view{
display: block; @extend %frame
} }
sib-form{
form{ sib-form.inline form {
margin: -.5em; margin: -0.5em;
>*{ > * {
margin: .5em; margin: 0.5em;
}
}
sib-form.block {
display: block;
padding: 1em;
> form {
> * {
display: block;
margin-top: 2em;
&:first-child {
margin-top: 0;
}
&:not(sib-form-checkbox) {
label {
margin: 0.5em 0;
display: block;
}
input,
textarea {
background-color: $color-grey-light;
box-shadow: none !important;
border: none;
padding: 1em 2em;
}
input,
select {
height: 3em;
}
input,
textarea,
select {
width: 100%;
}
textarea {
resize: vertical;
height: 200px;
min-height: 3em;
}
}
}
sib-form-multiple-dropdown select {
width: calc(100% - 2.5em);
}
input[type='submit'] {
width: auto;
} }
} }
}
sib-form {
// text like // text like
input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]){ textarea,
input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
padding: 0.5em; padding: 0.5em;
border: none; border: none;
@extend %shadow; @extend %shadow;
} }
// button like // button like
button, button,
input[type=button], input[type='button'],
input[type=color], input[type='color'],
input[type=file], input[type='file'],
input[type=reset], input[type='reset'],
input[type=submit]{ input[type='submit'] {
padding: 0.5em 1em; padding: 0.5em 1em;
border: none; border: none;
background-color: $color-yellow; background-color: $color-yellow;
border-radius: 100em; border-radius: 100em;
} }
input[type="reset"]{ input[type='reset'] {
display: none; display: none;
} }
}
sib-form-multiple-dropdown {
button {
appearance: none;
background-color: $color-white;
color: $color-yellow;
border: 1px solid;
width: 1em;
height: 1em;
line-height: 0;
font-size: 1.5em;
padding: 0;
cursor: pointer;
margin: 0.2em;
vertical-align: middle;
}
}
}

View File

@ -4,7 +4,12 @@
display: none !important; display: none !important;
} }
*,*::before,*::after{
box-sizing: inherit;
}
html { html {
box-sizing: border-box;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
font-size: 13px; font-size: 13px;
background-color: $color-grey-light; background-color: $color-grey-light;

View File

@ -25,8 +25,7 @@
} }
display: block; display: block;
position: relative; position: relative;
background-color: $color-white; @extend %frame;
@extend %shadow;
padding: 0.5em; padding: 0.5em;
cursor: pointer; cursor: pointer;
@ -124,9 +123,8 @@
} }
} }
#member-info { #member-info {
background-color: $color-white;
padding: 1em; padding: 1em;
@extend %shadow; @extend %frame;
} }
#profiles-list, #profiles-list,

View File

@ -50,10 +50,13 @@
text-transform: uppercase; text-transform: uppercase;
&:before { &:before {
display: block; display: block;
width: 2em;
height: 2em;
line-height: 2em;
padding: 0;
margin: -0.5em auto 0; margin: -0.5em auto 0;
font-size: 2em; font-size: 2em;
border-radius: 100%; border-radius: 100%;
padding: 0.7em;
transform: perspective(1000px) translateZ(1px) scale(1); transform: perspective(1000px) translateZ(1px) scale(1);
will-change: transform; will-change: transform;
transition: all 0.3s ease, transition: all 0.3s ease,

View File

@ -12,7 +12,7 @@ $color-yellow-light: #ffd759;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
} }
%cadre { %frame {
@extend %shadow; @extend %shadow;
background-color: $color-white; background-color: $color-white;
} }

@ -1 +1 @@
Subproject commit 97e4d2773deb81d28ccbe6c65d82d316bb7ee022 Subproject commit 8d615893e3f888a573e57ab7a67a41db4cd4c81f