feature+ui(circles): issue #91 CSS - Right menu of circles + issue #92 CSS - circle-create + issue #93 HTML-CSS - circle-profile

Add styles to the right menu and fix bug on toggle
Add styles to the form
Add styles and HTML to circle-profile
Add styles to sib-form-multiple-dropdown
Clean up content.scss and circle-profile

src/page-group-create.pug

@@ -1,10 +1,30 @@
-#circle-create
+.frame-form
   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.block(
+    sib-form(
       data-src=`${sdn}/circles/`,
-      data-fields="name, description, owner, team, jabberID, jabberRoom"
       range-owner=`${sdn}/members/`, 
-      widget-team='sib-form-multiple-dropdown', 
       range-team=`${sdn}/members/`
+      
+      data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
+
+      label-description='Description',
+      label-foaf:jabberID='Chatroom id',
+      label-name="Channel's name",
+      label-owner='Owner of this channel',
+      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".',
+      widget-description-text='hdapp-form-text',
+
+      value-team-text='Add any members as you want.',
+      widget-team-text='hdapp-form-text',
+
+      value-owner-text='The one who will admin this channel',
+      widget-owner-text='hdapp-form-text',
+
+      widget-description='sib-form-textarea',
+      widget-jabberRoom='sib-form-checkbox',
+      widget-team='sib-form-multiple-dropdown',
     )

src/page-group-profile.pug

@@ -1,49 +1,33 @@
 .frame
+  h2 Channel's name:
   sib-display(
-    data-fields='name, label-description, description',
+    data-fields='name',
-    value-label-description="Description:"
     bind-resources
   )
-  h2.section.skills In group
+
+  h2 Description:
   sib-display(
+    data-fields='description',
+    bind-resources
+  )
+
+  h2 In group:
+  sib-display.block-group(
     id-suffix='team',
-    data-fields='user-thumb',
+    data-fields='teammate-img, teammate-name, teammate-pseudonym, teammate-profile, teammate-contact',
-    set-user-thumb='account.picture, first_name, last_name',
+
+    set-teammate-img='account.picture',
+    set-teammate-pseudonym='before-pseudo, username',
+    set-teammate-name='first_name, last_name',
+
+    template-teammate-contact='chat-link',
+
+    value-before-pseudo='@',
+    value-teammate-contact='Send a message',
+    value-teammate-profile='View profile',
+
     widget-account.picture='sib-display-img',
+    
+    next='member',
     bind-resources
   )
-
-//-
-  sib-display#offers-list.limiter(
-    data-src=`${sdn}/job-offers/`,
-    data-fields='date, user-thumb, title, description, skills',
-    widget-skills='sib-display-lookuplist',
-    set-user-thumb='author.member.avatar, author.first_name, author.last_name'
-    widget-author.member.avatar='sib-display-img',
-    set-date='closingDate, creationDate',
-    widget-closingDate='hdapp-closing-date',
-    set-searchset='title, description, skills',
-    search-fields='searchset'
-  )
-
-  sib-display(
-    data-fields='title, label-description, description, client',
-    set-title='phone, client.name, name',
-    set-client='label-client, client.name, client.logo, client.address',
-    value-label-description="Description:"
-    value-label-client="Client:"
-    widget-client.logo='sib-display-img',
-    widget-client='hdapp-client',
-    widget-team='sib-display-lookuplist',
-    bind-resources,
-  )
-
-  h2 Team:
-  sib-display.members-list-condensed(
-    id-suffix='team',
-    data-fields='member.avatar, member.user',
-    widget-member.avatar='sib-display-img',
-    widget-member.user='hdapp-userinfo',
-    next='member',
-    bind-resources,
-  )

src/page-group.pug

@@ -1,14 +1,22 @@
-sib-router#circle-router(default-route='circle-chat')
+nav.jsRightMenu(role='navigation')
-  sib-route(name='circle-chat')
+  sib-router(default-route='circle-chat')
-    div Chat
+    ul
-  sib-route(name='circle-profile')
+      li.jsOffsiteToggle
-    div Info
+        a Fold menu
-  sib-ac-checker(permission='change' bind-resources)
+      sib-route(name='circle-chat')
-    sib-route(name='circle-edit')
+        li
-      div Edit
+          a Chat
-  sib-route(name='circle-create')
+      sib-route(name='circle-profile')
-    div Add new
+        li
-#network-views-container
+          a Info
+      sib-ac-checker(permission='change' bind-resources)
+        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
   #circle-profile

