autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style forms

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/header.pug
View File

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

11
src/page-group-chat.pug
View File

@ -1,2 +1,9 @@
#group-chat.chat-view(bind-resources)
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)
#group-chat.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
)

4
src/page-group-create.pug
View File

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

4
src/page-group-edit.pug
View File

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

4
src/page-group.pug
View File

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

11
src/page-member-chat.pug
View File

@ -1,2 +1,9 @@
#member-chat.chat-view(bind-resources)
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)
#member-chat.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
)

47
src/page-member-edit.pug
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 {
get template() {
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);
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.
// Constant declaration

5
src/page-member.pug
View File

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

9
src/page-project-chat.pug
View File

@ -1,2 +1,9 @@
#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
)

4
src/page-project-create.pug
View File

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

8
src/page-project-edit.pug
View File

@ -1,7 +1,13 @@
#project-edit
h1 Edit project
//- sib-display(data-fields="name" bind-resources)]
.form-view
sib-form.block(
range-client=`${sdn}/clients/`,
widget-team='sib-form-multiple-dropdown',
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
)

6
src/page-project.pug
View File

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

2
src/scripts/index.js
View File

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

23
src/styles/content.scss
View File

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

97
src/styles/form.scss
View File

@ -1,18 +1,66 @@
//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>*{
display: block;
.form-view{
@extend %frame
}
sib-form{
form{
margin: -.5em;
>*{
margin: .5em;
}
}
sib-form.inline form {
margin: -0.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
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;
border: none;
@extend %shadow;
@ -20,18 +68,35 @@ sib-form{
// button like
button,
input[type=button],
input[type=color],
input[type=file],
input[type=reset],
input[type=submit]{
input[type='button'],
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
padding: 0.5em 1em;
border: none;
background-color: $color-yellow;
border-radius: 100em;
}
input[type="reset"]{
input[type='reset'] {
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;
}
}
}

5
src/styles/main.scss
View File

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

6
src/styles/members.scss
View File

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

5
src/styles/menu.scss
View File

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

2
src/styles/variables.scss
View File

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

2
www/lib/sib-core

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