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
This commit is contained in:
Gaëlle Morin
parent
db40b83e5a
commit
3f2695edcd
|
|
@ -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',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
data-fields='description',
|
||||
bind-resources
|
||||
)
|
||||
|
||||
h2 In group:
|
||||
sib-display.block-group(
|
||||
id-suffix='team',
|
||||
data-fields='user-thumb',
|
||||
set-user-thumb='account.picture, first_name, last_name',
|
||||
data-fields='teammate-img, teammate-name, teammate-pseudonym, teammate-profile, teammate-contact',
|
||||
|
||||
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,
|
||||
)
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
@import 'filters';
|
||||
@import 'right-panel';
|
||||
|
||||
@import 'group-profile';
|
||||
@import 'job-offers';
|
||||
@import 'members';
|
||||
@import 'project-profile';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
Loading…
Reference in New Issue