src/page-project.pug

@@ -1,7 +1,7 @@
-nav#jsRightMenu(role='navigation')
+nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
-      li#jsOffsiteToggle
+      li.jsOffsiteToggle
         a Fold menu
       sib-route(name='project-chat')
         li 
@@ -15,7 +15,7 @@ nav#jsRightMenu(role='navigation')
       sib-route(name='project-create')
         li
           a Add new
-#project-views-container
+#views-container
   #project-chat
     include page-project-chat.pug
   #project-profile

src/scripts/index.js

@@ -2,12 +2,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
   const navBar = document.querySelector('#navbar');
   const btnToggle = document.querySelector('#button-toggle');
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
-  const btnRightMenu = document.querySelector('#jsOffsiteToggle');
+  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
-  const rightMenu = document.querySelector('#jsRightMenu');
-
-  const display = document.querySelector('sib-display#profiles-list');
-  const nav = display.querySelector("nav");
-  console.log(nav);
   
   if (!navBar || !btnToggle) return;
 
@@ -43,7 +38,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
   });
 
   // Open/close menu on the right
-  btnRightMenu.addEventListener('click', e => {
+  rightMenus.forEach(rightMenu => {
-    rightMenu.classList.toggle('offsite-is-closed');
+    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-  });
+    
+    btnRightMenu.addEventListener('click', e => {
+      rightMenu.classList.toggle('offsite-is-closed');
+    })
+  })
+  
 });

src/styles/content.scss

@@ -70,56 +70,6 @@
     @include pos();
   }
 }
-// member-profile && members
-
-/*.members-list-condensed {
-  img {
-    width: 50px;
-    height: 100px;
-    border-radius: 100%;
-    object-fit: cover;
-    object-position: top;
-  }
-
-  label {
-    display: none;
-  }
-
-  > div > sib-display > div {
-    display: grid;
-    grid-template-columns: 0.5fr 2fr;
-    grid-template-rows: repeat(3, auto);
-    grid-column-gap: 3rem;
-    align-items: center;
-
-    div[name="teammate-img"] {
-      background: blue;
-      grid-row: 1 / -1;
-    }
-      
-    }
-
-
-    ul{
-      margin-top: 0px;
-      margin-bottom: 0px;
-      list-style-type: none;
-    }
-    >[name$="user"]{
-      color: $color-dark-lava;
-    }
-    >[name$="avatar"]{
-      grid-column-start: first;
-      grid-column-end: middle;
-      grid-row-start: first;
-      grid-row-end: end;
-    }
-  }
-
-  // ul {
-  //   padding-left: 1em;
-  // }
-}*/
 
 sib-display#member-info {
   display: flex;

src/styles/form.scss

@@ -12,6 +12,8 @@
   }
 }
 
+#circle-create,
+#circle-edit,
 #job-offer-create,
 #project-create,
 #project-edit {
@@ -47,14 +49,11 @@
   sib-form-label-text,
   sib-form-multiple-dropdown,
   sib-form-textarea {
-    align-items: stretch;
     display: flex;
     flex-direction: column;
 
     > label {
-      color: $color-spun-pearl;
+      @extend %label;
-      font-weight: 600;
-      margin-bottom: 0.85rem;
     }
 
     input,
@@ -77,11 +76,18 @@
     }
   }
 
