feature: admin-circle-list
This commit is contained in:
gaelle morin
parent
1f7dbe8bca
commit
c8f393d652
@ -20,16 +20,80 @@ html(lang="en")
|
||||
include header.pug
|
||||
|
||||
nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
|
||||
p Hi!
|
||||
include menu-left.pug
|
||||
|
||||
main#content.segment.bg-color-third.lg-three-quarter.float-left.notLoggedIn
|
||||
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
|
||||
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
|
||||
include page-dashboard.pug
|
||||
|
||||
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
|
||||
#members(hidden, data-view="members").no-sidebar.with-padding
|
||||
include page-directory.pug
|
||||
|
||||
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
|
||||
#job-offers(hidden, data-view="job-offers").no-sidebar.with-padding
|
||||
if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
|
||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
|
||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
|
||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
|
||||
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
|
||||
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
|
||||
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
|
||||
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
|
||||
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
|
||||
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
|
||||
include page-job-offers.pug
|
||||
|
||||
if endpoints.projects || (endpoints.get && endpoints.get.projects)
|
||||
#project(hidden, data-view="project").segment.lg-full.with-sidebar
|
||||
if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
|
||||
hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
|
||||
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
|
||||
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
|
||||
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
|
||||
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
|
||||
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
|
||||
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
|
||||
include page-project.pug
|
||||
|
||||
if endpoints.circles || (endpoints.get && endpoints.get.circles)
|
||||
#circle(hidden, data-view="circle").with-sidebar
|
||||
if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
|
||||
hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
|
||||
hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
|
||||
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
|
||||
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
|
||||
hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
|
||||
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
|
||||
hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)
|
||||
include page-circle.pug
|
||||
if endpoints.users || (endpoints.get && endpoints.get.users)
|
||||
#messages(hidden, data-view="messages").with-sidebar
|
||||
include page-messages.pug
|
||||
|
||||
if endpoints.polls || (endpoints.get && endpoints.get.polls)
|
||||
#polls(hidden, data-view="polls").with-sidebar
|
||||
include page-polls.pug
|
||||
|
||||
if endpoints.events || (endpoints.get && endpoints.get.events)
|
||||
#events(hidden, data-view="events")
|
||||
include page-events.pug
|
||||
|
||||
if endpoints.resources || (endpoints.get && endpoints.get.resources)
|
||||
#resources(hidden, data-view="resources")
|
||||
include page-resources.pug
|
||||
|
||||
#admin(hidden, data-view="admin").segment.lg-full.with-sidebar
|
||||
include page-admin.pug
|
||||
|
||||
#about(data-view="about").no-sidebar.with-padding
|
||||
include page-about.pug
|
||||
|
||||
if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
|
||||
|
||||
main#content.segment.bg-color-third.lg-three-quarter.float-left
|
||||
p Hello
|
||||
|
||||
//- header#header.header.is-spaced(role='banner')
|
||||
include header.pug
|
||||
|
||||
//-header#header.segment.bg-color-white.shadow
|
||||
include header.pug
|
||||
|
||||
//-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
|
||||
include menu-left.pug
|
||||
|
||||
@ -8,10 +8,13 @@ a {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.button {
|
||||
padding: 8px 20px;
|
||||
padding: 7.5px 20px;
|
||||
border-radius: 16.5px;
|
||||
height: 33px;
|
||||
|
||||
&.rounded {
|
||||
border-radius: 50%;
|
||||
@ -25,7 +28,7 @@ a {
|
||||
}
|
||||
&.icon::before {
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
&.color-primary {
|
||||
background-color: white;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import 'colors';
|
||||
@import 'loaders';
|
||||
@import 'texts';
|
||||
@import 'borders';
|
||||
@import 'shadows';
|
||||
|
||||
72
src/styles/hubl-framework/commons/loaders.scss
Normal file
72
src/styles/hubl-framework/commons/loaders.scss
Normal file
@ -0,0 +1,72 @@
|
||||
.loader {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
|
||||
&.loader-top {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-menu-background);
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
|
||||
&.loader-menu div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-menu-text);
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
left: 32px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
|
||||
div:nth-child(4) {
|
||||
left: 56px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(24px, 0);
|
||||
}
|
||||
}
|
||||
@ -19,17 +19,29 @@
|
||||
font-size: 18px;
|
||||
}
|
||||
&-normal {
|
||||
*,
|
||||
& {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
&-semibold {
|
||||
*,
|
||||
& {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&-bold {
|
||||
*,
|
||||
& {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
&-uppercase {
|
||||
*,
|
||||
& {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
&-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 16px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
>object {
|
||||
max-height: 40%;
|
||||
@ -65,8 +66,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-thumb__sub-text {
|
||||
color: red;
|
||||
.user-thumb-content__sub-text {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
|
||||
&::before {
|
||||
content: "@";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,29 @@
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
/* Bottom scrollbar */
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-heading) var(--color-grey);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-grey);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-heading);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
|
||||
|
||||
:root {
|
||||
color: #636363;
|
||||
font-size: 14px;
|
||||
}
|
||||
@import 'hubl-framework/_index';
|
||||
|
||||
@ -11,38 +11,41 @@
|
||||
|
||||
solid-widget(name='hubl-circle-owner')
|
||||
template
|
||||
solid-display.user-thumb.block.is-spaced(
|
||||
solid-display.segment.margin-left-xlarge.user-thumb(
|
||||
data-src='${await value}'
|
||||
fields='account.picture, sup(name), sub(username)'
|
||||
fields='account.picture, content(name-and-icon(name), sub(username))'
|
||||
|
||||
class-account.picture='avatar user-thumb__picture'
|
||||
class-name='user-thumb__name'
|
||||
class-username='user-thumb__username'
|
||||
class-account.picture='user-thumb-avatar'
|
||||
class-content='user-thumb-content'
|
||||
class-name-and-icon='user-thumb-content__name-and-icon'
|
||||
class-name='name'
|
||||
class-sub='user-thumb-content__sub-text'
|
||||
class-username=''
|
||||
|
||||
widget-account.picture='hubl-user-avatar'
|
||||
)
|
||||
|
||||
div.segment.padding-xlarge.border-bottom
|
||||
div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
|
||||
div
|
||||
h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
|
||||
div.segment.lg-hidden
|
||||
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
|
||||
|
||||
div.segment.padding-xlarge
|
||||
div.segment.padding-y-small.margin-bottom.clearfix
|
||||
div.segment.padding-large
|
||||
div.segment.margin-bottom-medium.clearfix
|
||||
div.segment.lg-half.float-left
|
||||
h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle')
|
||||
div.segment.lg-half.float-left.text-right
|
||||
h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
|
||||
div.segment.lg-half.float-left.text-right.padding-top-xxsmall
|
||||
solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
|
||||
solid-link(
|
||||
class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
|
||||
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
|
||||
next='admin-circle-create' data-trans='circle.list.buttonCreate'
|
||||
)
|
||||
|
||||
.table-wrapper
|
||||
.table.segment.margin-bottom
|
||||
.table
|
||||
|
||||
div.table-header
|
||||
div.table-header.bg-color-third.text-color-heading
|
||||
div.table-cell.w280(data-trans='circle.list.tableHeader1')
|
||||
div.table-cell.w280(data-trans='circle.list.tableHeader2')
|
||||
div.table-cell.w280(data-trans='circle.list.tableHeader3')
|
||||
@ -50,7 +53,7 @@
|
||||
solid-widget(name='hubl-admin-circle-leave-button')
|
||||
template
|
||||
solid-delete(
|
||||
class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
|
||||
class='button text-xsmall text-bold text-uppercase color-secondary bordered'
|
||||
data-src="${src}"
|
||||
data-label=''
|
||||
data-trans='data-label=circle.list.buttonQuit'
|
||||
@ -70,8 +73,8 @@
|
||||
fields='circle.name, circle.owner, leaveButton'
|
||||
loader-id='loader-admin-circles'
|
||||
|
||||
class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
|
||||
class-circle.owner='table-cell w280 cell-with-id-card'
|
||||
class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
|
||||
class-circle.owner='table-cell w280'
|
||||
class-leaveButton='table-cell w280'
|
||||
|
||||
action-leaveButton="joinButton"
|
||||
@ -84,7 +87,7 @@
|
||||
solid-widget(name='hubl-admin-circle-join-button')
|
||||
template
|
||||
solid-form(
|
||||
class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
|
||||
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
|
||||
data-src='${value}'
|
||||
|
||||
fields='user.username'
|
||||
@ -108,8 +111,8 @@
|
||||
fields='name, owner, members'
|
||||
loader-id='loader-admin-circles'
|
||||
|
||||
class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
|
||||
class-owner='table-cell w280 border cell-with-id-card'
|
||||
class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
|
||||
class-owner='table-cell w280'
|
||||
widget-owner='hubl-circle-owner'
|
||||
|
||||
class-members='table-cell w280'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user