style forms

src/header.pug

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

src/page-group-chat.pug

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

src/page-group-create.pug

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

src/page-group-edit.pug

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

src/page-group.pug

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

src/page-member-chat.pug

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

src/page-member-edit.pug

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

src/page-member.pug

@@ -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-route(name='member-edit')
+  sib-ac-checker(permission='change' bind-resources)
-    div Éditer
+    sib-route(name='member-edit')
+      div Edit
 #member-views-container
   sib-trigger(next="members" class="back") Back to directory
   div

src/page-project-chat.pug

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

src/page-project-create.pug

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

src/page-project-edit.pug

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

src/page-project.pug

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

src/scripts/index.js

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

src/styles/content.scss

@@ -4,12 +4,11 @@
     > sib-display {
       display: block;
       margin: 1em 0;
-      @extend %shadow;
+      @extend %frame;
-      background-color: $color-white;
       padding: 0.5em 1em;
-      &:nth-child(odd) {
+      /*&:nth-child(odd) {
-        background-color: $color-white;
+        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 %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 {
     @include pos();
   }
@@ -87,8 +86,7 @@ sib-display#member-info,
 #profiles-list > div > sib-display {
   display: block;
   position: relative;
-  background-color: $color-white;
+  @extend %frame;
-  @extend %shadow;
   padding: 1em;
   cursor: pointer;
 
@@ -163,10 +161,11 @@ sib-display#member-info,
     }
   }
 }
-
+/*
 label {
   @extend h2;
   &:after {
     content: ':';
   }
 }
+*/

src/styles/form.scss

@@ -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>*{
+.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
-  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='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;
     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;
+    }
+  }
 }

src/styles/main.scss

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

src/styles/members.scss

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

src/styles/menu.scss

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

src/styles/variables.scss

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

www/lib/sib-core

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