-  sib-form-auto-completion {
+  sib-form-auto-completion,
+  sib-form-checkbox,
+  sib-form-dropdown,
+  sib-form-multiple-dropdown {
 
     label {
       color: $color-dark-lava;
+      font-weight: 600;
     }
+  }
+
+  sib-form-auto-completion {
 
     div.choices__inner {
       background-color: inherit;
@@ -117,6 +123,7 @@
     [type='checkbox'] {
       cursor: pointer;
       position: relative;
+      margin-top: 2em;
       
       &:before {
         border: 2px solid $color-taupe-gray; 
@@ -155,6 +162,19 @@
     }
   }
 
+  /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
+  sib-form-dropdown {
+
+    select {
+      background: $color-glitter;
+      border: none;
+      color: $color-purple-dark;
+      line-height: 1.5;
+      margin-left: 1rem;
+      padding: 0.85rem;
+    }
+  }
+
   sib-form-multiple-dropdown {
 
     button {
@@ -174,6 +194,10 @@
     }
   }
 
+  sib-form-textarea {
+    align-items: stretch;
+  }
+
   input[type='submit'] {
     margin-top: 6rem;
     @extend %submit-form;

src/styles/group-profile.scss

@@ -0,0 +1,106 @@
+#circle-profile {
+  min-height: 100%;
+
+  .block-group > div {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+
+    sib-display > div {
+      align-items: center;
+      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
+      display: grid;
+      font-size: 1.6rem;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      height: auto;
+      justify-items: center;
+      margin: 1rem 0.5rem 1rem 0;
+      position: relative;
+      padding-right: 1rem;
+      padding-top: 1rem;
+      text-align: center;
+      width: 14em;
+
+      &:hover {
+        cursor: pointer;
+	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
+	      top: -2px;
+      }
+
+      > div[name='teammate-img'] {
+        background-color: $color-bombay;
+        border-radius: 50%;
+        grid-column: 1 / span 2;
+        grid-row: 1 / span 2;
+        height: 6vh;
+        overflow: hidden;
+        width: 6vh;
+
+        img {
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          top: 0;
+          width: 100%;
+        }
+      }
+
+      > hdapp-userinfo {
+
+        > label {
+          display: none;
+        }
+      }
+
+      div[name='teammate-name'] {
+        grid-column: 3 / span 2;
+        grid-row: 1 / span 1;
+
+        sib-display-div[name='first_name'] {
+          display: inline;
+  
+          > div {
+            display: inline;
+          }
+        }
+  
+        sib-display-div[name='last_name'] {
+          display: inline;
+  
+          > div {
+            display: inline;
+          }
+        }
+      }
+
+      > div[name='teammate-pseudonym'] {
+        align-self: start;
+        font-size: 1.2rem;
+        grid-column: 3 / span 2;
+        grid-row: 2 / span 1;
+
+        > * > * {
+          display: inline;
+        }
+      }
+
+      > sib-display-div[name='teammate-profile'] {
+        color: $color-dark-lava;
+        font-size: 1.2rem;
+        grid-column: 1 / span 2;
+        grid-row: 3 / span 1;
+      }
+
+      > sib-link {
+        color: $color-majorelle-blue;
+        font-size: 1.2rem;
+        justify-self: stretch;
+        grid-column: 3 / span 2;
+        grid-row: 3 / span 1;
+      }
+    }
+  }
+}

src/styles/index.scss

@@ -14,6 +14,7 @@
 @import 'filters';
 @import 'right-panel';
 
+@import 'group-profile';
 @import 'job-offers';
 @import 'members';
 @import 'project-profile';

src/styles/main.scss

@@ -180,7 +180,7 @@ sib-link.back {
   flex-direction: row-reverse;
 }
 
-#project-views-container {
+#views-container {
   flex: 1 0 0;
   overflow-y: auto;
 }
@@ -238,3 +238,32 @@ li[name*='groups'] {
     margin-left: 0;
   }
 }
+
+[name='user-thumb'] {
+  align-items: center;
+  color: $color-quartz;
+  display: flex;
+  font-weight: 600;
+  margin: -0.25em;
+
+  > * {
+    margin: 0.25em;
+  }
+
+  sib-display-img {
+    border-radius: 100%;
+    height: 2.5em;
+    overflow: hidden;
+    width: 2.5em;
+  }
+
+  div[name*='roles'] {
+    border: 1px solid yellow;
+    border-radius: 3px;
+    color: $color-rolling-stone;
+    font-size: 15px;
+    font-weight: 400;
+    margin-left: 1em;
+    padding: calc(16px - 0.8em) 0.7em;
+  }
+}

src/styles/menu-right.scss

@@ -77,11 +77,11 @@
       &.offsite-is-closed {
         transform: translate(12rem);
         
-        & #jsOffsiteToggle::before {
+        & .jsOffsiteToggle::before {
           transform: rotate(180deg);
         }
 
-        & ~ #project-views-container {
+        & ~ #views-container {
           flex-basis: 95%;
           transform: translate(12rem);
         }

src/styles/variables.scss

@@ -30,9 +30,25 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   border: none;
   border-radius: 100em;
   font-weight: normal;
+}  
+
+%content-padding {
+  padding: 4.4rem;
+}
+
+%frame {
+  @extend %shadow;
+  background-color: $color-white;
+}
+
+%label {
+  color: $color-spun-pearl;
+  font-weight: 600;
+  margin: 2em 0 0.5em;
 }
 
 %notification {
+
   > div:first-of-type {
     align-items: center;
     background-color: $color-mustard;
@@ -50,15 +66,6 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
-%content-padding {
-  padding: 4.4rem;
-}
-
-%frame {
-  @extend %shadow;
-  background-color: $color-white;
-}
-
 %skill {
   background-color: $color-selective-yellow;
   border: 1px solid $color-selective-yellow;

src/styles/variables.scss.orig

@@ -1,106 +0,0 @@
-//Color Variables
-$color-quartz:           hsl(0, 0%, 29%);
-$color-timberwolf:       hsl(0, 0%, 85%);
-$color-white:            hsl(0, 0%,100%);
-
-$color-selective-yellow: hsl(43, 100%, 50%);
-$color-mikado-yellow:    hsl(45, 95%, 54%);
-$color-mustard:          hsl(46, 100%, 67%);
-
-$color-rolling-stone:    hsl(210, 4%, 50%);
-$color-taupe-gray:       hsl(210, 5%, 56%);
-$color-platinum:         hsl(210, 17%, 91%);
-$color-anti-flash-white: hsl(210, 25%, 95%);
-$color-text-base:        hsl(213, 4%, 50%);
-$color-gainsboro:        hsl(213, 13%, 86%);
-$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
-$color-bombay:           hsl(215, 9%, 73%);
-$color-manatee:          hsl(215, 6%, 63%);
-$color-dark-lava:        hsl(216, 4%, 22%);
-$color-link-water:       hsl(221, 51%, 90%);
-$color-glitter:          hsl(222, 57%, 95%);
-$color-lavender-gray:    hsl(229, 25%, 79%);
-$color-purple-dark:      hsl(233, 18%, 29%);
-$color-spun-pearl:       hsl(244, 10%, 70%);
-$color-majorelle-blue:   hsl(244, 73%, 62%);
-
-%button {
-  display: inline-block;
-  padding: 0.85rem 2.55rem;
-  border: none;
-  border-radius: 100em;
-  font-weight: normal;
-}
-
-%content-padding {
-  padding: 2.6em;
-}
-
-%frame {
-  @extend %shadow;
-  background-color: $color-white;
-} 
-
-%notification {
-  > div:first-of-type {
-    align-items: center;
-    background-color: $color-mustard;
-    border-radius: 100%;
-    color: $color-dark-lava;
-    display: flex;
-    font-size: 1.3rem;
-    height: 1.7em;
-    justify-content: center;
-    width: 1.7em;
-  }
-} 
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
-}
-
-<<<<<<< HEAD
-=======
-%content-padding {
-  padding: 4.4rem;
-}
-
-%frame {
-  @extend %shadow;
-  background-color: $color-white;
-}
-
->>>>>>> 7b4f073... variables ok
-%skill {
-  background-color: $color-selective-yellow;
-  border: 1px solid $color-selective-yellow;
-  border-radius: 2em;
-  color: $color-white;
-  font-weight: bold;
-  margin: 0.4rem;
-  padding: 0.5rem 2rem;
-}
-
-%status-open {
-  background-color: $color-majorelle-blue;
-  border: none;
-  border-radius: 100em;
-  color: $color-white;
-  display: inline-block;
-  font-weight: normal;
-  padding: 0.85rem 1.7rem;
-}
-
-%submit-form {
-  background-color: $color-purple-dark;
-  color: $color-white;
-  float: right;
-  font-weight: bold;
-  text-transform: uppercase;
-} 
-
-$breakpoints: (
-  phone: 480px,
-  tablet: 768px,
-  desktop: 1024px,
-);