diff --git a/src/page-group-create.pug b/src/page-group-create.pug
index 465db8b3bd8cb1a20e78aeb9b396506065fac987..829e1115252d9f070964d980df863e3e3a8bf04e 100644
--- a/src/page-group-create.pug
+++ b/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',
)
diff --git a/src/page-group-profile.pug b/src/page-group-profile.pug
index f51fa725e3c8272e217433de79354f5b17e5fc06..740e4eb7a6f7fe7688b3c6437589105741cfe194 100644
--- a/src/page-group-profile.pug
+++ b/src/page-group-profile.pug
@@ -1,49 +1,33 @@
.frame
+ h2 Channel's name:
sib-display(
- data-fields='name, label-description, description',
- value-label-description="Description:"
+ data-fields='name',
bind-resources
)
- h2.section.skills In group
+
+ h2 Description:
sib-display(
- id-suffix='team',
- data-fields='user-thumb',
- set-user-thumb='account.picture, first_name, last_name',
- widget-account.picture='sib-display-img',
+ data-fields='description',
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'
- )
+ h2 In group:
+ sib-display.block-group(
+ id-suffix='team',
+ data-fields='teammate-img, teammate-name, teammate-pseudonym, teammate-profile, teammate-contact',
- 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,
- )
+ set-teammate-img='account.picture',
+ set-teammate-pseudonym='before-pseudo, username',
+ set-teammate-name='first_name, last_name',
- 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',
+ 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,
- )
\ No newline at end of file
+ bind-resources
+ )
diff --git a/src/page-group.pug b/src/page-group.pug
index b6fe01925b243dcfb25eafef7c81b337a3a032b3..2c1cb896c6096dbc1e6d4da8cb8c87cffc795228 100644
--- a/src/page-group.pug
+++ b/src/page-group.pug
@@ -1,14 +1,22 @@
-sib-router#circle-router(default-route='circle-chat')
- sib-route(name='circle-chat')
- div Chat
- sib-route(name='circle-profile')
- div Info
- sib-ac-checker(permission='change' bind-resources)
- sib-route(name='circle-edit')
- div Edit
- sib-route(name='circle-create')
- div Add new
-#network-views-container
+nav.jsRightMenu(role='navigation')
+ sib-router(default-route='circle-chat')
+ ul
+ li.jsOffsiteToggle
+ a Fold menu
+ sib-route(name='circle-chat')
+ li
+ a Chat
+ sib-route(name='circle-profile')
+ li
+ 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
diff --git a/src/page-project.pug b/src/page-project.pug
index 300e5d6f325ea356f0323db3ad4add3ee6d02281..9a93ff1b92b113702b28f4b339b46191c514382e 100644
--- a/src/page-project.pug
+++ b/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
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 3335ba31ebaa3e1d2fe50e570ed1566e1ef30372..b44a96a767674e9e211c60363a0b3f49b8912cae 100644
--- a/src/scripts/index.js
+++ b/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 rightMenu = document.querySelector('#jsRightMenu');
-
- const display = document.querySelector('sib-display#profiles-list');
- const nav = display.querySelector("nav");
- console.log(nav);
+ const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
if (!navBar || !btnToggle) return;
@@ -43,7 +38,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
// Open/close menu on the right
- btnRightMenu.addEventListener('click', e => {
- rightMenu.classList.toggle('offsite-is-closed');
- });
+ rightMenus.forEach(rightMenu => {
+ const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
+
+ btnRightMenu.addEventListener('click', e => {
+ rightMenu.classList.toggle('offsite-is-closed');
+ })
+ })
+
});
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 0b797d385eaf85b2eab80358413635ba2098d7a2..3951c87a8be4e401301cb5152f00c4c44e8cde25 100644
--- a/src/styles/content.scss
+++ b/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;
diff --git a/src/styles/form.scss b/src/styles/form.scss
index fc130acc366e0d63d6d5e744bf10d626d59c4656..c19a3b1b9ed681d1bc23dc111a1ccd2d48080619 100644
--- a/src/styles/form.scss
+++ b/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;
- font-weight: 600;
- margin-bottom: 0.85rem;
+ @extend %label;
}
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;
diff --git a/src/styles/group-profile.scss b/src/styles/group-profile.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bc9522d4cfc4a43d2957d1df9d11a325862755e5
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 051e4baa2158c3c87e691c944f8220e5e186be61..959ebffb73d9dc7aa029dbe8f76c598c81d80fe6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -14,6 +14,7 @@
@import 'filters';
@import 'right-panel';
+@import 'group-profile';
@import 'job-offers';
@import 'members';
@import 'project-profile';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 59c9815d7ec2d9f94157901873d6dcea93d509d1..e7bdea884ef5912ea1a9d30bbc58811cb1d90d46 100644
--- a/src/styles/main.scss
+++ b/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;
+ }
+}
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index 602d26fada39719ccf92e40a237e042751d04ce6..fa6c0ebda19d40ebf992cbeaa33240b7151caead 100644
--- a/src/styles/menu-right.scss
+++ b/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);
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f3fd1669a2453e91bf010fd976134fcf701303a7..021ce1735c21877748380170b56b5e2d4e375ab3 100644
--- a/src/styles/variables.scss
+++ b/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;
diff --git a/src/styles/variables.scss.orig b/src/styles/variables.scss.orig
deleted file mode 100644
index 954a66949b577cb4e4077a1e0b326e71d854c6b4..0000000000000000000000000000000000000000
--- a/src/styles/variables.scss.orig
+++ /dev/null
@@ -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,
-);